/* ============================================================================
   KURO CAPITAL — luxury design system
   A shared, additive layer. Namespaced `kx-` so it never fights the existing
   Tailwind utility classes or per-page styles. Linked on every page.

   Sections:
     1. Tokens (color, type, easing, radius)
     2. Global refinements (smoothing, selection, scrollbar, focus)
     3. Ambient materials (grain, aurora, animated grid, vignette)
     4. Surfaces (glass, bracket cards, hairline)
     5. Typography flourishes (display, eyebrow, data, gradient/shine text)
     6. Buttons (sheen sweep, magnetic, ghost)
     7. Motion primitives (reveal variants, stagger, draw, count, marquee)
     8. Keyframes
     9. Reduced-motion + responsive
   ========================================================================== */

/* 1 ── TOKENS ────────────────────────────────────────────────────────────── */
:root {
  --kx-black:      #000000;
  --kx-bg:         #050506;
  --kx-s1:         #0a0a0c;
  --kx-s2:         #101013;
  --kx-s3:         #17171c;
  --kx-line:       rgba(255,255,255,0.07);
  --kx-line-2:     rgba(255,255,255,0.12);
  --kx-line-3:     rgba(255,255,255,0.20);
  --kx-text:       #f2efe9;
  --kx-muted:      #a8a299;
  --kx-dim:        #6b655c;
  --kx-faint:      #2e2e35;

  --kx-green:      #34a877;
  --kx-green-hi:   #5ccb95;
  --kx-green-lo:   #1f8a5c;
  --kx-gold:       #cda45f;
  --kx-gold-hi:    #e6c886;
  --kx-gold-lo:    #a87f3c;
  --kx-red:        #b34b46;
  --kx-cyan:       #22d3ee;

  --kx-ease:       cubic-bezier(0.16, 1, 0.3, 1);    /* deep premium ease-out */
  --kx-ease-io:    cubic-bezier(0.76, 0, 0.24, 1);
  --kx-ease-spring:cubic-bezier(0.34, 1.4, 0.5, 1);

  --kx-r-sm: 4px;
  --kx-r:    10px;
  --kx-r-lg: 16px;

  /* fonts — modern grotesk display face (loaded per-page via Google Fonts) */
  --kx-font-serif: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  --kx-font-mono:  'JetBrains Mono', monospace;

  /* gold luxury accents */
  --kx-gold-line:  rgba(205,164,95,0.28);
  --kx-gold-soft:  rgba(205,164,95,0.06);

  --kx-shadow-lift: 0 30px 80px -34px rgba(0,0,0,0.9);
  --kx-shadow-deep: 0 50px 140px -50px rgba(0,0,0,0.95);
  --kx-shadow-glow-g: 0 0 100px -28px rgba(52,168,119,0.4);
  --kx-shadow-glow-y: 0 0 110px -26px rgba(205,164,95,0.42);

  --kx-maxw: 1200px;
}

