/* =========================================================================
   ONE BOOST — premium.css
   Elevation layer. Loads AFTER animations.css (before responsive.css) so it
   enhances existing components. PURE visual/effect polish — no layout changes.
   Every animation is guarded for prefers-reduced-motion at the bottom.
   ========================================================================= */

/* ---------- 0. Horizontal-leak guard ----------
   Any decorative transform inside a section is clipped at the section edge,
   so it can NEVER widen the page (the mobile side-pan root cause).
   `clip` does NOT create a scroll container (unlike hidden) and, per spec,
   overflow-x:clip + overflow-y:visible is a valid combo → vertical overhangs
   (price tag, fps badge) stay visible. The sticky nav lives in <header>,
   not a section, so it is untouched. */
section, footer { overflow-x: clip; }

/* ---------- 1. Richer ambient background ---------- */
.bg-fx::before { opacity: .62; filter: blur(100px); }
.bg-fx::after  { opacity: .5; }

/* aurora layer injected by fx.js (sits behind everything) */
/* absolute inside .bg-fx (already fixed + inset:0 + overflow:hidden) — the
   parent clips the wide/animated glow so it can never cause horizontal scroll */
.fx-aurora {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.fx-aurora::before {
  content: ""; position: absolute; top: -18%; left: -6%; right: -6%; height: 72vh;
  background:
    radial-gradient(42% 60% at 22% 28%, color-mix(in srgb, var(--red) 24%, transparent), transparent 70%),
    radial-gradient(38% 55% at 80% 18%, color-mix(in srgb, var(--red-bright) 16%, transparent), transparent 72%);
  filter: blur(34px); opacity: .5;
  animation: ob2-drift 20s ease-in-out infinite alternate;
}
@keyframes ob2-drift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, 2.5%, 0) scale(1.08); }
}

/* ---------- 2. Hero cinematic FX ---------- */
/* cursor-follow spotlight + rising embers canvas (injected by fx.js) */
.hero-spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(460px circle at var(--sx, 72%) var(--sy, 28%),
              color-mix(in srgb, var(--red) 22%, transparent), transparent 60%);
  opacity: 0; transition: opacity .6s ease; mix-blend-mode: screen;
}
.hero:hover .hero-spot { opacity: 1; }
.fx-embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* animated shimmer on the highlighted headline word */
.hero-title .hl {
  background: linear-gradient(100deg, var(--red-bright) 0%, #ff9a8f 32%, var(--red-ink) 56%, var(--red-bright) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 26px var(--glow-soft));
  animation: ob2-shimmer 6s ease-in-out infinite;
}
@keyframes ob2-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.pill { box-shadow: 0 8px 24px -14px var(--glow); }

/* ---------- 3. Flagship cards — richer hover glow + red ring ---------- */
.feature-card, .fps-card, .guar-card {
  transition: transform .26s var(--ease), border-color .26s, box-shadow .32s;
}
.feature-card:hover, .fps-card:hover, .guar-card:hover,
.tl-item:hover, .step:hover, .stat:hover, .price-card:not(.featured):hover {
  box-shadow: 0 28px 60px -32px rgba(0,0,0,.85), 0 14px 44px -24px var(--glow);
}
.feature-card:hover, .fps-card:hover, .guar-card:hover {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line-2));
}

/* ---------- 4. Featured pricing plan — rotating gradient ring ----------
   ROOT-CAUSE NOTE: this used to rotate the whole pseudo-element
   (transform: rotate) — a rotating rectangle's bounding box swells past the
   card (max at 45°), creating ANIMATED horizontal overflow = the mobile
   side-to-side pan. Now only the conic-gradient ANGLE animates via a
   registered custom property: identical look, zero geometry change, zero
   overflow. Browsers without @property simply show a static ring. */
@property --ob-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.price-card.featured::before {
  content: ""; position: absolute; inset: -2px; border-radius: calc(var(--radius) + 2px);
  z-index: -1; --ob-angle: 0deg;
  background: conic-gradient(from var(--ob-angle),
    transparent 0 60%, var(--red-bright) 76%, #ff9a8f 83%, var(--red-bright) 90%, transparent 100%);
  animation: ob2-ring 5s linear infinite;
}
@keyframes ob2-ring { to { --ob-angle: 360deg; } }

/* ---------- 5. Section header accents ---------- */
.eyebrow { text-shadow: 0 0 24px var(--glow-soft); }
.head .eyebrow::after {
  content: ""; display: block; width: 32px; height: 2px; margin: 11px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: ob2-bar 3.6s ease-in-out infinite;
}
@keyframes ob2-bar { 0%, 100% { opacity: .45; width: 24px; } 50% { opacity: 1; width: 48px; } }
.h2 { text-shadow: 0 2px 44px rgba(0, 0, 0, .45); }

/* ---------- 6. Reveal — add a soft blur-in ---------- */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal:not(.in) { filter: blur(6px); }
.reveal.in { filter: blur(0); }
/* on narrow screens the compare cards stack — slide them in vertically so the
   pre-reveal ±34px translateX can never poke past the viewport edge */
@media (max-width: 960px) {
  .reveal-left, .reveal-right { transform: translateY(28px); }
}

/* ---------- 7. Number + accent glows ---------- */
.stat b, .gauge .num b, .fps-gain, .vt-score, .sec-vt b { text-shadow: 0 0 26px var(--glow-soft); }
.gauge .ring { filter: drop-shadow(0 0 18px var(--glow)); }

/* ---------- 8. Marquee chips + promo sheen ---------- */
.marquee-chip { transition: color .2s, box-shadow .3s, border-color .2s; }
.marquee-chip:hover { color: var(--text); box-shadow: 0 10px 26px -12px var(--glow); }

.promo { position: relative; overflow: hidden; }
.promo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .10) 50%, transparent 68%);
  transform: translateX(-100%);
  animation: ob2-sweep 7s ease-in-out infinite;
}
@keyframes ob2-sweep { 0%, 45% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }

/* ---------- 9. CTA band extra depth ---------- */
.cta-band { box-shadow: 0 44px 90px -54px var(--glow); }
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(62% 100% at 50% 125%, var(--glow-soft), transparent 60%);
}

/* ---------- 10. Button + nav depth ---------- */
.btn-primary { box-shadow: 0 12px 34px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav.scrolled { box-shadow: 0 12px 34px -24px rgba(0, 0, 0, .85), 0 1px 0 color-mix(in srgb, var(--red) 18%, transparent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora::before, .hero-title .hl, .head .eyebrow::after,
  .price-card.featured::before, .promo::after { animation: none !important; }
  .hero-spot, .fx-embers { display: none !important; }
  .reveal { transition: opacity .01s, transform .01s; }
  .reveal:not(.in) { filter: none; }
}