/**
 * PM Media — $50k Cinematic HD layer (additive · motion/visual only)
 * Does NOT touch funnel, webhooks, Lilly rails, opt-in, or revenue engine logic.
 * Colors: existing --cyan / --magenta / --gold / dark surfaces.
 */

:root {
  --pm50-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pm50-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --pm50-cyan: var(--cyan, #00d4ee);
  --pm50-magenta: var(--magenta, #e8328a);
  --pm50-gold: var(--gold, #f0c14b);
}

html.pm-50k-cinema {
  scroll-behavior: smooth;
}

/* ── Cinematic grade (whole page) ── */
html.pm-50k-cinema body {
  position: relative;
}

.pm50-grade {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 8500;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(0, 212, 238, 0.12), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(232, 50, 138, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.35) 100%);
}

.pm50-letterbox {
  pointer-events: none;
  position: fixed;
  left: 0;
  right: 0;
  height: clamp(10px, 2.2vh, 28px);
  z-index: 8600;
  background: #020206;
  opacity: 0.72;
}
.pm50-letterbox--top { top: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.pm50-letterbox--bot { bottom: 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); }

.pm50-vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 8490;
  background: radial-gradient(ellipse 75% 65% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0.85;
}

/* Film grain — HD texture without heavy assets */
.pm50-grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 8510;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: pm50GrainShift 0.4s steps(2) infinite;
}
@keyframes pm50GrainShift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1.5%, 1%); }
  100% { transform: translate(1%, -0.5%); }
}

/* Hero light-leak whip (one-shot on load) */
.pm50-leak {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 8520;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(0, 212, 238, 0.18) 48%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(232, 50, 138, 0.16) 52%,
    transparent 65%
  );
  mix-blend-mode: screen;
}
.pm50-leak.is-fire {
  animation: pm50LeakWhip 1.15s var(--pm50-ease) forwards;
}
@keyframes pm50LeakWhip {
  0% { opacity: 0; transform: translateX(-28%) skewX(-8deg); }
  35% { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(38%) skewX(-8deg); }
}

/* ── HD media presentation ── */
html.pm-50k-cinema img,
html.pm-50k-cinema video {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}

/* Logo asset stays EXACT same PNG — steady, no flicker/halo pulse */
html.pm-50k-cinema .pm-neon-sign-stage {
  perspective: 1600px;
}

html.pm-50k-cinema .pm-neon-sign__glow {
  opacity: 0.4 !important;
  filter: blur(36px) saturate(1.05);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0, 240, 255, 0.2), transparent 55%),
    radial-gradient(ellipse at 70% 55%, rgba(255, 46, 166, 0.16), transparent 55%);
  animation: none !important;
}

html.pm-50k-cinema .pm-neon-sign__glass {
  opacity: 0.28 !important;
  mix-blend-mode: soft-light;
  animation: none !important;
}

/* Keep float + neon pop — do not flatten transform */
html.pm-50k-cinema .pm-neon-sign.is-on .pm-neon-sign__tube,
html.pm-50k-cinema .pm-neon-sign.is-on .hero-logo-img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Soft cinematic spotlight behind the mark (not on the artwork) — keep on black only */
html.pm-50k-cinema .pm-neon-sign__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: #000;
  pointer-events: none;
  filter: none;
}

/* Single Miami plate — hide duplicate blur layer; neon-sign-bg owns the image */
html.pm-50k-cinema .hero-8k-visual {
  display: none !important;
}

html.pm-50k-cinema .pm-neon-sign-bg {
  will-change: auto;
  /* Silver wave crests — not chalk-white foam */
  filter: saturate(1.05) contrast(1.12) brightness(1.02) hue-rotate(-6deg) !important;
  animation: none !important;
  transform: scale(1.02) !important;
}

html.pm-50k-cinema .pm-neon-sign-veil {
  background:
    radial-gradient(ellipse 72% 58% at 50% 48%, transparent 52%, rgba(2, 6, 12, 0.05) 100%),
    linear-gradient(180deg, rgba(2, 6, 12, 0.02) 0%, transparent 55%, rgba(2, 6, 12, 0.12) 100%) !important;
}

