/* AI Native marketing layer: named brand tokens + the motion system.
   Editorial dual-tonality: Ink = the stage, Paper = the page. Color only as meaning.
   All motion is transform/opacity (compositor-only, 60fps) and fully disabled under
   prefers-reduced-motion. No external dependencies. */

html, body { overflow-x: clip; }   /* decorative glows may bleed; never a horizontal scrollbar */

:root {
  --ink: #020617;            /* the dark stage */
  --deep-slate: #0f172a;     /* surfaces on ink */
  --slate-border: #1e293b;
  --paper: #fafaf7;          /* warm editorial light, not pure white */
  --paper-card: #ffffff;
  --ink-text: #0f172a;
  --signal-emerald: #10b981; /* always means: you, present, winning */
  --signal-emerald-lum: #34d399;   /* luminous variant on ink */
  --signal-emerald-deep: #047857;  /* text-grade on paper */
  --current-cyan: #06b6d4;   /* navigation, knowledge */
  --current-cyan-deep: #0e7490;
  --saffron: #f59e0b;        /* attention */
  --rose: #f43f5e;           /* loss, error */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 28px;
  --reveal-duration: 700ms;
}

/* ---------- tonal bands (the editorial rhythm) ---------- */
.band-ink   { background: var(--ink); color: #f8fafc; }
.band-slate { background: var(--deep-slate); color: #f8fafc; }
.band-paper { background: var(--paper); color: var(--ink-text); }
.band-paper .text-slate-300, .band-paper .text-slate-400 { color: #475569; }
.band-paper .text-slate-500 { color: #64748b; }

/* ---------- scroll reveals ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(0.985);
  transition:
    opacity var(--reveal-duration) var(--ease-out-soft),
    transform var(--reveal-duration) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="left"].in, [data-reveal="right"].in { transform: translateX(0); }

/* ---------- micro-interactions ---------- */
.lift {
  transition: transform 320ms var(--ease-out-soft), box-shadow 320ms var(--ease-out-soft),
              border-color 320ms var(--ease-out-soft);
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -12px rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.35);
}
.cta-glow { transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft); }
.cta-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 30px -8px rgba(16, 185, 129, 0.45); }
.cta-glow:active { transform: translateY(0) scale(0.98); }

/* ---------- the answer card: assembles itself ---------- */
.answer-card .ac-row {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms var(--ease-out-soft), transform 520ms var(--ease-out-soft);
}
.answer-card.assembled .ac-row { opacity: 1; transform: translateY(0); }
.answer-card .ac-highlight {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.22), rgba(6, 182, 212, 0.10));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  transition: background-size 900ms var(--ease-out-soft) 600ms;
}
.answer-card.assembled .ac-highlight { background-size: 100% 100%; }
.answer-card .ac-gauge-fill {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-out-soft) 350ms;
}
.answer-card.assembled .ac-gauge-fill { transform: scaleX(1); }

/* ---------- ambient hero orbs: slow drift ---------- */
@keyframes orb-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(28px, -20px, 0) scale(1.06); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-24px, 18px, 0) scale(1.04); }
}
.orb-a { animation: orb-drift-a 14s ease-in-out infinite; }
.orb-b { animation: orb-drift-b 18s ease-in-out infinite; }