/* 2 ── GLOBAL REFINEMENTS (safe, ambient) ───────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv01","cv02";
  /* Ambient vignette painted on the canvas (behind all content) — quiet depth */
  background-image:
    radial-gradient(120% 70% at 50% -8%, rgba(52,168,119,0.05), transparent 55%),
    radial-gradient(90% 60% at 50% 108%, rgba(205,164,95,0.035), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
::selection { background: rgba(205,164,95,0.22); color: #fff; }

/* Refined scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #060607; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1c1c22, #121216);
  border-radius: 6px; border: 2px solid #060607;
}
::-webkit-scrollbar-thumb:hover { background: #2a2a32; }

/* Keyboard focus only — never a mouse ring */
:focus-visible {
  outline: 2px solid rgba(52,168,119,0.6);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Tabular numerals helper used widely */
.kx-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Chart hover tooltip (crosshair readout) */
.kx-tip {
  position: absolute; pointer-events: none; z-index: 6;
  transform: translate(-50%, calc(-100% - 14px));
  background: rgba(10,10,12,0.94);
  border: 1px solid var(--kx-gold-line);
  border-radius: 7px; padding: 6px 11px;
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
  opacity: 0; transition: opacity .16s var(--kx-ease);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.85);
}
.kx-tip.kx-tip--on { opacity: 1; }
.kx-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(10,10,12,0.94);
  border-right: 1px solid var(--kx-gold-line);
  border-bottom: 1px solid var(--kx-gold-line);
}
.kx-tip-v { display: block; font-weight: 700; font-size: 13px; color: var(--kx-green-hi); letter-spacing: 0.02em; }
.kx-tip-x { display: block; font-size: 10px; color: var(--kx-muted); margin-top: 2px; letter-spacing: 0.08em; }

/* 3 ── AMBIENT MATERIALS ─────────────────────────────────────────────────── */

/* Fine film-grain overlay. Add <div class="kx-grain"></div> as a fixed layer. */
.kx-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Aurora glow blob — soft drifting light. Place inside a relative container. */
.kx-aurora {
  position: absolute; border-radius: 999px; filter: blur(120px);
  pointer-events: none; opacity: 0.5;
  animation: kxDrift 22s var(--kx-ease-io) infinite alternate;
}
.kx-aurora--green { background: radial-gradient(circle, rgba(52,168,119,0.30), transparent 70%); }
.kx-aurora--gold  { background: radial-gradient(circle, rgba(205,164,95,0.22), transparent 70%); }

/* Animated precision grid background. */
.kx-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 30%, transparent 78%);
}
.kx-grid--breathe { animation: kxGridBreathe 9s var(--kx-ease-io) infinite; }

/* Top hairline highlight for layered surfaces */
.kx-topglow { position: relative; }
.kx-topglow::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

/* Section divider with a moving sheen */
.kx-divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--kx-line-2), transparent);
  position: relative; overflow: hidden;
}
.kx-divider::after {
  content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(52,168,119,0.8), transparent);
  animation: kxSweep 7.5s var(--kx-ease-io) infinite;
}
/* gold variant for premium sections */
.kx-divider--gold { background: linear-gradient(90deg, transparent, var(--kx-gold-line), transparent); }
.kx-divider--gold::after { background: linear-gradient(90deg, transparent, rgba(205,164,95,0.85), transparent); }

/* hairline gold rule for section tops */
.kx-goldline { height:1px; background: linear-gradient(90deg, transparent, var(--kx-gold-line) 30%, var(--kx-gold-line) 70%, transparent); }

/* 4 ── SURFACES ──────────────────────────────────────────────────────────── */

/* Glass panel — refined translucent material */
.kx-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--kx-line);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border-radius: var(--kx-r);
}

