/* ============================================================
   EventBricks — Hero category showcase
   Rotating category slideshow + per-category ambient effects.
   Pure CSS animation; markup lives in index.html (.evb-hero-slides).
   7 slides x 5s = 35s cycle. Slide N gets --d: (N-1)*5s inline.
   ============================================================ */

/* ---- Slide deck ------------------------------------------------ */
.evb-hero-slides {
  position: absolute; top: 0; right: 0; bottom: 0; width: 78%;
  z-index: 0; pointer-events: none; overflow: hidden;
  transition: width 0.9s ease;
}
/* Full-width during video: slides container expands left to cover the hero */
.hero.evb-video-active .evb-hero-slides { width: 100%; }
.evb-hero-slides .evb-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%;
  opacity: 0; transform-origin: 62% 45%;
  animation: evb-fade 35s linear infinite var(--d),
             evb-motion-zoom 35s linear infinite var(--d);
}
.evb-slide.pos-top    { background-position: center 18%; }
.evb-slide.pos-mid    { background-position: center 40%; }
.evb-slide.m-panr     { animation-name: evb-fade, evb-motion-panr; }
.evb-slide.m-zoomout  { animation-name: evb-fade, evb-motion-zoomout; }
.evb-slide.m-drift    { animation-name: evb-fade, evb-motion-drift; }
.evb-slide.m-hue      { animation: evb-fade 35s linear infinite var(--d),
                                   evb-motion-zoom 35s linear infinite var(--d),
                                   evb-fx-hue 9s ease-in-out infinite; }

@keyframes evb-fade {
  0% { opacity: 0; } 2.5% { opacity: 1; } 12.5% { opacity: 1; }
  15% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes evb-motion-zoom {
  0% { transform: scale(1); } 15% { transform: scale(1.10); }
  15.001%, 100% { transform: scale(1); }
}
@keyframes evb-motion-zoomout {
  0% { transform: scale(1.10); } 15% { transform: scale(1.005); }
  15.001%, 100% { transform: scale(1.10); }
}
@keyframes evb-motion-panr {
  0% { transform: translateX(-2.2%) scale(1.08); }
  15% { transform: translateX(2.2%) scale(1.08); }
  15.001%, 100% { transform: translateX(-2.2%) scale(1.08); }
}
@keyframes evb-motion-drift {
  0% { transform: translateY(1.6%) scale(1.07); }
  15% { transform: translateY(-1.6%) scale(1.07); }
  15.001%, 100% { transform: translateY(1.6%) scale(1.07); }
}
@keyframes evb-fx-hue {
  0%, 100% { filter: saturate(1) hue-rotate(0deg); }
  50% { filter: saturate(1.25) hue-rotate(8deg); }
}

/* ---- Scrim (keeps headline + search legible) ------------------- */
.hero::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 78%;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, #080808 0%, rgba(8,8,8,0.97) 22%, rgba(8,8,8,0.55) 50%, rgba(8,8,8,0.08) 68%, rgba(8,8,8,0.32) 100%),
    linear-gradient(to top, rgba(8,8,8,0.97) 3%, rgba(8,8,8,0.4) 22%, transparent 45%),
    linear-gradient(to bottom, rgba(8,8,8,0.75) 0%, transparent 25%),
    linear-gradient(rgba(255,0,0,0.10), rgba(255,0,0,0.10));
  transition: opacity 1s ease;
}
/* During video playback the scrim fades out so the full frame is visible.
   The headline lives on the pure-dark left 22% so legibility is unaffected. */
.hero.evb-video-active::after { opacity: 0; }
.hero > :not(.evb-hero-slides):not(.evb-particles):not(.evb-slide-caption) { position: relative; z-index: 1; }
.hero .hero-bg-text { display: none; }

/* ---- Ambient layers on headline -------------------------------- */
.hero::before { animation: evb-hero-glow 5s ease-in-out infinite; }
@keyframes evb-hero-glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.hero h1 em { animation: evb-next-pulse 3.2s ease-in-out infinite; }
@keyframes evb-next-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(255,0,0,0); }
  50% { text-shadow: 0 0 28px rgba(255,0,0,0.55), 0 0 60px rgba(255,0,0,0.25); }
}

/* ---- Global ember particles ------------------------------------ */
.evb-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.evb-particles span {
  position: absolute; bottom: -12px; border-radius: 50%;
  opacity: 0; animation: evb-rise linear infinite;
}
@keyframes evb-rise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  8% { opacity: var(--po, .7); } 70% { opacity: var(--po, .7); }
  100% { transform: translate(var(--dx, 20px), -88vh) scale(.4); opacity: 0; }
}

