/* ════════════════════════ FocusChain Labs · intro splash ════════════════════════
   Cream/light theme matched to the rest of the site. Renders as a full-viewport
   overlay above the page, then fades + blurs out to reveal the hero underneath. */

:root {
  --intro-paper:        #F7F3EC;
  --intro-paper-2:      #EFEAE0;
  --intro-ink:          #0B233A;
  --intro-ink-soft:     #43526A;
  --intro-ink-muted:    rgba(14, 33, 56, 0.55);
  --intro-ink-faint:    rgba(14, 33, 56, 0.30);
  --intro-line:         rgba(20, 60, 92, 0.12);
  --intro-line-soft:    rgba(20, 60, 92, 0.06);
  --intro-green:        #179B57;
  --intro-green-deep:   #0F7D46;
  --intro-green-bright: #38B96A;
  --intro-green-soft:   rgba(23, 155, 87, 0.10);
  --intro-green-glow:   rgba(23, 155, 87, 0.30);
}

html.intro-skipped .intro-overlay { display: none; }
body.intro-active { overflow: hidden; }

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  font-family: var(--display, 'Inter Tight', system-ui, sans-serif);
  color: var(--intro-ink);
  background: var(--intro-paper);
  overflow: hidden;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  transition:
    opacity 560ms cubic-bezier(.22, 1, .36, 1),
    filter 560ms cubic-bezier(.22, 1, .36, 1),
    transform 560ms cubic-bezier(.22, 1, .36, 1);
}
.intro-overlay.is-leaving {
  opacity: 0;
  filter: blur(2px);
  transform: scale(1.005);
  pointer-events: none;
}

.intro-overlay.is-leaving .intro-stage {
  transform: translate3d(0, 0, 0) !important;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
}

/* ─── ambient backdrop ─────────────────────────────────────────────────── */
.intro-overlay::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 46% at 50% 0%, rgba(255, 255, 255, 0.74), transparent 72%),
    radial-gradient(110% 72% at 50% 100%, rgba(14, 33, 56, 0.055), transparent 68%);
  opacity: 0.9;
}
.intro-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(20, 60, 92, 0.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 60, 92, 0.065) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(closest-side at 50% 50%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, black 30%, transparent 85%);
  opacity: 0.42;
  z-index: 0;
  transform: scale(1.04);
  animation: introGridIn 1.8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.intro-orb {
  position: absolute;
  left: 50%; top: 50%;
  width: min(1120px, 145vw); height: min(1120px, 145vw);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 48%, rgba(31, 165, 101, 0.16) 0 17%, rgba(31, 165, 101, 0.07) 34%, transparent 68%),
    radial-gradient(circle at 35% 62%, rgba(66, 200, 131, 0.13), transparent 38%);
  filter: none;
  z-index: 0;
  display: none;
}
.intro-rays {
  position: absolute;
  left: 50%; top: 50%;
  width: 1500px; height: 1500px;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(31, 165, 101, 0.08) 18deg,
      transparent 36deg,
      transparent 90deg,
      rgba(31, 165, 101, 0.06) 108deg,
      transparent 126deg,
      transparent 180deg,
      rgba(31, 165, 101, 0.09) 198deg,
      transparent 216deg,
      transparent 270deg,
      rgba(31, 165, 101, 0.06) 288deg,
      transparent 306deg);
  mask-image: radial-gradient(closest-side, black 6%, transparent 70%);
  -webkit-mask-image: radial-gradient(closest-side, black 6%, transparent 70%);
  animation: introRays 24s linear infinite;
  z-index: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.intro-overlay.is-active .intro-rays { opacity: 1; }
.intro-scan {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.18;
  background: linear-gradient(112deg, transparent 0 36%, rgba(31, 165, 101, 0.16) 50%, transparent 64% 100%);
  transform: translateX(-60%);
  animation: introScan 6.4s cubic-bezier(.22, 1, .36, 1) infinite;
  z-index: 0;
}
.intro-vignette {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(130% 110% at 50% 110%, rgba(14, 33, 56, 0.10), transparent 55%);
}
.intro-noise {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='1'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.035'/></svg>");
}

/* floating ambient particles */
.intro-particles {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
.intro-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(31, 165, 101, 0.34);
  box-shadow: 0 0 8px rgba(31, 165, 101, 0.34);
  opacity: 0;
  animation: introParticle var(--dur, 8s) linear var(--delay, 0s) infinite;
}

