/**
 * PM Media — Live Colors-style motion polish (additive layer)
 * Keeps PM dark neon cyan/magenta theme — no LC CMYK palette swap.
 */

:root {
  --pm-fx-cyan: var(--cyan, #00c2e8);
  --pm-fx-magenta: var(--magenta, #e2187a);
  --pm-fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pm-fx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 1. Film grain overlay ── */
.pm-fx-grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  opacity: 0.035;
  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.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── 2. Hero soft atmospheric stage ── */
.pm-fx-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.55;
}

.pm-fx-hero-stage__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 25%, color-mix(in srgb, var(--pm-fx-cyan) 14%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 55% at 78% 68%, color-mix(in srgb, var(--pm-fx-magenta) 12%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(5, 5, 8, 0.15) 0%, rgba(5, 5, 8, 0.72) 100%);
}

.pm-fx-hero-stage__slide {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center 35%;
  filter: blur(14px) saturate(1.15) brightness(0.72);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 2.8s var(--pm-fx-ease), transform 8s var(--pm-fx-ease);
}

.pm-fx-hero-stage__slide.is-active {
  opacity: 0.42;
  transform: scale(1);
}

.pm-fx-hero-stage--gradient .pm-fx-hero-stage__wash {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 22% 38%, color-mix(in srgb, var(--pm-fx-cyan) 22%, transparent), transparent 62%),
    radial-gradient(ellipse 48% 40% at 76% 58%, color-mix(in srgb, var(--pm-fx-magenta) 18%, transparent), transparent 60%),
    conic-gradient(from 210deg at 50% 50%, transparent, color-mix(in srgb, var(--pm-fx-cyan) 8%, transparent), transparent, color-mix(in srgb, var(--pm-fx-magenta) 8%, transparent), transparent);
  animation: pmFxStageDrift 22s var(--pm-fx-ease) infinite alternate;
}

@keyframes pmFxStageDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-2.5%, 1.8%) scale(1.06); }
}

.hero > .container,
.hero .pm-noon-hero-inner,
.hero .hero-grid {
  position: relative;
  z-index: 1;
}

/* ── 3. Ink / blob ambient glow (scroll-linked) ── */
.pm-fx-ink-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.pm-fx-ink-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.28;
  will-change: transform;
  mix-blend-mode: screen;
}

.pm-fx-ink-blob--cyan {
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  background: radial-gradient(circle, color-mix(in srgb, var(--pm-fx-cyan) 55%, transparent) 0%, transparent 68%);
  top: 12%;
  left: -8%;
}

.pm-fx-ink-blob--magenta {
  width: min(36vw, 440px);
  height: min(36vw, 440px);
  background: radial-gradient(circle, color-mix(in srgb, var(--pm-fx-magenta) 50%, transparent) 0%, transparent 70%);
  bottom: 18%;
  right: -6%;
}

.pm-fx-ink-blob--accent {
  width: min(28vw, 340px);
  height: min(28vw, 340px);
  background: radial-gradient(circle, color-mix(in srgb, var(--pm-fx-cyan) 35%, var(--pm-fx-magenta) 25%, transparent) 0%, transparent 72%);
  top: 48%;
  left: 42%;
  opacity: 0.18;
}

/* ── 4. Reveal on scroll ── */
.pm-fx-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.992);
  filter: blur(7px);
  transition:
    opacity 0.78s var(--pm-fx-ease),
    transform 0.86s var(--pm-fx-ease),
    filter 0.72s var(--pm-fx-ease);
  transition-delay: calc(var(--pm-fx-i, 0) * 72ms);
}

.section.pm-fx-reveal {
  transform: translateY(14px);
  filter: blur(3px);
}

.pm-fx-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

/* ── 5. Static cinematic atmosphere: no scroll listener or repaint loop ── */
.pm-fx-light-leak {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(ellipse 38% 22% at 8% 18%, color-mix(in srgb, var(--pm-fx-cyan) 18%, transparent), transparent 72%),
    radial-gradient(ellipse 34% 20% at 94% 76%, color-mix(in srgb, var(--pm-fx-magenta) 14%, transparent), transparent 74%);
  mix-blend-mode: screen;
}

/* ── 6. 21st.dev-class spotlight border, rebuilt locally ── */
.pm-fx-spotlight {
  --pm-spot-x: 50%;
  --pm-spot-y: 50%;
  position: relative;
  isolation: isolate;
}

.pm-fx-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    190px circle at var(--pm-spot-x) var(--pm-spot-y),
    color-mix(in srgb, var(--pm-fx-cyan) 82%, #f4fbff),
    color-mix(in srgb, var(--pm-fx-magenta) 34%, transparent) 45%,
    transparent 72%
  );
  -webkit-mask: linear-gradient(#f4fbff 0 0) content-box, linear-gradient(#f4fbff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.42s var(--pm-fx-ease);
}

.pm-fx-spotlight:hover::after,
.pm-fx-spotlight:focus-within::after {
  opacity: 0.82;
}

/* ── 7. Magnetic CTA microphysics ── */
.pm-fx-magnetic {
  transform-origin: center;
  transition:
    transform 0.48s var(--pm-fx-spring),
    color 0.3s var(--pm-fx-ease),
    background-color 0.3s var(--pm-fx-ease),
    border-color 0.3s var(--pm-fx-ease),
    box-shadow 0.42s var(--pm-fx-ease) !important;
  will-change: transform;
}

.pm-fx-magnetic:active {
  transform: translate3d(0, 1px, 0) scale(0.97) !important;
  transition-duration: 90ms !important;
}

