/* =========================================================================
   The Fried Hangover 1.2 — FINISH layer ($10k finishing sweep, stage 5/7)
   Loaded on ALL restyled sub-pages ABOVE nothing (last in the cascade) so it
   only *adds* a cohesive artistic layer: scroll-synced background animation,
   parallax bg↔fg drift, floating ember field, animated dividers, kinetic
   accents. GPU transforms + opacity only. Fully reduced-motion safe.
   ========================================================================= */

/* --- 1. Scroll-synced background: the aurora drifts + hue-shifts AS you
       scroll, moving in concert with the foreground parallax (scroll.js). -- */
.fh-page.is-premium .fh-aurora {
  filter: blur(60px) saturate(130%) hue-rotate(calc(var(--fh-scroll, 0) * 46deg));
  transform: translate3d(0, calc(var(--fh-scrollpx, 0) * -0.045px), 0);
  will-change: transform, filter;
}
.fh-page.is-premium .fh-grain {
  /* grain drifts a hair the opposite way → parallax depth */
  transform: translate3d(0, calc(var(--fh-scrollpx, 0) * 0.02px), 0);
}

/* --- 2. Floating ember field (JS injects <i> children). A second, slower
       depth layer behind content that also drifts with scroll. ------------- */
.fh-embers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, calc(var(--fh-scrollpx, 0) * -0.07px), 0);
  will-change: transform;
}
.fh-embers i {
  position: absolute;
  bottom: -3vh;
  left: var(--x, 50%);
  width: var(--sz, 6px);
  height: var(--sz, 6px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,201,128,.95), rgba(204,42,32,.5) 60%, transparent 72%);
  filter: blur(.4px);
  opacity: 0;
  animation: emberRise var(--dur, 17s) linear infinite;
  animation-delay: var(--dly, 0s);
  will-change: transform, opacity;
}
@keyframes emberRise {
  0%   { transform: translate3d(0, 0, 0) scale(.55); opacity: 0; }
  12%  { opacity: .65; }
  50%  { transform: translate3d(var(--drift, 24px), -50vh, 0) scale(1); }
  88%  { opacity: .4; }
  100% { transform: translate3d(calc(var(--drift, 24px) * -1), -96vh, 0) scale(.35); opacity: 0; }
}

/* keep the ember layer beneath real content (matches aurora z-index rule) */
.fh-page.is-premium > main,
.fh-page.is-premium > #fh-nav,
.fh-page.is-premium > #fh-footer,
.fh-page.is-premium > .fh-footer { position: relative; z-index: 1; }

/* --- 3. Animated section divider — a gold sheen sweeps a hairline rule. --- */
.fh-rule {
  position: relative;
  height: 1px;
  border: 0;
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(30px, 5vw, 56px) auto;
  background: linear-gradient(90deg, transparent, var(--glass-brd, rgba(212,175,55,.28)), transparent);
  overflow: visible;
}
.fh-rule::after {
  content: "";
  position: absolute;
  top: -1px; left: -30%;
  width: 30%; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500, #D4AF37), transparent);
  filter: blur(1px);
  animation: ruleSweep 6s var(--ease-out, cubic-bezier(.2,.7,.2,1)) infinite;
}
@keyframes ruleSweep {
  0%   { left: -30%; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* --- 4. Hero kinetic accent — a soft conic glow bloom behind the title. --- */
.px-hero { isolation: isolate; }
.px-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: 8%;
  width: min(680px, 82%); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(60% 60% at 50% 40%, rgba(240,69,58,.22), transparent 70%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
  animation: heroPulse 7s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .9;  transform: translateX(-50%) scale(1.08); }
}

/* --- 5. Kinetic gradient text gets a gentle position drift so the fire
       gradient reads alive even on non-.shine headings. ------------------- */
.grad-text, .grad-gold { background-size: 180% auto; }

/* --- reduced motion: freeze everything, keep it legible + static. -------- */
@media (prefers-reduced-motion: reduce) {
  .fh-page.is-premium .fh-aurora,
  .fh-page.is-premium .fh-grain,
  .fh-embers { transform: none !important; filter: blur(60px) saturate(130%) !important; }
  .fh-embers { display: none !important; }
  .fh-rule::after, .px-hero::before { animation: none !important; }
  .px-hero::before { opacity: .5; }
}

/* --- mobile: lighten the field (fewer, calmer embers handled in JS). ----- */
@media (max-width: 820px) {
  .px-hero::before { filter: blur(22px); }
}