/* Elvi shared theme — tokens, decorative layers, keyframes.
   Loaded from each page's <helmet> AFTER _ds/nocturne styles.css so these
   token values win the cascade. */

a, button, [onclick], [role="button"] { cursor: pointer; }

/* Flip text — per-character flip (5 cycles then settles), wired up by
   initFlipText() in anim.js on [data-flip-text] elements. 0deg and 360deg
   render identically so each loop point has no visible snap. */
.flip-text-wrapper { perspective: 1000px; }
.flip-char {
  display: inline-block;
  transform-style: preserve-3d;
  animation-name: flip-char-spin;
  animation-duration: var(--flip-duration, 2.2s);
  animation-delay: var(--flip-delay, 0s);
  animation-iteration-count: 5;
  animation-timing-function: ease-in-out;
}
@keyframes flip-char-spin {
  0%, 75% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flip-char { animation: none; }
}

/* Nav spotlight — cursor-follow glow behind the header nav, wired up by
   initNavSpotlight() in anim.js. Simplified from the source component: fades
   out on mouseleave instead of springing back to the active item. */
.main-nav { position: relative; }
.main-nav > * { position: relative; z-index: 1; }
.main-nav-spotlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(140px circle at var(--spotlight-x, 50%) 100%, var(--color-accent-glow) 0%, transparent 70%);
}

/* CTA shine — diagonal highlight sweep across primary buttons, looping.
   Pure CSS (no @property/Houdini needed): a skewed gradient bar translated
   via `left`, clipped by the button's own overflow:hidden. */
.btn-primary, .connect-btn, .cta-pill {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .connect-btn::after, .cta-pill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(75deg, transparent, color-mix(in srgb, var(--color-text) 55%, transparent), transparent);
  transform: skewX(-20deg);
  animation: btn-shine-sweep 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-shine-sweep {
  0%, 15% { left: -60%; }
  55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .connect-btn::after, .cta-pill::after { display: none; }
}
.main-nav.spotlight-active .main-nav-spotlight { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .main-nav-spotlight { display: none; }
}

:root {
  --color-bg: #0b1120;
  --color-surface: #111827;
  --color-text: #f0f4f8;
  --color-divider: rgba(148,163,184,0.12);
  --color-accent: #14b8a6;
  --color-warm: #ff6b35;              /* was #f59e0b — nexus ember */
  --color-signal: #e8ff47;            /* nexus electric lime */
  --color-signal-fill: #e8ff47;
  --color-accent-glow: rgba(20,184,166,0.15);
  --color-accent-100: #ccfbf1; --color-accent-200: #99f6e4; --color-accent-300: #5eead4;
  --color-accent-400: #2dd4bf; --color-accent-500: #14b8a6; --color-accent-600: #0d9488;
  --color-accent-700: #0f766e; --color-accent-800: #115e59; --color-accent-900: #134e4a;
  --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569;
  --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a;

  --font-heading: "Outfit", system-ui, sans-serif;
  --font-body: "Cabinet Grotesk", "Outfit", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-sm: 0 0 0 1px rgba(148,163,184,0.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(148,163,184,0.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(148,163,184,0.1);

  --header-bg: rgba(11,17,32,0.82);
  --banner-bg: rgba(15,23,42,0.5);

  --grid-line: rgba(148,163,184,0.08);
  --grain-opacity: 0.035;
  --blob-teal: rgba(20,184,166,0.16);
  --blob-ember: rgba(255,107,53,0.10);

  --orb-ring: rgba(20,184,166,0.12); --orb-fill-1: rgba(20,184,166,0.2);
  --orb-fill-2: rgba(20,184,166,0.04); --orb-border: rgba(20,184,166,0.25);
  --orb-shadow: 0 0 80px rgba(20,184,166,0.14), inset 0 0 50px rgba(20,184,166,0.06);
}

:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-divider: rgba(15,23,42,0.14);
  --color-accent: #0d9488;
  --color-warm: #c2410c;              /* ember, contrast-safe on white */
  --color-signal: #4d5200;            /* readable lime for text/borders */
  --color-signal-fill: #c9d94a;       /* fill behind dark text */
  --color-accent-glow: rgba(13,148,136,0.1);
  --color-neutral-100: #0f172a; --color-neutral-200: #1e293b; --color-neutral-300: #334155;
  --color-neutral-400: #475569; --color-neutral-500: #64748b; --color-neutral-600: #94a3b8;
  --color-neutral-700: #cbd5e1; --color-neutral-800: #e2e8f0; --color-neutral-900: #e7ebf1;

  --shadow-sm: 0 0 0 1px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 24px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.06);
  --shadow-lg: 0 20px 50px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.08);

  --header-bg: rgba(255,255,255,0.85);
  --banner-bg: rgba(241,245,249,0.9);

  --grid-line: rgba(15,23,42,0.06);
  --grain-opacity: 0.02;
  --blob-teal: rgba(13,148,136,0.12);
  --blob-ember: rgba(194,65,12,0.08);

  --orb-ring: rgba(13,148,136,0.22); --orb-fill-1: rgba(13,148,136,0.28);
  --orb-fill-2: rgba(13,148,136,0.06); --orb-border: rgba(13,148,136,0.35);
  --orb-shadow: 0 0 60px rgba(13,148,136,0.16), inset 0 0 40px rgba(13,148,136,0.08);
}

/* keep the mark-inversion rules the pages relied on */
:root[data-theme="light"] .elvi-mark { filter: brightness(0); }
:root[data-theme="light"] .elvi-mark-dark { display: none; }
:root[data-theme="light"] .elvi-mark-light { display: block; }

html { overflow-x: clip; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); overflow-x: clip; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-300); }

/* ---- decorative layers ---- */
.fx-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 85%);
}
.fx-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: var(--grain-opacity); 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='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-blob {
  position: absolute; pointer-events: none; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, var(--blob-teal) 0%, transparent 70%);
  animation: blob-drift 18s ease-in-out infinite;
}
.fx-blob.is-ember { background: radial-gradient(circle, var(--blob-ember) 0%, transparent 70%); }

.marquee-track {
  display: flex; width: max-content; animation: marquee 32s linear infinite;
}
.marquee-mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---- reveal ---- */
.js-anim [data-reveal] {
  opacity: 0; transform: translateY(60px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- keyframes ---- */
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes blob-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,-30px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .fx-blob { animation: none !important; }
}