/* ---- Category caption chip ------------------------------------- */
.evb-slide-caption {
  position: absolute; right: 3rem; bottom: 2.2rem; z-index: 1;
  pointer-events: none; font-family: var(--font-body, 'Outfit', sans-serif); text-align: right;
}
.evb-slide-caption span {
  position: absolute; right: 0; bottom: 0; white-space: nowrap;
  font-size: 0.72rem; letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.85); padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-pill, 999px);
  background: rgba(8,8,8,0.45); backdrop-filter: blur(4px);
  opacity: 0; animation: evb-fade 35s linear infinite var(--d);
}
.evb-slide-caption span::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red, #ff0000); margin-right: 0.55rem; vertical-align: 1px;
}

/* ---- Per-category effect layers --------------------------------
   Each .evb-fx-layer carries the same fade/delay as its slide so
   effects appear only during that slide's window.               */
.evb-fx-layer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  opacity: 0; animation: evb-fade 35s linear infinite var(--d);
}

/* Concerts: red glow pulse + sweeping beams + warm haze */
.evb-fx-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 62% 42%, rgba(255,30,30,0.55) 0%, transparent 70%);
  animation: evb-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes evb-glow-pulse { 0%, 100% { opacity: .10; } 50% { opacity: .38; } }
.evb-beam {
  position: absolute; top: -6%; width: 13%; height: 125%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 60%, transparent 80%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0% 100%);
  transform-origin: 50% 0; animation: evb-beam-sweep ease-in-out infinite;
}
.evb-beam.red { background: linear-gradient(to bottom, rgba(255,60,50,0.14), rgba(255,60,50,0.03) 60%, transparent 80%); }
@keyframes evb-beam-sweep { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.evb-haze {
  position: absolute; inset: -8%;
  background: radial-gradient(ellipse 42% 30% at 62% 52%, rgba(255,130,60,0.12), transparent 72%);
  animation: evb-haze-drift 9s ease-in-out infinite alternate;
}
@keyframes evb-haze-drift { 0% { transform: translateX(-5%) scale(1); } 100% { transform: translateX(5%) scale(1.06); } }

/* Sports: camera flashes + floodlight flare + cool vignette */
.evb-flash {
  position: absolute; border-radius: 50%; background: #fff;
  box-shadow: 0 0 14px 5px rgba(255,255,255,0.7);
  animation: evb-flash-blink infinite;
}
@keyframes evb-flash-blink { 0%, 90%, 100% { opacity: 0; } 93% { opacity: 1; } 96% { opacity: .15; } }
.evb-flare {
  position: absolute; height: 3px; filter: blur(2px);
  background: linear-gradient(90deg, transparent, rgba(220,235,255,0.55), transparent);
  animation: evb-flare-sweep ease-in-out infinite;
}
@keyframes evb-flare-sweep {
  0%, 100% { transform: translateX(-15%) scaleX(.5); opacity: 0; }
  42% { opacity: .75; } 50% { transform: translateX(12%) scaleX(1); opacity: .9; } 58% { opacity: .4; }
}
.evb-vig { position: absolute; inset: 0; animation: evb-vig-pulse ease-in-out infinite; }
@keyframes evb-vig-pulse { 0%, 100% { opacity: .12; } 50% { opacity: .42; } }

/* Theater: golden sheen sweep + dust motes */
.evb-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,214,140,0.14) 50%, transparent 58%);
  background-size: 240% 100%; animation: evb-sweep-x linear infinite;
}
@keyframes evb-sweep-x { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }
.evb-dust span {
  position: absolute; border-radius: 50%; background: rgba(255,216,150,0.85);
  opacity: 0; animation: evb-dust-float linear infinite;
}
@keyframes evb-dust-float {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: var(--o, .65); } 85% { opacity: var(--o, .65); }
  100% { transform: translate(var(--dx, 20px), -60vh); opacity: 0; }
}

