/**
 * PM Media — Silk Aurora PERMANENT hero (Chairman locked 2026-07-26)
 * Fast · mobile-safe · compare dock retired
 */

/* Compare dock retired — hide any stale inject */
#pm-hero-compare,
.pm-hero-compare {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* —— Full-bleed silk plate —— */
.pm-silk-aurora-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  /* GPU containment — stop layout thrash from canvas resizes */
  contain: strict;
  content-visibility: auto;
  transform: translateZ(0);
}
.pm-silk-hero-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  contain: paint;
  background:
    radial-gradient(ellipse 60% 45% at 70% 25%, rgba(0, 212, 238, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 50% at 20% 75%, rgba(232, 50, 138, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(6, 6, 12, 0.15) 0%, transparent 30%, transparent 70%, rgba(6, 6, 12, 0.55) 100%);
}

#hero {
  position: relative;
  isolation: isolate;
}
#hero > .container,
#hero > .pm-noon-hero-inner,
#hero .pm-noon-hero-inner {
  position: relative;
  z-index: 5;
}

/* ========== SILK = site default (attribute or class) ========== */
html[data-hero-bg="silk"] .pm-silk-aurora-hero-canvas,
html.pm-silk-aurora .pm-silk-aurora-hero-canvas,
html[data-hero-bg="silk"] .pm-silk-hero-grade,
html.pm-silk-aurora .pm-silk-hero-grade {
  opacity: 1;
}

html[data-hero-bg="silk"] #hero.hero,
html.pm-silk-aurora #hero.hero {
  background-image: none !important;
  background-color: #06060c !important;
}

html[data-hero-bg="silk"] .hero-8k-visual,
html.pm-silk-aurora .hero-8k-visual {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Billboard: hide Miami water photo — silk shows through */
html[data-hero-bg="silk"] .pm-neon-sign-bg,
html.pm-silk-aurora .pm-neon-sign-bg {
  background-image: none !important;
  background-color: transparent !important;
  opacity: 0 !important;
  filter: none !important;
}
html[data-hero-bg="silk"] .pm-neon-sign-veil,
html.pm-silk-aurora .pm-neon-sign-veil {
  background: #000 !important;
  opacity: 1 !important;
}
html[data-hero-bg="silk"] .pm-noon-3d-stage.pm-neon-sign-stage,
html.pm-silk-aurora .pm-noon-3d-stage.pm-neon-sign-stage {
  background: #000 !important;
  background-color: #000 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 0 8px #000,
    0 0 0 9px rgba(0, 212, 238, 0.45),
    0 28px 80px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(0, 212, 238, 0.16) !important;
}
html[data-hero-bg="silk"] .pm-fiber-canvas,
html[data-hero-bg="silk"] .pm-noon-wave-canvas,
html[data-hero-bg="silk"] .pm-noon-webgl,
html[data-hero-bg="silk"] .hero-engine-canvas,
html[data-hero-bg="silk"] #pm-silk-aurora,
html.pm-silk-aurora .pm-fiber-canvas,
html.pm-silk-aurora .pm-noon-wave-canvas,
html.pm-silk-aurora .pm-noon-webgl,
html.pm-silk-aurora .hero-engine-canvas,
html.pm-silk-aurora #pm-silk-aurora {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-hero-bg="silk"].pm-silk-fallback #hero.hero,
html[data-hero-bg="silk"] #hero.pm-silk-fallback,
html.pm-silk-aurora.pm-silk-fallback #hero.hero,
html.pm-silk-aurora #hero.pm-silk-fallback {
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(0, 212, 238, 0.38), transparent 55%),
    radial-gradient(ellipse 70% 55% at 75% 55%, rgba(232, 50, 138, 0.34), transparent 52%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(72, 88, 112, 0.55), transparent 70%),
    linear-gradient(145deg, #06060c 0%, #1a2230 45%, #120a14 100%) !important;
}

/* Water path retained only for legacy CSS — not selectable on public */
html[data-hero-bg="water"] .pm-silk-aurora-hero-canvas,
html[data-hero-bg="water"] .pm-silk-hero-grade {
  opacity: 0 !important;
  pointer-events: none !important;
}
html[data-hero-bg="water"] .pm-neon-sign-bg {
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(2, 6, 12, 0.02) 0%, transparent 42%, rgba(2, 6, 12, 0.18) 100%),
    url("assets/miami-neon-ocean-hero.jpg") center 42% / cover no-repeat !important;
  filter: saturate(1.05) contrast(1.12) brightness(1.02) hue-rotate(-6deg) !important;
}
html[data-hero-bg="water"] .pm-neon-sign-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 38%,
      rgba(96, 112, 132, 0.24) 55%,
      rgba(78, 92, 112, 0.34) 72%,
      rgba(64, 76, 96, 0.3) 100%
    ),
    radial-gradient(
      ellipse 90% 42% at 50% 78%,
      rgba(110, 126, 148, 0.3),
      rgba(72, 86, 108, 0.16) 45%,
      transparent 70%
    );
  mix-blend-mode: soft-light;
  opacity: 1;
}
html[data-hero-bg="silk"] .pm-neon-sign-bg::after,
html.pm-silk-aurora .pm-neon-sign-bg::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pm-silk-aurora-hero-canvas {
    transition: none;
  }
}

@media (max-width: 768px) {
  .pm-silk-hero-grade {
    /* Lighter grade overlay on mobile — less overdraw */
    background:
      radial-gradient(ellipse 70% 50% at 70% 30%, rgba(0, 212, 238, 0.12), transparent 55%),
      radial-gradient(ellipse 60% 45% at 20% 70%, rgba(232, 50, 138, 0.1), transparent 55%),
      linear-gradient(180deg, rgba(6, 6, 12, 0.2) 0%, transparent 35%, rgba(6, 6, 12, 0.5) 100%);
  }
}