/* Bracket card — terminal corner ticks, lifts + glows on hover */
.kx-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.03), transparent 60%);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-r);
  transition: transform .7s var(--kx-ease), border-color .7s var(--kx-ease),
              box-shadow .7s var(--kx-ease), background .7s var(--kx-ease);
  will-change: transform;
}
.kx-card::before, .kx-card::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--kx-gold-line); opacity: 0;
  transition: opacity .7s var(--kx-ease);
}
.kx-card::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.kx-card::after  { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
.kx-card:hover {
  transform: translateY(-6px);
  border-color: var(--kx-line-2);
  box-shadow: var(--kx-shadow-deep);
}
.kx-card:hover::before, .kx-card:hover::after { opacity: 1; }

/* Premium card — gold-leaf top hairline + warmer glass, for marquee moments */
.kx-card--premium {
  background:
    linear-gradient(180deg, rgba(205,164,95,0.05), rgba(255,255,255,0.012));
  border-color: var(--kx-gold-line);
}
.kx-card--premium::after, .kx-card--premium::before { border-color: var(--kx-gold); }
.kx-card--premium:hover { box-shadow: var(--kx-shadow-deep), var(--kx-shadow-glow-y); }

/* Hairline ruled list */
.kx-rule { border-top: 1px solid var(--kx-line); }

/* 5 ── TYPOGRAPHY FLOURISHES ─────────────────────────────────────────────── */

/* Eyebrow / kicker label */
.kx-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kx-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
/* gold tick before an eyebrow for premium moments */
.kx-eyebrow--gold { color: var(--kx-gold); }
.kx-eyebrow--tick::before {
  content: ''; width: 18px; height: 1px; background: var(--kx-gold-line); display: inline-block;
}

/* Modern grotesk display face — the headline voice */
.kx-serif {
  font-family: var(--kx-font-serif);
  font-weight: 700; letter-spacing: -0.028em; line-height: 1.0;
  text-wrap: balance;
}
/* kept for backwards-compat — no longer italic (modern, not cursive) */
.kx-serif-italic { font-family: var(--kx-font-serif); font-style: normal; font-weight: 600; letter-spacing: -0.02em; }

/* Big display heading: tighter tracking, optical balance (sans fallback) */
.kx-display {
  letter-spacing: -0.03em; line-height: 0.95;
  font-weight: 900; text-wrap: balance;
}

/* Vertical metallic gradient text (white → grey), luxe */
.kx-text-metal {
  background: linear-gradient(180deg, #ffffff 0%, #f2efe9 38%, #8b8b93 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Green gradient text with glow */
.kx-text-green {
  background: linear-gradient(180deg, #9fe0c0, #34a877 60%, #1f7a52);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kx-text-gold {
  background: linear-gradient(180deg, #efdcab, #cda45f 55%, #8f6a2f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Animated shine sweep across text (use on a span) */
.kx-shine {
  background: linear-gradient(110deg, #c9c9d1 35%, #ffffff 50%, #c9c9d1 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: kxShine 7s linear infinite;
}

/* 6 ── BUTTONS ───────────────────────────────────────────────────────────── */
.kx-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; font-weight: 700; font-size: 15px; line-height: 1;
  border-radius: 8px; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--kx-ease), box-shadow .35s var(--kx-ease),
              background .35s var(--kx-ease), color .35s var(--kx-ease);
  text-decoration: none;
}
.kx-btn svg { transition: transform .35s var(--kx-ease); }
.kx-btn:hover svg { transform: translateX(4px); }
/* sheen sweep */
.kx-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 180% 0;
  transition: background-position .8s var(--kx-ease);
}
.kx-btn:hover::after { background-position: -40% 0; }

.kx-btn--primary { background: var(--kx-green); color: #04210f; box-shadow: 0 10px 30px -10px rgba(52,168,119,0.6); }
.kx-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(52,168,119,0.75); }

.kx-btn--gold { background: var(--kx-gold); color: #241a02; box-shadow: 0 10px 30px -10px rgba(205,164,95,0.6); }
.kx-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(205,164,95,0.78); }

.kx-btn--ghost {
  background: rgba(255,255,255,0.02); color: #fff;
  border: 1px solid var(--kx-line-2);
}
.kx-btn--ghost:hover { transform: translateY(-2px); border-color: var(--kx-line-3); background: rgba(255,255,255,0.05); }
.kx-btn--ghost::after { display: none; }

/* 7 ── MOTION PRIMITIVES ─────────────────────────────────────────────────── */

/* Reveal — base hidden state. motion.js adds .kx-in when in view.
   Variant via data-kx="up|left|right|scale|blur|clip". */
.kx-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1.25s var(--kx-ease),
    transform 1.35s var(--kx-ease),
    filter 1.25s var(--kx-ease);
  will-change: opacity, transform;
}
.kx-reveal[data-kx="left"]  { transform: translateX(-44px); }
.kx-reveal[data-kx="right"] { transform: translateX(44px); }
.kx-reveal[data-kx="scale"] { transform: scale(0.93); }
.kx-reveal[data-kx="blur"]  { filter: blur(16px); transform: translateY(18px); }
.kx-reveal[data-kx="clip"]  { transform: translateY(0); clip-path: inset(0 0 100% 0); }
.kx-reveal.kx-in {
  opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0);
}

/* Stagger — children reveal in sequence (motion.js sets --kx-i). */
.kx-stagger > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.1s var(--kx-ease), transform 1.1s var(--kx-ease);
  transition-delay: calc(var(--kx-i, 0) * 120ms);
  will-change: opacity, transform;
}
.kx-stagger.kx-in > * { opacity: 1; transform: none; }

/* SVG draw-on — set on <path>/<line>/<polyline>. motion.js measures length. */
.kx-draw {
  stroke-dasharray: var(--kx-len, 1);
  stroke-dashoffset: var(--kx-len, 1);
  transition: stroke-dashoffset 2.4s var(--kx-ease);
}
.kx-draw.kx-in { stroke-dashoffset: 0; }

/* Generic fade-in for chart sub-elements (markers, fills, labels) */
.kx-fade { opacity: 0; transition: opacity .8s var(--kx-ease); transition-delay: var(--kx-delay, 0ms); }
.kx-fade.kx-in { opacity: var(--kx-fade-to, 1); }
.kx-rise { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--kx-ease), transform .7s var(--kx-ease); transition-delay: var(--kx-delay, 0ms); }
.kx-rise.kx-in { opacity: 1; transform: none; }