/* Kill muddy hero canvases — keep logo + Miami photo crisp */
html.pm-50k-cinema .pm-fiber-canvas,
html.pm-50k-cinema .pm-noon-wave-canvas,
html.pm-50k-cinema .pm-noon-webgl,
html.pm-50k-cinema .hero-engine-canvas {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Dial vignette so hero logo stays bright */
html.pm-50k-cinema #hero ~ .pm50-vignette,
html.pm-50k-cinema .pm50-vignette {
  opacity: 0.55;
  background: radial-gradient(ellipse 85% 75% at 50% 35%, transparent 45%, rgba(0, 0, 0, 0.35) 100%);
}

/* Section cinematic frames */
html.pm-50k-cinema .section,
html.pm-50k-cinema .pm-ugc-explainer,
html.pm-50k-cinema #visual-world,
html.pm-50k-cinema #videos,
html.pm-50k-cinema #academy,
html.pm-50k-cinema #floors {
  position: relative;
  isolation: isolate;
}

html.pm-50k-cinema .section::before,
html.pm-50k-cinema .pm-ugc-explainer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 212, 238, 0.04), transparent 30%, transparent 70%, rgba(232, 50, 138, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.25));
  opacity: 0;
  transition: opacity 0.8s var(--pm50-ease);
}
html.pm-50k-cinema .section.is-pm50-inview::before,
html.pm-50k-cinema .pm-ugc-explainer.is-pm50-inview::before {
  opacity: 1;
}
/* #videos: no cinematic wash over posters — keep explainers clear */
html.pm-50k-cinema #videos::before,
html.pm-50k-cinema #videos.is-pm50-inview::before {
  opacity: 0 !important;
  background: none !important;
}

/* Gallery / proof tiles — HD film stills */
html.pm-50k-cinema #visual-world figure,
html.pm-50k-cinema #visual-world .gallery-tile,
html.pm-50k-cinema #visual-world .visual-card,
html.pm-50k-cinema .pm-niche-tile,
html.pm-50k-cinema [class*="visual-world"] figure {
  overflow: hidden;
  border-radius: 4px;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--pm50-ease), box-shadow 0.55s var(--pm50-ease);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

html.pm-50k-cinema #visual-world figure img,
html.pm-50k-cinema .pm-niche-tile img,
html.pm-50k-cinema #visual-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  filter: contrast(1.04) saturate(1.08) brightness(1.02);
  transition: transform 1.1s var(--pm50-ease), filter 0.6s ease;
}
/* Explainers stay crystal clear — cinema grade never washes posters */
html.pm-50k-cinema #videos .video-poster > img:not(.pm-poster-logo),
html.pm-50k-cinema #videos .video-poster img:first-of-type {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.01);
}

html.pm-50k-cinema #visual-world figure:hover img,
html.pm-50k-cinema .pm-niche-tile:hover img {
  transform: scale(1.12);
  filter: contrast(1.08) saturate(1.14) brightness(1.05);
}

html.pm-50k-cinema #visual-world figure:hover,
html.pm-50k-cinema .pm-niche-tile:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--pm50-cyan) 35%, transparent),
    0 0 28px color-mix(in srgb, var(--pm50-magenta) 20%, transparent);
}

/* UGC player — cinema frame */
html.pm-50k-cinema .pm-ugc-player-wrap,
html.pm-50k-cinema .pm-ugc-player {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 60px color-mix(in srgb, var(--pm50-magenta) 15%, transparent);
}

html.pm-50k-cinema .pm-ugc-player video,
html.pm-50k-cinema .pm-ugc-player img {
  filter: contrast(1.05) saturate(1.08);
}

html.pm-50k-cinema .pm-ugc-player-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* UGC cinema rails + timecode feel */
html.pm-50k-cinema .pm-ugc-player-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, var(--pm50-cyan), var(--pm50-magenta), var(--pm50-gold));
  opacity: 0.85;
}
html.pm-50k-cinema .pm-ugc-player-wrap {
  outline: 1px solid rgba(255, 255, 255, 0.06);
  outline-offset: 10px;
}

/* Book / questionnaire — convert-stage polish (visual only) */
html.pm-50k-cinema #book {
  position: relative;
}
html.pm-50k-cinema #book::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 212, 238, 0.06), transparent 60%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2));
  opacity: 0;
  transition: opacity 1s var(--pm50-ease);
}
html.pm-50k-cinema #book.is-pm50-inview::after {
  opacity: 1;
}
html.pm-50k-cinema #book .form-card,
html.pm-50k-cinema #book form,
html.pm-50k-cinema #book .book-panel {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.6s var(--pm50-ease), transform 0.6s var(--pm50-ease);
}
html.pm-50k-cinema #book.is-pm50-inview .form-card,
html.pm-50k-cinema #book.is-pm50-inview form,
html.pm-50k-cinema #book.is-pm50-inview .book-panel {
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.48),
    0 0 0 1px color-mix(in srgb, var(--pm50-cyan) 28%, transparent),
    0 0 40px color-mix(in srgb, var(--pm50-cyan) 12%, transparent);
}