/* ── 8. Cinematic media frames: machined outer edge + inner highlight ── */
.pm-fx-media-frame {
  border-color: color-mix(in srgb, var(--pm-fx-cyan) 22%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(244, 251, 255, 0.035),
    inset 0 1px 0 rgba(244, 251, 255, 0.075),
    0 26px 70px -42px rgba(0, 194, 232, 0.52) !important;
}

.video-poster.pm-fx-media-frame {
  background:
    radial-gradient(circle at 22% 4%, rgba(0, 194, 232, 0.09), transparent 38%),
    #06070d;
}

.video-poster.pm-fx-media-frame::before,
.pm-video-visual.pm-fx-media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(244, 251, 255, 0.08), transparent 22%),
    linear-gradient(180deg, transparent 58%, rgba(4, 5, 10, 0.42));
  opacity: 0.58;
  transition: opacity 0.55s var(--pm-fx-ease);
}

.video-card:hover .video-poster.pm-fx-media-frame::before,
.pm-video-visual.pm-fx-media-frame:hover::before {
  opacity: 0.32;
}

.video-card .play-btn {
  box-shadow:
    inset 0 1px 0 rgba(244, 251, 255, 0.2),
    0 12px 36px -12px rgba(0, 194, 232, 0.72);
}

/* Keyboard focus remains visible above cinematic surfaces. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pm-fx-cyan) 80%, #f4fbff) !important;
  outline-offset: 4px !important;
}

/* ── 5. Scribble / draw stroke accent on section h2 ── */
.pm-fx-scribble-wrap {
  position: relative;
  display: inline-block;
}

.pm-fx-scribble {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.42em;
  height: 0.55em;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0.82;
}

.pm-fx-scribble path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.pm-fx-scribble.is-drawn path {
  animation: pmFxScribbleDraw 1.05s var(--pm-fx-ease) forwards;
}

@keyframes pmFxScribbleDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .pm-fx-grain,
  .pm-fx-ink-glow,
  .pm-fx-hero-stage,
  .pm-fx-light-leak {
    display: none !important;
  }

  .pm-fx-reveal,
  .pm-fx-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .pm-fx-scribble path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .pm-fx-hero-stage--gradient .pm-fx-hero-stage__wash {
    animation: none !important;
  }

  .pm-fx-magnetic,
  .pm-fx-magnetic:hover,
  .pm-fx-magnetic:active {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .pm-fx-spotlight::after {
    display: none !important;
  }
}

html[data-a11y-reduce-motion="true"] .pm-fx-grain,
html[data-a11y-reduce-motion="true"] .pm-fx-ink-glow,
html[data-a11y-reduce-motion="true"] .pm-fx-hero-stage,
html[data-a11y-reduce-motion="true"] .pm-fx-light-leak {
  display: none !important;
}

html[data-a11y-reduce-motion="true"] .pm-fx-reveal,
html[data-a11y-reduce-motion="true"] .pm-fx-reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html[data-a11y-reduce-motion="true"] .pm-fx-scribble path {
  animation: none !important;
  stroke-dashoffset: 0 !important;
}

html[data-a11y-reduce-motion="true"] .pm-fx-hero-stage--gradient .pm-fx-hero-stage__wash {
  animation: none !important;
}

html[data-a11y-reduce-motion="true"] .pm-fx-magnetic,
html[data-a11y-reduce-motion="true"] .pm-fx-magnetic:hover,
html[data-a11y-reduce-motion="true"] .pm-fx-magnetic:active {
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

html[data-a11y-reduce-motion="true"] .pm-fx-spotlight::after {
  display: none !important;
}

/* ── Light theme: keep motion accents legible (theme unchanged — ink swap only) ── */
html[data-theme="light"] .pm-fx-grain {
  opacity: 0.028;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .pm-fx-ink-blob {
  mix-blend-mode: multiply;
  opacity: 0.16;
}

html[data-theme="light"] .pm-fx-scribble {
  opacity: 0.9;
}

html[data-theme="light"] .pm-fx-hero-stage {
  opacity: 0.38;
}

html[data-theme="light"] .pm-fx-hero-stage__veil {
  background:
    radial-gradient(ellipse 80% 60% at 30% 25%, color-mix(in srgb, var(--pm-fx-cyan) 10%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 55% at 78% 68%, color-mix(in srgb, var(--pm-fx-magenta) 8%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(248, 250, 252, 0.82) 100%);
}

@media (max-width: 767px), (pointer: coarse) {
  .pm-fx-light-leak {
    opacity: 0.11;
  }

  .pm-fx-magnetic {
    will-change: auto;
  }

  .pm-fx-spotlight::after {
    display: none;
  }

  /* Mobile: NEVER blur content — clear images/text from first paint */
  .pm-fx-reveal,
  .pm-fx-reveal.is-in,
  .section.pm-fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .pm-fx-hero-stage__slide,
  .pm-fx-hero-stage__slide.is-active {
    filter: none !important;
    opacity: 0 !important;
  }

  .pm-fx-scribble {
    display: none !important;
  }
}

/* Soft brightness wave — mirrors Live Colors bg-wave without palette swap */
.pm-fx-bg-wave {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 40%, color-mix(in srgb, var(--pm-fx-cyan) 12%, transparent), transparent 70%);
  transition: opacity 0.9s var(--pm-fx-ease);
}

.pm-fx-bg-wave.is-lit {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pm-fx-bg-wave { display: none !important; }
}

html[data-a11y-reduce-motion="true"] .pm-fx-bg-wave {
  display: none !important;
}