/* Selene site: ambient sky, glass, the hero stage and scroll motion.
   Classes on <html>, set by the inline script in <head>:
     js       scripts run
     motion   no reduced-motion preference: reveals, the moving sky and the cursor aura are allowed
   Without them the page is complete and still: no JS shows the static sky, reduced motion stops everything. */

/* ── Ambient night behind everything (the app's indigo-violet sky and its nebulae) ───────────────────── */
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: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s; will-change: transform;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .04) 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: linear-gradient(90deg, var(--cta-from), var(--cta-to));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .8);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root block); }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Glass cards, like the app's translucent panels ───────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; border: 1px solid var(--line);
  background: var(--glass-bg);
  -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(5, 0, 20, .95);
}
.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(420px circle at var(--mx, 50%) var(--my, -40%), rgba(var(--accent-rgb), .16), transparent 46%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }
.price-card.glass { background: radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb), .2), transparent 70%), var(--glass-bg); }

/* ── Hero stage: the sky, the Moon going through its phases, 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: 1100px;
}
.sky, .sky-still {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%); mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
}
.sky { opacity: 0; transition: opacity 1.4s var(--ease); }
.sky.on { opacity: 1; }
.sky-still { /* no-JS still: a few stars and a full Moon where the canvas draws it */
  background:
    radial-gradient(circle at 50% var(--moon-y, 33%), #f6f6ff 0, #dedcf0 calc(var(--moon-r) * .55), #bcb9d6 calc(var(--moon-r) - 1px), transparent var(--moon-r)),
    radial-gradient(circle at 50% var(--moon-y, 33%), rgba(196, 181, 253, .22), transparent calc(var(--moon-r) * 2.6)),
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 41%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 14%, #fff, transparent), radial-gradient(1px 1px at 88% 46%, #c4b5fd, transparent),
    radial-gradient(1.2px 1.2px at 64% 9%, #fff, transparent), radial-gradient(1px 1px at 6% 58%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 92% 72%, #f5c451, transparent), radial-gradient(1px 1px at 38% 6%, #fff, transparent);
  --moon-r: clamp(48px, min(13vh, 22vw), 130px); --moon-y: 27%;
}
html.js .sky-still { display: none; }
.hero-stage::after { /* keeps the copy readable; the sky itself fades out through its mask */
  content: ""; position: absolute; inset: auto 0 0; height: 58%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), .5) 55%, transparent);
}
.hero-copy { position: relative; padding-bottom: clamp(52px, 9vh, 104px); }
.sky-note {
  position: absolute; left: var(--gutter); bottom: 30px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
html:not(.motion) .sky-note .m { display: none; }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 26px; 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 i { width: 1px; height: 34px; background: linear-gradient(var(--violet), transparent); }

/* ── Reveals (IntersectionObserver adds .in) ──────────────────────────────────────────────────────── */
html.motion.io .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.motion.io .reveal.d1 { transition-delay: .08s; }
html.motion.io .reveal.d2 { transition-delay: .16s; }
html.motion.io .reveal.in { opacity: 1; transform: none; }
html.motion .scroll-cue i { animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
html.motion .kicker .dot { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(var(--accent-2-rgb), .05), 0 0 18px rgba(var(--accent-2-rgb), .55); } }

@media (max-width: 860px) {
  .sky-note { display: none; }
  .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aura { display: none; }
}