/* Live blip — pulsing dot */
.kx-blip { position: relative; }
.kx-blip::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 currentColor; animation: kxPing 2s var(--kx-ease-io) infinite;
}

/* Marquee row (seamless). Pair two identical tracks. */
.kx-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.kx-marquee__track { display: flex; width: max-content; animation: kxMarquee 48s linear infinite; }
.kx-marquee:hover .kx-marquee__track { animation-play-state: paused; }

/* Scanning beam for chart frames */
.kx-scan { position: relative; overflow: hidden; }
.kx-scan::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 28%; left: -28%;
  background: linear-gradient(90deg, transparent, rgba(52,168,119,0.10), transparent);
  animation: kxScan 5.5s var(--kx-ease-io) infinite; pointer-events: none;
}

/* Soft float (idle hover for hero ornaments) */
.kx-float { animation: kxFloat 7s var(--kx-ease-io) infinite; }

/* Tilt target (motion.js applies transform on pointer move) */
.kx-tilt { transform-style: preserve-3d; transition: transform .4s var(--kx-ease); }

/* 8 ── KEYFRAMES ─────────────────────────────────────────────────────────── */
@keyframes kxDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(6%, -5%) scale(1.12); }
}
@keyframes kxGridBreathe {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 1; }
}
@keyframes kxSweep {
  0%   { left: -30%; }
  60%,100% { left: 130%; }
}
@keyframes kxShine { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }
@keyframes kxPing {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.7; }
  70%  { box-shadow: 0 0 0 7px transparent; opacity: 0; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}
@keyframes kxMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes kxScan { 0% { left: -28%; } 55%,100% { left: 128%; } }
@keyframes kxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes kxSpinGlow { to { transform: rotate(360deg); } }

/* ── EXPERIENCE LAYER (experience.js) ─────────────────────────────────────── */

/* Integrated scroll rail — a vertical instrument on the right edge with a
   glowing node, fill, section ticks, and a live percentage. */
.kx-rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 46vh; max-height: 480px; z-index: 40;
  background: rgba(255,255,255,0.07); border-radius: 3px;
}
.kx-rail-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--kx-green), var(--kx-gold));
  border-radius: 3px; box-shadow: 0 0 12px rgba(52,168,119,0.45);
}
.kx-rail-node {
  position: absolute; left: 50%; top: 0%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #eafff2;
  box-shadow: 0 0 14px 2px rgba(52,168,119,0.7);
}
.kx-rail-tick {
  position: absolute; left: 50%; width: 7px; height: 1px; transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.28);
}
.kx-rail-pct {
  position: absolute; right: 12px; top: 0%; transform: translateY(-50%);
  font-family: var(--kx-font-mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--kx-muted); white-space: nowrap;
}
@media (max-width: 1024px) { .kx-rail { display: none; } }

/* Cursor-follow spotlight — smaller, brighter, tighter core.
   No mix-blend-mode: on a moving element it forces a full backdrop recomposite
   every frame (the cause of cursor lag over the blurred cards). A plain additive
   radial reads almost identically on the near-black surface. */
