/**
 * Seasonal presentation bridge for the ROARR! Featured Content Carousel.
 *
 * This additive block stylesheet keeps Halloween and Christmas artwork out of
 * the theme's shared generated bundle so the scenes can be promoted selectively.
 */

.roarr-event-fx__snow,
.roarr-event-fx__spooky {
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}

.roarr-event-band[data-fx='snow'] .roarr-event-fx__snow,
.roarr-event-band[data-fx='halloween'] .roarr-event-fx__spooky {
  opacity: 1;
}

/* ── Snowy Christmas atmosphere ──────────────────────────────────────
   Responsive edge artwork supplies the festive scene while keeping the card
   area quiet. Snow remains a separate pair of sparse particle layers, and the
   site's section-break silhouette remains outside this artwork. */
.roarr-event-fx__snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgb(4 20 34 / 4%), rgb(4 20 34 / 14%)),
    url('./seasonal/christmas-atmosphere-wide.webp');
  background-position: center;
  background-size: cover;
}

.roarr-event-fx__snow::before,
.roarr-event-fx__snow::after {
  content: '';
  position: absolute;
  inset: -70px -20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
  mask: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
  will-change: transform, opacity;
}

.roarr-event-fx__snow::before {
  background-image:
    radial-gradient(circle at 4% 17%, var(--white) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 9% 46%, var(--cream) 0 1px, transparent 1.8px),
    radial-gradient(circle at 13% 71%, var(--cream) 0 2.2px, transparent 2.9px),
    radial-gradient(circle at 24% 36%, var(--white) 0 1px, transparent 1.7px),
    radial-gradient(circle at 31% 12%, var(--white) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 38% 88%, var(--cream) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 46% 53%, var(--white) 0 1.2px, transparent 2px),
    radial-gradient(circle at 53% 9%, var(--white) 0 2.5px, transparent 3.2px),
    radial-gradient(circle at 68% 58%, var(--cream) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 74% 81%, var(--white) 0 2px, transparent 2.8px),
    radial-gradient(circle at 81% 27%, var(--white) 0 1.8px, transparent 2.5px),
    radial-gradient(circle at 88% 62%, var(--cream) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 94% 79%, var(--cream) 0 1.1px, transparent 1.8px);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--white) 62%, transparent));
  animation: roarr-snow-fall 10.5s linear -3s infinite;
}

.roarr-event-fx__snow::after {
  background-image:
    radial-gradient(circle at 8% 83%, var(--white) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 17% 28%, var(--white) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 29% 19%, var(--cream) 0 1.3px, transparent 2px),
    radial-gradient(circle at 36% 76%, var(--cream) 0 1px, transparent 1.7px),
    radial-gradient(circle at 45% 64%, var(--white) 0 1.8px, transparent 2.5px),
    radial-gradient(circle at 54% 39%, var(--white) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 63% 34%, var(--cream) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 91%, var(--white) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 83% 16%, var(--cream) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 89% 49%, var(--cream) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 93% 70%, var(--white) 0 1px, transparent 1.7px),
    radial-gradient(circle at 97% 12%, var(--white) 0 1.6px, transparent 2.3px);
  opacity: 0.74;
  animation: roarr-snow-fall-soft 16s linear -9s infinite;
}

/* ── Halloween atmosphere ────────────────────────────────────────────
   Responsive illustrated artwork supplies the atmosphere while the section
   break remains separate. Only sparse edge embers, two distant silhouettes
   and a very light mist move, keeping the event cards readable and calm. */
.roarr-event-fx__spooky {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgb(4 15 27 / 5%), rgb(4 15 27 / 16%)),
    url('./seasonal/halloween-atmosphere-wide.webp');
  background-position: center;
  background-size: cover;
}

