/* Phase 12 visibility + reviews patch */
#cubic-particles {
  z-index: 1;
  opacity: .98;
  mix-blend-mode: screen;
  filter: saturate(1.45) brightness(1.22) contrast(1.08);
}

/* Do not let each full-screen section hide the fixed particle canvas. */
.section-panel {
  z-index: auto;
  isolation: auto;
}

/* Lift meaningful section content above the global particle layer. */
.hero-content,
.neon-perimeter,
.scroll-cue,
.about > .section-shell,
.about > .floating-shapes,
.gallery-section > .slanted-shell,
.player-section > .section-shell,
.connect-section > .section-shell {
  position: relative;
  z-index: 2;
}

.hero::before,
.hero-noise {
  z-index: 0;
}

/* Preserve readability while allowing particles to remain visible. */
.about {
  background: linear-gradient(135deg, rgba(5,5,8,.84), rgba(10,10,20,.78));
}
.gallery-section {
  background: linear-gradient(180deg, rgba(7,8,16,.86), rgba(10,6,17,.78) 40%, rgba(5,5,8,.84));
}
.player-section {
  background: radial-gradient(circle at 50% 50%, rgba(139,92,246,.16), transparent 34%), rgba(5,5,8,.84);
}
.connect-section {
  background: linear-gradient(180deg, rgba(7,8,17,.84), rgba(5,5,8,.82));
}

.approved-review-showcase {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
.approved-review-heading {
  display: grid;
  gap: .45rem;
  margin-bottom: 1.1rem;
}
.approved-review-heading h4 {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.1;
}
.approved-review-heading p:last-child {
  margin: 0;
  color: var(--muted);
}
.approved-reviews {
  min-height: 180px;
}
.reviews-empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed rgba(0,240,255,.32);
  border-radius: 18px;
  background: rgba(0,240,255,.025);
  color: var(--muted);
  text-align: center;
}
.review-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(0,240,255,.2);
  background: linear-gradient(145deg, rgba(10,18,29,.86), rgba(16,8,24,.8));
  box-shadow: 0 18px 38px rgba(0,0,0,.32), 0 0 24px rgba(0,240,255,.06);
}
.review-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--cyan), var(--magenta), var(--violet));
  box-shadow: 0 0 14px rgba(0,240,255,.55);
}

.admin-review-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.admin-review-heading h2 { margin: 0; }
.admin-review-heading a {
  border: 1px solid rgba(0,240,255,.35);
  border-radius: 999px;
  padding: .55rem .85rem;
  color: var(--cyan);
  text-decoration: none;
  font-family: var(--header-font);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.admin-review-heading a:hover,
.admin-review-heading a:focus-visible { box-shadow: var(--glow); }

@media (max-width: 780px) {
  #cubic-particles {
    opacity: .92;
    filter: saturate(1.35) brightness(1.18) contrast(1.06);
  }
}

/* === PHASE 12B PERFORMANCE START === */
#cubic-particles {
  opacity: .96;
  mix-blend-mode: normal;
  filter: none;
  contain: strict;
  transform: translateZ(0);
  will-change: transform;
}

/* The opening announcement now floats on transparent device glass only. */
.device-screen,
.phone .device-screen {
  background: transparent !important;
  background-image: none !important;
  box-shadow:
    inset 0 0 26px rgba(0,240,255,.13),
    inset 0 0 52px rgba(255,0,153,.06),
    0 0 18px rgba(0,240,255,.10);
}

.device {
  filter: none;
}

.intro-splash,
.device-stage,
.device {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.intro-splash {
  contain: layout paint style;
  will-change: transform, opacity;
}

.device-stage {
  will-change: transform;
  animation-duration: 5.5s;
}

.intro-grid {
  animation-duration: 26s;
  opacity: .72;
}

.intro-splash.dismissed {
  animation: turntable-exit-optimized .92s cubic-bezier(.2,.72,.25,1) forwards;
}

.hero.soft-mirage {
  animation: soft-mirage-optimized .44s ease-out both;
}

.site-header,
.admin-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dj-portrait-wrap,
.media-card {
  will-change: transform;
}

.dj-portrait-wrap {
  transition-duration: .12s;
}

.dj-portrait-wrap img {
  filter: drop-shadow(0 14px 24px rgba(0,240,255,.18));
}

@keyframes turntable-exit-optimized {
  0% {
    transform: translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
  }
  68% {
    opacity: .78;
  }
  100% {
    transform: translateZ(0) rotateY(720deg) scale(.08);
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes soft-mirage-optimized {
  0% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
  45% {
    transform: translateZ(0) scale(.992);
    opacity: .24;
  }
  100% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
}

@media (max-width: 780px) {
  #cubic-particles {
    opacity: .94;
    filter: none;
  }

  .device-stage {
    animation-duration: 6.5s;
  }
}
/* === PHASE 12B PERFORMANCE END === */


/* === PHASE 12C PARTICLE RENDER FIX START === */
/*
 * Do not combine a desynchronized canvas with strict containment and a
 * forced GPU transform. That combination can render as a blank layer on
 * Chromium/NVIDIA even while JavaScript continues to run normally.
 */
#cubic-particles {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 8 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
  contain: none !important;
  content-visibility: visible !important;
  transform: none !important;
  will-change: auto !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Section backgrounds remain beneath the global canvas. */
.section-panel {
  position: relative;
  z-index: auto !important;
  isolation: auto !important;
}

/* All readable and interactive content remains above the particles. */
.site-header,
.hero-content,
.neon-perimeter,
.scroll-cue,
.about > .section-shell,
.about > .floating-shapes,
.gallery-section > .slanted-shell,
.player-section > .section-shell,
.connect-section > .section-shell,
.site-footer,
.admin-header,
.admin-main {
  position: relative;
  z-index: 20 !important;
}

.site-header,
.admin-header {
  position: fixed;
  z-index: 1000 !important;
}

/* Let the cubes remain visible through the admin glass without reducing text contrast. */
.admin-card,
.upload-card,
.metric {
  background: rgba(11, 13, 24, .72);
}

/* The local verification gateway uses the same global particle layer. */
.admin-access-gateway {
  position: relative;
  z-index: 20;
}

@media (max-width: 780px) {
  #cubic-particles {
    opacity: 1 !important;
  }
}
/* === PHASE 12C PARTICLE RENDER FIX END === */