/* ─── corner labels ────────────────────────────────────────────────────── */
.intro-corner {
  position: absolute;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--intro-ink-muted);
  display: flex; align-items: center; gap: 8px;
  z-index: 3;
  opacity: 0;
  animation: introFadeUp 0.8s cubic-bezier(.22, 1, .36, 1) 0.35s forwards;
}
.intro-corner b { color: var(--intro-green); font-weight: 700; letter-spacing: 0.18em; }
.intro-corner .cdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--intro-green);
  box-shadow: 0 0 0 4px rgba(31, 165, 101, 0.18);
  animation: introDot 1.6s ease-in-out infinite;
}
.intro-corner-tl { top: 24px; left: 28px; }
.intro-corner-tr { top: 24px; right: 28px; }

/* ─── stage ────────────────────────────────────────────────────────────── */
.intro-stage {
  position: relative;
  z-index: 2;
  width: min(640px, 92vw);
  text-align: center;
  transform: translate3d(0, 0, 0);
}

.intro-stage::before,
.intro-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(460px, 76vw);
  height: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(20, 60, 92, 0.18), transparent);
  pointer-events: none;
}

.intro-stage::before {
  top: -34px;
  animation: introRuleIn 0.9s cubic-bezier(.22, 1, .36, 1) 0.2s forwards;
}

.intro-stage::after {
  bottom: -28px;
  animation: introRuleIn 0.9s cubic-bezier(.22, 1, .36, 1) 1.05s forwards;
}

/* chain mark above wordmark */
.intro-mark {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  position: relative;
  display: grid; place-items: center;
  opacity: 0;
  animation: introFadeUp 0.9s cubic-bezier(.22, 1, .36, 1) 0.08s forwards;
}
.intro-mark svg { width: 100%; height: 100%; overflow: visible; }
.intro-mark .ring-outer {
  fill: none;
  stroke: var(--intro-green);
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0.85;
  animation: introDraw 1.2s cubic-bezier(.22, 1, .36, 1) 0.25s forwards;
}
.intro-mark .ring-inner {
  fill: none;
  stroke: var(--intro-ink);
  stroke-width: 1.2;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  opacity: 0.4;
  animation: introDraw 1s cubic-bezier(.22, 1, .36, 1) 0.45s forwards;
}
.intro-mark .link {
  fill: none;
  stroke: var(--intro-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: introDraw 0.95s cubic-bezier(.22, 1, .36, 1) 0.65s forwards;
}
.intro-mark .core {
  fill: var(--intro-green);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: introCore 0.6s cubic-bezier(.34, 1.56, .64, 1) 1.1s forwards;
}
.intro-mark .core-pulse {
  fill: var(--intro-green);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: introCorePulse 1.8s ease-out 1.4s infinite;
}

/* eyebrow */
.intro-eyebrow {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.46em;
  color: var(--intro-green);
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  opacity: 0;
  animation: introFadeUp 0.7s ease 0.2s forwards;
}
.intro-eyebrow .dash {
  width: 38px; height: 1.5px;
  background: var(--intro-green);
  position: relative; overflow: hidden;
}
.intro-eyebrow .dash::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--intro-paper);
  transform: translateX(-100%);
  animation: introWipe 0.8s ease 0.42s forwards;
}
.intro-eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--intro-green);
  box-shadow: 0 0 0 4px rgba(31, 165, 101, 0.18);
}

.intro-logo-wrap {
  margin: 22px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  line-height: 1;
  position: relative;
  overflow: visible;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: introLogoIn 0.62s cubic-bezier(.22, 1, .36, 1) 0.22s forwards;
}

.intro-logo-wrap::before {
  content: none;
}

.intro-logo-wrap::after {
  content: none;
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: min(290px, 54vw);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--intro-green), transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0.72;
  animation: introLogoLine 0.95s cubic-bezier(.22, 1, .36, 1) 1.04s forwards;
}

.intro-brand-icon {
  display: block;
  width: clamp(30px, 5vw, 44px);
  height: auto;
  opacity: 1;
  transform: translate3d(0, 7px, 0) scale(0.96);
  filter: drop-shadow(0 10px 16px rgba(14, 33, 56, 0.08));
  animation: introIconIn 0.62s cubic-bezier(.22, 1, .36, 1) 0.28s forwards;
}

