/* TunerPal site: ambience, glass, the hero gauge stage and scroll motion.
   Classes on <html>, all set by script:
     js       scripts run
     motion   no reduced-motion preference: reveals, the progress bar, the cursor aura and the live gauge
     live     the hero canvas is drawing (the still SVG gauge steps aside)
     io       no CSS scroll-driven animations: site.js reveals with IntersectionObserver
     pointer  a mouse is over the page
   Without them the page is complete and still: no-JS and reduced motion get the static design. */

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), .1), rgba(var(--accent-2-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: var(--cta); box-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
}
html:not(.motion) .progress { display: none; }
@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 ambient gradient */
.glass {
  position: relative; isolation: isolate; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), 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 80px -44px rgba(0, 0, 0, .9);
}
.glass::before {
  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), .14), 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), .16), transparent 70%), var(--glass); }

/* ── Hero stage: the tuner gauge above the wordmark ───────── */
.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;
  min-height: 100vh; min-height: 100svh; padding-top: calc(var(--nav-h) + 24px);
}
.hero-sky { position: absolute; inset: 0; z-index: -3; background: var(--sky); }
.hero-stage::after {
  content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero-gauge { /* the still gauge: no JS, reduced motion, or until the canvas draws */
  flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; min-height: 170px; padding: 0 var(--gutter) 6px;
  transition: opacity .9s var(--ease);
}
.hero-gauge svg { width: min(620px, 92vw); height: auto; max-height: 100%; overflow: visible; }
.g-arc { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; opacity: .75; }
.g-glow { fill: none; stroke: var(--in-tune); stroke-width: 10; stroke-linecap: round; opacity: .14; }
.g-tick { stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.g-tick.minor { stroke-width: 1.5; opacity: .35; }
.g-needle { stroke: var(--in-tune); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(var(--in-tune-rgb), .8)); }
.g-hub { fill: var(--bg); stroke: var(--accent-2); stroke-width: 5; }
.g-flat { fill: var(--flat); font: 600 34px var(--sans); }
.g-sharp { fill: var(--sharp); font: 600 34px var(--sans); }
html.live .hero-gauge { opacity: 0; }
.hero-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
html.live .hero-canvas { opacity: 1; }
.hero-copy { position: relative; padding-bottom: clamp(48px, 9vh, 100px); }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 28px; 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(--text); }
.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; } }

/* ── Scroll reveals ───────────────────────────────────────── */
@supports (animation-timeline: view()) {
  html.motion .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  html.motion .reveal.d1 { animation-range: entry 8% cover 28%; }
  html.motion .reveal.d2 { animation-range: entry 16% cover 32%; }
}
@keyframes reveal { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: none; } }
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; }

/* the phone settles in as the overview arrives */
html.motion .overview .phone { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
@supports not (animation-timeline: view()) { html.motion .overview .phone { animation: none; } }
@keyframes rise { from { transform: perspective(1400px) rotateX(18deg) translateY(60px) scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }

/* desktop tilt on the screenshots */
[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: 640px) {
  .hero-gauge { min-height: 130px; }
  .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .progress, .aura, .hero-canvas { display: none; }
  .hero-gauge { opacity: 1 !important; }
  [data-tilt] { transform: none; }
}