/* ==========================================================================
   Premium hero atmosphere layer
   Purely additive. No markup, copy, layout, sizing or asset is changed here.
   Hooks onto structure that already exists in the approved page exports:
     .lp-hero / .lp-hero-body / .lp-hero-title / .lp-hero-media
     .event-live-pill / .lp-urgency / .lp-countdown / .fp-progress-shell
     [data-premium-button="primary"] / .lp-technical-art
   Per-page identity comes from the existing body[data-funnel-page] attribute.
   ========================================================================== */

/* ---------- 1. Per-page palette tokens ---------------------------------- */

body[data-premium-theme] {
  --ph-accent: 210 100% 62%;
  --ph-accent-soft: 214 92% 70%;
  --ph-base-1: #060b16;
  --ph-base-2: #0b1830;
  --ph-pool-size: 120% 78%;
  --ph-pool-x: 50%;
  --ph-pool-y: 26%;
  --ph-pool-alpha: 0.3;
  --ph-halo-alpha: 0.16;
  --ph-grain-alpha: 0.035;
  --ph-vignette: 0.68;
  --ph-drift: 26s;
}

/* Blue family ------------------------------------------------------------ */
body[data-premium-theme="blue"] {
  --ph-accent: 214 100% 63%;
  --ph-accent-soft: 205 100% 74%;
  --ph-base-1: #050a15;
  --ph-base-2: #0b1830;
  --ph-base-3: #071021;
}

/* Gold family ------------------------------------------------------------ */
body[data-premium-theme="gold"] {
  --ph-accent: 41 92% 60%;
  --ph-accent-soft: 45 96% 72%;
  --ph-base-1: #0b0803;
  --ph-base-2: #241906;
  --ph-base-3: #120c04;
}

/* Page-by-page character ------------------------------------------------- */

/* Primary registration - flagship, strong central light pool */
body[data-funnel-page="home2"] {
  --ph-pool-size: 118% 82%;
  --ph-pool-y: 24%;
  --ph-pool-alpha: 0.42;
  --ph-halo-alpha: 0.22;
  --ph-base-2: #0d1c38;
}

/* Alternate registration - cooler, wider, horizon-like */
body[data-funnel-page="home"] {
  --ph-accent: 199 100% 62%;
  --ph-pool-size: 170% 62%;
  --ph-pool-y: 40%;
  --ph-pool-alpha: 0.3;
  --ph-halo-alpha: 0.14;
  --ph-base-2: #071a2c;
  --ph-drift: 34s;
}

/* VIP - warmest, richest champagne */
body[data-funnel-page="smbvip"] {
  --ph-pool-size: 126% 86%;
  --ph-pool-y: 26%;
  --ph-pool-alpha: 0.4;
  --ph-halo-alpha: 0.24;
  --ph-base-2: #2c1e07;
  --ph-grain-alpha: 0.045;
}

/* Confirmations - calm, settled */
body[data-funnel-kind="confirmation"] {
  --ph-pool-size: 108% 66%;
  --ph-pool-y: 32%;
  --ph-pool-alpha: 0.26;
  --ph-halo-alpha: 0.12;
  --ph-drift: 38s;
}

/* Success / onboarding - brighter, celebratory lift */
body[data-funnel-kind="onboarding"] {
  --ph-pool-size: 132% 74%;
  --ph-pool-y: 22%;
  --ph-pool-alpha: 0.44;
  --ph-halo-alpha: 0.24;
  --ph-drift: 22s;
}

/* Hubs - restrained workspace tone */
body[data-funnel-kind="hub"] {
  --ph-pool-size: 150% 52%;
  --ph-pool-y: 8%;
  --ph-pool-alpha: 0.2;
  --ph-halo-alpha: 0.08;
  --ph-grain-alpha: 0.028;
  --ph-drift: 44s;
}

/* ---------- 2. Layered hero backdrop ------------------------------------
   The exported pages already use .lp-hero::before (grid) and .lp-hero::after
   (diagonal sheen). Those are kept. The new atmosphere rides on the hero's
   own background stack plus the free pseudo-elements of .lp-hero-body.      */