.kx-spotlight {
  position: fixed; top: 0; left: 0; width: 320px; height: 320px;
  margin: -160px 0 0 -160px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(52,168,119,0.16), rgba(205,164,95,0.06) 32%, transparent 60%);
  will-change: transform;
  opacity: 0; transition: opacity .8s var(--kx-ease);
}
.kx-spotlight.kx-on { opacity: 1; }

/* Custom precision cursor — terminal crosshair: instant dot + lagging ring */
body.kx-cursor-on, body.kx-cursor-on * { cursor: none !important; }
body.kx-cursor-on input, body.kx-cursor-on textarea, body.kx-cursor-on [contenteditable] { cursor: text !important; }
.kx-cursor-dot {
  position: fixed; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #eafff2; z-index: 9998; pointer-events: none;
  /* No mix-blend-mode: it forces a backdrop read-back + re-blend every frame as
     the dot moves — very costly over complex SVG regions (the indicator charts).
     A solid dot with a thin outline + soft glow reads clearly on any surface. */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 9px rgba(52,168,119,0.55);
  will-change: transform;
}
.kx-cursor-ring {
  position: fixed; top: 0; left: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; border: 1.5px solid rgba(205,164,95,0.75); z-index: 9998; pointer-events: none;
  will-change: transform;
  transition: width .22s var(--kx-ease), height .22s var(--kx-ease), margin .22s var(--kx-ease),
              border-color .22s var(--kx-ease), background .22s var(--kx-ease), opacity .3s ease;
}
.kx-cursor-ring.kx-hot { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(52,168,119,0.9); background: rgba(52,168,119,0.08); }
.kx-cursor-ring.kx-press { width: 18px; height: 18px; margin: -9px 0 0 -9px; }

/* Velocity-reactive elements get a transition so the skew eases back to rest */
.kx-grid, .kx-marquee { transition: transform .45s var(--kx-ease-io); }

/* ── PINNED SCROLL-STORY (scrollstory.js) ─────────────────────────────────── */
.kx-story-wrap { position: relative; height: 300vh; }
.kx-story-pin {
  position: -webkit-sticky; position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
  border-top: 1px solid var(--kx-line); border-bottom: 1px solid var(--kx-line);
}
.kx-story-figure { font-size: clamp(2.6rem, 7vw, 5.4rem); letter-spacing: -0.03em; line-height: 1; }
.kx-story-chart { width: 100%; }
.kx-story-bench { opacity: 0; transition: opacity .5s var(--kx-ease); }
.kx-story-bench.kx-on { opacity: 1; }
.kx-story-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); animation: kxFloat 2.4s var(--kx-ease-io) infinite; }
@media (max-width: 1023px) {
  .kx-story-wrap { height: 230vh; }
  .kx-story-pin { align-items: flex-start; padding-top: 84px; }
}

/* ── GLITCH HEADLINE REVEAL (data-kx="glitch" on a .kx-reveal / .reveal) ─────
   Reveal (opacity + clip wipe) runs via TRANSITION so the visible state is the
   static target — robust even if animations are paused/disabled. The RGB split
   is a separate, non-blocking flash that never affects visibility. */
.kx-reveal[data-kx="glitch"], .reveal[data-kx="glitch"] {
  opacity: 0; clip-path: inset(0 0 102% 0); transform: none;
  transition: opacity .55s var(--kx-ease), clip-path .8s var(--kx-ease);
}
.kx-reveal[data-kx="glitch"].kx-in, .reveal[data-kx="glitch"].visible {
  opacity: 1; clip-path: inset(0 0 0 0);
  animation: kxGlitchShadow .62s var(--kx-ease) .12s;
}
@keyframes kxGlitchShadow {
  0%,100% { text-shadow: none; }
  30%     { text-shadow: 3px 0 rgba(52,168,119,0.75), -3px 0 rgba(179,75,70,0.6); }
  50%     { text-shadow: -2px 0 rgba(52,168,119,0.6), 2px 0 rgba(179,75,70,0.5); }
  70%     { text-shadow: 1px 0 rgba(205,164,95,0.55); }
}