/* Eyebrow kinetic rule */
html.pm-50k-cinema .eyebrow {
  position: relative;
  display: inline-block;
}
html.pm-50k-cinema .eyebrow::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  margin-top: 0.55em;
  background: linear-gradient(90deg, var(--pm50-cyan), transparent);
  transition: width 0.9s var(--pm50-ease);
}
html.pm-50k-cinema .eyebrow.is-visible::after,
html.pm-50k-cinema .is-pm50-inview .eyebrow::after {
  width: min(7.5rem, 40vw);
}

/* Kinetic text */
.pm50-split .pm50-char {
  display: inline-block;
  will-change: transform, opacity;
}

html.pm-50k-cinema .gradient-text,
html.pm-50k-cinema .hero-title-noon,
html.pm-50k-cinema h1,
html.pm-50k-cinema h2.gradient-text {
  text-shadow:
    0 0 40px color-mix(in srgb, var(--pm50-cyan) 25%, transparent),
    0 2px 24px rgba(0, 0, 0, 0.55);
}

html.pm-50k-cinema .eyebrow {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.92;
}

/* Reveal states (JS toggles) */
.pm50-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 0.85s var(--pm50-ease),
    transform 0.85s var(--pm50-ease),
    filter 0.85s var(--pm50-ease);
  transition-delay: var(--pm50-delay, 0ms);
}
.pm50-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.pm50-stagger-child {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.7s var(--pm50-ease),
    transform 0.7s var(--pm50-ease);
  transition-delay: var(--pm50-delay, 0ms);
}
.pm50-stagger-child.is-visible {
  opacity: 1;
  transform: none;
}

/* 3D tilt cards */
.pm50-tilt {
  transform-style: preserve-3d;
  transition: transform 0.35s var(--pm50-ease);
  will-change: transform;
}

/* Magnetic CTA polish */
html.pm-50k-cinema .hero-cta .btn,
html.pm-50k-cinema .btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--pm50-spring), box-shadow 0.35s ease;
}
html.pm-50k-cinema .hero-cta .btn::after,
html.pm-50k-cinema .btn-primary::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-120%) rotate(8deg);
  transition: transform 0.8s var(--pm50-ease);
}
html.pm-50k-cinema .hero-cta .btn:hover::after,
html.pm-50k-cinema .btn-primary:hover::after {
  transform: translateX(120%) rotate(8deg);
}
html.pm-50k-cinema .hero-cta .btn:hover,
html.pm-50k-cinema .btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 24px color-mix(in srgb, var(--pm50-cyan) 30%, transparent);
}

/* Scroll progress — cinematic bar */
html.pm-50k-cinema .pm-scroll-progress,
html.pm-50k-cinema #pm-scroll-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--pm50-cyan), var(--pm50-magenta), var(--pm50-gold)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pm50-cyan) 50%, transparent);
  opacity: 0.95;
}

/* Light theme: dial back letterbox/vignette */
html[data-theme="light"].pm-50k-cinema .pm50-letterbox,
html[data-theme="light"].pm-50k-cinema .pm50-vignette {
  opacity: 0.15;
}
html[data-theme="light"].pm-50k-cinema .pm50-grade {
  opacity: 0.2;
  mix-blend-mode: multiply;
}
html[data-theme="light"].pm-50k-cinema .pm50-grain {
  opacity: 0.035;
  mix-blend-mode: multiply;
}
html[data-theme="light"].pm-50k-cinema .pm50-leak {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.pm-50k-cinema { scroll-behavior: auto; }
  .pm50-reveal,
  .pm50-stagger-child,
  .pm50-tilt,
  html.pm-50k-cinema .pm-neon-sign.is-on,
  html.pm-50k-cinema #visual-world figure img {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .pm50-letterbox { display: none; }
  .pm50-grade { opacity: 0.25; }
  .pm50-grain { animation: none; opacity: 0.04; }
  .pm50-leak { display: none; }
}

@media (max-width: 900px), (pointer: coarse) {
  .pm50-letterbox,
  .pm50-letterbox--top,
  .pm50-letterbox--bot {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
  }
  html.pm-50k-cinema .pm-neon-sign.is-on {
    transform: none;
  }
  /* Mobile: never leave images/text blurred until tap — always clear */
  .pm50-reveal,
  .pm50-stagger-child,
  .pm50-reveal.is-visible,
  .pm50-stagger-child.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html.pm-50k-cinema #visual-world figure img,
  html.pm-50k-cinema #visual-world img {
    filter: none !important;
    transform: none !important;
  }
}