/* Alpha Cataso - the public scene
   -------------------------------
   Animation for the landing and auth pages only. The terminal screens stay
   still: movement behind an option chain competes with the numbers, and those
   pages are read, not looked at.

   Everything here is CSS on an inline SVG, so there is no sprite sheet to load
   and the whole scene scales without blurring. */

.scene {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
}
.scene svg { width: 100%; height: 100%; display: block; }

/* Sits behind everything on the page but above the page background. Content
   is lifted to z-index 1 so text never falls under a drifting petal. */
.scene-host { position: relative; }
.scene-host > *:not(.scene) { position: relative; z-index: 1; }

/* ---------- candlesticks ---------- */
/* Each candle grows from its own base, staggered, so the row prints left to
   right like a chart filling in. The stagger is set per-candle inline. */
@keyframes candle-in {
  0%   { transform: scaleY(0); opacity: 0; }
  12%  { transform: scaleY(1); opacity: 1; }
  88%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.candle { animation: candle-in 9s ease-in-out infinite; transform-box: fill-box; }
.candle.up   { transform-origin: 50% 100%; }
.candle.down { transform-origin: 50% 0%; }
.wick { animation: candle-in 9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }

/* The whole row drifts left, so the chart reads as still being written. The
   distance is exactly one candle pitch (64px), so the loop point is invisible
   - any other value makes the row visibly jump when it restarts. */
@keyframes chart-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-64px); }
}
.candle-row { animation: chart-drift 9s linear infinite; }

/* ---------- sun and waves ---------- */
@keyframes ray-turn { to { transform: rotate(360deg); } }
.sun-rays { animation: ray-turn 120s linear infinite; transform-origin: 600px 250px; }

@keyframes swell {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-28px); }
}
.wave-a { animation: swell 14s ease-in-out infinite; }
.wave-b { animation: swell 19s ease-in-out infinite -5s; }

/* ---------- petals ---------- */
@keyframes petal-fall {
  0%   { transform: translate(0, -40px) rotate(0deg); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .5; }
  100% { transform: translate(var(--dx, 60px), 760px) rotate(540deg); opacity: 0; }
}
.petal { animation: petal-fall var(--dur, 16s) linear infinite var(--delay, 0s);
         transform-box: fill-box; transform-origin: center; }

/* ---------- respect the setting ---------- */
/* Someone who has asked their system to stop animations has usually asked for
   a reason - vestibular discomfort, or a low-powered machine. The scene still
   renders in full, it simply holds still. */
@media (prefers-reduced-motion: reduce) {
  .candle, .wick, .candle-row, .sun-rays, .wave-a, .wave-b, .petal {
    animation: none !important;
  }
  .petal { opacity: .5; }
}

/* ---------- landing layout ---------- */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 48px 24px;
}
.hero-inner {
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero { min-height: auto; padding: 36px 20px; }
}

.hero h1 {
  font-size: clamp(34px, 5.2vw, 58px); line-height: 1.04;
  margin: 0 0 16px; letter-spacing: -.02em; font-weight: 800;
}
.hero h1 .g {
  background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 45%, #a97b23 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: 16px; color: var(--muted); max-width: 46ch; margin: 0 0 26px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--silver);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 20px;
  background: rgba(20,29,48,.6);
}
.kicker .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--up);
  box-shadow: 0 0 8px var(--up);
}

.stage {
  position: relative; aspect-ratio: 12 / 9; width: 100%;
  min-height: 320px;
  border: 1px solid var(--line); border-radius: 16px;
  background: radial-gradient(circle at 50% 32%, #0d1526 0%, #05070c 72%);
  box-shadow: 0 0 0 1px rgba(63,169,245,.06), 0 26px 70px rgba(0,0,0,.6);
  overflow: hidden;
}
.stage .scene { border-radius: 16px; }

/* On the auth pages the scene is the whole backdrop, so the card needs the
   middle of it darkened - otherwise a candlestick lands behind the password
   field and the form stops being the first thing the eye finds. */
.authwrap.scene-host::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 620px 560px at 50% 50%,
              rgba(5,7,12,.94) 0%, rgba(5,7,12,.72) 45%, rgba(5,7,12,.25) 100%);
}
.authwrap.scene-host > .authcard { z-index: 2; }

.feature-grid {
  max-width: 1180px; margin: 0 auto; padding: 0 24px 64px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 940px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px;
}
.feature h3 {
  margin: 0 0 6px; font-size: 14px; color: var(--gold);
  letter-spacing: .04em;
}
.feature p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

.landing-foot {
  border-top: 1px solid var(--line-soft); padding: 22px 24px 40px;
  text-align: center; color: var(--dim); font-size: 12px;
}