/* =========================================================================
   BAND PROMO SECTION
   - Glitch + Surge overlay for promo band photo
   - Dark + noticeable but non-intrusive effects
   ========================================================================= */

.band-promo {
  position: relative;
  background: #000;
  padding: clamp(40px, 6vw, 80px) 0;
  text-align: center;
  overflow: hidden; /* contain glitch effects */
}

.band-promo__wrap {
  position: relative;
  display: inline-block;
}

.band-promo__wrap img.glitch-img {
  display: block;
  max-width: min(980px, 95%);
  margin: 0 auto;
  filter: contrast(1.15) brightness(0.9);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  position: relative;
  z-index: 2;
}

/* Transparent surge overlay (scanline surge) */
.band-promo__overlay {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 2px,
    transparent 4px
  );
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: surgeAnim 3s infinite;
  z-index: 3;
  pointer-events: none;
}

/* Glitch pseudo layers */
.band-promo__wrap::before,
.band-promo__wrap::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('/assets/band-promo.png') no-repeat center/contain;
  opacity: 0.08;
  mix-blend-mode: lighten;
  z-index: 1;
}

.band-promo__wrap::before {
  animation: glitchShift 2s infinite linear alternate;
  filter: hue-rotate(40deg);
}
.band-promo__wrap::after {
  animation: glitchShift2 1.5s infinite linear alternate;
  filter: hue-rotate(-40deg);
}

/* ===== Animations ===== */
@keyframes glitchShift {
  0% { transform: translate(0,0); }
  20% { transform: translate(-4px,-2px); }
  40% { transform: translate(4px,2px); }
  60% { transform: translate(-2px,2px); }
  80% { transform: translate(2px,-2px); }
  100% { transform: translate(0,0); }
}

@keyframes glitchShift2 {
  0% { transform: translate(0,0); }
  25% { transform: translate(3px,-1px); }
  50% { transform: translate(-3px,1px); }
  75% { transform: translate(2px,2px); }
  100% { transform: translate(0,0); }
}

@keyframes surgeAnim {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}
/* ===============================
   INTENSE MODE — big, visible FX
   =============================== */
.band-promo.intense { isolation: isolate; }

/* stronger base look */
.band-promo.intense .glitch-img{
  filter: contrast(1.25) brightness(.85) saturate(1.15);
  box-shadow: 0 28px 90px rgba(0,0,0,.85), 0 0 40px rgba(255,0,30,.12) inset;
}

/* thick scanlines + rolling bar + flicker */
.band-promo.intense .band-promo__overlay{
  background:
    /* rolling bar */
    linear-gradient(
      to bottom,
      rgba(255,0,60,.00) 0%,
      rgba(255,0,60,.22) 50%,
      rgba(255,0,60,.00) 100%
    ),
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 2px,
      rgba(0,0,0,0) 5px
    );
  mix-blend-mode: screen;
  opacity: .65;
  animation:
    surgeRoll 3.2s linear infinite,
    surgeFlicker 1.2s steps(2,end) infinite;
}

/* big RGB split ghost layers */
.band-promo.intense .band-promo__wrap::before,
.band-promo.intense .band-promo__wrap::after{
  opacity: .20;                /* more obvious */
  mix-blend-mode: lighten;
}

.band-promo.intense .band-promo__wrap::before{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) hue-rotate(30deg);
  animation: rgbJitterA 1.4s infinite;
}
.band-promo.intense .band-promo__wrap::after{
  filter: hue-rotate(-30deg);
  animation: rgbJitterB 1.1s infinite;
}

/* chromatic edge glow around the whole block */
.band-promo.intense::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode: screen;
  background:
    radial-gradient(120% 60% at 50% 120%,
      rgba(255,30,0,.20), transparent 70%),
    radial-gradient(120% 60% at 50% -20%,
      rgba(0,220,255,.12), transparent 70%);
  z-index: 4;
}

/* occasional hard glitch slices */
.band-promo.intense .glitch-img{
  animation: sliceNudge 2.2s infinite;
}
.band-promo.intense .glitch-img::after { /* Firefox-safe no-op */ }

/* ===== Animations (boosted) ===== */
@keyframes surgeRoll{
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(120%);  }
}
@keyframes surgeFlicker{ 0%,100%{opacity:.55} 50%{opacity:.85} }

@keyframes rgbJitterA{
  0%{ transform: translate(0,0); }
  15%{ transform: translate(-6px,-2px); }
  30%{ transform: translate(5px,3px); }
  45%{ transform: translate(-3px,2px) skewX(.6deg); }
  60%{ transform: translate(4px,-3px); }
  75%{ transform: translate(-2px,1px); }
  100%{ transform: translate(0,0); }
}
@keyframes rgbJitterB{
  0%{ transform: translate(0,0); }
  20%{ transform: translate(4px,2px) skewY(.6deg); }
  40%{ transform: translate(-5px,-3px); }
  60%{ transform: translate(3px,-2px); }
  80%{ transform: translate(-4px,1px); }
  100%{ transform: translate(0,0); }
}

/* quick slice jumps (visible!) */
@keyframes sliceNudge{
  0%, 88%, 100% { clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
  90% { clip-path: inset(0 0 60% 0); transform: translate3d(-6px,0,0); }
  92% { clip-path: inset(60% 0 0 0); transform: translate3d(6px,0,0); }
  94% { clip-path: inset(10% 0 40% 0); transform: translate3d(-4px,0,0); }
}

/* ===== Accessibility: reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  .band-promo.intense .band-promo__overlay,
  .band-promo.intense .band-promo__wrap::before,
  .band-promo.intense .band-promo__wrap::after,
  .band-promo.intense .glitch-img{
    animation: none !important;
  }
  .band-promo.intense .band-promo__overlay{ opacity:.25; }
}