/* Reset / Base */
* { box-sizing: border-box; }
html, body {
  height: 100%;
}
body {
  margin: 0;
  background: #06070a;
  color: #e7ecf3;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow: hidden;
}

/* Background layers */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#chart-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Big rotating spiral behind everything */
.spiral { position: absolute; inset: -100%; background: conic-gradient(from 0turn, rgba(0,255,170,.18), rgba(52,178,255,.18), rgba(0,255,170,.18)); filter: blur(20px) saturate(1.1); opacity: .25; mix-blend-mode: screen; animation: spin 42s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg) scale(1.02); } }

/* Ticker Wall */
.ticker-wall { position: absolute; inset: 0; pointer-events: none; display: grid; grid-auto-rows: auto; gap: 8px; padding: 70px 0; filter: saturate(1.15) contrast(1.05); }
.ticker-lane { position: relative; overflow: hidden; mix-blend-mode: screen; opacity: .75; line-height: 1; }
.ticker-lane .lane-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; gap: 38px; align-items: center; white-space: nowrap; padding-inline: 24px; font-family: 'Orbitron', monospace; font-weight: 800; letter-spacing: .22ch; text-transform: uppercase; }
.ticker-lane .tag { background: rgba(0,0,0,.35); border: 1px solid rgba(0,255,170,.25); padding: 4px 8px; border-radius: 6px; margin-right: 8px; }
.ticker-lane .up { color: #86ffd9; text-shadow: 0 0 12px rgba(0,255,170,.6); }
.ticker-lane .down { color: #ff6b79; text-shadow: 0 0 12px rgba(255,55,85,.55); }
.ticker-lane .flat { color: #c8d6ff; text-shadow: 0 0 12px rgba(90,140,255,.45); }
.ticker-lane.blur-1 { filter: blur(.4px); }
.ticker-lane.blur-2 { filter: blur(.8px); }
.ticker-lane.blur-3 { filter: blur(1.2px); }
.ticker-lane.blur-4 { filter: blur(1.6px); }
.ticker-lane[data-dir="left"] .lane-track { animation: laneMoveLeft var(--spd, 20s) linear infinite; }
.ticker-lane[data-dir="right"] .lane-track { animation: laneMoveRight var(--spd, 20s) linear infinite; }

@keyframes laneMoveLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes laneMoveRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Flicker overlay for luxury feel */
.ticker-lane .lane-track .cell { position: relative; }
.ticker-lane .lane-track .cell::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,255,255,.0), rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 70%); opacity: 0; pointer-events: none; animation: spark var(--spark,6s) ease-in-out infinite; }
@keyframes spark { 0%,100% { opacity: 0; } 10% { opacity: .55; } 11% { opacity: 0; } 40% { opacity: .25; } 41% { opacity: 0; } 70% { opacity: .35; } 71% { opacity: 0; } }

/* Legacy top/bottom tickers are no longer used but kept for fallback */
.ticker { position: absolute; left: 0; right: 0; height: 0; overflow: hidden; }

.vignette { position: absolute; inset: -2% -2% -2% -2%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.75) 100%);
}
.scanline { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 2px, transparent 4px);
  opacity: .06; pointer-events: none; mix-blend-mode: overlay; }

/* Foreground / Stage */
#stage { position: relative; z-index: 1; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }

.brand { padding: 18px 24px; display: flex; align-items: center; justify-content: center; }
.logo { margin: 0; font-family: 'Orbitron'; font-weight: 900; font-size: clamp(28px, 4vw, 40px); letter-spacing: .12ch; text-transform: uppercase; text-align: center; }
.logo span { color: #a6f6ff; opacity: .85; }
.logo strong { color: #fff; text-shadow: 0 0 16px rgba(255,255,255,.35); }

.characters { position: absolute; inset: 0; pointer-events: none; }
.character { position: absolute; width: min(76vw, 856px); aspect-ratio: 3/4; max-height: 82dvh; background-size: contain; background-repeat: no-repeat; background-position: bottom center; filter: drop-shadow(0 25px 40px rgba(0,0,0,.6)); opacity: 0; transform: translateY(40px) scale(.95); animation: enter 900ms cubic-bezier(.2,.8,.2,1) forwards; z-index: 1; }
.character.left { left: 0; bottom: 0; animation-delay: 120ms; }
.character.right { right: 0; bottom: 0; animation-delay: 240ms; }

@keyframes enter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.glow::after { content: ""; position: absolute; inset: -2% -6% 0 -6%; background: radial-gradient(ellipse at 50% 85%, rgba(52,178,255,.35), rgba(0,0,0,0) 60%); filter: blur(18px); z-index: -1; }

.cta { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 16px; z-index: 3; }
.btn { text-decoration: none; font-family: 'Orbitron'; letter-spacing: .12ch; font-weight: 800; padding: 17px 26px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; font-size: 1.12rem; }
.btn.primary { background: linear-gradient(90deg, #00ffaa, #ff4050); color: #0b0e0d; box-shadow: 0 10px 30px rgba(0,255,170,.25); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0,255,170,.35); }
.btn.ghost { background: linear-gradient(90deg, rgba(0,255,170,.22), rgba(255,64,80,.22)); color: #e9fdff; border-color: rgba(0,255,170,.35); backdrop-filter: blur(6px); }
.btn.ghost:hover { transform: translateY(-2px); border-color: rgba(0,255,170,.65); }

/* Fade slider layers */
.layered { position: absolute; inset: 0; }
.layered img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; opacity: 0; transition: opacity var(--fade, 800ms) ease-in-out, filter 800ms ease; filter: saturate(1) contrast(1) brightness(1);
  mask-image: linear-gradient(to bottom, black 100%, transparent 20%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
}
.layered img.active { opacity: 1; }

/* Parallax on move */
.parallax { will-change: transform; transition: transform .08s linear; }

/* Responsive */
@media (max-width: 980px) {
  .characters { grid-template-columns: 1fr; align-items: end; justify-items: center; gap: 0; }
  .character { width: min(96vw, 644px); max-height: 72dvh; }
  .cta { bottom: 18px; }
}

/* Headline typewriter in center */
.headline { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; padding: 20px; text-align: center; }
.typewriter { font-family: 'Orbitron', monospace; font-weight: 900; letter-spacing: .08ch; font-size: clamp(18px, 2.4vw, 28px); color: #e9fdff; text-shadow: 0 0 18px rgba(0,255,170,.35), 0 0 28px rgba(52,178,255,.25); max-width: 960px; line-height: 1.35; }

/* Emphasize Elon-related tags inside tickers */
.cell.emph .tag { background: linear-gradient(90deg, rgba(0,255,170,.22), rgba(52,178,255,.22)); border-color: rgba(0,255,170,.55); box-shadow: 0 0 22px rgba(0,255,170,.25); }
.cell.emph { text-shadow: 0 0 10px rgba(0,255,170,.35), 0 0 24px rgba(52,178,255,.25); filter: saturate(1.25) contrast(1.1); }