body[data-premium-theme] .lp-hero {
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(
      var(--ph-pool-size) at var(--ph-pool-x) var(--ph-pool-y),
      hsl(var(--ph-accent) / var(--ph-pool-alpha)) 0%,
      hsl(var(--ph-accent) / calc(var(--ph-pool-alpha) * 0.42)) 26%,
      hsl(var(--ph-accent) / calc(var(--ph-pool-alpha) * 0.12)) 52%,
      transparent 74%
    ),
    radial-gradient(
      64% 46% at 12% 88%,
      hsl(var(--ph-accent-soft) / calc(var(--ph-halo-alpha) * 0.9)) 0%,
      transparent 66%
    ),
    radial-gradient(
      60% 44% at 90% 12%,
      hsl(var(--ph-accent-soft) / calc(var(--ph-halo-alpha) * 0.8)) 0%,
      transparent 64%
    ),
    linear-gradient(
      178deg,
      var(--ph-base-1) 0%,
      var(--ph-base-2) 42%,
      var(--ph-base-3, var(--ph-base-1)) 76%,
      var(--ph-base-1) 100%
    );
  background-size: cover;
  background-position: center;
}

body[data-premium-theme] .lp-hero::before {
  opacity: 0.55;
}

body[data-premium-theme] .lp-hero::after {
  opacity: 0.8;
}

/* Content wrapper carries the drifting light and the grain/vignette */
body[data-premium-theme] .lp-hero-body {
  position: relative;
  isolation: isolate;
}

body[data-premium-theme] .lp-hero-body::before {
  content: "";
  position: absolute;
  top: -22%;
  left: 50%;
  width: 132vw;
  height: 150%;
  margin-left: -66vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      42% 40% at 32% 26%,
      hsl(var(--ph-accent-soft) / calc(var(--ph-halo-alpha) * 1.6)) 0%,
      transparent 66%
    ),
    radial-gradient(
      44% 40% at 72% 70%,
      hsl(var(--ph-accent) / calc(var(--ph-halo-alpha) * 1.5)) 0%,
      transparent 66%
    );
  filter: blur(26px);
  will-change: transform, opacity;
  animation: ph-drift var(--ph-drift) ease-in-out infinite alternate;
}

body[data-premium-theme] .lp-hero-body::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 132vw;
  height: 168%;
  margin-left: -66vw;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      118% 104% at 50% 40%,
      transparent 36%,
      rgb(0 0 0 / calc(var(--ph-vignette) * 0.4)) 74%,
      rgb(0 0 0 / var(--ph-vignette)) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  background-blend-mode: normal, soft-light;
  opacity: 0.9;
}

@keyframes ph-drift {
  from {
    transform: translate3d(-1.6%, -1.2%, 0) scale(1.02);
    opacity: 0.75;
  }
  to {
    transform: translate3d(1.8%, 1.4%, 0) scale(1.07);
    opacity: 1;
  }
}


/* Existing candlestick art: keep it, push it back */
body[data-premium-theme] .lp-hero .lp-technical-art {
  opacity: 0.42;
  filter: blur(0.4px) saturate(1.06);
  transition: opacity 0.6s ease;
}

.lp-hero .lp-chart-left {
  mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
}

.lp-hero .lp-chart-right {
  mask-image: linear-gradient(270deg, transparent 0%, #000 46%, #000 100%);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 46%, #000 100%);
}

/* ---------- 3. Hero pieces: finish, not repositioning ------------------- */

/* Live-event badge */
.event-live-pill {
  background:
    linear-gradient(
      180deg,
      hsl(var(--ph-accent) / 0.16) 0%,
      hsl(var(--ph-accent) / 0.06) 100%
    );
  border: 1px solid hsl(var(--ph-accent-soft) / 0.32);
  border-radius: 999px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.08) inset,
    0 10px 30px -14px hsl(var(--ph-accent) / 0.6);
}