/* ---------- gradient text for the one earned moment per page ---------- */
/* NOTE: only ever on a SINGLE-LINE span (multi-line gradient text breaks in Chrome). */
.answer-gradient-text {
  background: linear-gradient(90deg, var(--signal-emerald-lum), var(--current-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- nav: solidifies on scroll ---------- */
.nav-shell { transition: background-color 360ms var(--ease-out-soft), box-shadow 360ms var(--ease-out-soft), border-color 360ms var(--ease-out-soft); }
.nav-shell.scrolled { background: rgba(2, 6, 23, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--slate-border); }

/* ---------- hero slideshow (5 rotating scenes) ---------- */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1400ms var(--ease-out-soft);
  background-size: cover; background-position: center;
}
.hero-slide.active { opacity: 1; }
.hero-slide::after {  /* legibility scrim: dark under the text, the photo breathes on the right */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,6,23,.93) 0%, rgba(2,6,23,.78) 34%, rgba(2,6,23,.30) 58%, rgba(2,6,23,.10) 82%, rgba(2,6,23,.22) 100%);
}
.hero-slide { filter: saturate(1.06); }
.hero-copies { display: grid; }
.hero-copy {
  grid-area: 1 / 1; opacity: 0; transform: translateY(10px);
  transition: opacity 900ms var(--ease-out-soft), transform 900ms var(--ease-out-soft);
  pointer-events: none;
}
.hero-copy.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy { transition: none !important; transform: none !important; }
}

.hero-dots { display: flex; gap: 8px; align-items: center; }
.hero-dot {
  width: 26px; height: 4px; border-radius: 2px; background: rgba(148,163,184,.35);
  transition: background 300ms var(--ease-out-soft); cursor: pointer; border: 0; padding: 0;
}
.hero-dot.active { background: var(--signal-emerald-lum); }

/* ---------- ALIVENESS: the page reacts to the user ---------- */
/* cursor-following ambient light (one per page, JS-driven, lerped) */
.cursor-glow {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px;
  margin-left: -260px; margin-top: -260px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle,
    rgba(52, 211, 153, 0.07) 0%, rgba(6, 182, 212, 0.045) 38%, transparent 70%);
  will-change: transform;
}
.band-paper .cursor-glow-anchor { /* marker class only */ }

/* 3D tilt cards: JS drives --tilt-x/--tilt-y/--spec-x/--spec-y on .lift */
.lift {
  transform-style: preserve-3d;
  transform: perspective(900px)
             rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
             translateY(var(--lift-y, 0px));
}
.lift:hover { transform: perspective(900px)
              rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
              translateY(-4px); }
/* specular sheen that follows the pointer inside a card */
.lift::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--spec-x, 50%) var(--spec-y, 50%),
    rgba(255, 255, 255, 0.06), transparent 42%);
  opacity: 0; transition: opacity 260ms var(--ease-out-soft);
  pointer-events: none;
}
.lift { position: relative; }
.lift:hover::before { opacity: 1; }
.band-paper .lift::before {
  background: radial-gradient(420px circle at var(--spec-x, 50%) var(--spec-y, 50%),
    rgba(16, 185, 129, 0.08), transparent 42%);
}

/* magnetic CTAs: JS sets --mag-x/--mag-y near the pointer */
[data-magnetic] {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform 240ms var(--ease-out-soft);
  will-change: transform;
}

/* nav links: living underline sweep */
.nav-shell nav a { position: relative; }
.nav-shell nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: linear-gradient(90deg, var(--signal-emerald-lum), var(--current-cyan));
  transition: right 280ms var(--ease-out-soft);
}
.nav-shell nav a:hover::after { right: 0; }

/* arrows nudge on hover anywhere a card links out */
.lift:hover [aria-hidden="true"] { transform: translateX(4px); }
.lift [aria-hidden="true"] { display: inline-block; transition: transform 240ms var(--ease-out-soft); }

/* ---------- reduced motion: the full courtesy ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .answer-card .ac-row, .answer-card .ac-highlight, .answer-card .ac-gauge-fill {
    opacity: 1 !important; transform: none !important; transition: none !important;
    background-size: 100% 100% !important;
  }
  .orb-a, .orb-b { animation: none !important; }
  .hero-slide { transition: none !important; }
  .cursor-glow { display: none !important; }
  .lift, .lift:hover { transform: none !important; }
  .lift::before { display: none !important; }
  [data-magnetic] { transform: none !important; }
  .lift, .cta-glow { transition: none !important; }
  .lift:hover, .cta-glow:hover { transform: none !important; }
}