.roarr-event-fx__spooky::after {
  content: '';
  position: absolute;
  inset: 38% -12% -8%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 25% 65%, rgb(170 198 197 / 12%), transparent 42%),
    radial-gradient(ellipse at 70% 45%, rgb(218 187 144 / 8%), transparent 46%);
  filter: blur(18px);
  opacity: 0.7;
  will-change: transform;
  animation: roarr-halloween-mist 24s ease-in-out -8s infinite alternate;
}

.roarr-event-fx__embers,
.roarr-event-fx__embers::before,
.roarr-event-fx__embers::after {
  position: absolute;
  inset: 0;
}

.roarr-event-fx__embers {
  z-index: 2;
}

.roarr-event-fx__embers::before,
.roarr-event-fx__embers::after {
  content: '';
  inset: -8% 0 -2%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgb(255 167 70 / 58%));
  will-change: transform, opacity;
}

.roarr-event-fx__embers::before {
  background-image:
    radial-gradient(circle at 4% 88%, rgb(255 188 91 / 92%) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 9% 69%, rgb(255 221 148 / 82%) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 93%, rgb(255 151 52 / 78%) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 54%, rgb(255 203 119 / 72%) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 84%, rgb(255 214 138 / 82%) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 63%, rgb(255 151 52 / 82%) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 96% 91%, rgb(255 197 105 / 88%) 0 2px, transparent 3px);
  animation: roarr-halloween-embers-a 15s ease-in-out -5s infinite;
}

.roarr-event-fx__embers::after {
  background-image:
    radial-gradient(circle at 2% 61%, rgb(255 210 131 / 74%) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 81%, rgb(255 159 58 / 84%) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 43%, rgb(255 225 163 / 68%) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 94%, rgb(255 175 75 / 82%) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 91% 49%, rgb(255 220 150 / 72%) 0 1px, transparent 2px),
    radial-gradient(circle at 98% 73%, rgb(255 155 50 / 86%) 0 2px, transparent 3px);
  animation: roarr-halloween-embers-b 21s ease-in-out -13s infinite;
}

.roarr-event-fx__bat {
  position: absolute;
  left: -12vw;
  top: var(--bat-top, 18%);
  z-index: 2;
  width: var(--bat-width, 38px);
  aspect-ratio: 5 / 2;
  background: rgb(2 8 14 / 78%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M50 19C44 10 37 8 31 13C24 5 13 4 3 7C10 13 10 22 8 31C18 26 26 28 34 35C39 29 44 27 50 29C56 27 61 29 66 35C74 28 82 26 92 31C90 22 90 13 97 7C87 4 76 5 69 13C63 8 56 10 50 19Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M50 19C44 10 37 8 31 13C24 5 13 4 3 7C10 13 10 22 8 31C18 26 26 28 34 35C39 29 44 27 50 29C56 27 61 29 66 35C74 28 82 26 92 31C90 22 90 13 97 7C87 4 76 5 69 13C63 8 56 10 50 19Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 25%));
  will-change: transform, opacity;
  animation: roarr-bat-cross var(--bat-speed, 23s) linear var(--bat-delay, 0s) infinite;
}

.roarr-event-fx__bat--1 {
  --bat-width: clamp(28px, 2.6vw, 44px);
  --bat-top: 16%;
  --bat-speed: 24s;
  --bat-delay: -5s;
}

.roarr-event-fx__bat--2 {
  --bat-width: clamp(20px, 1.9vw, 32px);
  --bat-top: 31%;
  --bat-speed: 29s;
  --bat-delay: -19s;
}

@media (max-width: 1023px) {
  .roarr-event-fx__snow {
    background-image:
      linear-gradient(180deg, rgb(4 20 34 / 3%), rgb(4 20 34 / 12%)),
      url('./seasonal/christmas-atmosphere-mobile.webp');
    background-position: center bottom;
  }

  .roarr-event-fx__spooky {
    background-image:
      linear-gradient(180deg, rgb(4 15 27 / 4%), rgb(4 15 27 / 14%)),
      url('./seasonal/halloween-atmosphere-mobile.webp');
    background-position: center bottom;
  }
}