.event-live-pill .event-record-dot {
  box-shadow: 0 0 0 0 rgb(255 76 76 / 0.5);
  animation: ph-pulse 2.6s ease-out infinite;
}

@keyframes ph-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(255 76 76 / 0.45);
  }
  70% {
    box-shadow: 0 0 0 9px rgb(255 76 76 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(255 76 76 / 0);
  }
}

/* Headline: same words, same highlight colours, a touch of luminance */
.lp-hero-title h1 {
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgb(0 0 0 / 0.42);
}

.lp-hero-title h1 strike {
  text-shadow: 0 0 22px hsl(var(--ph-accent) / 0.4);
}

.lp-hero .elSubheadline {
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.5);
}

/* Video frame: identical size, richer surround */
.lp-hero-media .elVideoWrapper {
  position: relative;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px hsl(var(--ph-accent-soft) / 0.22),
    0 34px 90px -34px hsl(var(--ph-accent) / 0.55),
    0 24px 70px -30px rgb(0 0 0 / 0.85);
}

.lp-hero-media .elVideoWrapper::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 24px;
  pointer-events: none;
  background: radial-gradient(
    68% 62% at 50% 50%,
    hsl(var(--ph-accent) / 0.24) 0%,
    transparent 72%
  );
  filter: blur(14px);
}

.lp-hero-media .video-poster {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp-hero-media .video-poster:hover {
  transform: scale(1.004);
}

/* Primary CTA */
[data-premium-button="primary"] {
  position: relative;
  transition:
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.28s ease,
    filter 0.28s ease;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.22) inset,
    0 -1px 0 rgb(0 0 0 / 0.18) inset,
    0 18px 42px -18px hsl(var(--ph-accent) / 0.85);
}

[data-premium-button="primary"]:hover {
  transform: translateY(-2px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.28) inset,
    0 -1px 0 rgb(0 0 0 / 0.2) inset,
    0 26px 56px -18px hsl(var(--ph-accent) / 0.95);
}

[data-premium-button="primary"]:active {
  transform: translateY(0);
}

/* Trust line under the CTA */
.lp-hero .elParagraph {
  letter-spacing: 0.012em;
  opacity: 0.92;
}

/* Top urgency bar + countdown */
.lp-urgency {
  background:
    linear-gradient(
      180deg,
      hsl(var(--ph-accent) / 0.1) 0%,
      rgb(0 0 0 / 0.42) 100%
    ),
    var(--ph-base-1);
  border-bottom: 1px solid hsl(var(--ph-accent-soft) / 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lp-countdown .lp-clock-unit {
  border-color: hsl(var(--ph-accent-soft) / 0.24);
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.06) 0%,
    rgb(255 255 255 / 0.02) 100%
  );
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset;
}

.lp-countdown .lp-clock-value {
  text-shadow: 0 0 16px hsl(var(--ph-accent) / 0.45);
}

/* Progress bars on confirmation / upgrade pages */
.premium-progress {
  border-color: hsl(var(--ph-accent-soft) / 0.3);
  background: rgb(0 0 0 / 0.4);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.05) inset;
  overflow: hidden;
}

.premium-progress-fill {
  box-shadow:
    0 0 18px hsl(var(--ph-accent) / 0.55),
    0 1px 0 rgb(255 255 255 / 0.24) inset;
}

.fp-progress-shell {
  background: linear-gradient(
    180deg,
    hsl(var(--ph-accent) / 0.06) 0%,
    transparent 100%
  );
}

/* Hub headers keep the calmer treatment */
.hub-header.lp-hero::after {
  --ph-vignette: 0.5;
}

.hub-header .hub-brand-date {
  text-shadow: 0 0 18px hsl(var(--ph-accent) / 0.4);
}

/* ---------- 4. Reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body[data-premium-theme] .lp-hero-body::before {
    animation: none;
    transform: none;
  }

  .event-live-pill .event-record-dot {
    animation: none;
  }

  .lp-hero-media .video-poster,
  [data-premium-button="primary"] {
    transition: none;
  }
}