/* wordmark — characters reveal one by one (fill-mode: forwards so they stay put) */
.intro-wordmark {
  margin: 0;
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.16em;
  font-weight: 700;
  font-size: clamp(48px, 8.4vw, 88px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--intro-ink);
  position: relative;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  text-rendering: geometricPrecision;
  font-kerning: normal;
}
.intro-wordmark .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  padding: 0 0 0.06em;
}
.intro-wordmark .word-inner {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  animation: introWordRise 0.86s cubic-bezier(.16, 1, .3, 1) forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.intro-wordmark .word-1 .word-inner { animation-delay: 0.58s; }
.intro-wordmark .word-2 .word-inner { animation-delay: 0.70s; }
.intro-wordmark .word-2 {
  color: var(--intro-green);
  letter-spacing: -0.045em;
}
.intro-wordmark .underline {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--intro-green) 12%,
    var(--intro-green-bright) 50%,
    var(--intro-green) 88%,
    transparent 100%);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 14px rgba(31, 165, 101, 0.34);
  animation: introUnderline 1.05s cubic-bezier(.22, 1, .36, 1) 1.55s forwards;
}
.intro-wordmark .sheen {
  position: absolute;
  inset: -8% -2%;
  background: linear-gradient(110deg,
    transparent 0 40%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 60% 100%);
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  animation: introSheen 1.45s cubic-bezier(.22, 1, .36, 1) 1.9s forwards;
  pointer-events: none;
}

.intro-tagline {
  margin-top: 18px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  color: var(--intro-ink-soft);
  letter-spacing: 0.04em;
  opacity: 0;
  animation: introFadeUp 0.65s ease 0.94s forwards;
}
.intro-tagline .arr {
  color: var(--intro-green);
  font-weight: 700;
  margin: 0 8px;
}
.intro-tagline .caret {
  display: inline-block;
  width: 7px; height: 14px;
  vertical-align: -2px;
  background: var(--intro-green);
  margin-left: 6px;
  animation: introCaret 1s steps(2) infinite;
}

