/* Effect: plaat-affiche + 3D-plaat (vinyl3d) — v0.1.0
   Het podium toont eerst een lichte CSS-plaat (groeven met gradients, het echte label als beeld,
   een vaste glans die niet meedraait). Zodra vinyl3d.js zijn eerste beeld heeft, schuift het
   WebGL-canvas er zacht overheen (klasse .is-3d). Zonder 3D (minder beweging, geen WebGL,
   databesparing) blijft het affiche staan.
   Kost: affiche laag; 3D middel (zie vinyl3d.js). */
.podium { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin-inline: auto; perspective: 1100px; z-index: 2; }
@media (min-width: 1280px) { .podium { width: min(100%, 640px); } }
.podium-gloed {
  position: absolute; inset: 6%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 110, 20, 0.34) 0%, rgba(255, 50, 20, 0.18) 38%, transparent 68%);
  filter: blur(18px); transform: translate(3%, 6%);
  animation: gloed-adem-plaat 5.5s ease-in-out infinite;
}
@keyframes gloed-adem-plaat { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.plaat-affiche {
  position: absolute; inset: 8%; z-index: 1; border-radius: 50%;
  transform: rotateX(22deg) rotateY(-14deg) rotateZ(-4deg);
  transition: opacity 0.9s ease;
}
.plaat-schijf {
  position: absolute; inset: 0; border-radius: 50%;
  /* alle stops in fracties van de straal (closest-side), gelijk aan de 3D-plaat in vinyl3d.js */
  background:
    radial-gradient(circle closest-side, transparent 0 35.6%, rgba(0, 0, 0, 0.95) 35.8% 36.8%, rgba(255, 255, 255, 0.06) 37% 37.6%, transparent 37.8%),
    radial-gradient(circle closest-side, transparent 0 46.6%, rgba(255, 255, 255, 0.07) 46.8% 47.4%, transparent 47.6% 58.2%, rgba(255, 255, 255, 0.07) 58.4% 59%, transparent 59.2% 65.9%, rgba(255, 255, 255, 0.07) 66.1% 66.6%, transparent 66.8% 75.5%, rgba(255, 255, 255, 0.07) 75.7% 76.2%, transparent 76.4% 84.5%, rgba(255, 255, 255, 0.07) 84.7% 85.2%, transparent 85.4% 93.7%, rgba(255, 255, 255, 0.06) 93.9% 94.4%, transparent 94.6%),
    repeating-radial-gradient(circle closest-side, rgba(255, 255, 255, 0.045) 0 0.8px, rgba(0, 0, 0, 0) 0.8px 2.6px),
    radial-gradient(circle closest-side, #16141a 0%, #0c0b0f 70%, #111016 95%, #1c1a21 98.5%, #050406 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 40px 70px -24px rgba(0, 0, 0, 0.9), 0 0 70px -10px rgba(255, 80, 0, 0.35);
  animation: plaat-draai 3.4s linear infinite;
}
@keyframes plaat-draai { to { transform: rotate(360deg); } } /* met de klok mee, zoals een draaitafel */
.plaat-label { position: absolute; left: 32%; top: 32%; width: 36%; height: 36%; border-radius: 50%; }
.plaat-glans {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background:
    conic-gradient(from 210deg, transparent 0 5%, rgba(255, 150, 70, 0.26) 9%, transparent 14% 44%, rgba(255, 235, 215, 0.2) 50%, transparent 56% 80%, rgba(255, 60, 30, 0.18) 86%, transparent 92%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 37%, #000 38% 99%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, transparent 0 37%, #000 38% 99%, transparent 100%);
}
.plaat-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.podium.is-3d .plaat-canvas { opacity: 1; }
.podium.is-3d .plaat-affiche { opacity: 0; }
.podium.is-3d .plaat-schijf { animation-play-state: paused; }
.podium.is-grijpbaar .plaat-canvas { cursor: grab; }
.podium.is-grijpbaar .plaat-canvas:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .plaat-schijf, .podium-gloed { animation: none !important; } }