/* ════════════════════════════════════════════════════════════
   ARKHIVE FX v2 — art-direction layer
   Syne display, JetBrains Mono readouts, oscilloscope waveform,
   outlined editorial type, sparse signal-orange accent.
   Degrades to static under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Motion contract: every animation uses these ── */
  --e-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-1: 150ms;   /* micro: hovers, toggles  */
  --t-2: 300ms;   /* small: chips, rows      */
  --t-3: 600ms;   /* medium: cards, panels   */
  --t-4: 1000ms;  /* large: heroes, pages    */

  --fx-glow:    #8b94a0;
  --fx-glow-2:  #d3d9e0;
  --fx-signal:  #e8edf2;   /* near-white — accent in milligrams only */
  --fx-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --fx-display: 'Syne', 'Inter', system-ui, sans-serif;
}

/* ── Hero headline: editorial scale ────────────────────────── */
.lp-hero-head {
  font-family: var(--fx-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: clamp(40px, 6.6vw, 108px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.015em !important;
}
.lp-hero-head .fx-dot { color: var(--fx-signal); }
.lp-hero-head .fx-l3 {
  display: inline-block;
  font-size: clamp(15px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-top: 26px;
}
.lp-hero-head .fx-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(221, 226, 234, 0.55);
}

/* ── Aurora pools (kept, but quieter and cooler) ───────────── */
.fx-aurora {
  position: absolute; inset: -20%;
  z-index: 2; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.4;
}
.fx-aurora::before, .fx-aurora::after {
  content: ""; position: absolute;
  width: 58vmax; height: 58vmax; border-radius: 50%;
  filter: blur(90px); will-change: transform;
}
.fx-aurora::before {
  left: -12%; top: 4%;
  background: radial-gradient(circle at 38% 42%, rgba(170,180,192,0.16), rgba(100,120,166,0.04) 52%, transparent 70%);
  animation: fx-drift-a 26s ease-in-out infinite alternate;
}
.fx-aurora::after {
  right: -16%; bottom: -8%;
  background: radial-gradient(circle at 60% 58%, rgba(190,198,208,0.10), rgba(120,128,138,0.04) 55%, transparent 72%);
  animation: fx-drift-b 34s ease-in-out infinite alternate;
}
@keyframes fx-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9%,6%,0) scale(1.12); } }
@keyframes fx-drift-b { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-7%,-5%,0) scale(0.96); } }

/* ── Filmic grain ──────────────────────────────────────────── */
.fx-grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.05;
  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)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ── Headline entrance ─────────────────────────────────────── */
.fx-ready .lp-hero-head .fx-line {
  display: inline-block;
  animation: fx-rise 900ms var(--e-out) both;
}
.fx-ready .lp-hero-head .fx-line:nth-of-type(2) { animation-delay: 120ms; }
.fx-ready .lp-hero-head .fx-line:nth-of-type(3) { animation-delay: 240ms; }
@keyframes fx-rise {
  from { transform: translateY(34px); opacity: 0; filter: blur(8px); }
  to   { transform: translateY(0);    opacity: 1; filter: blur(0); }
}

/* ── Live-status: mono + ping ──────────────────────────────── */
.lp-hero-status { font-family: var(--fx-mono) !important; letter-spacing: 0.2em; }
.lp-hero-status .dot { position: relative; }
.lp-hero-status .dot::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--fx-signal);
  animation: fx-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fx-ping { 0% { transform: scale(0.4); opacity: 0.8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }

/* ── Scroll reveals ────────────────────────────────────────── */
.fx-reveal {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity 800ms var(--e-out), transform 800ms var(--e-out), filter 800ms var(--e-out);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-reveal.fx-in { opacity: 1; transform: none; filter: blur(0); }

/* ── Section eyebrows & shell brand pick up the mono/display ─ */
.lp-section-eyebrow { font-family: var(--fx-mono) !important; }
.ark-brand-word, .ark-brand { font-family: var(--fx-display) !important; letter-spacing: 0.18em; }

/* ── Buttons: glow + sheen sweep ───────────────────────────── */
.ark-btn { position: relative; overflow: hidden; transition: box-shadow var(--t-2) var(--e-inout), transform 220ms var(--e-out), border-color var(--t-2) var(--e-inout); }
.ark-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%;
  width: 50%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(221,226,234,0.14), transparent);
  transition: left 600ms ease; pointer-events: none;
}
.ark-btn:hover::after { left: 130%; }
.ark-btn:hover { box-shadow: 0 0 0 1px rgba(232,237,242,0.28); }