/* pipeline */
.intro-pipe {
  margin: 36px auto 0;
  width: 100%;
  max-width: 560px;
  opacity: 0;
  animation: introFadeUp 0.65s ease 1.2s forwards;
}
.intro-pipe svg {
  width: 100%; height: auto;
  overflow: visible;
  display: block;
}
.intro-track {
  fill: none;
  stroke: var(--intro-line);
  stroke-width: 2;
}
.intro-flow {
  fill: none;
  stroke: url(#introFlowGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  filter: drop-shadow(0 4px 10px rgba(23, 155, 87, 0.26));
  animation: introDraw 2.85s cubic-bezier(.65, 0, .35, 1) 1.38s forwards;
}
.intro-packet {
  fill: var(--intro-green-bright);
  filter: drop-shadow(0 0 7px rgba(23, 155, 87, 0.54));
  opacity: 0;
  animation: introPacket 2.85s cubic-bezier(.65, 0, .35, 1) 1.38s forwards;
}
.intro-node {
  fill: var(--intro-paper);
  stroke: var(--intro-line);
  stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
}
.intro-node.on { animation: introNodePop 0.55s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.intro-node-ring {
  fill: none;
  stroke: var(--intro-green);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box; transform-origin: center; transform: scale(0.5);
}
.intro-node-ring.on { animation: introRing 1.6s ease-out forwards; }
.intro-node-core {
  fill: var(--intro-green);
  filter: drop-shadow(0 0 5px rgba(31, 165, 101, 0.55));
  opacity: 0;
  transform-box: fill-box; transform-origin: center; transform: scale(0);
}
.intro-node-core.on { animation: introCorePop 0.55s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.intro-lbl {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em;
  fill: var(--intro-ink-soft);
  opacity: 0;
}
.intro-lbl.on { animation: introFadeUp 0.45s ease forwards; }
.intro-lbl.green { fill: var(--intro-green); font-weight: 700; }
.intro-step {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--intro-ink-faint);
  opacity: 0;
}
.intro-step.on { animation: introFadeUp 0.45s ease forwards; }

/* capability chips */
.intro-caps {
  margin: 46px auto 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  max-width: min(720px, 96vw);
}
.intro-caps::before {
  content: none;
}
.intro-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 126px;
  padding: 11px 14px;
  opacity: 0;
  transform: translateY(14px);
  position: relative;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFA 100%);
  border: 1px solid rgba(20, 60, 92, 0.13);
  box-shadow:
    0 18px 34px -26px rgba(14, 33, 56, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition:
    transform 0.42s cubic-bezier(.22, 1, .36, 1),
    border-color 0.42s ease,
    background 0.42s ease,
    box-shadow 0.42s ease;
}
.intro-cap::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(31, 165, 101, 0.58), transparent);
  opacity: 0;
  transition: opacity 0.42s ease;
}
.intro-cap.on { animation: introCapIn 0.7s cubic-bezier(.16, 1, .3, 1) forwards; }
.intro-cap .icon {
  width: 38px; height: 38px;
  border-radius: 13px;
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, #FFFFFF, #F7FAF8);
  border: 1px solid rgba(20, 60, 92, 0.12);
  box-shadow:
    0 10px 22px -17px rgba(14, 33, 56, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    background 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(.22, 1, .36, 1);
}
.intro-cap svg { width: 18px; height: 18px; display: block; }
.intro-cap svg * {
  stroke: var(--intro-ink);
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.45s ease;
}
.intro-cap.lit .icon {
  background:
    linear-gradient(180deg, #FFFFFF, #F2FBF6);
  border-color: rgba(31, 165, 101, 0.42);
  box-shadow:
    0 12px 28px -19px rgba(31, 165, 101, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.intro-cap.lit {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F8FCF9 100%);
  border-color: rgba(31, 165, 101, 0.40);
  box-shadow:
    0 24px 48px -34px rgba(14, 33, 56, 0.44),
    0 0 0 1px rgba(31, 165, 101, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transform: translateY(-2px);
}
.intro-cap.lit::before { opacity: 1; }
.intro-cap.lit svg * { stroke: var(--intro-green); }
.intro-cap span {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--intro-ink);
  transition: color 0.45s ease;
}
.intro-cap.lit span { color: var(--intro-green-deep); }
.intro-cap.lit::after {
  content: "";
  position: absolute;
  inset: 6px auto 6px 6px;
  width: 2px;
  height: auto;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, transparent, var(--intro-green), transparent);
  opacity: 0;
  animation: introCapPulse 1.3s ease-out;
  pointer-events: none;
}

/* system ready badge */
.intro-ready {
  margin: 28px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #FFFFFF, #F7FCF9);
  border: 1px solid rgba(31, 165, 101, 0.34);
  color: var(--intro-green-deep);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  box-shadow:
    0 20px 42px -32px rgba(14, 33, 56, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  position: relative;
}
.intro-ready.on { animation: introReadyIn 0.65s cubic-bezier(.22, 1, .36, 1) forwards; }
.intro-ready::before,
.intro-ready::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid rgba(31, 165, 101, 0.55);
  opacity: 0;
  pointer-events: none;
}
.intro-ready.on::before { animation: introReadyBurst 1.4s ease-out 0.05s; }
.intro-ready.on::after  { animation: introReadyBurst 1.4s ease-out 0.30s; }
.intro-ready .checkwrap {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--intro-green);
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px rgba(31, 165, 101, 0.13);
}
.intro-ready .checkwrap svg { width: 11px; height: 11px; }
.intro-ready .checkwrap svg path {
  fill: none;
  stroke: var(--intro-paper);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}
.intro-ready.on .checkwrap svg path { animation: introDraw 0.5s ease 0.15s forwards; }

/* footer */
.intro-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(20px, 5vw, 56px) 26px;
  opacity: 0;
  animation: introFadeUp 0.65s ease 1.1s forwards;
}
.intro-bar {
  flex: 1; height: 2px;
  background: var(--intro-line);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.intro-bar::after {
  content: "";
  position: absolute;
  left: 0; top: 0; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--intro-green-bright), var(--intro-green));
  transform: translateX(-100%);
  animation: introFill var(--intro-duration, 7s) cubic-bezier(.45, .05, .2, 1) forwards;
  box-shadow: 0 0 16px rgba(31, 165, 101, 0.5);
}
.intro-bar::before {
  content: "";
  position: absolute;
  top: -3px; height: 8px; width: 80px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: translateX(-100px);
  animation: introShimmer 1.8s linear 0.8s 2;
}
.intro-count {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 700;
  color: var(--intro-ink);
  min-width: 46px; text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.intro-skip {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--intro-ink-soft);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--intro-line);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.intro-skip:hover,
