/* RËEL VISUALS™ — Panel atmosphere */
.panel-visuals { position: relative; }

/* Film grain on visual panels */
.panel-visuals::after {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: 0.045;
  pointer-events: none; z-index: 0;
}

/* Preset card selected state */
.visual-preset-card.selected {
  border-color: var(--gold) !important;
  background: linear-gradient(145deg, rgba(245,201,106,0.08), rgba(0,0,0,0.7)) !important;
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(245,201,106,0.2);
}

/* Palette swatches */
.palette-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.palette-swatch:hover {
  transform: scale(1.35);
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* Hover zoom on visual result images */
.visual-result-img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: zoom-in;
}
.visual-result-img:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}

/* Equalizer animation bars */
.eq-bar {
  display: inline-block;
  width: 3px;
  background: var(--gold);
  border-radius: 2px;
  animation: eqPulse 1.2s ease-in-out infinite;
  transform-origin: bottom;
}
@keyframes eqPulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
  50%       { transform: scaleY(1);   opacity: 1; }
}
.eq-bar:nth-child(1) { animation-delay: 0s; }
.eq-bar:nth-child(2) { animation-delay: 0.15s; }
.eq-bar:nth-child(3) { animation-delay: 0.3s; }
.eq-bar:nth-child(4) { animation-delay: 0.15s; }
.eq-bar:nth-child(5) { animation-delay: 0s; }

/* Waveform glow (used on active generations) */
.waveform-glow {
  filter: drop-shadow(0 0 8px rgba(245,201,106,0.3));
}

/* Breathing ambient background for active generation */
.generation-active-bg {
  background:
    radial-gradient(circle at 30% 0%,  rgba(245,201,106,0.06) 0, transparent 60%),
    radial-gradient(circle at 80% 100%,rgba(144,92,255,0.1) 0, transparent 60%);
  animation: centerGlow 18s ease-in-out infinite alternate;
}