/* Motive site: ambient light, glass, the hero stage and motion.
   Progressive: without JS or with prefers-reduced-motion the page is complete and still (the hero shows the static
   Enneagram figure). html.motion is set in <head> only when motion is allowed. */

/* ── Ambient: the app's brass and plum washes behind everything ───────────── */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--wash); }
.aura { /* cursor light on desktop, positioned by js/site.js */
  position: fixed; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .085), 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; transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0)); background: linear-gradient(90deg, rgba(var(--accent-rgb), .3), var(--accent));
}
@supports (animation-timeline: scroll()) {
  .progress { transform: none; animation: progress linear both; animation-timeline: scroll(root); }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Glass cards on the ambient wash ─────────────────────────────────────── */
.glass {
  position: relative; border: 1px solid var(--line-2); background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px -50px var(--drop);
}
.glass::before { /* soft light under the cursor (desktop) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), .12), transparent 70%);
}
.glass:hover::before { opacity: 1; }
.price-card.glass {
  border-color: rgba(var(--accent-rgb), .42);
  background: radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb), .18), transparent 70%), var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 50px 120px -60px rgba(var(--accent-rgb), calc(var(--glow) + .2));
}

/* ── The hero stage: the Enneagram figure 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; overflow: hidden;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 24px) 0 clamp(56px, 9vh, 104px);
}
.hero-figure, .hero-canvas {
  position: absolute; left: 50%; top: calc(var(--nav-h) + 3vh); z-index: -2;
  width: min(84vw, 58vh, 620px); height: auto; aspect-ratio: 1; transform: translateX(-50%);
}
.hero-figure { color: var(--accent); opacity: .85; transition: opacity 1.2s var(--ease); }
.hero-figure text { font-family: var(--display); font-size: 6px; font-weight: 600; fill: currentColor; }
.hero-canvas { opacity: 0; transition: opacity 1.6s var(--ease); }
html.motion .hero-canvas.on { opacity: 1; }
html.motion .hero-canvas.on ~ .hero-figure { opacity: 0; }
.hero-stage::after { /* keeps the copy readable over the figure, fades the stage into the page */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 42% at 50% 78%, var(--bg) 0%, transparent 100%);
}
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue:hover { color: var(--text); }
.hero .kicker { background: var(--nav-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 700px) { .scroll-cue { display: none; } }
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--accent), 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; } }

/* hero copy rises in on load */
html.motion .hero-copy > * { animation: rise 1s var(--ease) both; }
html.motion .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.motion .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.motion .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.motion .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Scroll reveals (IntersectionObserver in js/site.js adds .in) ─────────── */
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 .reveal.d3 { transition-delay: .24s; }

/* the overview phones settle as they arrive */
html.io .trio .phone { transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); }
html.io .trio:not(.in) .phone.main { transform: translateY(40px) scale(.97); }
@media (min-width: 701px) { html.io .trio:not(.in) .phone:not(.main) { transform: translateY(90px) scale(.86); opacity: 0; } }

/* phones float a little on desktop */
@media (hover: hover) and (pointer: fine) {
  html.motion .trio.in .phone.main { animation: float 9s ease-in-out 1.2s infinite; }
}
@keyframes float { 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}