/* AstroPal site: motion, the hero sky, glass and reveals. Classes on <html>, all set by script:
     js       scripts run
     motion   no reduced-motion preference: the hero sky animates, sections reveal, the progress bar and aura run
     io       IntersectionObserver is available (reveals wait for it)
     pointer  a mouse is over the page
   Without them the page is complete and still: no-JS gets the sky's still image, reduced motion one still frame of it. */

/* ── The night behind everything; the cursor aura shines through the glass ─────────────────────────── */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ambient); }
.aura {
  position: fixed; left: 0; top: 0; z-index: 0; width: 600px; height: 600px; margin: -300px 0 0 -300px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s; will-change: transform;
  background: radial-gradient(closest-side, rgba(var(--violet-rgb), .12), rgba(var(--gold-rgb), .035) 55%, transparent);
}
html.pointer .aura { opacity: 1; }

/* ── Scroll progress, along the bottom edge of the nav ─────────────────────────────────────────────── */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0)); background: var(--logo); box-shadow: 0 0 12px rgba(var(--gold-rgb), .55);
}
html:not(.motion) .progress { display: none; }

/* ── Glass ──────────────────────────────────────────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), rgba(14, 14, 34, .6);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 80px -44px rgba(0, 0, 0, .9);
}
.glass::before { /* the glow under the cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -40%), rgba(var(--violet-rgb), .16), transparent 46%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }

/* ── The hero stage: the app's orbiting sky behind the name ─────────────────────────────────────────── */
.hero { position: relative; z-index: 2; margin-top: calc(-1 * var(--nav-h)); }
.hero-stage {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 640px; max-height: 1080px;
}
.hero-sky { /* the still: shown without scripts, with reduced motion, and until the live sky fades in */
  position: absolute; inset: 0; z-index: -3;
  background: var(--poster) center top / cover no-repeat, radial-gradient(60% 50% at 50% 30%, rgba(var(--violet-rgb), .16), transparent 70%);
  transition: opacity 1.4s var(--ease);
}
.hero-stage.live .hero-sky { opacity: 0; } /* the live sky starts on the still's frame, so the hand-over is seamless */
@media (max-aspect-ratio: 4/5) { .hero-sky { background-image: var(--poster-m), radial-gradient(60% 50% at 50% 30%, rgba(var(--violet-rgb), .16), transparent 70%); background-position: center top; } }
.sky { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); }
.sky.on { opacity: 1; }
.hero-stage::after { /* keeps the copy readable and fades the stage into the page */
  content: ""; position: absolute; inset: auto 0 0; height: 64%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 26, .72) 52%, var(--bg));
}
.hero-copy { position: relative; padding-bottom: clamp(52px, 9vh, 104px); }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 30px; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue:hover { color: var(--head); }
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); transform-origin: top; }
html.motion .scroll-cue i { animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

/* ── Reveals: sections rise in once as they enter the viewport ──────────────────────────────────────── */
html.motion.io .reveal { opacity: 0; translate: 0 34px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
html.motion.io .reveal.in { opacity: 1; translate: none; }
html.motion.io .reveal.d1 { transition-delay: .08s; }
html.motion.io .reveal.d2 { transition-delay: .16s; }
html.motion .trio .phone { transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); }
html.motion.io .trio:not(.in) .phone:nth-of-type(1) { transform: perspective(1600px) rotateY(28deg) translateX(18%) scale(.84); opacity: 0; }
html.motion.io .trio:not(.in) .phone:nth-of-type(3) { transform: perspective(1600px) rotateY(-28deg) translateX(-18%) scale(.84); opacity: 0; }
html.motion.io .trio:not(.in) .phone:nth-of-type(2) { transform: translateY(40px) scale(.96); }

/* the tabs chain: a glint runs along it, like the app's active tab moving */
.chain::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: -1; height: 2px; margin-top: -1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .85), transparent) no-repeat; background-size: 90px 100%;
  background-position: -90px 0;
}
html.motion .chain::after { animation: glint 4.2s linear infinite; }
@keyframes glint { to { background-position: calc(100% + 90px) 0; } }

@media (max-width: 920px) {
  .scroll-cue, .chain::after { display: none; }
}
@media (max-width: 640px) {
  .hero-stage { min-height: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress, .aura { display: none; }
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-c-gold { --c: var(--gold) !important; }
.sx-c-violet { --c: var(--violet) !important; }
.sx-c-blue { --c: var(--blue) !important; }
.sx-c-green { --c: var(--green) !important; }
.sx-c-air { --c: var(--air) !important; }
.sx-c-pink { --c: var(--pink) !important; }