/* ─── msalgoai.com · Cinematic Opening Experience ─── */

:root { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
}

body {
  font-family: "Inter", "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── Landing page mount (Phase 2 fills this — kept as a dark continuation) ─── */
#landing-root {
  min-height: 100vh;
  background: radial-gradient(60% 48% at 50% 40%, #081222 0%, #04070d 68%, #020409 100%);
}

/* ─── Intro shell ─── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  overflow: hidden;
}

#intro.intro-done {
  opacity: 0;
  transition: opacity 0.95s ease;
  pointer-events: none;
}

html[data-skip-intro="1"] #intro { display: none; }

/* Subtle cinematic vignette */
#intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.45) 100%);
}

/* ─── Scene 1 · ambient glow on black ─── */
#ambient-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.7s ease;
  background: radial-gradient(
    52% 44% at 50% 42%,
    rgba(43, 92, 158, 0.17) 0%,
    rgba(20, 44, 80, 0.08) 45%,
    transparent 72%
  );
}

#intro.glow-on #ambient-glow { opacity: 1; }

/* ─── WebGL canvas ─── */
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* ─── Scene 5 · tagline ─── */
#tagline {
  position: absolute;
  left: 50%;
  top: 64.5%;
  transform: translateX(-50%);
  z-index: 3;
  width: max-content;
  max-width: 88vw;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 300;
  font-size: clamp(10px, 2.3vw, 15px);
  color: #e6f1fd;
  text-shadow:
    0 0 18px rgba(110, 170, 255, 0.38),
    0 0 4px rgba(190, 220, 255, 0.25);
}

.tl-word {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.72em;
}
.tl-word:last-child { margin-right: 0; }

.tl-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(7px);
  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.22, 0.61, 0.21, 1),
    filter 0.65s ease;
}

#tagline.lit .tl-ch {
  opacity: 0.96;
  transform: none;
  filter: blur(0);
}

/* ─── Scene 6 · candlestick growth ─── */
#candles-wrap {
  position: absolute;
  left: 50%;
  top: 71.5%;
  transform: translateX(-50%);
  z-index: 3;
}

#candles {
  width: 216px;
  height: 92px;
  display: block;
  opacity: 0.94;
}

/* ─── Non-WebGL / reduced-motion fallback emblem ─── */
#fallback-emblem {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(1.05);
  z-index: 2;
  width: min(46vw, 300px);
  opacity: 0;
  transition: opacity 1.5s ease, transform 1.7s cubic-bezier(0.22, 0.61, 0.21, 1);
  will-change: opacity, transform;
}

#fallback-emblem.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#fallback-emblem img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 26px rgba(70, 140, 255, 0.35));
}

#fallback-emblem.sweep img { animation: emblem-sweep 0.85s ease forwards; }

@keyframes emblem-sweep {
  0%   { filter: drop-shadow(0 0 26px rgba(70, 140, 255, 0.35)) brightness(1); }
  45%  { filter: drop-shadow(0 0 40px rgba(120, 185, 255, 0.55)) brightness(1.32); }
  100% { filter: drop-shadow(0 0 30px rgba(90, 155, 255, 0.42)) brightness(1.08); }
}

/* ─── Skip affordance (lives outside #intro so it stays focusable) ─── */
#intro-skip {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1001;
  padding: 10px 20px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(230, 241, 253, 0.78);
  background: rgba(8, 16, 30, 0.45);
  border: 1px solid rgba(151, 190, 235, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.7s ease,
              border-color 0.25s ease, color 0.25s ease;
}

#intro-skip.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#intro-skip:hover {
  color: #eef5ff;
  border-color: rgba(151, 190, 235, 0.55);
}

#intro-skip:focus-visible {
  outline: 2px solid #4facfe;
  outline-offset: 3px;
}

/* ─── Small viewport adjustments ─── */
@media (max-height: 620px) {
  #tagline { top: 66%; }
  #candles-wrap { top: 76%; }
  #candles { width: 180px; height: 72px; }
}

/* ─── Accessibility · reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  #ambient-glow { transition-duration: 0.4s; }
  #intro.intro-done { transition-duration: 0.5s; }
  #intro-skip { transition-duration: 0.15s; transform: none; }
  .tl-ch {
    transform: none;
    filter: none;
    transition: opacity 0.35s ease;
  }
  #fallback-emblem {
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease;
  }
  #fallback-emblem.sweep img { animation: none; }
}