/* Festivals: confetti + cycling color wash */
.evb-confetti span {
  position: absolute; top: -4vh; opacity: 0;
  animation: evb-conf-fall linear infinite;
}
@keyframes evb-conf-fall {
  0% { transform: translateY(-4vh) rotate(0deg); opacity: 0; }
  6% { opacity: 1; } 88% { opacity: 1; }
  100% { transform: translateY(108vh) rotate(620deg); opacity: 0; }
}
.evb-wash {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, rgba(255,0,90,0.13), rgba(0,170,255,0.12) 45%, rgba(255,200,0,0.12));
  animation: evb-hue-cycle 11s linear infinite;
}
@keyframes evb-hue-cycle { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

/* Tech: data particles rising */
.evb-data span {
  position: absolute; width: 2.5px; border-radius: var(--r-xs, 2px);
  background: rgba(255,90,75,0.85); opacity: 0;
  animation: evb-data-rise linear infinite;
}
@keyframes evb-data-rise {
  0% { transform: translateY(6vh); opacity: 0; }
  12% { opacity: .85; } 80% { opacity: .55; }
  100% { transform: translateY(-85vh); opacity: 0; }
}

/* Arts: floating paint bokeh */
.evb-bokeh span {
  position: absolute; border-radius: 50%; filter: blur(7px); opacity: 0;
  animation: evb-bokeh-float linear infinite;
}
@keyframes evb-bokeh-float {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: var(--o, .5); } 80% { opacity: var(--o, .5); }
  100% { transform: translate(var(--dx, 30px), -40vh) scale(1.25); opacity: 0; }
}

/* Comedy: wandering follow-spots */
.evb-spot {
  position: absolute; inset: -10%;
  background: radial-gradient(circle 320px at 68% 38%, rgba(255,235,200,0.16) 0%, transparent 70%);
  animation: evb-spot-wander 7s ease-in-out infinite;
}
@keyframes evb-spot-wander {
  0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 2%); }
  50% { transform: translate(3%, -2%); } 75% { transform: translate(-2%, -3%); }
  100% { transform: translate(0, 0); }
}
.evb-spot2 {
  position: absolute; inset: -10%;
  background: radial-gradient(circle 230px at 45% 50%, rgba(255,225,185,0.12) 0%, transparent 70%);
  animation: evb-spot-wander2 9s ease-in-out infinite;
}
@keyframes evb-spot-wander2 {
  0% { transform: translate(2%, -2%); } 33% { transform: translate(-3%, 3%); }
  66% { transform: translate(4%, 1%); } 100% { transform: translate(2%, -2%); }
}

/* ---- Accessibility: reduced motion ------------------------------
   Static first slide, no animation anywhere in the hero.        */
@media (prefers-reduced-motion: reduce) {
  .evb-hero-slides .evb-slide,
  .evb-slide-caption span,
  .evb-fx-layer, .evb-fx-layer *,
  .evb-particles span,
  .hero::before, .hero h1 em { animation: none !important; }
  .evb-hero-slides .evb-slide:first-child { opacity: 1; transform: none; }
  .evb-slide-caption span:first-child { opacity: 1; }
  .evb-fx-layer, .evb-particles { display: none; }
}

/* ---- Mobile: simplified 3-slide fade, no particles --------------
   Saves battery; the narrow viewport crops the showcase anyway. */
@media (max-width: 768px) {
  .evb-hero-slides { width: 100%; }
  .hero::after { width: 100%; }
  .evb-fx-layer, .evb-particles { display: none; }
  .evb-hero-slides .evb-slide:nth-child(n+4) { display: none; }
  .evb-slide-caption { right: 1.2rem; bottom: 1.2rem; }
  .evb-slide-caption span:nth-child(n+4) { display: none; }
  .evb-hero-slides .evb-slide,
  .evb-slide-caption span {
    animation: evb-fade-m 15s linear infinite var(--d);
    transform: none;
  }
}
@keyframes evb-fade-m {
  0% { opacity: 0; } 4% { opacity: 1; } 31% { opacity: 1; }
  37% { opacity: 0; } 100% { opacity: 0; }
}

/* ---- Video slide (JS-controlled; opacity toggled by initHeroVideo()) --- */
.evb-video-slide { animation: none; transform: none; background: none; z-index: 5; }
.evb-video-slide video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
@media (max-width: 768px) {
  .evb-video-slide { display: none; }
}

/* ---- Hero text: fade out while video plays --------------------- */
.hero .hero-eyebrow,
.hero h1,
.hero .hero-sub,
.hero .search-bar,
.hero .hero-bg-text,
.hero .evb-slide-caption,
.hero .evb-particles {
  transition: opacity 0.8s ease;
}
.hero.evb-video-active .hero-eyebrow,
.hero.evb-video-active h1,
.hero.evb-video-active .hero-sub,
.hero.evb-video-active .search-bar,
.hero.evb-video-active .hero-bg-text,
.hero.evb-video-active .evb-slide-caption,
.hero.evb-video-active .evb-particles {
  opacity: 0;
  pointer-events: none;
}