/* GardenPal site: the hero stage, glass, the ambient light and motion.
   Classes on <html>, all set by script:
     js       scripts run
     motion   no reduced-motion preference
     live     the hero sky canvas is drawn (animated, or one still frame with reduced motion)
     io       js/site.js reveals sections with IntersectionObserver
     pointer  a mouse is over the page (the cursor aura shows)
   Without them the page is complete and still: no-JS shows the hero still image and every section. */

/* ── Ambient light behind the page; the cursor aura ──────────────────────────────────────── */
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), .09), rgba(var(--gold-rgb), .05) 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(--leaf), var(--moon-lit));
  box-shadow: 0 0 10px rgba(74, 173, 108, .7);
}
@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 on the cream page ─────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; border: 1px solid rgba(26, 64, 40, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px -42px rgba(15, 31, 22, .45);
}
.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), .12), transparent 46%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }
.price-card.glass { border-color: rgba(var(--accent-rgb), .3); background: radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb), .1), transparent 70%), rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 50px 110px -60px rgba(var(--accent-rgb), .9); }

/* ── The hero: a night garden under the moon (js/sky.js), like the app's moon panel ───────── */
.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: 660px; max-height: 1080px; background: var(--night);
  border-radius: 0 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
}
.hero-sky { position: absolute; inset: 0; z-index: -3; background: var(--sky); }
html:not(.live) .hero-sky::before { /* the still, without scripts */
  content: ""; position: absolute; inset: 0; background: var(--poster) center top / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) { html:not(.live) .hero-sky::before { background-image: var(--poster-m); } }
.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 over the garden */
  content: ""; position: absolute; inset: auto 0 0; height: 56%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(9, 20, 13, .5) 45%, rgba(9, 20, 13, .72));
}
.hero-copy { position: relative; padding-bottom: clamp(56px, 10vh, 112px); }
.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(--on-dark-3); text-decoration: none;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--moon-lit), 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 (js/site.js adds .io, then .in as sections arrive) ─────────────────────────── */
html.io .reveal { opacity: 0; translate: 0 32px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
html.io .reveal.in { opacity: 1; translate: none; }
html.io .reveal.d1 { transition-delay: .08s; }
html.io .reveal.d2 { transition-delay: .16s; }
html.io .trio.reveal .side { opacity: 0; transition: opacity 1s var(--ease) .25s, translate 1s var(--ease) .25s; }
html.io .trio.reveal .side:first-of-type { translate: 40px 0; }
html.io .trio.reveal .side:last-of-type { translate: -40px 0; }
html.io .trio.reveal.in .side { opacity: 1; translate: none; }

/* ── Tilt (desktop pointer) ───────────────────────────────────────────────────────────── */
[data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease); }
[data-tilt].tilting { transition: transform .18s linear; }

@media (max-width: 920px) {
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  .hero-stage { min-height: 700px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress, .aura { display: none; }
  [data-tilt] { transform: none; }
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-c-gold { --c: var(--gold) !important; }
.sx-c-accent { --c: var(--accent) !important; }
.sx-c-info { --c: var(--info) !important; }
.sx-c-earth { --c: var(--earth) !important; }
.sx-c-leaf { --c: var(--leaf) !important; }
.sx-c-new-moon { --c: var(--new-moon) !important; }