/* Generative WebGL hero field (hero-fx.js) — sits behind the hero, edge-faded */
.kx-herofx {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; display: block;
  opacity: 0; transition: opacity 1.4s var(--kx-ease);
  -webkit-mask-image: radial-gradient(ellipse 96% 88% at 50% 42%, #000 48%, transparent 100%);
          mask-image: radial-gradient(ellipse 96% 88% at 50% 42%, #000 48%, transparent 100%);
}
.kx-herofx.kx-fx-on { opacity: 1; }

/* ── COCKPIT BOOT SEQUENCE (index, first load) ────────────────────────────── */
html.kx-skip-intro #kxIntro { display: none !important; }
body.kx-intro-active { overflow: hidden; }

#kxIntro {
  position: fixed; inset: 0; z-index: 9999; background: #030304; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-family: var(--kx-font-mono);
}
/* CRT scanlines */
#kxIntro::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: 0.5;
}
/* vignette */
#kxIntro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.72) 100%);
}

/* the console powers on like a CRT (thin bright line expands to full) */
.kx-boot-core {
  position: relative; z-index: 2; width: min(560px, 86vw);
  display: flex; flex-direction: column; gap: 16px; transform-origin: center;
  animation: kxBootOn .55s var(--kx-ease) forwards;
}
@keyframes kxBootOn {
  0%   { transform: scaleY(0.004) scaleX(0.5); opacity: 0; filter: brightness(4); }
  18%  { transform: scaleY(0.004) scaleX(1);   opacity: 1; filter: brightness(4); }
  55%  { transform: scaleY(1) scaleX(1);        filter: brightness(1.7); }
  100% { transform: none; filter: none; }
}

.kx-boot-head { display: flex; align-items: center; gap: 12px; }
.kx-boot-k {
  width: 34px; height: 34px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; letter-spacing: -0.05em; font-family: var(--kx-font-serif);
}
.kx-boot-title { font-family: var(--kx-font-serif); font-weight: 700; letter-spacing: 0.08em; font-size: 18px; color: #fff; }
.kx-boot-ver { margin-left: auto; font-size: 10px; letter-spacing: 0.2em; color: #5a5a63; }

.kx-boot-log {
  margin: 0; font-family: var(--kx-font-mono); font-size: 12.5px; line-height: 1.7;
  color: #8a8a90; white-space: pre-wrap; min-height: 178px;
  text-shadow: 0 0 8px rgba(52,168,119,0.12);
}
.kx-boot-log .ok { color: var(--kx-green); }
.kx-boot-log .live { color: var(--kx-gold); }
.kx-boot-log .hl { color: #f2efe9; }
.kx-boot-log .cur { color: var(--kx-green); animation: kxBlink 1s step-end infinite; }
@keyframes kxBlink { 50% { opacity: 0; } }

.kx-boot-barwrap { height: 3px; background: #141419; overflow: hidden; }
.kx-boot-bar {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--kx-green), var(--kx-gold));
  box-shadow: 0 0 12px rgba(52,168,119,0.5); transition: width .18s linear;
}
.kx-boot-status { font-size: 11px; letter-spacing: 0.28em; color: var(--kx-green); display: flex; align-items: center; gap: 9px; }
.kx-boot-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--kx-green);
  box-shadow: 0 0 8px var(--kx-green); animation: livePulse 1.2s infinite;
}

/* LAUNCH — the console wipes up off the top to reveal the hero, identical in
   spirit to the site's page transitions (a weighted panel wipe with an accent
   edge), not a spoke-burst. */
.kx-boot-warp {       /* repurposed as the leading accent edge at the panel's base */
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; opacity: 0;
  background: linear-gradient(90deg, transparent 6%, rgba(52,168,119,0.85) 38%, rgba(205,164,95,0.9) 62%, transparent 94%);
  box-shadow: 0 0 22px rgba(52,168,119,0.5);
}
.kx-boot-launch .kx-boot-warp { opacity: 1; }
.kx-boot-launch .kx-boot-core { animation: kxBootCoreOut .42s var(--kx-ease) forwards; }
@keyframes kxBootCoreOut { to { opacity: 0; transform: translateY(-14px); } }
#kxIntro.kx-boot-launch { animation: kxBootExit .82s cubic-bezier(0.76, 0, 0.24, 1) .12s forwards; }
@keyframes kxBootExit { from { transform: translateY(0); } to { transform: translateY(-101%); } }