.intro-skip:focus-visible {
  outline: none;
  color: var(--intro-green-deep);
  border-color: rgba(31, 165, 101, 0.55);
  background: rgba(31, 165, 101, 0.10);
  transform: translateY(-1px);
}
.intro-skip kbd {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9.5px; font-weight: 700;
  margin-left: 8px; padding: 2px 6px;
  border-radius: 4px;
  background: rgba(14, 33, 56, 0.07);
  border: 1px solid var(--intro-line);
  color: var(--intro-ink);
  letter-spacing: 0.05em;
}

/* ─── keyframes ────────────────────────────────────────────────────────── */
@keyframes introFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes introLogoIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes introIconIn {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes introWordRise {
  0%   { opacity: 0; transform: translate3d(0, 105%, 0); }
  72%  { opacity: 1; transform: translate3d(0, -2%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes introLogoMask {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes introLogoSheen {
  0% { opacity: 0; transform: translateX(-120%); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}
@keyframes introLogoLine {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0); }
  60% { opacity: 0.72; }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1); }
}
@keyframes introRuleIn {
  to { transform: translateX(-50%) scaleX(1); }
}
@keyframes introGridIn {
  to { transform: scale(1); opacity: 0.36; }
}
@keyframes introCharRise {
  0%   { opacity: 0; transform: translate3d(0, 110%, 0); }
  68%  { opacity: 1; transform: translate3d(0, -2%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes introWipe { to { transform: translateX(100%); } }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introUnderline { to { transform: scaleX(1); } }
@keyframes introSheen {
  0%   { opacity: 0; transform: translateX(-120%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}
@keyframes introCaret { 0%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } }
@keyframes introDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(31, 165, 101, 0.20); }
  50%      { box-shadow: 0 0 0 8px rgba(31, 165, 101, 0.02); }
}
@keyframes introMeshDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.84; }
  50%      { transform: translate3d(1.5%, -1.2%, 0) scale(1.04); opacity: 0.96; }
}
@keyframes introOrb {
  0%, 100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.045); }
}
@keyframes introRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes introScan {
  0%, 52% { transform: translateX(-60%); opacity: 0; }
  62%     { opacity: 0.55; }
  88%, 100% { transform: translateX(60%); opacity: 0; }
}
@keyframes introCore { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes introCorePulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.6); }
}
@keyframes introNodePop { 0% { transform: scale(1); } 55% { transform: scale(1.32); } 100% { transform: scale(1.14); } }
@keyframes introCorePop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes introRing { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes introPacket { 0% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes introCapIn { to { opacity: 1; transform: translateY(0); } }
@keyframes introCapPulse {
  0%   { opacity: 0; transform: scaleY(0.35); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); }
}
@keyframes introReadyIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes introReadyBurst {
  0%   { opacity: 0.85; transform: scale(0.92); }
  100% { opacity: 0;    transform: scale(1.45); }
}
@keyframes introFill { to { transform: translateX(0); } }
@keyframes introShimmer {
  0%   { transform: translateX(-100px); }
  100% { transform: translateX(calc(100vw + 100px)); }
}
@keyframes introParticle {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translate(var(--dx, 30px), -120vh) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay *,
  .intro-overlay *::before,
  .intro-overlay *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .intro-wordmark .word-inner,
  .intro-brand-icon {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .intro-corner { display: none; }
  .intro-eyebrow {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.24em;
  }
  .intro-eyebrow .dash { width: 20px; }
  .intro-logo-wrap { gap: 10px; }
  .intro-brand-icon { width: 34px; }
  .intro-wordmark {
    font-size: clamp(38px, 11.2vw, 56px);
    gap: 0.12em;
  }
  .intro-tagline {
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
    letter-spacing: 0.01em;
    line-height: 1.55;
  }
  .intro-pipe {
    max-width: 92vw;
    margin-top: 30px;
  }
  .intro-foot {
    gap: 10px;
    padding: 0 18px 22px;
  }
  .intro-bar { min-width: 0; }
  .intro-count {
    min-width: 38px;
    font-size: 11px;
  }
  .intro-skip {
    padding: 7px 10px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
  .intro-cap span { font-size: 9.5px; letter-spacing: 0.15em; }
  .intro-ready { font-size: 10px; letter-spacing: 0.18em; }
  .intro-stage { transform: none !important; }
}