/* ============================================================
   TALOS — Bootstrap/HTML replica
   This stylesheet loads AFTER bootstrap.min.css.
   It (1) neutralises Bootstrap's Reboot where it would alter the
   original look, (2) reproduces the exact output of the Tailwind
   utility classes the original used, and (3) carries the original
   design tokens, component styles and @keyframes verbatim.
   ============================================================ */

/* ---------- Design tokens (from src/styles.css :root) ---------- */
:root {
  --radius: 0.625rem;
  --talos-bg: oklch(0.985 0.002 90);
  --talos-fg: oklch(0.18 0.01 60);
  --talos-muted: oklch(0.55 0.01 60);
  --talos-border: oklch(0.88 0.005 60);
  --talos-maroon: oklch(0.32 0.09 25);
}

/* ---------- Reset layer (mimics Tailwind preflight so Bootstrap
   Reboot does NOT change fonts / heading sizes / margins) -------- */
*,
*::before,
*::after { box-sizing: border-box; border: 0 solid var(--talos-border); }

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  scroll-behavior: smooth !important;
}

body {
  margin: 0;
  line-height: inherit;
  background-color: var(--talos-bg);
  color: var(--talos-fg);
  /* Tailwind default sans stack — the original body font */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p { margin: 0; }

a { color: inherit; text-decoration: inherit; }

button {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
}
button, [role="button"] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

svg { display: block; vertical-align: middle; }

nav { display: block; }

/* ---------- Font-family utilities (Tailwind defaults) ---------- */
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* ---------- Layout / box utilities ---------- */
.min-h-screen { min-height: 100vh; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }

/* gap */
.gap-1 { gap: 0.25rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-\[10px\] { gap: 10px; }

/* padding */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* margin */
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-16 { margin-top: 4rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }

/* max-width */
.max-w-md { max-width: 28rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }

/* ---------- Typography utilities ---------- */
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.normal-case { text-transform: none; }
.text-balance { text-wrap: balance; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-\[0\.12em\] { letter-spacing: 0.12em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.tracking-\[0\.22em\] { letter-spacing: 0.22em; }

.text-\[9px\]  { font-size: 9px; }
.text-\[11px\] { font-size: 11px; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl  { font-size: 3.75rem; line-height: 1; }
.text-7xl  { font-size: 4.5rem; line-height: 1; }

.leading-\[1\.05\] { line-height: 1.05; }
.leading-relaxed { line-height: 1.625; }

.cursor-not-allowed { cursor: not-allowed; }

/* ---------- Transition utilities ---------- */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }

.hover\:opacity-70:hover { opacity: 0.7; }
.hover\:opacity-80:hover { opacity: 0.8; }

/* ---------- Responsive (Tailwind md = 768px, == Bootstrap md) ---------- */
@media (min-width: 768px) {
  .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:ml-auto { margin-left: auto; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
}

/* ============================================================
   Base block from src/styles.css
   ============================================================ */
.frame-jump {
  font-size: 12px;
  color: #6E6E6E;
  transition: color 0.3s ease-in-out;
}
.frame-jump:hover { color: #5C1D24; }

/* ============================================================
   Divisions / product cards (from index.tsx <style> block)
   ============================================================ */
.div-card-01:hover, .div-card-02:hover { background-color: #FAFAFA; }
.div-cta { transition: all 300ms ease-out; }
.div-card-01:hover .div-cta {
  background-color: var(--talos-bg);
  color: #5C1D24;
  box-shadow: 0 0 0 1px #5C1D24, 0 8px 24px -8px rgba(92,29,36,0.45);
}
.div-card-02:hover .div-cta-02 {
  border-color: #5C1D24;
  color: #5C1D24;
  box-shadow: 0 0 0 1px #5C1D24, 0 8px 24px -8px rgba(92,29,36,0.25);
}
.div-preview { transition: transform 300ms ease-out, box-shadow 300ms ease-out, background-color 300ms ease-out; }
.div-card-01:hover .div-preview,
.div-card-02:hover .div-preview {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(92, 29, 36, 0.05);
  background-color: #FAFAFA;
}
@keyframes talos-verify-flash {
  0%, 70%, 100% { opacity: 0.15; transform: scale(1); }
  80%           { opacity: 1;    transform: scale(1.2); }
  90%           { opacity: 1;    transform: scale(1); }
}
.talos-verify { display: inline-block; animation: talos-verify-flash 4s ease-in-out infinite; }
@keyframes talos-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.talos-drift { animation: talos-drift 4s ease-in-out infinite; }
@keyframes talos-breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

/* ============================================================
   Narrative section (from NarrativeSection <style> block)
   ============================================================ */
.narrative-pg {
  font-size: 28px;
  line-height: 1.6;
  text-align: center;
  max-width: 75%;
  margin-bottom: 48px;
  font-weight: 500;
}
.narrative-pg:last-child { margin-bottom: 0; }
.narrative-word {
  display: inline-block;
  color: #111111;
  opacity: 0.15;
  transition: opacity 0.3s ease-in-out;
}
.narrative-word.active { opacity: 1; }

/* ============================================================
   Blueprint canvas (from BlueprintCanvasImpl <style> block)
   ============================================================ */
@keyframes talos-label {
  0%, 40%, 100% { opacity: 0.85; }
  50%, 70%      { opacity: 0.35; }
}
@keyframes geo-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes geo-spin-rev {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes geo-radar {
  0%   { transform: scale(0.25); opacity: 0.55; }
  70%  { opacity: 0.18; }
  100% { transform: scale(2.4);  opacity: 0; }
}
.geo-core-stage {
  position: relative;
  width: 320px;
  height: 320px;
  aspect-ratio: 1 / 1;
}
.geo-static,
.geo-hull {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.geo-hull-a { animation: geo-spin     15s linear infinite; }
.geo-hull-b { animation: geo-spin-rev 22s linear infinite; }
.geo-hull-c { animation: geo-spin     34s linear infinite; }
.geo-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border: 1px solid #5C1D24;
  border-radius: 50%;
  opacity: 0;
  animation: geo-radar 4s ease-out infinite;
}
.geo-pulse-2 { animation-delay: 2s; }
.drone-callout {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
  opacity: 0.9;
  pointer-events: none;
}
.talos-label { animation: talos-label 5s ease-in-out infinite; }
/* Blueprint hero / drone stage */
@keyframes talos-label{0%,40%,100%{opacity:.85}50%,70%{opacity:.35}}
@keyframes geo-radar{0%{transform:scale(.25);opacity:.55}70%{opacity:.18}100%{transform:scale(2.4);opacity:0}}
.geo-pulse{position:absolute;top:50%;left:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border:1px solid #5C1D24;border-radius:50%;opacity:0;animation:geo-radar 4s ease-out infinite}
.geo-pulse-2{animation-delay:2s}
#talos-drone{position:absolute;inset:0;z-index:2;pointer-events:none}
.drone-callout{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;white-space:nowrap;opacity:.9;pointer-events:none;z-index:3}
.talos-label{animation:talos-label 5s ease-in-out infinite;z-index:3}
@media (prefers-reduced-motion: reduce){.geo-pulse{animation:none;opacity:.12}}

.product-grid-bg{background-image:linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px);background-size:32px 32px}
.blueprint-grid{background-image:linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px);background-size:32px 32px}

/* Mobile */
@media (max-width:640px){
  .drone-callout{display:none}            /* HUD labels overlap on narrow screens */
  .narrative-pg{font-size:19px;line-height:1.55;max-width:92%;margin-bottom:28px}
}

/* Desktop: 10% content gutters everywhere; section divider lines stay full-width */
@media (min-width:768px){
  #hero>section{padding-left:10%;padding-right:10%}
  #hero>section .max-w-5xl{max-width:none;padding-left:0;padding-right:0}
  #mission{padding-left:10%!important;padding-right:10%!important}
  #mission .max-w-6xl{max-width:none}
  #mission .narrative-pg{max-width:100%}
  #products{padding-left:10%!important;padding-right:10%!important}
  #products>div{max-width:none!important}
  footer{padding-left:10%!important;padding-right:10%!important}
}