@media (max-width: 639px) {
  .roarr-event-fx__bat--1 {
    --bat-top: 23%;
  }

  .roarr-event-fx__bat--2 {
    --bat-top: 39%;
  }
}

/* The seasonal animation shorthands above reset animation-play-state. Keep
   them paused off-screen and run only the active, visible scene. */
.roarr-event-fx__snow::before,
.roarr-event-fx__snow::after,
.roarr-event-fx__spooky::after,
.roarr-event-fx__embers::before,
.roarr-event-fx__embers::after,
.roarr-event-fx__bat {
  animation-play-state: paused;
}

.roarr-event-band.is-fx-visible[data-fx='snow'] .roarr-event-fx__snow::before,
.roarr-event-band.is-fx-visible[data-fx='snow'] .roarr-event-fx__snow::after,
.roarr-event-band.is-fx-visible[data-fx='halloween'] .roarr-event-fx__spooky::after,
.roarr-event-band.is-fx-visible[data-fx='halloween'] .roarr-event-fx__embers::before,
.roarr-event-band.is-fx-visible[data-fx='halloween'] .roarr-event-fx__embers::after,
.roarr-event-band.is-fx-visible[data-fx='halloween'] .roarr-event-fx__bat {
  animation-play-state: running;
}


@keyframes roarr-snow-fall {
  0% {
    opacity: 0;
    transform: translate3d(-12px, -86px, 0);
  }
  10%,
  90% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translate3d(20px, 176px, 0);
  }
}

@keyframes roarr-snow-fall-soft {
  0% {
    opacity: 0;
    transform: translate3d(16px, -68px, 0);
  }
  14%,
  86% {
    opacity: 0.74;
  }
  100% {
    opacity: 0;
    transform: translate3d(-14px, 142px, 0);
  }
}

@keyframes roarr-halloween-mist {
  from { transform: translate3d(-4%, 1%, 0) scale(1.03); }
  to { transform: translate3d(4%, -1%, 0) scale(1.08); }
}

@keyframes roarr-halloween-embers-a {
  0% { transform: translate3d(-2px, 32px, 0); opacity: 0.16; }
  24% { opacity: 0.58; }
  55% { transform: translate3d(5px, -4px, 0); opacity: 0.34; }
  78% { opacity: 0.62; }
  100% { transform: translate3d(-4px, -42px, 0); opacity: 0.14; }
}

@keyframes roarr-halloween-embers-b {
  0% { transform: translate3d(3px, 38px, 0); opacity: 0.12; }
  32% { opacity: 0.46; }
  61% { transform: translate3d(-6px, -2px, 0); opacity: 0.28; }
  84% { opacity: 0.54; }
  100% { transform: translate3d(4px, -48px, 0); opacity: 0.1; }
}

@keyframes roarr-bat-cross {
  0% { transform: translate3d(0, 10px, 0) rotate(-5deg) scaleY(0.68); opacity: 0; }
  8% { opacity: 0.42; }
  25% { transform: translate3d(31vw, -7px, 0) rotate(1deg) scaleY(1); }
  50% { transform: translate3d(62vw, 5px, 0) rotate(-2deg) scaleY(0.7); opacity: 0.42; }
  75% { transform: translate3d(93vw, -10px, 0) rotate(2deg) scaleY(1); }
  92% { opacity: 0.42; }
  100% { transform: translate3d(124vw, 2px, 0) rotate(-3deg) scaleY(0.72); opacity: 0; }
}


@media (prefers-reduced-motion: reduce) {
  .roarr-event-fx__snow::before,
  .roarr-event-fx__snow::after,
  .roarr-event-fx__spooky::after,
  .roarr-event-fx__embers::before,
  .roarr-event-fx__embers::after,
  .roarr-event-fx__bat {
    animation: none;
  }
}