/* ── Cards: lift + glow border + cursor sheen ──────────────── */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform 380ms var(--e-out), box-shadow 380ms var(--e-inout);
  will-change: transform;
}
.fx-tilt:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(190,198,208,0.10), 0 0 36px rgba(100,120,166,0.10); }
.fx-tilt .fx-sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(420px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(232,237,242,0.07), transparent 60%);
}
.fx-tilt:hover .fx-sheen { opacity: 1; }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora::before, .fx-aurora::after,
  .lp-hero-status .dot::before,
  .lp-hero-status .dot::before { animation: none !important; }
  .fx-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .fx-ready .lp-hero-head .fx-line { animation: none; }
  .fx-tilt { transition: none; }
}

/* ── Hologram overlay: scanlines + projection flicker ──────── */
.fx-holo {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 5;
  background:
    repeating-linear-gradient(0deg, rgba(160,215,240,0.038) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  animation: fx-holo-flicker 9s steps(1) infinite;
}
.map-stage .fx-holo { position: fixed; z-index: 15; }
@keyframes fx-holo-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; } 42% { opacity: 0.72; } 43% { opacity: 1; }
  77% { opacity: 1; } 78% { opacity: 0.85; } 78.6% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .fx-holo { animation: none; } }

/* landing hero nodes pick up the holo tint */
.lp-hero-node { background: #dff2fd !important; box-shadow: 0 0 9px rgba(170,220,245,0.75), 0 0 22px rgba(150,205,230,0.35); }

/* ════ Motion system v3 ═══════════════════════════════════════ */

/* ── Boot v2: letters track in over a rising horizon light ── */
.fx-boot {
  position: fixed; inset: 0; z-index: 9999;
  background: #030406;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 700ms var(--e-inout);
}
.fx-boot.is-done { opacity: 0; pointer-events: none; }
.fx-boot-bloom {
  position: absolute; left: 50%; bottom: -42vh;
  width: 160vw; height: 60vh;
  transform: translate(-50%, 40vh);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(190, 222, 244, 0.32) 0%,
    rgba(120, 160, 195, 0.12) 35%,
    transparent 68%);
  filter: blur(12px);
  transition: transform 1400ms var(--e-out);
}
.fx-boot.is-on .fx-boot-bloom { transform: translate(-50%, 0); }
.fx-boot-word {
  position: relative;
  font-family: var(--fx-display);
  font-weight: 800;
  font-size: clamp(40px, 7.5vw, 110px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #eef3f8;
  transition: letter-spacing 1300ms var(--e-out);
}
.fx-boot.is-on .fx-boot-word { letter-spacing: 0.14em; }
.fx-boot-word i {
  font-style: normal;
  display: inline-block;
  opacity: 0; filter: blur(10px);
  animation: fx-boot-letter 600ms var(--e-out) both;
}
@keyframes fx-boot-letter {
  from { opacity: 0; filter: blur(10px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}

/* ── Topbar: static, solid black — no scroll-driven animation ── */
.ark-topbar { transition: none !important; }
.ark-topbar.over-hero,
html.fx-at-top .ark-topbar.over-hero,
html:not(.fx-at-top) .ark-topbar.over-hero {
  background: #000;
  border-bottom-color: var(--ark-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Nav underline slides in from left instead of snapping */
.ark-nav a { position: relative; }
.ark-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: #e8edf2;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-2) var(--e-out);
}
.ark-nav a:hover::after, .ark-nav a.is-active::after { transform: scaleX(1); }

/* ── Map: panel + node entrances ── */
.map-panel { opacity: 0; transform: translateX(-14px); transition: opacity var(--t-3) var(--e-out), transform var(--t-3) var(--e-out); }
.map-panel.is-live { opacity: 1; transform: none; }
@keyframes fx-node-pop {
  0%   { transform: scale(0); opacity: 0; }
  55%  { transform: scale(1.7); opacity: 1; box-shadow: 0 0 16px rgba(190,228,250,0.9); }
  100% { transform: scale(1); opacity: 1; }
}
.map-node.fx-pop { animation: fx-node-pop var(--t-3) var(--e-out) both; }

/* ── Charts: bars grow from the baseline ── */
.fx-grow { transform-origin: bottom; animation: fx-grow var(--t-3) var(--e-out) both; }
@keyframes fx-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── Departure-board flip (availability cells, calendars) ── */
.fx-flip { animation: fx-flip 420ms var(--e-out) both; backface-visibility: hidden; }
@keyframes fx-flip {
  from { transform: rotateX(86deg); opacity: 0; }
  to   { transform: rotateX(0);     opacity: 1; }
}

/* ── Scrollbar + selection: branded ── */
::selection { background: rgba(190, 225, 245, 0.25); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(190,225,245,0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(190,225,245,0.16); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .fx-boot { display: none; }
  .map-panel { opacity: 1; transform: none; transition: none; }
  .map-node.fx-pop, .fx-grow, .fx-flip { animation: none; }
  .ark-nav a::after { transition: none; }
}

/* ════ Phase 3+4: product surface motion + craft ═════════════ */

/* Skeleton loading — no spinners on this platform */
.fx-skel { position: relative; overflow: hidden; background: rgba(255,255,255,0.035); border: 1px solid var(--ark-line, rgba(221,226,234,0.07)); }
.fx-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  animation: fx-skel 1.4s var(--e-inout) infinite;
}
@keyframes fx-skel { to { transform: translateX(100%); } }
.fx-skel-row { height: 64px; margin-bottom: 10px; }

/* The only shake allowed on the site: invalid invite code */
@keyframes fx-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.fx-shake { animation: fx-shake 150ms var(--e-inout) 2; }

/* Busy buttons: label yields to a sweeping pulse */
.ark-btn.is-busy { pointer-events: none; color: transparent !important; }
.ark-btn.is-busy * { opacity: 0; }
.ark-btn.is-busy::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #e8edf2, transparent);
  background-size: 45% 100%; background-repeat: no-repeat;
  animation: fx-busy 900ms var(--e-inout) infinite;
}
@keyframes fx-busy { from { background-position: -45% 0; } to { background-position: 145% 0; } }

/* Inputs: quiet focus, no color circus */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: rgba(210, 230, 245, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(210, 230, 245, 0.14);
}
input, textarea, select { transition: border-color var(--t-1) var(--e-inout), box-shadow var(--t-1) var(--e-inout); }

/* Tabular numerals wherever data lives */
.v1-stat .v, .hd-stat-val, .ac-stat .v, .std-stat .v,
.map-panel-count, .hd-row .amt, .ac-card .meta { font-variant-numeric: tabular-nums; }

/* Studio detail: hero settles, hairlines draw, sticky panel elevates */
.std-hero-bg { animation: fx-hero-settle 1100ms var(--e-out) both; }
@keyframes fx-hero-settle { from { transform: scale(1.09); } to { transform: scale(1.04); } }
.std-section h2::after { transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--e-out) 120ms; }
.std-section.fx-in h2::after { transform: scaleX(1); }
.std-book { transition: box-shadow var(--t-3) var(--e-inout), border-color var(--t-3) var(--e-inout); }
.std-book.is-stuck { box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.std-total-pulse { animation: fx-total 350ms var(--e-out); }
@keyframes fx-total { 0% { opacity: 0.2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx-skel::after, .ark-btn.is-busy::before, .fx-shake,
  .std-hero-bg, .std-total-pulse { animation: none !important; }
  .std-section h2::after { transform: scaleX(1); transition: none; }
}

/* ════ Planet rise — the 3D hero ═════════════════════════════ */
.lp-stars {
  position: absolute; inset: -6%;
  z-index: 0; pointer-events: none;
  background-repeat: repeat;
  will-change: transform;
}
.lp-stars.a {
  background-image: radial-gradient(circle, rgba(225,235,245,0.65) 0 0.8px, transparent 1.2px),
                    radial-gradient(circle, rgba(190,210,230,0.4) 0 0.7px, transparent 1.1px);
  background-size: 240px 240px, 170px 170px;
  background-position: 0 0, 90px 60px;
}
.lp-stars.b {
  background-image: radial-gradient(circle, rgba(200,215,235,0.35) 0 0.6px, transparent 1px);
  background-size: 130px 130px;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .lp-stars, #lp-hero-globe, .lp-hero-content { transform: none !important; }
}

/* ── Hero choreography: every layer arrives in order ────────── */
.v1-hero-tag, .lp-hero-sub, .lp-hero-row { opacity: 0; }
.fx-ready .v1-hero-tag { animation: fx-rise 800ms var(--e-out) 320ms both; }
.fx-ready .lp-hero-sub { animation: fx-rise 800ms var(--e-out) 420ms both; }
.fx-ready .lp-hero-row { animation: fx-rise 800ms var(--e-out) 540ms both; }

/* Primary CTA breathes — slow, barely there */
.lp-hero-row .ark-btn-solid { animation: fx-breathe 4.8s var(--e-inout) 2s infinite; }
@keyframes fx-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,237,242,0); }
  50%      { box-shadow: 0 0 26px 0 rgba(210,228,242,0.18); }
}

/* Scroll cue: hairline + mono whisper, leaves on first scroll */
.fx-scrollcue {
  position: absolute; left: 50%; bottom: 26px; z-index: 6;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
  transition: opacity var(--t-3) var(--e-inout);
}
.fx-scrollcue.is-gone { opacity: 0; }
.fx-scrollcue span {
  font-family: var(--fx-mono);
  font-size: 8.5px; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(221,226,234,0.35);
}
.fx-scrollcue i {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(221,226,234,0.45), transparent);
  animation: fx-cue 2.4s var(--e-inout) infinite;
}
@keyframes fx-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .v1-hero-tag, .lp-hero-sub, .lp-hero-row { opacity: 1; animation: none !important; }
  .lp-hero-row .ark-btn-solid, .fx-scrollcue i { animation: none !important; }
}