/* ── PAGE TRANSITION — a weighted panel wipe (transition.js, site-wide) ─────
   On exit a solid brand panel sweeps up to cover the page (with the wordmark
   gliding through), then we navigate. The next page is *already covered before
   first paint* (an early <head> flag adds html.kx-arriving) and the cover wipes
   off the top — so there is never a flash of the new page. Pure-CSS reveal, so
   content is never trapped if scripts fail. */
.kx-warp {
  position: fixed; inset: 0; z-index: 9991; pointer-events: none; overflow: hidden;
  visibility: hidden;
}
.kx-warp.kx-warp-out { visibility: visible; }
.kx-warp-panel {
  position: absolute; inset: -2px 0; transform: translateY(101%);   /* parked below */
  background: linear-gradient(180deg, #0b0b0e 0%, #050506 52%, #08080a 100%);
  will-change: transform;
}
.kx-warp-panel::after {       /* film grain to match the site surface */
  content: ''; position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.kx-warp-edge {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent 6%, rgba(52,168,119,0.85) 38%, rgba(205,164,95,0.9) 62%, transparent 94%);
  box-shadow: 0 0 22px rgba(52,168,119,0.5);
}
.kx-warp-edge.t { top: 0; } .kx-warp-edge.b { bottom: 0; }
.kx-warp-mark {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity .25s ease .12s;
}
.kx-warp.kx-warp-out .kx-warp-mark { opacity: 0.95; }
.kx-warp-mark .k {
  width: 30px; height: 30px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center;
  font-family: var(--kx-font-serif); font-weight: 900; font-size: 16px; letter-spacing: -0.05em;
}
.kx-warp-mark .w { font-family: var(--kx-font-mono); font-size: 11px; letter-spacing: 0.34em; color: #a8a299; }
/* EXIT — panel rises from below to cover */
.kx-warp.kx-warp-out .kx-warp-panel { animation: kxWipeCover .46s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes kxWipeCover { from { transform: translateY(101%); } to { transform: translateY(0); } }

/* ARRIVE — cover the page before first paint, then wipe it off the top.
   The leading (bottom) edge carries the emerald→gold accent line. */
html.kx-arriving::before {
  content: ''; position: fixed; inset: -2px 0; z-index: 9991; pointer-events: none;
  transform: translateY(0); will-change: transform;
  background:
    linear-gradient(180deg, transparent calc(100% - 2px), rgba(52,168,119,0.9) calc(100% - 1.5px), rgba(205,164,95,0.9) calc(100% - 0.5px), transparent),
    linear-gradient(180deg, #0b0b0e 0%, #050506 52%, #08080a 100%);
  box-shadow: 0 8px 30px -6px rgba(52,168,119,0.35);
  animation: kxWipeReveal .74s cubic-bezier(0.76, 0, 0.24, 1) .04s forwards;
}
@keyframes kxWipeReveal { from { transform: translateY(0); } to { transform: translateY(-101%); } }

/* 9 ── REDUCED MOTION + RESPONSIVE ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kx-reveal, .kx-stagger > *, .kx-draw, .kx-fade, .kx-rise,
  .reveal[data-kx="glitch"], .kx-reveal[data-kx="glitch"] {
    transition: none !important; opacity: 1 !important; transform: none !important;
    filter: none !important; clip-path: none !important; stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .kx-aurora, .kx-grid--breathe, .kx-divider::after, .kx-scan::after,
  .kx-float, .kx-shine, .kx-blip::after, .kx-marquee__track { animation: none !important; }
  .kx-spotlight, .kx-cursor-dot, .kx-cursor-ring { display: none !important; }
  #kxIntro { display: none !important; }
}

@media (max-width: 640px) {
  .kx-card::before, .kx-card::after { display: none; }
}