/* Dev / unwired preview card effects (Ember, Glitched, etc.) */

/* —— Ember —— */

.effect-ember .image-wrap > img:not([class*="overlay"]) {
  animation: ember-art-flicker 3.6s steps(1) infinite;
  filter: brightness(0.92) saturate(1.18) contrast(1.06) sepia(0.14);
}

.effect-ember .image-wrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(
    to top,
    rgba(255, 90, 10, 0.72) 0%,
    rgba(220, 35, 15, 0.48) 32%,
    rgba(160, 25, 10, 0.22) 58%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

.ember-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.ember-fx__heat {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(60, 15, 0, 0.1) 0%,
    rgba(100, 25, 0, 0.26) 48%,
    rgba(150, 35, 0, 0.48) 100%
  );
}

.ember-fx__glow {
  position: absolute;
  inset: -16%;
  z-index: 1;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 78% 58% at 50% 96%, rgba(255, 110, 15, 0.62) 0%, transparent 64%),
    radial-gradient(ellipse 48% 38% at 28% 72%, rgba(255, 50, 5, 0.42) 0%, transparent 58%),
    radial-gradient(ellipse 44% 36% at 78% 70%, rgba(255, 170, 35, 0.38) 0%, transparent 56%),
    radial-gradient(ellipse 36% 28% at 50% 40%, rgba(255, 200, 80, 0.18) 0%, transparent 62%);
  animation: ember-glow-pulse 3s ease-in-out infinite alternate;
}

.ember-particles {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.ember-particle {
  position: absolute;
  bottom: -8%;
  border-radius: 50%;
  opacity: 0;
  will-change: bottom, transform, opacity;
  animation: ember-particle-rise var(--duration, 2.8s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  box-shadow:
    0 0 calc(var(--size, 4px) * 2.2) currentColor,
    0 0 calc(var(--size, 4px) * 4) rgba(255, 140, 40, 0.35);
}

.ember-float-particle {
  position: absolute;
  bottom: -6%;
  border-radius: 50%;
  opacity: 0;
  will-change: bottom, transform, opacity;
  filter: blur(0.5px);
  animation: ember-float-rise var(--duration, 4.5s) ease-out infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  box-shadow:
    0 0 calc(var(--size, 3px) * 3) currentColor,
    0 0 calc(var(--size, 3px) * 6) rgba(255, 180, 60, 0.28),
    0 0 calc(var(--size, 3px) * 9) rgba(255, 255, 255, 0.14);
}

.ember-particle--black {
  background: #141414;
  color: rgba(10, 10, 10, 0.85);
  --peak-opacity: 0.82;
}

.ember-particle--red {
  background: #e53935;
  color: rgba(229, 57, 53, 0.72);
  --peak-opacity: 0.96;
}

.ember-particle--orange {
  background: #ff9800;
  color: rgba(255, 152, 0, 0.78);
  --peak-opacity: 1;
}

.ember-float-particle--black {
  background: rgba(20, 20, 20, 0.94);
  color: rgba(0, 0, 0, 0.55);
  --peak-opacity: 0.52;
}

.ember-float-particle--red {
  background: rgba(229, 57, 53, 0.9);
  color: rgba(229, 57, 53, 0.52);
  --peak-opacity: 0.66;
}

.ember-float-particle--orange {
  background: rgba(255, 152, 0, 0.94);
  color: rgba(255, 152, 0, 0.55);
  --peak-opacity: 0.74;
}

@keyframes ember-art-flicker {
  0%, 88%, 100% { filter: brightness(0.92) saturate(1.18) contrast(1.06) sepia(0.14); }
  89% { filter: brightness(1.1) saturate(1.28) contrast(1.08) sepia(0.16); }
  90% { filter: brightness(0.96) saturate(1.2) contrast(1.06) sepia(0.14); }
  92% { filter: brightness(1.06) saturate(1.24) contrast(1.07) sepia(0.15); }
  94% { filter: brightness(0.94) saturate(1.19) contrast(1.06) sepia(0.14); }
}

@keyframes ember-glow-pulse {
  0% { opacity: 0.82; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.04); }
}

@keyframes ember-particle-rise {
  0% {
    bottom: -8%;
    transform: translateX(0) scale(0.65);
    opacity: 0;
  }

  6% {
    opacity: var(--peak-opacity, 0.85);
  }

  70% {
    opacity: calc(var(--peak-opacity, 0.85) * 0.5);
  }

  100% {
    bottom: 108%;
    transform: translateX(var(--drift, 0px)) scale(1.15);
    opacity: 0;
  }
}

@keyframes ember-float-rise {
  0% {
    bottom: -6%;
    transform: translateX(0) scale(0.45);
    opacity: 0;
  }

  12% {
    opacity: var(--peak-opacity, 0.5);
  }

  30% {
    bottom: 30%;
    transform: translateX(calc(var(--drift, 0px) * 0.25)) scale(0.85);
  }

  55% {
    bottom: 58%;
    transform: translateX(calc(var(--drift, 0px) * -0.4)) scale(1);
    opacity: calc(var(--peak-opacity, 0.5) * 0.65);
  }

  80% {
    bottom: 84%;
    transform: translateX(calc(var(--drift, 0px) * 0.5)) scale(0.9);
    opacity: calc(var(--peak-opacity, 0.5) * 0.25);
  }

  100% {
    bottom: 110%;
    transform: translateX(var(--drift, 0px)) scale(0.75);
    opacity: 0;
  }
}

/* —— Glitched —— */

.effect-glitched .image-wrap {
  overflow: hidden;
}

.effect-glitched .image-wrap > img:not([class*="overlay"]) {
  animation: glitched-base-jitter 6s steps(12) infinite;
}

.glitched-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.glitched-fx__channel {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, clip-path, opacity;
}

.glitched-fx__channel--r {
  filter: sepia(1) saturate(6) hue-rotate(300deg) brightness(1.15);
  animation: glitched-channel-r 5s steps(10) infinite;
}

.glitched-fx__channel--g {
  filter: sepia(1) saturate(5) hue-rotate(70deg) brightness(1.1);
  animation: glitched-channel-g 4s steps(8) infinite;
}

.glitched-fx__channel--b {
  filter: sepia(1) saturate(5) hue-rotate(190deg) brightness(1.12);
  animation: glitched-channel-b 5.5s steps(11) infinite;
}

.glitched-fx__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.55) 0 1px,
    transparent 1px 3px
  );
  animation: glitched-scan-flicker 0.2s steps(2) infinite;
  mix-blend-mode: overlay;
}

.glitched-fx__bar {
  position: absolute;
  left: -4%;
  right: -4%;
  height: 8%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    rgba(0, 255, 255, 0.25),
    rgba(255, 0, 128, 0.2),
    transparent
  );
  opacity: 0;
  animation: glitched-bar-sweep 5.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes glitched-base-jitter {
  0%, 88%, 100% { transform: translate(0, 0); }
  8% { transform: translate(-1px, 0); }
  16% { transform: translate(2px, 1px); }
  24% { transform: translate(-2px, -1px); }
  32% { transform: translate(1px, 0); }
  40% { transform: translate(-1px, 1px); }
  48% { transform: translate(2px, 0); }
  56% { transform: translate(-2px, 1px); }
  64% { transform: translate(1px, -1px); }
  72% { transform: translate(-1px, 0); }
  80% { transform: translate(2px, 1px); }
}

@keyframes glitched-channel-r {
  0%, 78%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
  6% { opacity: 0.55; transform: translate(-4px, 0); clip-path: inset(8% 0 62% 0); }
  12% { opacity: 0.45; transform: translate(3px, 1px); clip-path: inset(38% 0 28% 0); }
  18% { opacity: 0.5; transform: translate(-2px, -1px); clip-path: inset(62% 0 8% 0); }
  24% { opacity: 0.35; transform: translate(4px, 0); clip-path: inset(18% 0 48% 0); }
  42% { opacity: 0.4; transform: translate(-3px, 1px); clip-path: inset(52% 0 18% 0); }
  58% { opacity: 0.48; transform: translate(2px, 0); clip-path: inset(28% 0 44% 0); }
}

@keyframes glitched-channel-g {
  0%, 82%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
  10% { opacity: 0.42; transform: translate(3px, -1px); clip-path: inset(14% 0 58% 0); }
  20% { opacity: 0.38; transform: translate(-3px, 0); clip-path: inset(44% 0 22% 0); }
  30% { opacity: 0.46; transform: translate(2px, 1px); clip-path: inset(68% 0 6% 0); }
  46% { opacity: 0.4; transform: translate(-4px, 0); clip-path: inset(24% 0 52% 0); }
  62% { opacity: 0.44; transform: translate(3px, 1px); clip-path: inset(56% 0 16% 0); }
}

@keyframes glitched-channel-b {
  0%, 80%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
  7% { opacity: 0.5; transform: translate(4px, 1px); clip-path: inset(10% 0 64% 0); }
  14% { opacity: 0.4; transform: translate(-2px, 0); clip-path: inset(36% 0 30% 0); }
  22% { opacity: 0.48; transform: translate(3px, -1px); clip-path: inset(58% 0 12% 0); }
  36% { opacity: 0.42; transform: translate(-3px, 1px); clip-path: inset(22% 0 46% 0); }
  52% { opacity: 0.46; transform: translate(2px, 0); clip-path: inset(48% 0 20% 0); }
  68% { opacity: 0.38; transform: translate(-4px, 1px); clip-path: inset(72% 0 4% 0); }
}

@keyframes glitched-scan-flicker {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.28; }
}

@keyframes glitched-bar-sweep {
  0%, 72%, 100% { top: -12%; opacity: 0; }
  74% { top: 8%; opacity: 0.85; }
  76% { top: 22%; opacity: 0.65; }
  78% { top: 48%; opacity: 0.5; }
  80% { top: 72%; opacity: 0.35; }
  82% { top: 96%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ember-particle,
  .ember-float-particle {
    animation: none;
    opacity: 0.35;
    bottom: 18%;
  }

  .effect-ember .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .ember-fx__glow { animation: none; opacity: 0.88; }

  .effect-glitched .image-wrap > img:not([class*="overlay"]) {
    animation: none;
  }

  .glitched-fx__channel {
    animation: none;
    opacity: 0.25;
    clip-path: inset(20% 0 20% 0);
    transform: translate(-2px, 0);
  }

  .glitched-fx__scanlines {
    animation: none;
    opacity: 0.15;
  }

  .glitched-fx__bar {
    animation: none;
    opacity: 0;
  }
}

/* —— Shimmer —— */

.effect-shimmer .image-wrap {
  overflow: hidden;
}

.shimmer-fx {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(180, 220, 255, 0.35) 48%,
    rgba(255, 180, 255, 0.4) 50%,
    rgba(180, 255, 220, 0.35) 52%,
    rgba(255, 255, 255, 0.1) 56%,
    transparent 62%
  );
  transform: translateX(-120%) rotate(8deg);
  animation: shimmer-sweep 3.2s ease-in-out infinite;
  mix-blend-mode: color-dodge;
}

@keyframes shimmer-sweep {
  0%, 18% { transform: translateX(-120%) rotate(8deg); opacity: 0; }
  28% { opacity: 1; }
  55% { transform: translateX(120%) rotate(8deg); opacity: 1; }
  65%, 100% { transform: translateX(120%) rotate(8deg); opacity: 0; }
}

/* —— Depths —— */

.effect-depths .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.84) saturate(1.22) contrast(1.06) hue-rotate(-8deg);
}

.effect-depths .image-wrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 68%;
  background: linear-gradient(
    to top,
    rgba(0, 22, 52, 0.82) 0%,
    rgba(0, 48, 88, 0.52) 38%,
    rgba(0, 72, 118, 0.28) 62%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

.depths-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.depths-fx__murk {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 55, 95, 0.12) 0%,
    rgba(0, 38, 72, 0.28) 45%,
    rgba(0, 20, 48, 0.55) 72%,
    rgba(0, 12, 36, 0.72) 100%
  );
}

.depths-fx__caustics {
  position: absolute;
  inset: -24%;
  z-index: 1;
  opacity: 0.34;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 46% 36% at 24% 74%, rgba(0, 255, 220, 0.52) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 76% 42%, rgba(80, 190, 255, 0.46) 0%, transparent 64%),
    radial-gradient(ellipse 52% 42% at 52% 62%, rgba(40, 150, 255, 0.38) 0%, transparent 68%),
    radial-gradient(ellipse 32% 24% at 38% 28%, rgba(120, 230, 255, 0.3) 0%, transparent 62%);
  animation: depths-caustics 4.8s ease-in-out infinite alternate;
}

.depths-bubble,
.depths-mote {
  position: absolute;
  bottom: -6%;
  border-radius: 50%;
  opacity: 0;
  left: var(--x, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  animation: depths-rise var(--duration, 4s) ease-in infinite;
  animation-delay: var(--delay, 0s);
  z-index: 2;
}

.depths-bubble--cyan { background: rgba(0, 235, 255, 0.72); box-shadow: 0 0 8px rgba(0, 235, 255, 0.65); --peak: 0.88; }
.depths-bubble--teal { background: rgba(0, 195, 215, 0.66); box-shadow: 0 0 7px rgba(0, 195, 215, 0.58); --peak: 0.82; }
.depths-bubble--blue { background: rgba(90, 155, 255, 0.6); box-shadow: 0 0 7px rgba(90, 155, 255, 0.52); --peak: 0.78; }

.depths-mote {
  filter: blur(0.5px);
  animation-name: depths-mote-rise;
}

.depths-mote--cyan { background: rgba(130, 255, 245, 0.55); --peak: 0.58; }
.depths-mote--teal { background: rgba(110, 230, 220, 0.48); --peak: 0.52; }
.depths-mote--blue { background: rgba(150, 190, 255, 0.45); --peak: 0.48; }

@keyframes depths-caustics {
  0% { transform: translate(0, 0) scale(1); opacity: 0.28; }
  100% { transform: translate(5%, -4%) scale(1.12); opacity: 0.4; }
}

@keyframes depths-rise {
  0% { bottom: -6%; transform: translateX(0) scale(0.55); opacity: 0; }
  8% { opacity: var(--peak, 0.75); }
  100% { bottom: 108%; transform: translateX(var(--drift, 0px)) scale(1.05); opacity: 0; }
}

@keyframes depths-mote-rise {
  0% { bottom: -4%; opacity: 0; }
  12% { opacity: var(--peak, 0.5); }
  100% { bottom: 105%; transform: translateX(var(--drift, 0px)); opacity: 0; }
}

/* —— Surge —— */

.effect-surge .image-wrap > img:not([class*="overlay"]) {
  animation: surge-image-flash 4s steps(1) infinite;
}

.surge-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.surge-bolt {
  position: absolute;
  top: 8%;
  left: var(--x, 50%);
  width: 2px;
  height: var(--height, 70%);
  transform: translateX(-50%) rotate(var(--angle, 0deg));
  background: linear-gradient(to bottom, transparent, rgba(200, 230, 255, 0.95) 20%, rgba(255, 255, 255, 1) 50%, rgba(180, 210, 255, 0.8) 80%, transparent);
  box-shadow: 0 0 8px rgba(180, 220, 255, 0.9), 0 0 16px rgba(100, 180, 255, 0.5);
  opacity: 0;
  filter: blur(0.3px);
  animation: surge-bolt-flash var(--duration, 3s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.surge-bolt::before,
.surge-bolt::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 35%;
  background: inherit;
  box-shadow: inherit;
}

.surge-bolt::before {
  top: 42%;
  left: -3px;
  transform: rotate(28deg);
}

.surge-bolt::after {
  top: 55%;
  left: 2px;
  transform: rotate(-22deg);
}

.surge-fx__flash {
  position: absolute;
  inset: 0;
  background: rgba(200, 230, 255, 0.15);
  opacity: 0;
  mix-blend-mode: screen;
  animation: surge-screen-flash 4s ease-out infinite;
}

@keyframes surge-bolt-flash {
  0%, 88%, 100% { opacity: 0; }
  89% { opacity: 1; }
  90% { opacity: 0.3; }
  91% { opacity: 0.9; }
  93% { opacity: 0; }
}

@keyframes surge-screen-flash {
  0%, 87%, 100% { opacity: 0; }
  88% { opacity: 0.35; }
  90% { opacity: 0.08; }
  92% { opacity: 0.2; }
  94% { opacity: 0; }
}

@keyframes surge-image-flash {
  0%, 87%, 100% { filter: none; }
  88% { filter: brightness(1.35) saturate(1.2); }
  91% { filter: brightness(1.15); }
}

/* —— Bloom —— */

.effect-bloom .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(1.08) saturate(1.2) contrast(1.03) sepia(0.1);
}

.bloom-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.bloom-fx__glow {
  position: absolute;
  inset: -12%;
  z-index: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 72% 58% at 50% 90%, rgba(255, 165, 195, 0.48) 0%, transparent 66%),
    radial-gradient(ellipse 58% 48% at 24% 58%, rgba(255, 205, 155, 0.34) 0%, transparent 62%),
    radial-gradient(ellipse 54% 44% at 80% 52%, rgba(255, 190, 215, 0.38) 0%, transparent 60%),
    radial-gradient(ellipse 40% 32% at 50% 30%, rgba(255, 235, 200, 0.22) 0%, transparent 68%);
  animation: bloom-glow 4.8s ease-in-out infinite alternate;
}

.bloom-fx__haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 245, 248, 0.1) 0%,
    rgba(255, 225, 215, 0.18) 42%,
    rgba(255, 190, 205, 0.28) 100%
  );
}

.bloom-petal {
  position: absolute;
  top: -10%;
  left: var(--x, 50%);
  width: calc(var(--size, 8px) * 1.45);
  height: var(--size, 8px);
  border-radius: 50% 0 50% 0;
  opacity: 0;
  z-index: 2;
  box-shadow: 0 1px 5px rgba(255, 110, 140, 0.4);
  animation: bloom-fall var(--duration, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.bloom-petal--0 { background: rgba(255, 175, 195, 0.96); }
.bloom-petal--1 { background: rgba(255, 205, 218, 0.92); }
.bloom-petal--2 { background: rgba(255, 145, 175, 0.9); }
.bloom-petal--3 { background: rgba(255, 235, 220, 0.88); box-shadow: 0 1px 4px rgba(255, 180, 160, 0.35); }

@keyframes bloom-glow {
  0% { opacity: 0.78; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

@keyframes bloom-fall {
  0% { top: -10%; transform: translateX(0) rotate(0deg); opacity: 0; }
  6% { opacity: 0.96; }
  100% { top: 110%; transform: translateX(var(--drift, 0px)) rotate(var(--spin, 360deg)); opacity: 0; }
}

/* —— Rift —— */

.effect-rift .image-wrap > img:not([class*="overlay"]) {
  opacity: 0;
}

.rift-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.rift-fx__left,
.rift-fx__right {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.rift-fx__left {
  clip-path: inset(0 50% 0 0);
  animation: rift-left-shift 3.5s ease-in-out infinite;
}

.rift-fx__right {
  clip-path: inset(0 0 0 50%);
  animation: rift-right-shift 3.5s ease-in-out infinite;
}

.rift-fx__edge {
  position: absolute;
  top: -5%;
  bottom: -5%;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.95) 15%, rgba(180, 100, 255, 1) 50%, rgba(0, 255, 220, 0.95) 85%, transparent);
  box-shadow: 0 0 12px rgba(180, 100, 255, 0.8), 0 0 24px rgba(0, 255, 220, 0.4);
  animation: rift-edge-pulse 1.8s ease-in-out infinite;
}

.rift-fx__glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 12px);
  width: 24px;
  background: radial-gradient(ellipse at center, rgba(180, 100, 255, 0.35) 0%, transparent 70%);
  animation: rift-glow-pulse 1.8s ease-in-out infinite;
}

@keyframes rift-left-shift {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
}

@keyframes rift-right-shift {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
}

@keyframes rift-edge-pulse {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.4); }
}

@keyframes rift-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

/* —— Frostbite —— */

.effect-frostbite .image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 0% 0%, rgba(200, 235, 255, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 100% 0%, rgba(180, 220, 255, 0.5) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(190, 230, 255, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 100% 100%, rgba(200, 240, 255, 0.5) 0%, transparent 65%);
  pointer-events: none;
  z-index: 4;
  animation: frostbite-creep 5s ease-in-out infinite alternate;
}

.frostbite-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.frostbite-fx__rime {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.06) 3px 4px
  );
  mix-blend-mode: overlay;
}

.frostbite-sparkle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  opacity: 0;
  animation: frostbite-twinkle var(--duration, 2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.frostbite-sparkle--white { background: #fff; box-shadow: 0 0 4px #fff; }
.frostbite-sparkle--ice { background: rgba(180, 230, 255, 0.95); box-shadow: 0 0 5px rgba(180, 230, 255, 0.8); }
.frostbite-sparkle--pale { background: rgba(220, 245, 255, 0.9); box-shadow: 0 0 4px rgba(220, 245, 255, 0.7); }

@keyframes frostbite-creep {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes frostbite-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* —— Overclock —— */

.effect-overclock .image-wrap > img:not([class*="overlay"]) {
  animation: overclock-warp 2.4s ease-in-out infinite;
}

.effect-overclock .image-wrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(255, 80, 0, 0.45) 0%, rgba(255, 140, 0, 0.15) 55%, transparent 100%);
  pointer-events: none;
  z-index: 4;
  animation: overclock-heat-pulse 2.4s ease-in-out infinite;
}

.overclock-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.overclock-fx__ripple {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  opacity: 0.35;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 4px,
    rgba(255, 120, 0, 0.08) 4px 5px
  );
  animation: overclock-ripple 1.2s linear infinite;
  transform-origin: bottom center;
}

@keyframes overclock-warp {
  0%, 100% { transform: scale(1) skewX(0deg); filter: brightness(1); }
  25% { transform: scale(1.008) skewX(0.4deg); filter: brightness(1.08) saturate(1.1); }
  50% { transform: scale(0.995) skewX(-0.3deg); filter: brightness(1.12) saturate(1.15); }
  75% { transform: scale(1.005) skewX(0.2deg); filter: brightness(1.06); }
}

@keyframes overclock-heat-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes overclock-ripple {
  0% { transform: scaleY(1) translateY(0); }
  100% { transform: scaleY(1.15) translateY(-8%); }
}

/* —— Mirage —— */

.effect-mirage .image-wrap > img:not([class*="overlay"]) {
  opacity: 0;
}

.mirage-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.mirage-fx__band {
  position: absolute;
  left: -2%;
  right: -2%;
  height: 34%;
  background-size: 100% 300%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.92;
}

.mirage-fx__band--1 {
  top: 0;
  background-position-y: 0%;
  animation: mirage-band-1 3s ease-in-out infinite;
}

.mirage-fx__band--2 {
  top: 33%;
  background-position-y: 50%;
  animation: mirage-band-2 3.4s ease-in-out infinite;
}

.mirage-fx__band--3 {
  top: 66%;
  background-position-y: 100%;
  animation: mirage-band-3 2.8s ease-in-out infinite;
}

.mirage-fx__heat {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 220, 160, 0.06) 0%, rgba(255, 180, 80, 0.12) 100%);
  mix-blend-mode: overlay;
  animation: mirage-heat-shimmer 4s ease-in-out infinite;
}

@keyframes mirage-band-1 {
  0%, 100% { transform: skewX(0deg) translateX(0); }
  33% { transform: skewX(1.2deg) translateX(2px); }
  66% { transform: skewX(-0.8deg) translateX(-1px); }
}

@keyframes mirage-band-2 {
  0%, 100% { transform: skewX(0deg) translateX(0); }
  33% { transform: skewX(-1deg) translateX(-2px); }
  66% { transform: skewX(1.4deg) translateX(2px); }
}

@keyframes mirage-band-3 {
  0%, 100% { transform: skewX(0deg) translateX(0); }
  33% { transform: skewX(0.9deg) translateX(1px); }
  66% { transform: skewX(-1.1deg) translateX(-2px); }
}

@keyframes mirage-heat-shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* —— Eclipse —— */

.effect-eclipse .image-wrap > img:not([class*="overlay"]) {
  animation: eclipse-dim 5s ease-in-out infinite;
}

.eclipse-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

.eclipse-fx__umbra {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 45%,
    transparent 24%,
    rgba(0, 0, 0, 0.72) 40%,
    rgba(0, 0, 0, 0.9) 100%
  );
  animation: eclipse-umbra 5s ease-in-out infinite;
}

.eclipse-fx__corona {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  box-shadow:
    0 0 22px rgba(255, 200, 80, 0.65),
    0 0 44px rgba(255, 160, 40, 0.4),
    inset 0 0 34px rgba(255, 220, 120, 0.45);
  animation: eclipse-corona 5s ease-in-out infinite;
}

@keyframes eclipse-dim {
  0%, 100% { filter: brightness(0.62) contrast(1.12); }
  50% { filter: brightness(0.34) contrast(1.24); }
}

@keyframes eclipse-umbra {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@keyframes eclipse-corona {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -55%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -55%) scale(1.08); }
}

/* —— Void —— */

.effect-void .image-wrap > img:not([class*="overlay"]) {
  animation: void-dim 4s ease-in-out infinite;
}

.void-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.void-fx__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  height: 28%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #000 0%, rgba(40, 0, 80, 0.8) 50%, transparent 70%);
  box-shadow: 0 0 30px rgba(80, 0, 160, 0.5);
  animation: void-core-pulse 3s ease-in-out infinite;
  z-index: 2;
}

.void-splotch {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 18%);
  height: var(--h, 16%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  animation: void-splotch-pulse var(--duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.void-splotch--0 {
  border-radius: 42% 58% 53% 47% / 48% 42% 58% 52%;
  background: radial-gradient(ellipse at 38% 32%, rgba(8, 0, 18, 0.92) 0%, rgba(50, 0, 100, 0.55) 42%, transparent 72%);
}

.void-splotch--1 {
  border-radius: 55% 45% 40% 60% / 52% 58% 42% 48%;
  background: radial-gradient(ellipse at 55% 45%, rgba(12, 0, 28, 0.88) 0%, rgba(70, 10, 140, 0.5) 48%, transparent 75%);
}

.void-splotch--2 {
  border-radius: 48% 52% 60% 40% / 44% 56% 48% 52%;
  background: radial-gradient(ellipse at 42% 58%, rgba(0, 0, 12, 0.95) 0%, rgba(40, 0, 90, 0.48) 40%, transparent 70%);
}

.void-mote {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  animation: void-suck var(--duration, 3s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

.void-mote--purple { background: rgba(140, 60, 255, 0.8); box-shadow: 0 0 6px rgba(140, 60, 255, 0.6); }
.void-mote--violet { background: rgba(100, 40, 200, 0.75); box-shadow: 0 0 5px rgba(100, 40, 200, 0.5); }
.void-mote--dark { background: rgba(60, 20, 120, 0.7); box-shadow: 0 0 4px rgba(60, 20, 120, 0.4); }

@keyframes void-dim {
  0%, 100% { filter: brightness(0.85); }
  50% { filter: brightness(0.65); }
}

@keyframes void-core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes void-splotch-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.92);
  }

  35% {
    opacity: 0.85;
    transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, 0px))) scale(1.05);
  }

  70% {
    opacity: 0.65;
    transform: translate(calc(-50% - var(--drift-x, 0px)), calc(-50% - var(--drift-y, 0px))) scale(0.98);
  }
}

@keyframes void-suck {
  0% { opacity: 0.8; transform: translate(0, 0) scale(1); }
  80% { opacity: 0.35; }
  100% { opacity: 0; transform: translate(var(--pull-x, 0%), var(--pull-y, 0%)) scale(0.15); }
}

/* —— Neon —— */

.effect-neon .image-wrap {
  overflow: visible;
}

.neon-fx {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 5;
}

.neon-fx__trace {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  animation: neon-trace 3s linear infinite;
}

.neon-fx__trace--1 {
  box-shadow:
    0 0 6px rgba(255, 0, 128, 0.9),
    0 0 12px rgba(0, 255, 255, 0.6),
    inset 0 0 6px rgba(255, 0, 128, 0.3);
  border: 2px solid rgba(255, 0, 128, 0.85);
  animation: neon-pulse-1 2s ease-in-out infinite;
}

.neon-fx__trace--2 {
  inset: 3px;
  border: 1px solid rgba(0, 255, 255, 0.5);
  animation: neon-pulse-2 2.4s ease-in-out infinite reverse;
}

.neon-fx__glow {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 20px rgba(255, 0, 128, 0.15),
    inset 0 0 40px rgba(0, 255, 255, 0.1);
  animation: neon-glow 2s ease-in-out infinite;
}

@keyframes neon-pulse-1 {
  0%, 100% { opacity: 0.7; box-shadow: 0 0 6px rgba(255, 0, 128, 0.9), 0 0 12px rgba(0, 255, 255, 0.6), inset 0 0 6px rgba(255, 0, 128, 0.3); }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(255, 0, 128, 1), 0 0 20px rgba(0, 255, 255, 0.8), inset 0 0 10px rgba(255, 0, 128, 0.5); }
}

@keyframes neon-pulse-2 {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

@keyframes neon-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* —— Snowfall —— */

.snowfall-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.snowflake {
  position: absolute;
  top: -6%;
  left: var(--x, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  opacity: 0;
  animation: snowflake-fall var(--duration, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.snowflake--white { background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 3px rgba(255, 255, 255, 0.8); }
.snowflake--pale { background: rgba(220, 235, 255, 0.85); }
.snowflake--bright { background: #fff; box-shadow: 0 0 4px #fff, 0 0 8px rgba(200, 220, 255, 0.5); }

@keyframes snowflake-fall {
  0% { top: -6%; opacity: 0; transform: translateX(0); }
  10% { opacity: 0.9; }
  100% { top: 106%; opacity: 0.3; transform: translateX(var(--drift, 0px)); }
}

/* —— Corrupt —— */

.effect-corrupt .image-wrap > img:not([class*="overlay"]) {
  animation: corrupt-flicker 4s steps(1) infinite;
}

.corrupt-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.corrupt-block {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, 12%);
  height: var(--h, 10%);
  opacity: 0;
  mix-blend-mode: hard-light;
  animation: corrupt-block-flash var(--duration, 2s) steps(1) infinite;
  animation-delay: var(--delay, 0s);
}

.corrupt-block--0 { background: rgba(255, 0, 100, 0.55); }
.corrupt-block--1 { background: rgba(0, 255, 200, 0.45); }
.corrupt-block--2 { background: rgba(255, 220, 0, 0.5); }

@keyframes corrupt-flicker {
  0%, 92%, 100% { filter: none; }
  93% { filter: hue-rotate(90deg) saturate(2); }
  95% { filter: invert(0.2); }
}

@keyframes corrupt-block-flash {
  0%, 70%, 100% { opacity: 0; transform: translate(0); }
  72% { opacity: 0.85; transform: translate(3px, -2px); filter: hue-rotate(120deg); }
  74% { opacity: 0.6; transform: translate(-2px, 1px); }
  76% { opacity: 0.9; transform: translate(1px, 2px); filter: saturate(2); }
  78% { opacity: 0; }
}

/* —— Prism —— */

.effect-prism .image-wrap > img:not([class*="overlay"]) {
  animation: prism-hue 11s linear infinite;
}

.prism-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.prism-fx__beam {
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, red, orange, yellow, lime, cyan, blue, violet, red);
  opacity: 0.22;
  mix-blend-mode: color-dodge;
  animation: prism-spin 10s linear infinite;
}

@keyframes prism-hue {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(15deg) saturate(1.2); }
}

@keyframes prism-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* —— Haunt —— */

.effect-haunt .image-wrap > img:not([class*="overlay"]) {
  animation: haunt-base 4s ease-in-out infinite;
}

.haunt-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.haunt-fx__ghost {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(0.5px) brightness(1.3);
  mix-blend-mode: screen;
}

.haunt-fx__ghost--1 {
  animation: haunt-ghost-1 4s ease-in-out infinite;
}

.haunt-fx__ghost--2 {
  animation: haunt-ghost-2 4.8s ease-in-out infinite;
}

.haunt-fx__mist {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(180, 200, 220, 0.25) 0%, transparent 50%);
  animation: haunt-mist 5s ease-in-out infinite alternate;
}

@keyframes haunt-base {
  0%, 100% { filter: brightness(0.9) saturate(0.85); }
  50% { filter: brightness(0.75) saturate(0.7); }
}

@keyframes haunt-ghost-1 {
  0%, 100% { opacity: 0; transform: translate(0); }
  20% { opacity: 0.35; transform: translate(-6px, -3px); }
  40% { opacity: 0; transform: translate(-10px, -5px); }
}

@keyframes haunt-ghost-2 {
  0%, 100% { opacity: 0; transform: translate(0); }
  55% { opacity: 0.28; transform: translate(5px, 4px); }
  75% { opacity: 0; transform: translate(8px, 6px); }
}

@keyframes haunt-mist {
  0% { opacity: 0.5; }
  100% { opacity: 0.85; }
}

/* —— Rust —— */

.effect-rust .image-wrap > img:not([class*="overlay"]) {
  animation: rust-desaturate 6s ease-in-out infinite;
}

.rust-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.rust-fx__creep {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 0% 100%, rgba(139, 69, 19, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(160, 82, 45, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 0% 0%, rgba(120, 60, 20, 0.35) 0%, transparent 55%);
  mix-blend-mode: multiply;
  animation: rust-spread 6s ease-in-out infinite alternate;
}

.rust-pit {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 40% 60% 50% 50%;
  opacity: 0;
  animation: rust-pit-grow var(--duration, 3.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.rust-pit--brown { background: rgba(101, 50, 15, 0.7); }
.rust-pit--orange { background: rgba(180, 90, 30, 0.65); }
.rust-pit--dark { background: rgba(60, 30, 10, 0.75); }

@keyframes rust-desaturate {
  0%, 100% { filter: sepia(0.25) saturate(0.85); }
  50% { filter: sepia(0.45) saturate(0.65) brightness(0.9); }
}

@keyframes rust-spread {
  0% { opacity: 0.65; }
  100% { opacity: 1; }
}

@keyframes rust-pit-grow {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* —— Toxic —— */

.effect-toxic .image-wrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(80, 255, 0, 0.35) 0%, transparent 100%);
  pointer-events: none;
  z-index: 4;
  animation: toxic-glow 3s ease-in-out infinite;
}

.toxic-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.toxic-fx__fog {
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(100, 255, 50, 0.2) 0%, transparent 70%);
  animation: toxic-fog 4s ease-in-out infinite alternate;
}

.toxic-drip {
  position: absolute;
  top: -5%;
  left: var(--x, 50%);
  width: 3px;
  height: 0;
  background: linear-gradient(to bottom, rgba(150, 255, 50, 0.9), rgba(50, 180, 0, 0.7));
  border-radius: 0 0 50% 50%;
  box-shadow: 0 0 6px rgba(100, 255, 0, 0.6);
  animation: toxic-drip-fall var(--duration, 3s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

.toxic-bubble {
  position: absolute;
  bottom: -4%;
  left: var(--x, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  border: 1px solid rgba(150, 255, 80, 0.6);
  opacity: 0;
  animation: toxic-bubble-rise var(--duration, 2.5s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.toxic-bubble--green { background: rgba(80, 220, 40, 0.4); }
.toxic-bubble--lime { background: rgba(150, 255, 60, 0.35); }
.toxic-bubble--yellow { background: rgba(200, 255, 80, 0.3); }

@keyframes toxic-glow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes toxic-fog {
  0% { opacity: 0.6; transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(1.1); }
}

@keyframes toxic-drip-fall {
  0% { top: -5%; height: 0; opacity: 0; }
  10% { opacity: 1; height: var(--height, 25%); }
  90% { opacity: 0.7; }
  100% { top: 95%; height: var(--height, 25%); opacity: 0; }
}

@keyframes toxic-bubble-rise {
  0% { bottom: -4%; opacity: 0; transform: scale(0.6); }
  15% { opacity: 0.7; }
  100% { bottom: 80%; opacity: 0; transform: scale(1.1); }
}

/* —— Nova —— */

.effect-nova .image-wrap > img:not([class*="overlay"]) {
  animation: nova-flash 3.5s ease-out infinite;
}

.nova-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.nova-fx__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 220, 100, 0.9) 30%, transparent 70%);
  opacity: 0;
  animation: nova-core-burst 3.5s ease-out infinite;
}

.nova-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 55%;
  transform-origin: center top;
  transform: translate(-50%, 0) rotate(var(--angle, 0deg));
  background: linear-gradient(to bottom, rgba(255, 255, 200, 0.9) 0%, rgba(255, 180, 80, 0.4) 40%, transparent 100%);
  opacity: 0;
  animation: nova-ray-burst 3.5s ease-out infinite;
}

@keyframes nova-flash {
  0%, 85%, 100% { filter: brightness(1); }
  88% { filter: brightness(1.6) saturate(1.3); }
  92% { filter: brightness(1.1); }
}

@keyframes nova-core-burst {
  0%, 82%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  86% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  94% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

@keyframes nova-ray-burst {
  0%, 82%, 100% { opacity: 0; height: 0; }
  86% { opacity: 0.9; height: 55%; }
  94% { opacity: 0; height: 70%; }
}

/* —— Gold 2.0 —— */

.effect-gold-2-0 .image-wrap {
  overflow: hidden;
}

.effect-gold-2-0 .image-wrap > img:not([class*="overlay"]) {
  filter: sepia(0.42) saturate(1.35) brightness(1.08) contrast(1.06);
  animation: gold20-art-glow 7.5s ease-in-out infinite;
}

.effect-gold-2-0.card {
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.55),
    0 4px 18px rgba(120, 90, 20, 0.35);
}

.gold20-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.gold20-fx__plate {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      145deg,
      rgba(120, 85, 15, 0.55) 0%,
      rgba(255, 232, 140, 0.65) 18%,
      rgba(201, 162, 39, 0.5) 38%,
      rgba(255, 248, 200, 0.7) 52%,
      rgba(184, 134, 11, 0.55) 68%,
      rgba(255, 230, 150, 0.6) 82%,
      rgba(140, 100, 20, 0.5) 100%
    );
  background-size: 200% 200%;
  mix-blend-mode: overlay;
  opacity: 0.88;
  animation: gold20-plate-shift 9s ease-in-out infinite;
}

.gold20-fx__sheen {
  position: absolute;
  inset: -60%;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 220, 0.05) 46%,
    rgba(255, 248, 200, 0.45) 49%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 235, 160, 0.4) 51%,
    rgba(255, 220, 120, 0.08) 54%,
    transparent 58%
  );
  transform: translateX(-130%) rotate(6deg);
  animation: gold20-sheen-sweep 6.75s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.gold20-fx__grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.04) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 220, 100, 0.03) 0 2px,
      transparent 2px 4px
    );
  mix-blend-mode: overlay;
}

.gold20-fx__frame {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 2px rgba(255, 220, 120, 0.75),
    inset 0 0 0 3px rgba(160, 120, 30, 0.45),
    inset 0 0 18px rgba(201, 162, 39, 0.35),
    inset 0 0 36px rgba(80, 55, 10, 0.2);
}

.gold20-fx__corner {
  position: absolute;
  width: 22%;
  height: 22%;
  opacity: 0.85;
  background: linear-gradient(135deg, rgba(255, 240, 170, 0.55) 0%, rgba(201, 162, 39, 0.25) 45%, transparent 70%);
  mix-blend-mode: soft-light;
}

.gold20-fx__corner--tl { top: 0; left: 0; }
.gold20-fx__corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.gold20-fx__corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.gold20-fx__corner--br { bottom: 0; right: 0; transform: scale(-1); }

@keyframes gold20-art-glow {
  0%, 100% { filter: sepia(0.42) saturate(1.35) brightness(1.08) contrast(1.06); }
  50% { filter: sepia(0.48) saturate(1.45) brightness(1.12) contrast(1.08); }
}

@keyframes gold20-plate-shift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

@keyframes gold20-sheen-sweep {
  0%, 22% { transform: translateX(-130%) rotate(6deg); opacity: 0; }
  32% { opacity: 1; }
  58% { transform: translateX(130%) rotate(6deg); opacity: 1; }
  68%, 100% { transform: translateX(130%) rotate(6deg); opacity: 0; }
}

/* —— Smolder —— */

.effect-smolder .image-wrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(40, 40, 40, 0.45) 0%, transparent 100%);
  pointer-events: none;
  z-index: 4;
}

.smolder-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.smolder-fx__haze {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(120, 120, 120, 0.2) 0%, transparent 70%);
  animation: smolder-haze 6s ease-in-out infinite alternate;
}

.smolder-wisp {
  position: absolute;
  bottom: -10%;
  left: var(--x, 50%);
  width: var(--size, 18px);
  height: calc(var(--size, 18px) * 1.6);
  border-radius: 50%;
  opacity: 0;
  filter: blur(3px);
  animation: smolder-rise var(--duration, 6s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.smolder-wisp--0 { background: rgba(90, 90, 90, 0.45); }
.smolder-wisp--1 { background: rgba(120, 120, 120, 0.38); }
.smolder-wisp--2 { background: rgba(70, 70, 70, 0.42); }

@keyframes smolder-haze {
  0% { opacity: 0.6; transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(1.08); }
}

@keyframes smolder-rise {
  0% { bottom: -10%; opacity: 0; transform: translateX(0) scale(0.7); }
  12% { opacity: 0.55; }
  100% { bottom: 108%; opacity: 0; transform: translateX(var(--drift, 0px)) scale(1.4); }
}

/* —— VHS —— */

.effect-vhs .image-wrap {
  background: #0b0d10;
  overflow: hidden;
}

.effect-vhs .image-wrap > img:not([class*="overlay"]) {
  animation: vhs-wobble 5s steps(8) infinite;
  filter: contrast(1.08) saturate(0.92);
}

.vhs-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.vhs-fx__bleed {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
}

.vhs-fx__bleed--r {
  filter: sepia(1) saturate(4) hue-rotate(320deg);
  animation: vhs-bleed-r 4.5s steps(6) infinite;
}

.vhs-fx__bleed--b {
  filter: sepia(1) saturate(4) hue-rotate(200deg);
  animation: vhs-bleed-b 4.8s steps(6) infinite;
}

.vhs-fx__tracking {
  position: absolute;
  left: 0;
  right: 0;
  height: 6%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  animation: vhs-tracking 3.5s linear infinite;
  z-index: 2;
}

.vhs-fx__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 0 1px,
    transparent 1px 3px
  );
  animation: vhs-scan-flicker 0.18s steps(2) infinite;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}

.vhs-fx__noise {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.04) 0 1px,
    transparent 1px 2px
  );
  animation: vhs-noise 0.15s steps(2) infinite;
}

.vhs-fx__vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.45);
  z-index: 4;
}

@keyframes vhs-wobble {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(2px, 0); }
  96% { transform: translate(-1px, -1px); }
}

@keyframes vhs-bleed-r {
  0%, 85%, 100% { opacity: 0; transform: translateX(0); }
  88% { opacity: 0.35; transform: translateX(-3px); }
  91% { opacity: 0.2; transform: translateX(2px); }
}

@keyframes vhs-bleed-b {
  0%, 84%, 100% { opacity: 0; transform: translateX(0); }
  87% { opacity: 0.3; transform: translateX(3px); }
  90% { opacity: 0.18; transform: translateX(-2px); }
}

@keyframes vhs-tracking {
  0% { top: -8%; opacity: 0; }
  8% { opacity: 0.7; }
  100% { top: 104%; opacity: 0.4; }
}

@keyframes vhs-scan-flicker {
  0%, 100% { opacity: 0.24; }
  50% { opacity: 0.32; }
}

@keyframes vhs-noise {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.16; }
}

/* —— Candlelight —— */

.effect-candlelight .image-wrap > img:not([class*="overlay"]) {
  animation: candlelight-art-flicker 3.2s ease-in-out infinite;
}

.candlelight-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.candlelight-fx__glow {
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle, rgba(255, 180, 60, 0.55) 0%, rgba(255, 120, 20, 0.25) 45%, transparent 70%);
  animation: candlelight-glow 3.2s ease-in-out infinite;
}

.candlelight-fx__flicker {
  position: absolute;
  bottom: 8%;
  left: 10%;
  width: 8%;
  height: 14%;
  background: linear-gradient(to top, rgba(255, 220, 120, 0.9) 0%, rgba(255, 160, 40, 0.7) 40%, transparent 100%);
  border-radius: 50% 50% 20% 20%;
  filter: blur(1px);
  animation: candlelight-flame 1.8s ease-in-out infinite;
}

.candlelight-fx__warmth {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 15% 95%, rgba(255, 160, 50, 0.22) 0%, transparent 65%);
  mix-blend-mode: overlay;
  animation: candlelight-warmth 3.2s ease-in-out infinite;
}

@keyframes candlelight-art-flicker {
  0%, 100% { filter: brightness(1) sepia(0.08); }
  40% { filter: brightness(1.06) sepia(0.12); }
  55% { filter: brightness(0.97) sepia(0.1); }
  70% { filter: brightness(1.04) sepia(0.11); }
}

@keyframes candlelight-glow {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  35% { opacity: 0.95; transform: scale(1.05); }
  55% { opacity: 0.82; transform: scale(0.98); }
  72% { opacity: 0.9; transform: scale(1.02); }
}

@keyframes candlelight-flame {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
  30% { transform: scaleY(1.12) scaleX(0.92); opacity: 1; }
  50% { transform: scaleY(0.94) scaleX(1.06); opacity: 0.85; }
  68% { transform: scaleY(1.08) scaleX(0.96); opacity: 0.95; }
}

@keyframes candlelight-warmth {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.95; }
}

/* —— Aurora —— */

.effect-aurora .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.8) saturate(1.14) contrast(1.08) hue-rotate(-5deg);
}

.effect-aurora .image-wrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(
    to top,
    rgba(0, 10, 28, 0.58) 0%,
    rgba(0, 18, 45, 0.28) 52%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

.effect-aurora .image-wrap::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 48%;
  background: linear-gradient(
    to bottom,
    rgba(25, 105, 88, 0.45) 0%,
    rgba(45, 65, 195, 0.24) 48%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

.aurora-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.aurora-fx__night {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 8, 26, 0.38) 0%,
    rgba(8, 14, 38, 0.22) 45%,
    rgba(2, 8, 24, 0.42) 100%
  );
}

.aurora-fx__ribbon {
  position: absolute;
  left: -18%;
  right: -18%;
  height: 42%;
  opacity: 0.75;
  filter: blur(5px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  z-index: 1;
}

.aurora-fx__ribbon--1 {
  top: -8%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 180, 0.68) 22%,
    rgba(80, 130, 255, 0.72) 48%,
    rgba(190, 90, 255, 0.62) 76%,
    transparent
  );
  background-size: 200% 100%;
  animation: aurora-ribbon-1 5.5s ease-in-out infinite;
}

.aurora-fx__ribbon--2 {
  top: 2%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(70, 255, 205, 0.58) 28%,
    rgba(0, 215, 255, 0.68) 52%,
    rgba(130, 85, 255, 0.58) 82%,
    transparent
  );
  background-size: 220% 100%;
  animation: aurora-ribbon-2 6.8s ease-in-out infinite;
}

.aurora-fx__ribbon--3 {
  top: -14%;
  height: 36%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(90, 255, 155, 0.58) 38%,
    rgba(50, 195, 255, 0.65) 62%,
    transparent
  );
  background-size: 180% 100%;
  animation: aurora-ribbon-3 5s ease-in-out infinite;
}

.aurora-fx__ribbon--4 {
  top: 14%;
  height: 32%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(150, 75, 255, 0.62) 32%,
    rgba(0, 255, 195, 0.68) 54%,
    rgba(55, 145, 255, 0.58) 78%,
    transparent
  );
  background-size: 210% 100%;
  animation: aurora-ribbon-4 7.2s ease-in-out infinite;
}

.aurora-fx__shimmer {
  position: absolute;
  inset: -10% 0 0;
  z-index: 2;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 115% 55% at 50% -6%, rgba(120, 255, 220, 0.38) 0%, transparent 70%),
    radial-gradient(ellipse 88% 42% at 28% 2%, rgba(75, 185, 255, 0.28) 0%, transparent 68%),
    radial-gradient(ellipse 88% 42% at 72% 2%, rgba(175, 95, 255, 0.24) 0%, transparent 68%),
    radial-gradient(ellipse 60% 28% at 50% 18%, rgba(100, 255, 180, 0.18) 0%, transparent 72%);
  animation: aurora-shimmer 4.5s ease-in-out infinite alternate;
}

@keyframes aurora-ribbon-1 {
  0%, 100% {
    transform: translateX(-10%) translateY(-3%) skewX(-8deg);
    background-position: 0% 50%;
    opacity: 0.58;
  }

  50% {
    transform: translateX(10%) translateY(3%) skewX(8deg);
    background-position: 100% 50%;
    opacity: 0.92;
  }
}

@keyframes aurora-ribbon-2 {
  0%, 100% {
    transform: translateX(8%) translateY(-2%) skewX(5deg);
    background-position: 100% 50%;
    opacity: 0.52;
  }

  50% {
    transform: translateX(-12%) translateY(-6%) skewX(-9deg);
    background-position: 0% 50%;
    opacity: 0.88;
  }
}

@keyframes aurora-ribbon-3 {
  0%, 100% {
    transform: translateX(-7%) translateY(-4%) scaleY(1.08);
    background-position: 50% 0%;
    opacity: 0.52;
  }

  50% {
    transform: translateX(9%) translateY(3%) scaleY(1.2);
    background-position: 50% 100%;
    opacity: 0.9;
  }
}

@keyframes aurora-ribbon-4 {
  0%, 100% {
    transform: translateX(5%) translateY(1%) skewX(-5deg);
    background-position: 80% 50%;
    opacity: 0.5;
  }

  50% {
    transform: translateX(-9%) translateY(-2%) skewX(7deg);
    background-position: 20% 50%;
    opacity: 0.86;
  }
}

@keyframes aurora-shimmer {
  0% { opacity: 0.62; transform: translateY(-3%); }
  100% { opacity: 1; transform: translateY(2%); }
}

/* —— Phosphor —— */

.effect-phosphor .image-wrap {
  background: #020804;
  overflow: hidden;
}

.effect-phosphor .image-wrap > img:not([class*="overlay"]) {
  filter: contrast(1.2) brightness(0.9) saturate(0.7) hue-rotate(80deg);
  animation: phosphor-flicker 4s steps(2) infinite;
}

.phosphor-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.phosphor-fx__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(80, 255, 120, 0.18) 0%, transparent 70%);
  mix-blend-mode: screen;
}

.phosphor-fx__sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(120, 255, 160, 0.25), transparent);
  animation: phosphor-sweep 3.5s linear infinite;
}

.phosphor-fx__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

@keyframes phosphor-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}

@keyframes phosphor-sweep {
  0% { top: -20%; opacity: 0; }
  10% { opacity: 0.8; }
  100% { top: 110%; opacity: 0.3; }
}

/* —— Inkwell —— */

.effect-inkwell .image-wrap > img:not([class*="overlay"]) {
  filter: contrast(1.1) saturate(0.85);
}

.inkwell-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.inkwell-blot {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 14px);
  height: var(--size, 14px);
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 45% 55% 50% 50%;
  opacity: 0;
  animation: inkwell-spread var(--duration, 3s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.inkwell-blot--0 { background: rgba(8, 8, 12, 0.85); }
.inkwell-blot--1 { background: rgba(20, 15, 25, 0.8); }
.inkwell-blot--2 { background: rgba(5, 5, 8, 0.9); }

@keyframes inkwell-spread {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  20% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
}

/* —— Hologram —— */

.effect-hologram .image-wrap {
  overflow: hidden;
}

.effect-hologram .image-wrap > img:not([class*="overlay"]) {
  animation: hologram-image-flicker 2.8s steps(2) infinite;
  filter: saturate(1.15) brightness(1.05);
}

.hologram-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.hologram-fx__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 255, 255, 0.65);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
  animation: hologram-scan 2.5s linear infinite;
}

.hologram-fx__lines {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background: repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.12) 0 1px, transparent 1px 4px);
}

.hologram-fx__flicker {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08) 0%, transparent 50%, rgba(180, 100, 255, 0.06) 100%);
  animation: hologram-flicker 2.8s steps(2) infinite;
  mix-blend-mode: screen;
}

@keyframes hologram-image-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

@keyframes hologram-scan {
  0% { top: -2%; opacity: 0; }
  8% { opacity: 1; }
  100% { top: 102%; opacity: 0.5; }
}

@keyframes hologram-flicker {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* —— Sandstorm —— */

.effect-sandstorm .image-wrap > img:not([class*="overlay"]) {
  filter: sepia(0.35) saturate(0.8) brightness(0.95);
}

.sandstorm-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.sandstorm-fx__haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(180, 140, 80, 0.25) 0%, rgba(210, 170, 100, 0.15) 50%, rgba(180, 140, 80, 0.25) 100%);
  animation: sandstorm-haze 4s ease-in-out infinite alternate;
}

.sandstorm-grain {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  opacity: 0;
  animation: sandstorm-blow var(--duration, 2.5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.sandstorm-grain--tan { background: rgba(210, 170, 110, 0.7); }
.sandstorm-grain--gold { background: rgba(190, 150, 80, 0.65); }
.sandstorm-grain--brown { background: rgba(160, 120, 70, 0.6); }

@keyframes sandstorm-haze {
  0% { opacity: 0.6; transform: translateX(-3%); }
  100% { opacity: 0.9; transform: translateX(3%); }
}

@keyframes sandstorm-blow {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--drift, 30px), -8px); }
}

/* —— Pulsewave —— */

.pulsewave-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.pulsewave-fx__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(100, 200, 255, 0.7);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 10px rgba(100, 200, 255, 0.4);
}

.pulsewave-fx__ring--1 { animation: pulsewave-ring 3s ease-out infinite; }
.pulsewave-fx__ring--2 { animation: pulsewave-ring 3s ease-out infinite 1s; }
.pulsewave-fx__ring--3 { animation: pulsewave-ring 3s ease-out infinite 2s; }

@keyframes pulsewave-ring {
  0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

/* —— Bloodmoon —— */

.effect-bloodmoon .image-wrap > img:not([class*="overlay"]) {
  filter: sepia(0.4) saturate(1.4) hue-rotate(-15deg) brightness(0.75);
  animation: bloodmoon-pulse 5s ease-in-out infinite;
}

.bloodmoon-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.bloodmoon-fx__disc {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 20, 30, 0.9) 0%, rgba(100, 10, 20, 0.5) 55%, transparent 72%);
  box-shadow: 0 0 20px rgba(200, 30, 40, 0.5);
  animation: bloodmoon-disc 5s ease-in-out infinite;
}

.bloodmoon-fx__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(120, 0, 20, 0.35) 0%, transparent 70%);
  mix-blend-mode: multiply;
}

.bloodmoon-fx__mist {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(80, 0, 15, 0.4) 0%, transparent 100%);
  animation: bloodmoon-mist 6s ease-in-out infinite alternate;
}

@keyframes bloodmoon-pulse {
  0%, 100% { filter: sepia(0.4) saturate(1.4) hue-rotate(-15deg) brightness(0.75); }
  50% { filter: sepia(0.45) saturate(1.55) hue-rotate(-20deg) brightness(0.68); }
}

@keyframes bloodmoon-disc {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes bloodmoon-mist {
  0% { opacity: 0.6; }
  100% { opacity: 0.9; }
}

/* —— Gridlock —— */

.effect-gridlock .image-wrap {
  overflow: hidden;
}

.effect-gridlock .image-wrap > img:not([class*="overlay"]) {
  filter: contrast(1.15) brightness(0.85) saturate(0.9);
}

.gridlock-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.gridlock-fx__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background:
    repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.15) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0 1px, transparent 1px 18px);
  animation: gridlock-pulse 3s ease-in-out infinite;
}

.gridlock-fx__edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), rgba(255, 0, 200, 0.6), transparent);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.gridlock-fx__edge--top { top: 0; animation: gridlock-edge-h 4s linear infinite; }
.gridlock-fx__edge--bottom { bottom: 0; animation: gridlock-edge-h 4s linear infinite reverse; }

@keyframes gridlock-pulse {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.45; }
}

@keyframes gridlock-edge-h {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0.6; }
}

/* —— Drizzle —— */

.effect-drizzle .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.88) saturate(0.86) contrast(1.05) hue-rotate(6deg);
}

.effect-drizzle .image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(45, 58, 78, 0.32) 0%,
    rgba(38, 52, 72, 0.48) 55%,
    rgba(32, 45, 65, 0.42) 100%
  );
  pointer-events: none;
  z-index: 4;
}

.drizzle-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.drizzle-fx__overcast {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(75, 95, 118, 0.16) 0%,
    rgba(55, 72, 95, 0.28) 50%,
    rgba(45, 62, 85, 0.22) 100%
  );
}

.drizzle-fx__mist {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 44%;
  background: linear-gradient(
    to top,
    rgba(95, 120, 148, 0.45) 0%,
    rgba(115, 140, 168, 0.18) 55%,
    transparent 100%
  );
}

.drizzle-streak {
  position: absolute;
  top: -12%;
  left: var(--x, 50%);
  width: var(--width, 1.5px);
  height: var(--height, 18%);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(195, 218, 242, 0.78) 35%,
    rgba(155, 190, 225, 0.52) 100%
  );
  opacity: 0;
  transform: rotate(var(--angle, 8deg));
  box-shadow: 0 0 3px rgba(175, 205, 235, 0.4);
  z-index: 2;
  animation: drizzle-fall var(--duration, 1s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes drizzle-fall {
  0% { top: -12%; opacity: 0; }
  8% { opacity: 0.9; }
  100% { top: 112%; opacity: 0.12; }
}

/* —— Money Bags —— */

.effect-money-bags .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.94) saturate(1.38) contrast(1.06) hue-rotate(72deg);
}

.effect-money-bags .image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.16) 0%,
    rgba(22, 163, 74, 0.26) 52%,
    rgba(21, 128, 61, 0.3) 100%
  );
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 3;
}

.money-bags-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.money-bags-fx__hue {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 92% 82% at 50% 44%,
    rgba(74, 222, 128, 0.24) 0%,
    rgba(34, 197, 94, 0.14) 48%,
    rgba(22, 101, 52, 0.22) 100%
  );
  mix-blend-mode: soft-light;
}

.money-bags-fx__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(134, 239, 172, 0.1) 0%,
    transparent 42%,
    rgba(22, 101, 52, 0.2) 100%
  );
}

.money-bag-dollar {
  position: absolute;
  top: -10%;
  left: var(--x, 50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size, 16px);
  height: var(--size, 16px);
  font-family: "Times New Roman", Times, ui-serif, Georgia, serif;
  font-size: var(--size, 16px);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  color: #4ade80;
  -webkit-text-stroke: 0.9px #000;
  paint-order: stroke fill;
  text-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
  opacity: 0;
  transform: translateX(-50%);
  animation: money-bag-fall var(--duration, 3s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes money-bag-fall {
  0% { top: -10%; opacity: 0; transform: translateX(-50%) rotate(0deg); }
  8% { opacity: 0.95; }
  100% {
    top: 108%;
    opacity: 0.12;
    transform: translateX(calc(-50% + var(--drift, 0px))) rotate(var(--spin, 0deg));
  }
}

/* —— Stampede (Zoo Keeper · set_complete_animals) —— */
/* Dust storm along the bottom · sweeps left to right */

.effect-stampede {
  --stampede-cycle: 6s;
}

.effect-stampede .image-wrap {
  overflow: hidden;
}

.effect-stampede .image-wrap > img:not([class*="overlay"]) {
  animation:
    stampede-art-rumble var(--stampede-cycle) ease-in-out infinite,
    stampede-art-grade var(--stampede-cycle) ease-in-out infinite;
  transform-origin: center bottom;
}

.effect-stampede .image-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(210, 170, 120, 0.1) 48%,
    rgba(160, 115, 72, 0.22) 100%
  );
}

.stampede-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.stampede-fx__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(194, 148, 96, 0.16) 38%,
    rgba(150, 105, 62, 0.28) 100%
  );
  z-index: 1;
}

.stampede-fx__herd {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.stampede-fx__sheet {
  position: absolute;
  bottom: 0;
  left: -70%;
  width: 68%;
  filter: blur(6px);
  opacity: 0;
  z-index: 4;
  animation: stampede-dust-sweep var(--stampede-cycle) linear infinite;
}

.stampede-fx__sheet--1 {
  height: 34%;
  background:
    radial-gradient(ellipse 95% 90% at 42% 72%, rgba(235, 210, 175, 0.88) 0%, rgba(200, 155, 105, 0.62) 38%, transparent 74%),
    radial-gradient(ellipse 75% 65% at 68% 58%, rgba(220, 180, 130, 0.7) 0%, transparent 70%);
}

.stampede-fx__sheet--2 {
  height: 28%;
  width: 58%;
  left: -62%;
  filter: blur(9px);
  animation-delay: calc(var(--stampede-cycle) * -0.33);
  background: radial-gradient(
    ellipse 100% 92% at 50% 82%,
    rgba(215, 175, 125, 0.78) 0%,
    rgba(180, 130, 85, 0.42) 48%,
    transparent 78%
  );
}

.stampede-fx__sheet--3 {
  height: 22%;
  width: 52%;
  left: -58%;
  bottom: 1%;
  filter: blur(7px);
  animation-delay: calc(var(--stampede-cycle) * -0.66);
  background: radial-gradient(
    ellipse 100% 100% at 50% 100%,
    rgba(245, 225, 195, 0.72) 0%,
    rgba(205, 160, 110, 0.38) 42%,
    transparent 72%
  );
}

.stampede-fx__dust-top {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.stampede-fx__sheet--4 {
  height: 32%;
  width: 72%;
  left: -75%;
  filter: blur(11px);
  z-index: 2;
  animation-delay: calc(var(--stampede-cycle) * -0.12);
  background:
    radial-gradient(ellipse 100% 95% at 50% 75%, rgba(240, 220, 190, 0.92) 0%, rgba(210, 170, 125, 0.65) 45%, transparent 78%),
    linear-gradient(180deg, rgba(225, 195, 155, 0.55), rgba(185, 140, 95, 0.35));
}

.stampede-fx__sheet--5 {
  height: 26%;
  width: 64%;
  left: -68%;
  bottom: 3%;
  filter: blur(13px);
  z-index: 3;
  animation-delay: calc(var(--stampede-cycle) * -0.48);
  background: radial-gradient(
    ellipse 110% 100% at 55% 85%,
    rgba(250, 235, 210, 0.85) 0%,
    rgba(220, 180, 135, 0.5) 50%,
    transparent 80%
  );
}

.stampede-fx__mist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  z-index: 4;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(225, 195, 155, 0.22) 35%,
    rgba(200, 160, 110, 0.48) 72%,
    rgba(175, 130, 85, 0.62) 100%
  );
  animation: stampede-mist-pulse var(--stampede-cycle) ease-in-out infinite;
}

.stampede-fx__blob {
  position: absolute;
  bottom: var(--b-y, 10%);
  left: -16%;
  opacity: 0;
  background: #1a120c;
  transform: scale(var(--b-scale, 1));
  transform-origin: center bottom;
  filter: blur(1.1px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
  animation: stampede-blob-cross var(--stampede-cycle) linear infinite;
  animation-delay: var(--b-delay, 0s);
}

.stampede-fx__blob--round {
  width: 14px;
  height: 10px;
  border-radius: 48% 48% 28% 28%;
}

.stampede-fx__blob--wide {
  width: 24px;
  height: 9px;
  border-radius: 42% 55% 22% 22%;
}

.stampede-fx__blob--tall {
  width: 11px;
  height: 15px;
  border-radius: 38% 38% 18% 18%;
}

.stampede-fx__blob--hump {
  width: 21px;
  height: 13px;
  border-radius: 58% 58% 20% 20% / 72% 72% 28% 28%;
}

.stampede-fx__blob--bird {
  width: 17px;
  height: 6px;
  border-radius: 48% 12% 48% 12%;
}

.stampede-fx__specks {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.stampede-fx__speck {
  position: absolute;
  bottom: var(--s-y, 8%);
  left: var(--s-start, -4%);
  width: var(--s-size, 3px);
  height: var(--s-size, 3px);
  border-radius: 50%;
  background: rgba(235, 210, 175, 0.9);
  opacity: 0;
  animation: stampede-speck-sweep var(--stampede-cycle) linear infinite;
  animation-delay: calc(var(--stampede-cycle) * var(--s-delay, 0.1));
}

@keyframes stampede-dust-sweep {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  5% {
    opacity: 0.95;
  }
  82% {
    opacity: 0.78;
  }
  100% {
    transform: translateX(290%);
    opacity: 0;
  }
}

@keyframes stampede-mist-pulse {
  0%, 100% { opacity: 0.72; }
  40% { opacity: 0.92; }
  65% { opacity: 0.85; }
}

@keyframes stampede-blob-cross {
  0% {
    left: -16%;
    opacity: 0;
  }
  6% {
    opacity: 0.52;
  }
  94% {
    opacity: 0.38;
  }
  100% {
    left: 108%;
    opacity: 0;
  }
}

@keyframes stampede-speck-sweep {
  0% {
    left: var(--s-start, -4%);
    transform: translateY(0);
    opacity: 0;
  }
  8% { opacity: 0.75; }
  100% {
    left: 104%;
    transform: translateY(var(--s-drift, -8px));
    opacity: 0;
  }
}

@keyframes stampede-art-rumble {
  0%, 18%, 72%, 100% {
    transform: translate(0, 0) scale(1);
  }
  28% { transform: translate(-0.5px, 0.3px) scale(1.002); }
  36% { transform: translate(0.6px, -0.2px) scale(1.002); }
  44% { transform: translate(-0.4px, 0.2px) scale(1.001); }
  52% { transform: translate(0.5px, 0) scale(1.002); }
  60% { transform: translate(-0.3px, -0.2px) scale(1.001); }
}

@keyframes stampede-art-grade {
  0%, 20%, 75%, 100% {
    filter: saturate(1.05) contrast(1.03) brightness(1.02);
  }
  35%, 58% {
    filter: saturate(0.95) contrast(1.06) brightness(0.96) sepia(0.1);
  }
}

/* —— Firefly (Nature Walk · set_complete_nature) —— */
/* Twilight trail · drifting glowing motes */

.effect-firefly {
  --firefly-cycle: 9s;
}

.effect-firefly .image-wrap {
  overflow: hidden;
}

.effect-firefly .image-wrap > img:not([class*="overlay"]) {
  animation: firefly-art-grade var(--firefly-cycle) ease-in-out infinite;
  transform-origin: center center;
}

.firefly-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.firefly-fx__twilight {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 88% 72% at 50% 88%, rgba(10, 28, 18, 0.32) 0%, transparent 58%),
    radial-gradient(ellipse 95% 90% at 50% 50%, transparent 32%, rgba(4, 10, 22, 0.52) 100%);
  animation: firefly-twilight var(--firefly-cycle) ease-in-out infinite;
}

.firefly-fx__glow-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse 70% 55% at 50% 72%,
    rgba(90, 160, 70, 0.04) 0%,
    transparent 72%
  );
  animation: firefly-wash var(--firefly-cycle) ease-in-out infinite;
  opacity: 0.35;
}

.firefly-fx__swarm {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.firefly-fx__fly {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 60%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  opacity: 0;
  animation: firefly-drift var(--duration, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.firefly-fx__pool {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size, 3px) * 18);
  height: calc(var(--size, 3px) * 18);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(235, 255, 185, 0.5) 0%,
    rgba(200, 240, 120, 0.28) 24%,
    rgba(150, 210, 90, 0.12) 46%,
    transparent 68%
  );
  mix-blend-mode: screen;
  filter: blur(2.5px);
  animation: firefly-pool var(--pulse, 2.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.firefly-fx__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #f6ffd0 0%,
    #d8f070 42%,
    rgba(180, 220, 80, 0.4) 68%,
    transparent 100%
  );
  animation: firefly-pulse var(--pulse, 2.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.firefly-fx__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size, 3px) * 4.2);
  height: calc(var(--size, 3px) * 4.2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(210, 255, 120, 0.55) 0%,
    rgba(140, 220, 80, 0.18) 42%,
    transparent 72%
  );
  filter: blur(1px);
  animation: firefly-halo var(--pulse, 2.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes firefly-twilight {
  0%, 100% {
    opacity: 0.88;
  }

  45% {
    opacity: 1;
  }

  68% {
    opacity: 0.92;
  }
}

@keyframes firefly-wash {
  0%, 100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes firefly-drift {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  10% {
    opacity: 0.92;
  }

  72% {
    opacity: 0.55;
    transform: translate(var(--drift, 0px), calc(var(--rise, 24px) * -1));
  }

  100% {
    opacity: 0;
    transform: translate(calc(var(--drift, 0px) * 1.15), calc(var(--rise, 24px) * -1.15));
  }
}

@keyframes firefly-pool {
  0%, 100% {
    opacity: 0.08;
    transform: translate(-50%, -50%) scale(0.65);
  }

  42% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.08);
  }

  58% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.82);
  }

  72% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes firefly-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.75);
  }

  42% {
    opacity: 1;
    transform: scale(1.15);
  }

  58% {
    opacity: 0.55;
    transform: scale(0.9);
  }

  72% {
    opacity: 0.95;
    transform: scale(1.05);
  }
}

@keyframes firefly-halo {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.7);
  }

  42% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.1);
  }

  58% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.85);
  }

  72% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes firefly-art-grade {
  0%, 100% {
    filter: saturate(0.9) contrast(1.05) brightness(0.8) hue-rotate(-4deg);
  }

  45% {
    filter: saturate(0.84) contrast(1.07) brightness(0.7) hue-rotate(-8deg);
  }

  68% {
    filter: saturate(0.88) contrast(1.06) brightness(0.76) hue-rotate(-5deg);
  }
}

/* —— Lockup (Order in the Court · set_complete_law) —— */
/* Dim → bars drop one by one → hold → bars rise one by one → restore */

.effect-lockup {
  --lockup-cycle: 10s;
}

.effect-lockup .image-wrap {
  overflow: hidden;
}

.effect-lockup .image-wrap > img:not([class*="overlay"]) {
  animation: lockup-art-grade var(--lockup-cycle) ease-in-out infinite;
  transform-origin: center center;
}

.lockup-dynamic-styles {
  display: none;
}

.lockup-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.lockup-fx__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse 92% 90% at 50% 48%,
    rgba(0, 0, 0, 0.32) 0%,
    rgba(0, 0, 0, 0.58) 100%
  );
  opacity: 0;
  animation: lockup-dim var(--lockup-cycle) ease-in-out infinite;
}

.lockup-fx__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.38);
  opacity: 0;
  animation: lockup-vignette var(--lockup-cycle) ease-in-out infinite;
}

.lockup-fx__frame {
  position: absolute;
  left: -3%;
  right: -3%;
  top: -2%;
  bottom: -2%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.lockup-fx__rail {
  flex: 0 0 auto;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  animation: lockup-rails var(--lockup-cycle) ease-in-out infinite;
  background: linear-gradient(
    180deg,
    #4a4034 0%,
    #2a2218 38%,
    #1a1510 62%,
    #0f0c09 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.28);
}

.lockup-fx__rail--top {
  margin-bottom: -1px;
}

.lockup-fx__rail--bottom {
  margin-top: -1px;
}

.lockup-fx__bars {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  padding: 0 2px;
  overflow: hidden;
}

.lockup-fx__bar {
  width: 6px;
  border-radius: 2px;
  transform: translateY(-112%);
  background: linear-gradient(
    90deg,
    #120e0a 0%,
    #2f281f 16%,
    #5a4d3a 34%,
    #7a6a52 50%,
    #4a3f30 66%,
    #221b14 84%,
    #0c0907 100%
  );
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.05),
    -1px 0 2px rgba(0, 0, 0, 0.45);
}

.lockup-fx__bar:nth-child(3n) {
  width: 7px;
}

.lockup-fx__bar:nth-child(3n + 2) {
  width: 5px;
  opacity: 0.92;
}

@keyframes lockup-dim {
  0%, 19%, 78%, 100% {
    opacity: 0;
  }

  24%, 58% {
    opacity: 0.72;
  }

  68% {
    opacity: 0.28;
  }
}

@keyframes lockup-vignette {
  0%, 19%, 78%, 100% {
    opacity: 0;
  }

  26%, 58% {
    opacity: 0.85;
  }

  68% {
    opacity: 0.35;
  }
}

@keyframes lockup-rails {
  0%, 23%, 72%, 100% {
    opacity: 0;
  }

  28%, 58% {
    opacity: 1;
  }

  66% {
    opacity: 0.2;
  }
}

@keyframes lockup-art-grade {
  0%, 19%, 78%, 100% {
    filter: saturate(1.04) contrast(1.03) brightness(1.02);
  }

  26%, 58% {
    filter: saturate(0.82) contrast(1.05) brightness(0.62);
  }

  68% {
    filter: saturate(0.94) contrast(1.03) brightness(0.88);
  }
}

/* —— Shift Change (Career Day · set_complete_careers) —— */

.effect-shift-change {
  --shift-cycle: 28s;
  --shift-orbit-pivot-y: 108%;
  --shift-orbit-zenith-y: 6%;
  --shift-rail-enter: -38deg;
  --shift-rail-exit: 40deg;
}

.effect-shift-change .image-wrap {
  overflow: hidden;
}

.effect-shift-change .image-wrap > img:not([class*="overlay"]) {
  animation: shift-change-art-grade var(--shift-cycle) ease-in-out infinite;
  transform-origin: center center;
}

.shift-change-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.shift-change-fx__wash {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.shift-change-fx__wash--morning {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(175, 205, 240, 0.18) 0%,
    transparent 42%,
    rgba(130, 160, 200, 0.08) 100%
  );
  animation: shift-change-wash-morning var(--shift-cycle) ease-in-out infinite;
}

.shift-change-fx__wash--work {
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(255, 228, 175, 0.16) 0%,
    rgba(255, 205, 140, 0.09) 48%,
    transparent 100%
  );
  animation: shift-change-wash-work var(--shift-cycle) ease-in-out infinite;
}

.shift-change-fx__wash--dusk {
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(255, 180, 120, 0.1) 0%,
    rgba(120, 100, 150, 0.12) 55%,
    rgba(60, 55, 90, 0.16) 100%
  );
  animation: shift-change-wash-dusk var(--shift-cycle) ease-in-out infinite;
}

.shift-change-fx__wash--night {
  z-index: 4;
  background: linear-gradient(
    180deg,
    rgba(15, 25, 55, 0.22) 0%,
    rgba(8, 12, 35, 0.14) 45%,
    rgba(5, 8, 28, 0.24) 100%
  );
  animation: shift-change-wash-night var(--shift-cycle) ease-in-out infinite;
}

.shift-change-fx__orbit {
  position: absolute;
  inset: 0;
  transform-origin: 50% var(--shift-orbit-pivot-y);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.shift-change-fx__orbit--sun {
  animation: shift-change-orbit-sun var(--shift-cycle) linear infinite;
}

.shift-change-fx__orbit--moon {
  animation: shift-change-orbit-moon var(--shift-cycle) linear infinite;
}

.shift-change-fx__orb {
  position: absolute;
  left: 50%;
  top: var(--shift-orbit-zenith-y);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}

.shift-change-fx__orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.shift-change-fx__orb-core--sun {
  background: radial-gradient(circle at 35% 32%, #fffef2 0%, #ffe566 40%, #ffb830 100%);
  box-shadow:
    0 0 8px rgba(255, 210, 80, 0.75),
    0 0 16px rgba(255, 190, 70, 0.28);
}

.shift-change-fx__orb-core--moon {
  background: radial-gradient(circle at 38% 34%, #f8faff 0%, #d8e2f8 52%, #a8b8d8 100%);
  box-shadow:
    0 0 7px rgba(210, 225, 255, 0.55),
    0 0 14px rgba(160, 190, 240, 0.22);
}

.shift-change-fx__orb-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.shift-change-fx__orb-glow--sun {
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, rgba(255, 230, 140, 0.62) 0%, rgba(255, 190, 80, 0.18) 48%, transparent 72%);
  filter: blur(1.5px);
}

.shift-change-fx__orb-glow--moon {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(215, 230, 255, 0.48) 0%, rgba(160, 185, 230, 0.14) 52%, transparent 76%);
  filter: blur(2px);
}

.shift-change-fx__stamp-slot {
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: 6;
  width: 72px;
  height: 22px;
  transform: translateX(-50%);
}

.shift-change-fx__stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2px 5px;
  border: none;
  border-radius: 1px;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-3deg) scale(1);
  mix-blend-mode: multiply;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.shift-change-fx__stamp--out {
  color: rgba(230, 48, 48, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(240, 72, 72, 0.82),
    0 1px 2px rgba(0, 0, 0, 0.14);
  animation: shift-change-stamp-out var(--shift-cycle) linear infinite;
  animation-fill-mode: both;
}

.shift-change-fx__stamp--in {
  color: rgba(28, 168, 56, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(48, 190, 78, 0.84),
    0 1px 2px rgba(0, 0, 0, 0.12);
  opacity: 0.92;
  transform: rotate(-3deg) scale(1);
  animation: shift-change-stamp-in var(--shift-cycle) linear infinite;
  animation-fill-mode: both;
}

@keyframes shift-change-orbit-sun {
  0% {
    transform: rotate(-38deg);
    opacity: 1;
  }

  49.99%, 50% {
    transform: rotate(40deg);
    opacity: 1;
  }

  50.01%, 100% {
    transform: rotate(-38deg);
    opacity: 0;
  }
}

@keyframes shift-change-orbit-moon {
  0%, 49.99% {
    transform: rotate(-38deg);
    opacity: 0;
  }

  50% {
    transform: rotate(-38deg);
    opacity: 1;
  }

  100% {
    transform: rotate(40deg);
    opacity: 1;
  }
}

@keyframes shift-change-wash-morning {
  0%, 49%, 51%, 100% {
    opacity: 0;
  }

  49.5%, 50.5% {
    opacity: 0.75;
  }
}

@keyframes shift-change-wash-work {
  0%, 48% {
    opacity: 0.92;
  }

  49%, 100% {
    opacity: 0;
  }
}

@keyframes shift-change-wash-dusk {
  0%, 48%, 52%, 100% {
    opacity: 0;
  }

  49%, 51% {
    opacity: 0.82;
  }
}

@keyframes shift-change-wash-night {
  0%, 49%, 100% {
    opacity: 0;
  }

  50%, 99% {
    opacity: 0.94;
  }
}

@keyframes shift-change-stamp-in {
  0%, 49.99% {
    opacity: 0.92;
    transform: rotate(-3deg) scale(1);
  }

  50%, 100% {
    opacity: 0;
    transform: rotate(-3deg) scale(1);
  }
}

@keyframes shift-change-stamp-out {
  0%, 49.99% {
    opacity: 0;
    transform: rotate(-3deg) scale(1);
  }

  50%, 100% {
    opacity: 0.92;
    transform: rotate(-3deg) scale(1);
  }
}

@keyframes shift-change-art-grade {
  0%, 48% {
    filter: saturate(1.06) contrast(1.02) brightness(1.06) hue-rotate(6deg);
  }

  49%, 51% {
    filter: saturate(0.96) contrast(1.04) brightness(0.86) hue-rotate(-4deg);
  }

  50%, 100% {
    filter: saturate(0.8) contrast(1.06) brightness(0.7) hue-rotate(-16deg);
  }
}

/* —— Facet (Gem Collector) —— */
/* Gem shower · mixed cuts & colors · vault grade */

.effect-facet {
  --facet-cycle: 8s;
  --facet-hero-cycle: 8s;
}

.effect-facet .image-wrap {
  overflow: hidden;
}

.effect-facet .image-wrap > img:not([class*="overlay"]) {
  animation: facet-art-grade var(--facet-cycle) ease-in-out infinite;
  transform-origin: center center;
}

.facet-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.facet-fx__vault {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 92% 88% at 50% 42%, rgba(120, 80, 180, 0.07) 0%, transparent 58%),
    radial-gradient(ellipse 95% 95% at 50% 50%, transparent 35%, rgba(18, 10, 36, 0.28) 100%);
}

.facet-fx__prism {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.34;
  background: linear-gradient(
    135deg,
    rgba(255, 90, 120, 0.04) 0%,
    transparent 28%,
    rgba(90, 180, 255, 0.05) 52%,
    transparent 72%,
    rgba(170, 120, 255, 0.04) 100%
  );
  mix-blend-mode: screen;
}

.facet-fx__shower {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.facet-fx__gem {
  --gem-trim: 2px;
  position: absolute;
  left: var(--x, 50%);
  top: -12%;
  width: var(--size, 8px);
  height: var(--size, 8px);
  opacity: 0;
  background: #101010;
  animation: facet-gem-fall var(--duration, 3.5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.facet-fx__gem-fill {
  position: absolute;
  inset: var(--gem-trim);
}

.facet-fx__gem--hero {
  --gem-trim: 2.5px;
  animation: facet-hero-fall var(--hero-cycle, var(--facet-hero-cycle, 8s)) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.facet-fx__gem--hero .facet-fx__gem-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(200, 235, 255, 0.28) 38%,
    transparent 68%
  );
  mix-blend-mode: screen;
  opacity: 0;
  animation: facet-hero-flash var(--hero-cycle, var(--facet-hero-cycle, 8s)) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.facet-fx__gem-shape--diamond {
  clip-path: polygon(50% 0%, 88% 50%, 50% 100%, 12% 50%);
}

.facet-fx__gem-shape--diamond .facet-fx__gem-fill {
  clip-path: polygon(50% 0%, 88% 50%, 50% 100%, 12% 50%);
}

.facet-fx__gem-shape--round {
  border-radius: 50%;
  height: calc(var(--size) * 0.9);
}

.facet-fx__gem-shape--round .facet-fx__gem-fill {
  border-radius: 50%;
}

.facet-fx__gem-shape--hex {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.facet-fx__gem-shape--hex .facet-fx__gem-fill {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.facet-fx__gem-shape--princess {
  clip-path: polygon(18% 18%, 82% 18%, 82% 82%, 18% 82%);
}

.facet-fx__gem-shape--princess .facet-fx__gem-fill {
  clip-path: polygon(18% 18%, 82% 18%, 82% 82%, 18% 82%);
}

.facet-fx__gem-shape--marquise {
  width: calc(var(--size) * 0.68);
  height: calc(var(--size) * 1.18);
  clip-path: polygon(50% 0%, 86% 38%, 50% 100%, 14% 38%);
}

.facet-fx__gem-shape--marquise .facet-fx__gem-fill {
  clip-path: polygon(50% 0%, 86% 38%, 50% 100%, 14% 38%);
}

.facet-fx__gem-color--ruby {
  background: linear-gradient(145deg, #ffe0e8 0%, #ff5a72 38%, #b01030 100%);
}

.facet-fx__gem-color--sapphire {
  background: linear-gradient(145deg, #dcecff 0%, #4d9bff 40%, #103d9e 100%);
}

.facet-fx__gem-color--emerald {
  background: linear-gradient(145deg, #d8ffe8 0%, #3dd68c 42%, #0a7a48 100%);
}

.facet-fx__gem-color--amethyst {
  background: linear-gradient(145deg, #efe0ff 0%, #b070ff 42%, #5a18a8 100%);
}

.facet-fx__gem-color--topaz {
  background: linear-gradient(145deg, #fff4cc 0%, #ffc84a 42%, #c87800 100%);
}

.facet-fx__gem-color--diamond {
  background: linear-gradient(145deg, #ffffff 0%, #d8f0ff 35%, #9ec4e8 70%, #6a90b8 100%);
}

@keyframes facet-gem-fall {
  0% {
    top: -12%;
    opacity: 0;
    transform: translateX(-50%) rotate(var(--spin, 0deg)) scale(0.85);
  }

  6% {
    opacity: 0.95;
  }

  100% {
    top: 112%;
    opacity: 0.95;
    transform: translateX(calc(-50% + var(--drift, 0px))) rotate(calc(var(--spin, 0deg) + 220deg)) scale(1);
  }
}

@keyframes facet-hero-fall {
  0%, 12% {
    top: -14%;
    opacity: 0;
    transform: translateX(-50%) rotate(var(--spin, 0deg)) scale(0.75);
  }

  20% {
    opacity: 1;
  }

  52% {
    top: 48%;
    opacity: 1;
    transform: translateX(calc(-50% + calc(var(--drift, 0px) * 0.4))) rotate(calc(var(--spin, 0deg) + 90deg)) scale(1.06);
  }

  78%, 100% {
    top: 108%;
    opacity: 1;
    transform: translateX(calc(-50% + var(--drift, 0px))) rotate(calc(var(--spin, 0deg) + 200deg)) scale(0.95);
  }
}

@keyframes facet-hero-flash {
  0%, 44%, 56%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

@keyframes facet-art-grade {
  0%, 100% {
    filter: saturate(1.1) contrast(1.05) brightness(1.02);
  }

  50% {
    filter: saturate(1.14) contrast(1.06) brightness(1.05);
  }
}

/* —— Terminal Board —— */
/* Framed departures board · icon window center */

.effect-terminal-board {
  --terminal-cycle: 6s;
  --terminal-header-h: 8%;
  --terminal-line-h: 8%;
  --terminal-footer-h: 3%;
}

.effect-terminal-board .image-wrap {
  overflow: hidden;
}

.effect-terminal-board .image-wrap > img:not([class*="overlay"]) {
  animation: terminal-art-grade var(--terminal-cycle) ease-in-out infinite;
  transform-origin: center center;
}

.terminal-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.terminal-fx__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;
  background:
    linear-gradient(
      180deg,
      rgba(40, 55, 45, 0.16) 0%,
      transparent 22%,
      transparent 78%,
      rgba(25, 35, 30, 0.14) 100%
    );
  mix-blend-mode: color;
  pointer-events: none;
}

.terminal-fx__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--terminal-header-h);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4%;
  font-size: clamp(7px, 1.65vmin, 10px);
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.96) 0%, rgba(18, 18, 20, 0.92) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.terminal-fx__header-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #5eb0ff;
  text-shadow:
    0 0 6px rgba(80, 160, 255, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.45);
}

.terminal-fx__band {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: calc(var(--terminal-line-h) * 2);
  background: rgba(4, 4, 6, 0.45);
}

.terminal-fx__band--top {
  top: var(--terminal-header-h);
}

.terminal-fx__band--bottom {
  bottom: var(--terminal-footer-h);
}

.terminal-fx__window {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--terminal-header-h) + var(--terminal-line-h) * 2);
  bottom: calc(var(--terminal-footer-h) + var(--terminal-line-h) * 2);
  z-index: 1;
  pointer-events: none;
}

.terminal-fx__window::before,
.terminal-fx__window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.terminal-fx__window::before {
  top: 0;
}

.terminal-fx__window::after {
  bottom: 0;
}

.terminal-fx__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--terminal-footer-h);
  z-index: 3;
  background: linear-gradient(0deg, rgba(10, 10, 12, 0.94) 0%, rgba(18, 18, 20, 0.85) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.terminal-fx__line {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  gap: 1px;
  padding: 0 1px;
  background: rgba(4, 4, 6, 0.35);
}

.terminal-fx__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  transform-style: preserve-3d;
  perspective: 140px;
  background: rgba(10, 10, 12, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.05);
  animation: terminal-cell-peek var(--flip-dur, 2.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.terminal-fx__pane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(4px, 70%, 9px);
  font-weight: 700;
  color: #dbe8b8;
  text-shadow: 0 0 4px rgba(220, 235, 170, 0.35);
  backface-visibility: hidden;
  background: rgba(14, 14, 16, 0.76);
}

.terminal-fx__pane--a {
  animation: terminal-flip-a var(--flip-dur, 2.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.terminal-fx__pane--b {
  animation: terminal-flip-b var(--flip-dur, 2.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.terminal-fx__cell--city,
.terminal-fx__cell--dash {
  animation: none;
}

.terminal-fx__cell--city .terminal-fx__pane,
.terminal-fx__cell--dash .terminal-fx__pane {
  animation: none;
}

.terminal-fx__cell--city .terminal-fx__pane {
  color: #e8f0c8;
  background: rgba(14, 14, 16, 0.82);
}

.terminal-fx__cell--dash .terminal-fx__pane {
  color: rgba(150, 165, 130, 0.45);
  background: rgba(10, 10, 12, 0.5);
}

.terminal-fx__cell--status-flip {
  animation: terminal-cell-peek var(--flip-dur, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.terminal-fx__pane-tone--on-time {
  color: #b8f0a8;
  background: rgba(16, 36, 18, 0.9);
}

.terminal-fx__pane-tone--delayed {
  color: #ffd98a;
  background: rgba(40, 30, 10, 0.9);
}

.terminal-fx__pane-tone--cancelled {
  color: #ff9a92;
  background: rgba(40, 14, 14, 0.92);
}

.terminal-fx__pane-tone--boarding {
  color: #9ee4ff;
  background: rgba(12, 28, 40, 0.9);
}

.terminal-fx__cell--space .terminal-fx__pane {
  color: transparent;
  background: rgba(12, 12, 14, 0.55);
}

@keyframes terminal-cell-peek {
  0%, 40%, 60%, 100% {
    background: rgba(10, 10, 12, 0.28);
    border-color: rgba(255, 255, 255, 0.06);
  }

  46%, 54% {
    background: rgba(10, 10, 12, 0.06);
    border-color: rgba(255, 255, 255, 0.02);
  }
}

@keyframes terminal-flip-a {
  0%, 42% {
    opacity: 1;
    transform: rotateX(0deg);
    background-color: rgba(14, 14, 16, 0.72);
  }

  46%, 54% {
    opacity: 0.06;
    transform: rotateX(-90deg);
    background-color: rgba(14, 14, 16, 0.04);
  }

  58%, 100% {
    opacity: 0;
    transform: rotateX(-90deg);
    background-color: rgba(14, 14, 16, 0.72);
  }
}

@keyframes terminal-flip-b {
  0%, 42% {
    opacity: 0;
    transform: rotateX(90deg);
    background-color: rgba(14, 14, 16, 0.72);
  }

  46%, 54% {
    opacity: 0.06;
    transform: rotateX(0deg);
    background-color: rgba(14, 14, 16, 0.04);
  }

  58%, 96% {
    opacity: 1;
    transform: rotateX(0deg);
    background-color: rgba(14, 14, 16, 0.72);
  }

  100% {
    opacity: 0;
    transform: rotateX(90deg);
    background-color: rgba(14, 14, 16, 0.72);
  }
}

@keyframes terminal-art-grade {
  0%, 100% {
    filter: saturate(0.92) contrast(1.06) brightness(0.94) hue-rotate(-4deg);
  }

  50% {
    filter: saturate(0.96) contrast(1.08) brightness(0.98) hue-rotate(-2deg);
  }
}

/* —— Under Siege —— */
/* Army silhouettes · black blobs march · banners rise from the ranks */

.effect-under-siege {
  --under-siege-cycle: 10s;
  --under-siege-blob-u: clamp(7px, 2vmin, 12px);
}

.effect-under-siege .image-wrap {
  overflow: hidden;
}

.effect-under-siege .image-wrap > img:not([class*="overlay"]) {
  animation: under-siege-art-grade var(--under-siege-cycle) ease-in-out infinite;
  transform-origin: center bottom;
}

.under-siege-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.under-siege-fx__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 22%, rgba(160, 130, 80, 0.1) 0%, transparent 58%),
    linear-gradient(180deg, rgba(30, 22, 16, 0.06) 0%, transparent 42%, rgba(8, 6, 4, 0.18) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.under-siege-fx__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 92% 88% at 50% 42%, transparent 46%, rgba(0, 0, 0, 0.26) 100%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.22) 82%, rgba(0, 0, 0, 0.42) 100%);
}

.under-siege-fx__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  z-index: 2;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 42%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

.under-siege-fx__army {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.under-siege-fx__soldier-blob {
  position: absolute;
  bottom: calc(var(--under-siege-blob-u) * -1.42 + var(--b-y-jitter, 0) * var(--under-siege-blob-u));
  left: -14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: scale(var(--b-scale, 1));
  transform-origin: center bottom;
  animation: under-siege-blob-cross var(--under-siege-cycle) linear infinite;
  animation-delay: var(--b-delay, 0s);
}

.under-siege-fx__blob {
  flex-shrink: 0;
  background: #08080c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.under-siege-fx__blob--soldier {
  width: calc(var(--under-siege-blob-u) * 1.08 * var(--blob-w-scale, 1));
  height: calc(var(--under-siege-blob-u) * 2.85);
  border-radius: 46% 46% 44% 44% / 50% 50% 48% 48%;
}

.under-siege-fx__banner-staff {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: calc(var(--banner-units, 1.5) * var(--under-siege-blob-u) * 0.8);
  height: calc(var(--banner-units, 1.5) * var(--under-siege-blob-u) * 2.35);
  margin-bottom: calc(var(--under-siege-blob-u) * 0.06);
}

.under-siege-fx__banner-pole {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: max(1.5px, calc(var(--under-siege-blob-u) * 0.13));
  height: 100%;
  margin-left: calc(max(1.5px, calc(var(--under-siege-blob-u) * 0.13)) * -0.5);
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    #2a1c10 0%,
    #4a3828 45%,
    #2a1c10 100%
  );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.under-siege-fx__banner-pole::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: calc(var(--under-siege-blob-u) * 0.22);
  height: calc(var(--under-siege-blob-u) * 0.22);
  margin-left: calc(var(--under-siege-blob-u) * -0.11);
  border-radius: 50%;
  background: #b8941f;
  box-shadow: 0 0 3px rgba(184, 148, 31, 0.35);
}

.under-siege-fx__banner-pendant {
  position: absolute;
  top: calc(var(--under-siege-blob-u) * 0.18);
  left: 50%;
  z-index: 2;
  width: calc(var(--banner-units, 1.5) * var(--under-siege-blob-u) * 0.46);
  height: calc(var(--banner-units, 1.5) * var(--under-siege-blob-u) * 1.28);
  margin-left: calc(var(--banner-units, 1.5) * var(--under-siege-blob-u) * -0.23);
  border-radius: 0 0 2px 2px;
  transform-origin: 50% 0%;
  animation: under-siege-flutter var(--flutter, 1.1s) ease-in-out infinite;
  background: #1e4890;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.under-siege-fx__banner-emblem {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 42%;
  height: 22%;
  margin-left: -21%;
  background: #c8d8f0;
  clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 68% 58%, 80% 100%, 50% 72%, 20% 100%, 32% 58%, 0% 38%, 38% 38%);
}

.under-siege-fx__haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(40, 35, 30, 0.2) 0%,
    transparent 100%
  );
  animation: under-siege-haze-pulse var(--under-siege-cycle) ease-in-out infinite;
}

@keyframes under-siege-blob-cross {
  0% {
    left: -14%;
    opacity: 0;
  }

  6% {
    opacity: 0.92;
  }

  94% {
    opacity: 0.82;
  }

  100% {
    left: 108%;
    opacity: 0;
  }
}

@keyframes under-siege-flutter {
  0%, 100% {
    transform: rotate(0deg);
  }

  35% {
    transform: rotate(3deg);
  }

  68% {
    transform: rotate(-2deg);
  }
}

@keyframes under-siege-haze-pulse {
  0%, 100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes under-siege-art-grade {
  0%, 100% {
    filter: saturate(1.02) contrast(1.06) brightness(0.96) sepia(0.08);
  }

  50% {
    filter: saturate(1.08) contrast(1.08) brightness(1) sepia(0.12);
  }
}

/* —— Smoke Bomb (Way of the Ninja · set_complete_ninja) —— */
/* Shift Change moon · grey window · smoke vanish · empty return */

.effect-smoke-bomb {
  --smoke-bomb-cycle: 10s;
  --bomb-roll-x: clamp(56px, 15vmin, 96px);
  --bomb-floor-bottom: 9%;
}

.effect-smoke-bomb .image-wrap {
  overflow: hidden;
}

.effect-smoke-bomb .image-wrap > img:not([class*="overlay"]) {
  animation: smoke-bomb-art-vanish var(--smoke-bomb-cycle) ease-in-out infinite;
  transform-origin: center center;
}

.smoke-bomb-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.smoke-bomb-fx__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(15, 25, 55, 0.22) 0%,
    rgba(8, 12, 35, 0.14) 45%,
    rgba(5, 8, 28, 0.24) 100%
  );
}

.smoke-bomb-fx__moon-slot {
  position: absolute;
  left: 50%;
  top: 6%;
  z-index: 10;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  pointer-events: none;
}

.smoke-bomb-fx__orb {
  position: absolute;
  inset: 0;
}

.smoke-bomb-fx__orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.smoke-bomb-fx__orb-core--moon {
  background: radial-gradient(circle at 38% 34%, #f8faff 0%, #d8e2f8 52%, #a8b8d8 100%);
  box-shadow:
    0 0 7px rgba(210, 225, 255, 0.55),
    0 0 14px rgba(160, 190, 240, 0.22);
}

.smoke-bomb-fx__orb-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.smoke-bomb-fx__orb-glow--moon {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(215, 230, 255, 0.48) 0%, rgba(160, 185, 230, 0.14) 52%, transparent 76%);
  filter: blur(2px);
}

.smoke-bomb-fx__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 92% 88% at 50% 46%, transparent 40%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 28%, rgba(0, 0, 0, 0.22) 100%);
}

.smoke-bomb-fx__grey-wash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      180deg,
      rgba(108, 106, 114, 0.82) 0%,
      rgba(92, 90, 98, 0.88) 48%,
      rgba(78, 76, 84, 0.9) 100%
    );
  animation: smoke-bomb-grey-wash var(--smoke-bomb-cycle) ease-in-out infinite;
}

.smoke-bomb-fx__smoke-cover {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 8;
  width: 94%;
  height: 82%;
  margin: -41% 0 0 -47%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  filter: blur(14px);
  background:
    radial-gradient(
      ellipse 76% 72% at 50% 50%,
      rgba(228, 224, 234, 0.98) 0%,
      rgba(200, 194, 212, 0.96) 28%,
      rgba(168, 160, 182, 0.88) 48%,
      rgba(130, 122, 145, 0.62) 66%,
      transparent 82%
    );
  animation: smoke-bomb-cover var(--smoke-bomb-cycle) ease-in-out infinite;
}

.smoke-bomb-fx__bomb-stage {
  position: absolute;
  left: 50%;
  bottom: var(--bomb-floor-bottom);
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
}

.smoke-bomb-fx__smoke-field {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.smoke-bomb-fx__puff {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(72px, 42%, 120px);
  aspect-ratio: 1;
  margin-left: calc(clamp(72px, 42%, 120px) * -0.5);
  border-radius: 50%;
  opacity: 0;
  filter: blur(11px);
  transform: scale(0.12);
  transform-origin: center bottom;
  background: radial-gradient(
    circle,
    rgba(198, 192, 210, 0.78) 0%,
    rgba(128, 120, 145, 0.52) 34%,
    rgba(88, 82, 104, 0.22) 60%,
    transparent 78%
  );
  animation: smoke-bomb-puff var(--smoke-bomb-cycle) ease-out infinite;
  animation-delay: var(--puff-delay, 0s);
}

.smoke-bomb-fx__puff:nth-child(2) {
  width: clamp(88px, 52%, 148px);
  margin-left: calc(clamp(88px, 52%, 148px) * -0.5);
  filter: blur(13px);
}

.smoke-bomb-fx__puff:nth-child(3) {
  width: clamp(104px, 64%, 176px);
  margin-left: calc(clamp(104px, 64%, 176px) * -0.5);
  filter: blur(16px);
}

.smoke-bomb-fx__puff:nth-child(4) {
  width: clamp(120px, 78%, 204px);
  margin-left: calc(clamp(120px, 78%, 204px) * -0.5);
  filter: blur(19px);
}

.smoke-bomb-fx__bomb-orb {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 10px;
  height: 10px;
  margin: 0 0 -5px -5px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 32% 28%, #4a4a54 0%, #18181e 42%, #060608 100%);
  box-shadow:
    inset -1px -1px 2px rgba(255, 255, 255, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.42);
  animation: smoke-bomb-bomb-roll var(--smoke-bomb-cycle) linear infinite;
}

@keyframes smoke-bomb-bomb-roll {
  0%, 5%, 30%, 54%, 100% {
    opacity: 0;
    transform: translate(calc(var(--bomb-roll-x) * -1.4), 0) rotate(0deg) scale(1);
  }

  6% {
    opacity: 1;
    transform: translate(calc(var(--bomb-roll-x) * -1.4), 0) rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.22, 0.06, 0.16, 1);
  }

  22% {
    opacity: 1;
    transform: translate(0, 0) rotate(720deg) scale(1);
    animation-timing-function: ease-in-out;
  }

  28% {
    opacity: 1;
    transform: translate(0, 0) rotate(720deg) scale(1);
  }

  30% {
    opacity: 0;
    transform: translate(0, 0) rotate(740deg) scale(0.55);
  }
}

@keyframes smoke-bomb-grey-wash {
  0%, 21%, 66%, 100% {
    opacity: 0;
  }

  28% {
    opacity: 0.55;
  }

  36%, 54% {
    opacity: 1;
  }

  62% {
    opacity: 0.25;
  }

  66% {
    opacity: 0;
  }
}

@keyframes smoke-bomb-cover {
  0%, 21%, 66%, 100% {
    opacity: 0;
    transform: scale(0.35);
  }

  30% {
    opacity: 0.62;
    transform: scale(0.76);
  }

  38% {
    opacity: 0.92;
    transform: scale(0.96);
  }

  42%, 54% {
    opacity: 1;
    transform: scale(1.04);
  }

  60% {
    opacity: 0.35;
    transform: scale(1.06);
  }

  66% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes smoke-bomb-puff {
  0%, 21%, 66%, 100% {
    opacity: 0;
    transform: scale(0.12) translateY(0);
  }

  28% {
    opacity: 0.45;
    transform: scale(0.55) translateY(-18%);
  }

  36% {
    opacity: 0.82;
    transform: scale(0.95) translateY(-42%);
  }

  42% {
    opacity: 0.94;
    transform: scale(1.15) translateY(-58%);
  }

  48%, 54% {
    opacity: 0.98;
    transform: scale(1.32) translateY(-72%);
  }

  60% {
    opacity: 0.35;
    transform: scale(1.38) translateY(-76%);
  }

  66% {
    opacity: 0;
    transform: scale(1.42) translateY(-78%);
  }
}

@keyframes smoke-bomb-art-vanish {
  0%, 21%, 84%, 100% {
    opacity: 1;
    filter: saturate(0.9) contrast(1.05) brightness(0.88) hue-rotate(-6deg);
  }

  28%, 41% {
    opacity: 1;
    filter: saturate(0.06) contrast(1.04) brightness(0.76) hue-rotate(-6deg);
  }

  42%, 83% {
    opacity: 0;
    filter: saturate(0.9) contrast(1.05) brightness(0.88) hue-rotate(-6deg);
  }
}

/* —— Festive (Year of Holidays · set_complete_holiday) —— */
/* Jack-o'-lantern · Christmas tree · occasional fireworks */

.effect-festive {
  --festive-cycle: 18s;
  --festive-eye-pulse: 1.8s;
  --festive-tree-twinkle: 2.4s;
}

.effect-festive .image-wrap {
  overflow: hidden;
}

.effect-festive .image-wrap > img:not([class*="overlay"]) {
  animation: festive-art-grade var(--festive-cycle) ease-in-out infinite;
  transform-origin: center center;
}

.festive-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.festive-fx__night {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 88% 92%, rgba(255, 120, 30, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 12% 90%, rgba(40, 120, 70, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 95% 90% at 50% 40%, transparent 40%, rgba(8, 14, 36, 0.38) 100%);
  animation: festive-night var(--festive-cycle) ease-in-out infinite;
}

.festive-fx__sky {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.festive-fx__firework {
  position: absolute;
  width: clamp(78px, 62%, 168px);
  aspect-ratio: 1;
  opacity: 0;
  overflow: visible;
  animation: festive-firework var(--festive-cycle) linear infinite;
  animation-delay: var(--firework-delay, 0s);
}

.festive-fx__firework--left {
  left: -2%;
  top: -2%;
}

.festive-fx__firework--mid {
  left: 50%;
  top: -6%;
  transform: translateX(-50%);
  animation-name: festive-firework-mid;
}

.festive-fx__firework--right {
  right: -2%;
  top: -1%;
}

.festive-fx__burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(
    circle,
    hsl(var(--firework-hue, 40) 100% 88%) 0%,
    hsl(var(--firework-hue, 40) 95% 60% / 0.85) 35%,
    transparent 72%
  );
  box-shadow: 0 0 14px hsl(var(--firework-hue, 40) 100% 65% / 0.85);
  animation: festive-burst var(--festive-cycle) linear infinite;
  animation-delay: var(--firework-delay, 0s);
}

.festive-fx__sparks {
  position: absolute;
  inset: 0;
}

.festive-fx__spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8%;
  height: 11%;
  margin: -5.5% 0 0 -4%;
  border-radius: 55% 55% 45% 45%;
  background: hsl(var(--firework-hue, 40) 100% 72%);
  box-shadow: 0 0 5px hsl(var(--firework-hue, 40) 100% 60%);
  opacity: 0;
  will-change: transform, opacity;
  transform:
    rotate(var(--spark-angle, 0deg))
    translateY(0)
    rotate(var(--spark-angle-neg, 0deg))
    translateY(0)
    scale(0.35);
  animation: festive-spark var(--festive-cycle) linear infinite;
  animation-delay: var(--spark-delay, var(--firework-delay, 0s));
}

.festive-fx__spark:nth-child(odd) {
  width: 6%;
  height: 9%;
  margin: -4.5% 0 0 -3%;
  background: #fff6d8;
  box-shadow: 0 0 4px hsl(var(--firework-hue, 40) 100% 70%);
}

.festive-fx__spark:nth-child(3n) {
  background: hsl(calc(var(--firework-hue, 40) + 40) 100% 70%);
}

.festive-fx__tree {
  position: absolute;
  left: 3.5%;
  bottom: 2.5%;
  width: clamp(26px, 16%, 46px);
  aspect-ratio: 3 / 4;
  z-index: 4;
}

.festive-fx__tree-glow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 150%;
  height: 95%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 170, 90, 0.28) 0%, rgba(40, 110, 60, 0.1) 45%, transparent 72%);
  animation: festive-tree-glow var(--festive-tree-twinkle) ease-in-out infinite;
}

.festive-fx__tree-star {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 18%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: #ffe08a;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.95));
  animation: festive-tree-star var(--festive-tree-twinkle) ease-in-out infinite;
  z-index: 5;
}

.festive-fx__tree-tier {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background:
    linear-gradient(180deg, #4f9a4a 0%, #2f6b34 55%, #245528 100%);
  box-shadow: inset 0 -2px 4px rgba(10, 40, 15, 0.35);
  z-index: 2;
}

.festive-fx__tree-tier--1 {
  top: 12%;
  width: 52%;
  height: 28%;
  z-index: 4;
}

.festive-fx__tree-tier--2 {
  top: 28%;
  width: 72%;
  height: 32%;
  z-index: 3;
}

.festive-fx__tree-tier--3 {
  top: 46%;
  width: 92%;
  height: 36%;
  z-index: 2;
}

.festive-fx__tree-trunk {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 16%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #7a4a28 0%, #4e2e16 100%);
  z-index: 1;
}

.festive-fx__tree-light {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 6;
  box-shadow: 0 0 4px currentColor;
  animation: festive-tree-light var(--festive-tree-twinkle) ease-in-out infinite;
}

.festive-fx__tree-light--a {
  left: 38%;
  top: 26%;
  background: #ff6b6b;
  color: #ff6b6b;
  animation-delay: 0s;
}

.festive-fx__tree-light--b {
  left: 58%;
  top: 40%;
  background: #6ec8ff;
  color: #6ec8ff;
  animation-delay: 0.35s;
}

.festive-fx__tree-light--c {
  left: 28%;
  top: 52%;
  background: #ffe066;
  color: #ffe066;
  animation-delay: 0.7s;
}

.festive-fx__tree-light--d {
  left: 64%;
  top: 58%;
  background: #ff8fd0;
  color: #ff8fd0;
  animation-delay: 1.05s;
}

.festive-fx__tree-light--e {
  left: 42%;
  top: 68%;
  background: #7dffb3;
  color: #7dffb3;
  animation-delay: 1.4s;
}

.festive-fx__lantern {
  position: absolute;
  right: 4%;
  bottom: 3.5%;
  width: clamp(28px, 18%, 52px);
  aspect-ratio: 1;
  z-index: 4;
}

.festive-fx__lantern-pool {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 160%;
  height: 110%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 40, 0.42) 0%, rgba(255, 90, 10, 0.12) 42%, transparent 72%);
  animation: festive-lantern-pool var(--festive-eye-pulse) ease-in-out infinite;
}

.festive-fx__pumpkin {
  position: absolute;
  inset: 12% 8% 6%;
}

.festive-fx__stem {
  position: absolute;
  left: 46%;
  top: -6%;
  width: 12%;
  height: 18%;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #4a7a32 0%, #2f5520 100%);
  transform: translateX(-50%) rotate(-8deg);
  z-index: 2;
}

.festive-fx__body {
  position: absolute;
  inset: 10% 0 0;
  border-radius: 48% 48% 46% 46% / 52% 52% 48% 48%;
  background:
    radial-gradient(ellipse 70% 80% at 35% 40%, #ffb14a 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 70% 55%, #e07018 0%, transparent 60%),
    linear-gradient(160deg, #f08a28 0%, #c45512 100%);
  box-shadow:
    inset 0 -4px 8px rgba(80, 20, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

.festive-fx__ridge {
  position: absolute;
  top: 16%;
  bottom: 10%;
  width: 10%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(90, 30, 0, 0.22), transparent);
  z-index: 2;
  pointer-events: none;
}

.festive-fx__ridge--a { left: 32%; }
.festive-fx__ridge--b { left: 58%; }

.festive-fx__eye {
  position: absolute;
  top: 34%;
  width: 16%;
  height: 18%;
  background: #1a0a02;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 3;
  filter: drop-shadow(0 0 3px rgba(255, 190, 60, 0.95));
  animation: festive-eye-pulse var(--festive-eye-pulse) ease-in-out infinite;
}

.festive-fx__eye--left { left: 24%; }
.festive-fx__eye--right { right: 24%; animation-delay: 0.12s; }

.festive-fx__eye::after {
  content: "";
  position: absolute;
  inset: 28% 18% 8%;
  background: radial-gradient(circle at 50% 70%, #ffe08a 0%, #ff9a20 55%, #ff6a00 100%);
  clip-path: inherit;
  opacity: 0.95;
}

.festive-fx__mouth {
  position: absolute;
  left: 28%;
  right: 28%;
  top: 58%;
  height: 18%;
  background: #1a0a02;
  clip-path: polygon(0% 35%, 12% 0%, 24% 35%, 36% 0%, 48% 35%, 60% 0%, 72% 35%, 84% 0%, 100% 35%, 100% 100%, 0% 100%);
  z-index: 3;
  filter: drop-shadow(0 0 2px rgba(255, 160, 40, 0.7));
}

.festive-fx__mouth::after {
  content: "";
  position: absolute;
  inset: 20% 8% 0;
  background: linear-gradient(180deg, #ffb040 0%, #ff6a00 100%);
  opacity: 0.85;
  animation: festive-eye-pulse var(--festive-eye-pulse) ease-in-out infinite;
  animation-delay: 0.08s;
}

@keyframes festive-art-grade {
  0%, 100% {
    filter: saturate(0.96) contrast(1.04) brightness(0.9) sepia(0.08);
  }
  50% {
    filter: saturate(1.02) contrast(1.06) brightness(0.94) sepia(0.12);
  }
}

@keyframes festive-night {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

@keyframes festive-lantern-pool {
  0%, 100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes festive-eye-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 170, 40, 0.7));
    opacity: 0.82;
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(255, 210, 80, 1));
    opacity: 1;
  }
}

@keyframes festive-tree-glow {
  0%, 100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.94);
  }
  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes festive-tree-star {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 210, 100, 0.7));
    opacity: 0.85;
    transform: translateX(-50%) scale(0.92);
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(255, 230, 140, 1));
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes festive-tree-light {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes festive-firework {
  0%, 1.4%, 100% { opacity: 0; }
  2% { opacity: 1; }
  8.2% { opacity: 1; }
  10.5% { opacity: 0; }
}

@keyframes festive-firework-mid {
  0%, 1.4%, 100% { opacity: 0; transform: translateX(-50%); }
  2% { opacity: 1; transform: translateX(-50%); }
  8.2% { opacity: 1; transform: translateX(-50%); }
  10.5% { opacity: 0; transform: translateX(-50%); }
}

@keyframes festive-burst {
  0%, 1.4%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }
  1.8% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.35);
  }
  2.4% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7);
  }
  3.6% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.15);
  }
  5.2% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1.4);
  }
  7.2% {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(1.6);
  }
  8.8% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.72);
  }
}

@keyframes festive-spark {
  0%, 1.3%, 100% {
    opacity: 0;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(0)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(0)
      scale(0.25);
  }
  1.8% {
    opacity: 0.55;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-55%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(-2%)
      scale(0.55);
  }
  2.5% {
    opacity: 1;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-150%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(-4%)
      scale(0.9);
  }
  3.6% {
    opacity: 1;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-265%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(4%)
      scale(1);
  }
  4.8% {
    opacity: 0.95;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-325%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(22%)
      scale(0.98);
  }
  6.2% {
    opacity: 0.75;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-345%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(62%)
      scale(0.88);
  }
  7.8% {
    opacity: 0.4;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-355%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(115%)
      scale(0.65);
  }
  9.4% {
    opacity: 0.12;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-360%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(160%)
      scale(0.42);
  }
  10.6% {
    opacity: 0;
    transform:
      rotate(var(--spark-angle, 0deg))
      translateY(-362%)
      rotate(var(--spark-angle-neg, 0deg))
      translateY(185%)
      scale(0.3);
  }
}

/* —— Beast Mode —— */

.effect-beast-mode {
  --beast-cycle: 7s;
}

.effect-beast-mode .image-wrap {
  overflow: hidden;
}

.effect-beast-mode .image-wrap > img:not([class*="overlay"]) {
  animation:
    beast-mode-art-move var(--beast-cycle) linear infinite,
    beast-mode-art-grade var(--beast-cycle) linear infinite;
  transform-origin: center center;
}

.effect-beast-mode .image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(
    ellipse 88% 78% at 50% 50%,
    rgba(127, 29, 29, 0.45) 0%,
    rgba(69, 10, 10, 0.2) 52%,
    transparent 72%
  );
  mix-blend-mode: multiply;
  animation: beast-mode-art-tint var(--beast-cycle) linear infinite;
}

.beast-mode-dynamic-styles {
  display: none;
}

.beast-mode-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.beast-mode-fx__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 95% 88% at 50% 58%, transparent 42%, rgba(8, 4, 12, 0.42) 100%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(34, 16, 48, 0.22), transparent 62%);
  opacity: 0.55;
  animation: beast-mode-ambient var(--beast-cycle) ease-in-out infinite;
}

.beast-mode-fx__tension {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.16), transparent 58%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: beast-mode-tension var(--beast-cycle) ease-in-out infinite;
}

.beast-mode-fx__impacts {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.beast-mode-impact {
  position: absolute;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 245, 235, 0.95) 0%,
    rgba(248, 113, 113, 0.55) 22%,
    rgba(127, 29, 29, 0.2) 48%,
    transparent 68%
  );
  mix-blend-mode: screen;
  filter: blur(0.4px);
}

.beast-mode-fx__sparks {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.beast-mode-spark {
  position: absolute;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(180deg, #fef3c7 0%, #f87171 55%, #7f1d1d 100%);
  box-shadow: 0 0 5px rgba(248, 113, 113, 0.75);
  transform-origin: 50% 100%;
}

.beast-mode-fx__claws {
  position: absolute;
  inset: 0;
  z-index: 9;
}

.beast-mode-claw {
  position: absolute;
  width: 40%;
  height: 78%;
  opacity: 0;
  transform: translate(-50%, -54%) rotate(var(--rot, 0deg)) scaleY(0.06);
  transform-origin: 50% 6%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.beast-mode-claw__trail {
  position: absolute;
  inset: 4% 22% 8%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 18%,
    rgba(0, 0, 0, 0.22) 52%,
    transparent 100%
  );
  opacity: 0.65;
  mix-blend-mode: multiply;
  filter: blur(1.5px);
}

.beast-mode-claw__talon {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 228, 210, 0.55) 0%,
    rgba(60, 12, 12, 0.95) 7%,
    #000 48%,
    rgba(0, 0, 0, 0.05) 100%
  );
  clip-path: polygon(50% 0%, 100% 6%, 64% 100%, 36% 100%, 0% 6%);
  box-shadow:
    inset 1px 0 0 rgba(255, 210, 190, 0.2),
    0 0 3px rgba(0, 0, 0, 0.85);
}

.beast-mode-claw__talon--a {
  left: 17%;
  transform: rotate(-10deg);
  transform-origin: 50% 0%;
}

.beast-mode-claw__talon--b {
  left: 50%;
  width: 3.5px;
  transform: translateX(-50%);
}

.beast-mode-claw__talon--c {
  right: 17%;
  transform: rotate(10deg);
  transform-origin: 50% 0%;
}

.beast-mode-fx__red {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.beast-mode-fx__red-core {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    ellipse 92% 86% at 50% 48%,
    rgba(254, 202, 202, 0.35) 0%,
    rgba(220, 38, 38, 0.82) 38%,
    rgba(127, 29, 29, 0.88) 68%,
    rgba(69, 10, 10, 0.75) 100%
  );
  mix-blend-mode: screen;
  animation: beast-mode-red-core var(--beast-cycle) ease-in-out infinite;
}

.beast-mode-fx__red-pulse {
  position: absolute;
  inset: -8%;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 80, 80, 0.5), transparent 58%);
  mix-blend-mode: screen;
  animation: beast-mode-red-pulse var(--beast-cycle) ease-in-out infinite;
}

.beast-mode-fx__red-vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 35%, rgba(40, 0, 0, 0.72) 100%);
  mix-blend-mode: multiply;
  animation: beast-mode-red-vignette var(--beast-cycle) ease-in-out infinite;
}

.beast-mode-fx__grain {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  animation: beast-mode-grain var(--beast-cycle) linear infinite;
}

@keyframes beast-mode-art-move {
  0%, 27.9%, 40.1%, 80.1%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  28.5% { transform: scale(1.012); }
  29.5% { transform: scale(1.018); }
  30.4% { transform: translate(-2px, 1px) rotate(-0.55deg) scale(1.02); }
  31% { transform: translate(2px, -2px) rotate(0.65deg) scale(1.02); }
  31.6% { transform: translate(-3px, 0) rotate(-0.75deg) scale(1.025); }
  32.2% { transform: translate(3px, 2px) rotate(0.85deg) scale(1.02); }
  32.8% { transform: translate(-2px, -2px) rotate(-0.65deg) scale(1.025); }
  33.4% { transform: translate(2px, 1px) rotate(0.55deg) scale(1.02); }
  34% { transform: translate(-3px, 2px) rotate(-0.85deg) scale(1.025); }
  34.6% { transform: translate(3px, -1px) rotate(0.75deg) scale(1.02); }
  35.2% { transform: translate(-2px, 2px) rotate(-0.55deg) scale(1.025); }
  35.8% { transform: translate(2px, -2px) rotate(0.65deg) scale(1.02); }
  36.4% { transform: translate(-3px, -1px) rotate(-0.75deg) scale(1.025); }
  37% { transform: translate(3px, 1px) rotate(0.85deg) scale(1.02); }
  37.6% { transform: translate(-2px, 0) rotate(-0.55deg) scale(1.02); }
  38.2% { transform: translate(2px, -1px) rotate(0.55deg) scale(1.018); }
  38.8% { transform: translate(-1px, 2px) rotate(-0.45deg) scale(1.015); }
  39.4% { transform: translate(1px, -1px) rotate(0.35deg) scale(1.01); }
  47% { transform: translate(0, 0) scale(1.015); }
  54% { transform: translate(0, 0) scale(1.02); }
  62% { transform: translate(-1px, 0) scale(1.018); }
  68% { transform: translate(1px, 0) scale(1.015); }
}

@keyframes beast-mode-art-grade {
  0%, 27%, 80%, 100% {
    filter: saturate(1) contrast(1) brightness(1);
  }
  28% {
    filter: saturate(1.08) contrast(1.06) brightness(0.97);
  }
  30%, 39.5% {
    filter: saturate(1.18) contrast(1.14) brightness(0.94) hue-rotate(-4deg);
  }
  47% {
    filter: saturate(0.88) contrast(1.22) brightness(0.86) hue-rotate(-8deg);
  }
  54% {
    filter: saturate(0.72) contrast(1.28) brightness(0.8) hue-rotate(-12deg);
  }
  62%, 68% {
    filter: saturate(0.65) contrast(1.32) brightness(0.76) hue-rotate(-14deg);
  }
  74% {
    filter: saturate(0.85) contrast(1.15) brightness(0.88) hue-rotate(-6deg);
  }
}

@keyframes beast-mode-art-tint {
  0%, 46.8%, 80%, 100% { opacity: 0; }
  48% { opacity: 0.35; }
  58% { opacity: 0.62; }
  66% { opacity: 0.58; }
  76% { opacity: 0.12; }
}

@keyframes beast-mode-ambient {
  0%, 28%, 80%, 100% { opacity: 0.42; }
  15% { opacity: 0.55; }
  48% { opacity: 0.68; }
  62% { opacity: 0.75; }
}

@keyframes beast-mode-tension {
  0%, 27.5%, 30.5%, 100% { opacity: 0; transform: scale(1); }
  29% { opacity: 0.55; transform: scale(1.04); }
  30% { opacity: 0.35; transform: scale(1.02); }
}

@keyframes beast-mode-red-core {
  0%, 46.8%, 80.1%, 100% { opacity: 0; }
  47.2% { opacity: 0.18; }
  51% { opacity: 0.52; }
  55% { opacity: 0.78; }
  62% { opacity: 0.88; }
  68% { opacity: 0.82; }
  79% { opacity: 0; }
}

@keyframes beast-mode-red-pulse {
  0%, 46.8%, 80%, 100% { opacity: 0; transform: scale(0.92); }
  50% { opacity: 0.35; transform: scale(1); }
  58% { opacity: 0.55; transform: scale(1.06); }
  62% { opacity: 0.48; transform: scale(1.02); }
  66% { opacity: 0.62; transform: scale(1.08); }
  70% { opacity: 0.4; transform: scale(1); }
  78% { opacity: 0; transform: scale(0.96); }
}

@keyframes beast-mode-red-vignette {
  0%, 46.8%, 80%, 100% { opacity: 0; }
  52% { opacity: 0.45; }
  62% { opacity: 0.72; }
  70% { opacity: 0.65; }
  79% { opacity: 0; }
}

@keyframes beast-mode-grain {
  0%, 46%, 80%, 100% { opacity: 0; }
  48%, 76% { opacity: 0.28; }
  62% { opacity: 0.38; }
}

/* —— Comet —— */

.comet-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.comet-fx__tail {
  position: absolute;
  top: 15%;
  left: -40%;
  width: 55%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 150, 0.2), rgba(255, 255, 255, 0.7), rgba(200, 230, 255, 0.4));
  transform: rotate(-24deg);
  filter: blur(0.5px);
  animation: comet-streak 5s ease-in-out infinite;
}

.comet-fx__head {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 24px rgba(200, 230, 255, 0.8);
  animation: comet-streak 5s ease-in-out infinite;
}

@keyframes comet-streak {
  0%, 18%, 100% { opacity: 0; left: -40%; top: 15%; }
  22% { opacity: 1; }
  48% { opacity: 0.9; left: 95%; top: 62%; }
  52% { opacity: 0; left: 100%; top: 65%; }
}

/* —— Spores —— */

.effect-spores .image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(60, 100, 30, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 4;
}

.spores-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.spores-fx__fog {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 80%, rgba(80, 120, 40, 0.15) 0%, transparent 70%);
  animation: spores-fog 5s ease-in-out infinite alternate;
}

.spore-particle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  opacity: 0;
  animation: spore-drift var(--duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.spore-particle--green { background: rgba(100, 180, 60, 0.65); box-shadow: 0 0 4px rgba(100, 180, 60, 0.4); }
.spore-particle--yellow { background: rgba(180, 200, 60, 0.6); }
.spore-particle--pale { background: rgba(200, 220, 150, 0.55); }

@keyframes spores-fog {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes spore-drift {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.65; }
  50% { transform: translate(var(--drift, 10px), -18px); opacity: 0.5; }
  80% { opacity: 0.3; transform: translate(calc(var(--drift, 10px) * -0.5), -32px); }
}

/* —— Petrichor —— */

.effect-petrichor .image-wrap {
  overflow: hidden;
}

.petrichor-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.petrichor-fx__glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%, rgba(200, 220, 240, 0.05) 100%);
}

.petrichor-drop {
  position: absolute;
  top: -4%;
  left: var(--x, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: rgba(200, 220, 240, 0.55);
  box-shadow: 0 0 4px rgba(200, 230, 255, 0.4);
  opacity: 0;
  animation: petrichor-slide var(--duration, 3.5s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

.petrichor-drop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--trail, 12px);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(180, 210, 230, 0.5), transparent);
}

@keyframes petrichor-slide {
  0% { top: -4%; opacity: 0; }
  10% { opacity: 0.75; }
  100% { top: 104%; opacity: 0.2; }
}

/* —— Sunbeam —— */

.effect-sunbeam .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(1.05) contrast(1.02);
}

.sunbeam-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.sunbeam-fx__ray {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 45%;
  height: 140%;
  transform-origin: top left;
  background: linear-gradient(105deg, rgba(255, 240, 180, 0.35) 0%, rgba(255, 220, 120, 0.12) 40%, transparent 70%);
  mix-blend-mode: screen;
}

.sunbeam-fx__ray--1 { transform: rotate(12deg); animation: sunbeam-ray 6s ease-in-out infinite; }
.sunbeam-fx__ray--2 { transform: rotate(22deg); width: 35%; animation: sunbeam-ray 7s ease-in-out infinite 0.5s; opacity: 0.7; }
.sunbeam-fx__ray--3 { transform: rotate(32deg); width: 28%; animation: sunbeam-ray 5.5s ease-in-out infinite 1s; opacity: 0.5; }

.sunbeam-fx__dust {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 15% 10%, rgba(255, 230, 150, 0.15) 0%, transparent 65%);
  animation: sunbeam-dust 5s ease-in-out infinite alternate;
}

@keyframes sunbeam-ray {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

@keyframes sunbeam-dust {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* —— Thunderhead —— */

.effect-thunderhead .image-wrap > img:not([class*="overlay"]) {
  animation: thunderhead-flash 3.2s steps(1) infinite;
}

.thunderhead-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.thunderhead-fx__darken {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.58) 38%,
    rgba(0, 0, 0, 0.34) 62%,
    rgba(0, 0, 0, 0.12) 82%,
    transparent 100%
  );
}

.thunderhead-fx .surge-bolt {
  top: 16%;
  z-index: 1;
  width: 3px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(210, 235, 255, 0.98) 16%,
    rgba(255, 255, 255, 1) 48%,
    rgba(170, 210, 255, 0.92) 78%,
    transparent
  );
  box-shadow:
    0 0 10px rgba(210, 240, 255, 1),
    0 0 22px rgba(140, 200, 255, 0.85),
    0 0 38px rgba(90, 160, 255, 0.55);
  animation: thunderhead-bolt-flash var(--duration, 2.5s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.thunderhead-fx .surge-bolt::before,
.thunderhead-fx .surge-bolt::after {
  width: 3px;
}

.thunderhead-fx .surge-fx__flash {
  z-index: 2;
  background: rgba(220, 242, 255, 0.42);
  animation: thunderhead-screen-flash 3.2s ease-out infinite;
}

.thunderhead-fx__canopy {
  position: absolute;
  inset: -30% -14% auto;
  height: 66%;
  z-index: 3;
  background:
    radial-gradient(ellipse 64% 52% at 10% 30%, rgba(22, 26, 42, 1) 0%, transparent 66%),
    radial-gradient(ellipse 58% 50% at 90% 24%, rgba(18, 22, 38, 0.99) 0%, transparent 64%),
    radial-gradient(ellipse 74% 58% at 38% 8%, rgba(14, 18, 32, 0.99) 0%, transparent 62%),
    radial-gradient(ellipse 80% 60% at 62% 30%, rgba(10, 14, 26, 0.97) 0%, transparent 68%),
    radial-gradient(ellipse 98% 62% at 72% 40%, rgba(6, 8, 18, 0.94) 0%, transparent 70%),
    linear-gradient(
      to bottom,
      rgba(1, 2, 6, 1) 0%,
      rgba(4, 6, 14, 0.99) 20%,
      rgba(8, 12, 24, 0.97) 38%,
      rgba(12, 16, 30, 0.9) 52%,
      rgba(16, 20, 36, 0.68) 64%,
      rgba(20, 24, 40, 0.36) 76%,
      transparent 90%
    );
  animation: thunderhead-roll 5.5s ease-in-out infinite alternate;
}

@keyframes thunderhead-flash {
  0%, 76%, 100% { filter: brightness(0.64) saturate(0.9); }
  77% { filter: brightness(1.62) saturate(1.28) contrast(1.1); }
  78% { filter: brightness(0.86); }
  79% { filter: brightness(1.48) saturate(1.22); }
  81% { filter: brightness(0.76); }
  82% { filter: brightness(1.32) saturate(1.15); }
  84% { filter: brightness(0.7); }
}

@keyframes thunderhead-bolt-flash {
  0%, 80%, 100% { opacity: 0; }
  81% { opacity: 1; }
  82% { opacity: 0.12; }
  83% { opacity: 1; }
  84% { opacity: 0.35; }
  85% { opacity: 0.98; }
  88% { opacity: 0; }
}

@keyframes thunderhead-screen-flash {
  0%, 75%, 100% { opacity: 0; }
  76% { opacity: 0.72; }
  77% { opacity: 0.08; }
  78% { opacity: 0.58; }
  79% { opacity: 0.06; }
  81% { opacity: 0.42; }
  83% { opacity: 0; }
}

@keyframes thunderhead-roll {
  0% { transform: translateX(-4%) scale(1.02); }
  100% { transform: translateX(4%) scale(1.04); }
}

/* —— Ashfall —— */

.effect-ashfall .image-wrap > img:not([class*="overlay"]) {
  filter: grayscale(0.4) brightness(0.8) contrast(0.95);
}

.ashfall-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.ashfall-fx__haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(80, 80, 80, 0.2) 0%, rgba(60, 60, 60, 0.35) 100%);
}

.ashfall-flake {
  position: absolute;
  top: -4%;
  left: var(--x, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  opacity: 0;
  animation: ashfall-fall var(--duration, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.ashfall-flake--grey { background: rgba(120, 120, 120, 0.7); }
.ashfall-flake--dark { background: rgba(80, 80, 80, 0.75); }
.ashfall-flake--pale { background: rgba(160, 160, 160, 0.6); }

@keyframes ashfall-fall {
  0% { top: -4%; opacity: 0; transform: translateX(0); }
  10% { opacity: 0.7; }
  100% { top: 104%; opacity: 0.25; transform: translateX(var(--drift, 0px)); }
}

/* —— Lava —— */

.effect-lava .image-wrap {
  overflow: hidden;
}

.effect-lava .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.9) saturate(1.2) contrast(1.05);
}

.lava-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.lava-fx__glow {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(255, 80, 0, 0.55) 0%, rgba(255, 140, 0, 0.2) 50%, transparent 100%);
  animation: lava-glow-pulse 3s ease-in-out infinite;
}

.lava-fx__crack {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 80, 0.9), rgba(255, 100, 0, 1), rgba(255, 200, 80, 0.9), transparent);
  box-shadow: 0 0 8px rgba(255, 120, 0, 0.8);
  opacity: 0.85;
  animation: lava-crack-pulse 2.5s ease-in-out infinite;
}

.lava-fx__crack--1 { left: 5%; width: 35%; transform: rotate(-4deg); }
.lava-fx__crack--2 { left: 30%; width: 45%; transform: rotate(2deg); animation-delay: 0.4s; }
.lava-fx__crack--3 { right: 8%; width: 30%; transform: rotate(-2deg); animation-delay: 0.8s; }

.lava-fx__ember {
  position: absolute;
  inset: auto 0 0;
  height: 25%;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255, 100, 0, 0.3) 0%, transparent 70%);
  animation: lava-ember 2s ease-in-out infinite alternate;
}

@keyframes lava-glow-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes lava-crack-pulse {
  0%, 100% { opacity: 0.7; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.3); }
}

@keyframes lava-ember {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* —— Lava Lamp (dev) —— */

.effect-lava-lamp .image-wrap {
  background: linear-gradient(180deg, #1a0a22 0%, #0c0614 55%, #140818 100%);
  overflow: hidden;
}

.effect-lava-lamp .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.72) saturate(1.08) contrast(1.04);
  opacity: 0.88;
}

.lavalamp-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.lavalamp-fx__vessel {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 62% 88% at 50% 52%, rgba(55, 18, 68, 0.42) 0%, rgba(12, 6, 20, 0.62) 72%, rgba(4, 2, 10, 0.78) 100%);
}

.lavalamp-fx__base {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 20%;
  background: linear-gradient(
    to top,
    rgba(255, 95, 25, 0.55) 0%,
    rgba(255, 55, 15, 0.28) 55%,
    transparent 100%
  );
  box-shadow: 0 -10px 28px rgba(255, 110, 35, 0.38);
  animation: lavalamp-base-glow 3.5s ease-in-out infinite alternate;
}

.lavalamp-blob {
  position: absolute;
  left: var(--x, 50%);
  bottom: 6%;
  width: var(--size, 28px);
  height: calc(var(--size, 28px) * 1.18);
  transform: translateX(-50%);
  border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  filter: blur(1.2px);
  opacity: 0.92;
  z-index: 2;
  animation: lavalamp-blob-rise var(--duration, 11s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: bottom, transform, border-radius;
}

.lavalamp-blob--magenta {
  background: radial-gradient(ellipse 45% 40% at 38% 32%, rgba(255, 70, 195, 0.98) 0%, rgba(200, 25, 140, 0.82) 42%, rgba(130, 10, 95, 0.55) 100%);
  box-shadow: 0 0 20px rgba(255, 70, 180, 0.55);
}

.lavalamp-blob--orange {
  background: radial-gradient(ellipse 45% 40% at 40% 34%, rgba(255, 145, 45, 0.98) 0%, rgba(235, 85, 15, 0.85) 44%, rgba(180, 50, 5, 0.58) 100%);
  box-shadow: 0 0 18px rgba(255, 120, 30, 0.52);
}

.lavalamp-blob--gold {
  background: radial-gradient(ellipse 45% 40% at 42% 30%, rgba(255, 220, 80, 0.96) 0%, rgba(255, 170, 35, 0.82) 45%, rgba(210, 120, 10, 0.55) 100%);
  box-shadow: 0 0 18px rgba(255, 190, 50, 0.5);
}

.lavalamp-blob--coral {
  background: radial-gradient(ellipse 45% 40% at 36% 35%, rgba(255, 105, 95, 0.96) 0%, rgba(230, 55, 75, 0.82) 43%, rgba(170, 30, 60, 0.54) 100%);
  box-shadow: 0 0 18px rgba(255, 90, 100, 0.48);
}

.lavalamp-blob--violet {
  background: radial-gradient(ellipse 45% 40% at 40% 33%, rgba(190, 95, 255, 0.94) 0%, rgba(130, 45, 210, 0.8) 44%, rgba(85, 20, 150, 0.52) 100%);
  box-shadow: 0 0 18px rgba(170, 80, 255, 0.48);
}

.lavalamp-fx__warmth {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(255, 120, 60, 0.06) 0%,
    rgba(255, 80, 120, 0.1) 45%,
    rgba(255, 60, 20, 0.16) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.lavalamp-fx__glass {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(95deg, rgba(255, 255, 255, 0.1) 0%, transparent 16%, transparent 84%, rgba(255, 255, 255, 0.07) 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
}

@keyframes lavalamp-base-glow {
  0% { opacity: 0.82; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1.12); }
}

@keyframes lavalamp-blob-rise {
  0%, 100% {
    bottom: 5%;
    transform: translateX(-50%) scale(1);
    border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  }

  18% {
    bottom: 28%;
    transform: translateX(calc(-50% + var(--wobble, 8px))) scale(1.14, 0.86);
    border-radius: 54% 46% 48% 52% / 46% 56% 44% 54%;
  }

  38% {
    bottom: 52%;
    transform: translateX(calc(-50% - var(--wobble, 8px))) scale(0.88, 1.16);
    border-radius: 48% 52% 56% 44% / 52% 48% 50% 50%;
  }

  55% {
    bottom: 72%;
    transform: translateX(calc(-50% + calc(var(--wobble, 8px) * 0.6))) scale(1.08, 0.92);
    border-radius: 50% 50% 44% 56% / 44% 52% 48% 56%;
  }

  72% {
    bottom: 48%;
    transform: translateX(calc(-50% - calc(var(--wobble, 8px) * 0.4))) scale(0.96, 1.08);
    border-radius: 52% 48% 50% 50% / 50% 46% 54% 50%;
  }

  88% {
    bottom: 18%;
    transform: translateX(calc(-50% + calc(var(--wobble, 8px) * 0.25))) scale(1.1, 0.9);
    border-radius: 44% 56% 52% 48% / 54% 50% 50% 46%;
  }
}

/* —— Interference —— */

.effect-interference .image-wrap {
  overflow: hidden;
}

.interference-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.interference-fx__sheen {
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, red, orange, yellow, lime, cyan, blue, violet, red);
  opacity: 0.2;
  mix-blend-mode: color-dodge;
  animation: interference-spin 6s linear infinite;
}

@keyframes interference-spin {
  0% { transform: rotate(0deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1.2); }
}

/* —— Signal —— */

.signal-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.signal-fx__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15%;
  height: 15%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(200, 220, 255, 0.6);
  border-radius: 50%;
  opacity: 0;
}

.signal-fx__ring--1 { animation: signal-ring 3s ease-out infinite; }
.signal-fx__ring--2 { animation: signal-ring 3s ease-out infinite 0.6s; }
.signal-fx__ring--3 { animation: signal-ring 3s ease-out infinite 1.2s; }

.signal-fx__static {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2px);
  animation: signal-static 0.1s steps(2) infinite;
}

.signal-fx__burst {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(200, 230, 255, 0.15) 0%, transparent 60%);
  animation: signal-burst 3s ease-out infinite;
}

@keyframes signal-ring {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}

@keyframes signal-static {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.12; }
}

@keyframes signal-burst {
  0%, 80%, 100% { opacity: 0; }
  85% { opacity: 0.6; }
  95% { opacity: 0; }
}

/* —— Zero-G —— */

.zerog-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.zerog-debris {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 2px;
  opacity: 0.5;
  animation: zerog-float var(--duration, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.zerog-debris--grey { background: rgba(180, 180, 190, 0.7); }
.zerog-debris--white { background: rgba(220, 220, 230, 0.65); }
.zerog-debris--pale { background: rgba(200, 200, 210, 0.55); }

@keyframes zerog-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; }
  25% { transform: translate(var(--drift-x, 10px), calc(var(--drift-y, -10px) * 0.5)) rotate(90deg); opacity: 0.7; }
  50% { transform: translate(calc(var(--drift-x, 10px) * -0.5), var(--drift-y, -10px)) rotate(180deg); opacity: 0.55; }
  75% { transform: translate(calc(var(--drift-x, 10px) * -1), calc(var(--drift-y, -10px) * 0.3)) rotate(270deg); opacity: 0.65; }
}

/* —— Magnetize —— */

.magnetize-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.magnetize-fx__field {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(180, 200, 220, 0.15);
}

.magnetize-fleck {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: linear-gradient(135deg, #c0c8d0, #8898a8);
  box-shadow: 0 0 3px rgba(200, 220, 255, 0.5);
  animation: magnetize-pull var(--duration, 2.5s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes magnetize-pull {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50% { transform: translate(var(--pull-x, 0%), var(--pull-y, 0%)); opacity: 0.9; }
}

/* —— Enchanted —— */

.effect-enchanted .image-wrap > img:not([class*="overlay"]) {
  filter: saturate(1.1) brightness(0.95);
}

.enchanted-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.enchanted-fx__rune {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px dashed rgba(180, 100, 255, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(160, 80, 255, 0.35);
}

.enchanted-fx__rune--1 { width: 55%; height: 55%; animation: enchanted-spin 12s linear infinite; }
.enchanted-fx__rune--2 { width: 72%; height: 72%; animation: enchanted-spin 16s linear infinite reverse; opacity: 0.6; }
.enchanted-fx__rune--3 { width: 38%; height: 38%; animation: enchanted-spin 8s linear infinite; opacity: 0.8; }

.enchanted-fx__pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(140, 60, 255, 0.12) 0%, transparent 65%);
  animation: enchanted-pulse 3s ease-in-out infinite;
}

@keyframes enchanted-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes enchanted-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* —— Shatter —— */

.effect-shatter .image-wrap {
  overflow: hidden;
}

.shatter-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.shatter-crack {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--length, 30%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), rgba(200, 230, 255, 0.4), transparent);
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
  opacity: 0.65;
  animation: shatter-glint 4s ease-in-out infinite;
}

.shatter-fx__glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%, rgba(200, 230, 255, 0.06) 100%);
  animation: shatter-flash 5s ease-in-out infinite;
}

@keyframes shatter-glint {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

@keyframes shatter-flash {
  0%, 90%, 100% { opacity: 0.4; }
  93% { opacity: 0.8; }
}

/* —— Polaroid —— */

.effect-polaroid .image-wrap {
  overflow: hidden;
}

.effect-polaroid .image-wrap > img:not([class*="overlay"]) {
  animation: polaroid-develop 6s ease-out infinite;
  filter: sepia(0.15) saturate(0.95);
}

.polaroid-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.polaroid-fx__frame {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px rgba(255, 252, 245, 0.25);
}

.polaroid-fx__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(200, 220, 200, 0.35) 0%, rgba(180, 200, 190, 0.15) 40%, transparent 100%);
  opacity: 0;
  animation: polaroid-wash 6s ease-out infinite;
  mix-blend-mode: overlay;
}

.polaroid-fx__chemical {
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background: linear-gradient(to top, rgba(160, 190, 170, 0.5) 0%, transparent 100%);
  animation: polaroid-chemical 6s ease-out infinite;
}

@keyframes polaroid-develop {
  0%, 15% { filter: sepia(0.4) saturate(0.5) brightness(1.3) blur(1px); }
  40%, 100% { filter: sepia(0.15) saturate(0.95) brightness(1); }
}

@keyframes polaroid-wash {
  0%, 10% { opacity: 0.8; }
  50%, 100% { opacity: 0; }
}

@keyframes polaroid-chemical {
  0% { height: 0; opacity: 0.8; }
  35% { height: 100%; opacity: 0.4; }
  100% { height: 100%; opacity: 0; }
}

/* —— Charcoal —— */

.effect-charcoal .image-wrap > img:not([class*="overlay"]) {
  filter: grayscale(1) contrast(1.15) brightness(0.95);
}

.charcoal-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.charcoal-fx__hatch {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

.charcoal-fx__stroke {
  position: absolute;
  height: 2px;
  background: rgba(30, 30, 30, 0.35);
  border-radius: 2px;
  transform-origin: left center;
  animation: charcoal-stroke 4s ease-in-out infinite;
}

.charcoal-fx__stroke--1 { top: 25%; left: 10%; width: 50%; transform: rotate(-8deg); }
.charcoal-fx__stroke--2 { top: 55%; left: 20%; width: 60%; transform: rotate(4deg); animation-delay: 0.8s; }
.charcoal-fx__stroke--3 { top: 75%; left: 5%; width: 40%; transform: rotate(-3deg); animation-delay: 1.6s; }

@keyframes charcoal-stroke {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.5; }
}

/* —— Stained Glass —— */

.effect-stained-glass .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.85) saturate(1.2);
}

.stainedglass-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.stainedglass-fx__pane {
  position: absolute;
  opacity: 0.35;
  mix-blend-mode: color-dodge;
  animation: stainedglass-shift 8s ease-in-out infinite;
}

.stainedglass-fx__pane--1 { inset: 0 50% 50% 0; background: rgba(220, 60, 60, 0.5); }
.stainedglass-fx__pane--2 { inset: 0 0 50% 50%; background: rgba(60, 120, 220, 0.45); animation-delay: 1s; }
.stainedglass-fx__pane--3 { inset: 50% 50% 0 0; background: rgba(60, 200, 100, 0.4); animation-delay: 2s; }
.stainedglass-fx__pane--4 { inset: 50% 0 0 50%; background: rgba(220, 180, 60, 0.45); animation-delay: 3s; }

.stainedglass-fx__lead {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(40, 35, 30, 0.5) 49.5%, transparent 49.5%, transparent 50.5%, rgba(40, 35, 30, 0.5) 50.5%),
    linear-gradient(0deg, rgba(40, 35, 30, 0.5) 49.5%, transparent 49.5%, transparent 50.5%, rgba(40, 35, 30, 0.5) 50.5%);
  opacity: 0.4;
}

@keyframes stainedglass-shift {
  0%, 100% { opacity: 0.3; filter: brightness(1); }
  50% { opacity: 0.45; filter: brightness(1.15); }
}

/* —— Biolume —— */

.effect-biolume .image-wrap {
  background: #020810;
  overflow: hidden;
}

.effect-biolume .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(0.7) saturate(0.85) hue-rotate(180deg);
}

.biolume-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.biolume-fx__deep {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(0, 40, 60, 0.5) 0%, transparent 70%);
}

.biolume-orb {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 16px);
  height: var(--size, 16px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
  animation: biolume-pulse var(--duration, 3.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.biolume-orb--cyan { background: radial-gradient(circle, rgba(100, 255, 220, 0.8) 0%, rgba(0, 180, 160, 0.3) 50%, transparent 70%); box-shadow: 0 0 16px rgba(80, 255, 220, 0.5); }
.biolume-orb--blue { background: radial-gradient(circle, rgba(80, 180, 255, 0.75) 0%, rgba(0, 100, 200, 0.3) 50%, transparent 70%); box-shadow: 0 0 14px rgba(80, 180, 255, 0.45); }
.biolume-orb--pink { background: radial-gradient(circle, rgba(255, 120, 200, 0.7) 0%, rgba(180, 60, 140, 0.25) 50%, transparent 70%); box-shadow: 0 0 14px rgba(255, 120, 200, 0.4); }

@keyframes biolume-pulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.1); }
}

/* —— Foil 2.0 —— */

.effect-foil-2-0 .image-wrap {
  overflow: hidden;
}

.effect-foil-2-0 .image-wrap > img:not([class*="overlay"]) {
  filter: brightness(1.06) contrast(1.1) saturate(1.08);
  animation: foil20-art-shine 5.5s ease-in-out infinite;
}

.foil20-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.foil20-fx__base {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      155deg,
      rgba(170, 195, 230, 0.22) 0%,
      rgba(220, 235, 255, 0.38) 22%,
      rgba(180, 200, 230, 0.28) 45%,
      rgba(240, 248, 255, 0.42) 58%,
      rgba(160, 185, 220, 0.25) 78%,
      rgba(200, 220, 245, 0.32) 100%
    );
  background-size: 220% 220%;
  mix-blend-mode: overlay;
  opacity: 0.82;
  animation: foil20-base-shift 7s ease-in-out infinite;
}

.foil20-fx__brush {
  position: absolute;
  inset: 0;
  opacity: 0.62;
  background:
    repeating-linear-gradient(
      62deg,
      transparent 0 2px,
      rgba(220, 235, 255, 0.36) 2px 3px,
      transparent 3px 7px
    ),
    repeating-linear-gradient(
      -28deg,
      transparent 0 3px,
      rgba(180, 200, 230, 0.24) 3px 4px,
      transparent 4px 9px
    );
  background-size: 8px 8px, 11px 11px;
  mix-blend-mode: overlay;
  animation: holo20-pattern-shift 5s linear infinite;
}

.foil20-fx__glint {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.35) 0%, transparent 28%);
  mix-blend-mode: screen;
  animation: foil20-glint 5.5s ease-in-out infinite;
}

@keyframes foil20-art-shine {
  0%, 100% { filter: brightness(1.06) contrast(1.1) saturate(1.08); }
  50% { filter: brightness(1.1) contrast(1.14) saturate(1.12); }
}

@keyframes foil20-base-shift {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
}

@keyframes foil20-glint {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

/* —— Holo 2.0 —— */

.effect-holo-2-0 .image-wrap {
  overflow: hidden;
}

.effect-holo-2-0 .image-wrap > img:not([class*="overlay"]) {
  filter: saturate(1.14) contrast(1.06) brightness(1.04);
  animation: holo20-art-shift 8s ease-in-out infinite;
}

.holo20-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.holo20-fx__spectrum {
  position: absolute;
  inset: -55%;
  background: conic-gradient(
    from 210deg,
    #ff6b8a,
    #ffb347,
    #fff06a,
    #7dffa8,
    #5ed4ff,
    #9b7dff,
    #ff7ad9,
    #ff6b8a
  );
  opacity: 0.34;
  mix-blend-mode: color-dodge;
  animation: holo20-spectrum-spin 9s linear infinite;
}

.holo20-fx__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background:
    repeating-linear-gradient(
      62deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.34) 2px 3px,
      transparent 3px 7px
    ),
    repeating-linear-gradient(
      -28deg,
      transparent 0 3px,
      rgba(255, 255, 255, 0.18) 3px 4px,
      transparent 4px 9px
    );
  background-size: 8px 8px, 11px 11px;
  mix-blend-mode: overlay;
  animation: holo20-pattern-shift 5s linear infinite;
}

.holo20-fx__grid {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0.6px, transparent 0.6px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
  mask-image: linear-gradient(125deg, transparent 8%, #000 35%, #000 65%, transparent 92%);
}

.holo20-fx__sparkle {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background:
    radial-gradient(circle at 22% 34%, rgba(255, 255, 255, 0.7) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.55) 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 44% 72%, rgba(255, 255, 255, 0.6) 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 82% 58%, rgba(255, 255, 255, 0.5) 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 12% 78%, rgba(255, 255, 255, 0.45) 0 0.8px, transparent 1.2px);
  mix-blend-mode: screen;
  animation: holo20-sparkle 3.6s ease-in-out infinite;
}

@keyframes holo20-art-shift {
  0%, 100% { filter: saturate(1.14) contrast(1.06) brightness(1.04) hue-rotate(0deg); }
  50% { filter: saturate(1.2) contrast(1.08) brightness(1.06) hue-rotate(8deg); }
}

@keyframes holo20-spectrum-spin {
  0% { transform: rotate(0deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1.15); }
}

@keyframes holo20-pattern-shift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 16px 16px, -22px 22px; }
}

@keyframes holo20-sparkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}

/* —— Arcane 2.0 —— */

.effect-arcane-2-0 .image-wrap {
  overflow: hidden;
}

.effect-arcane-2-0 .image-wrap > img:not([class*="overlay"]) {
  filter: saturate(1.12) contrast(1.05) brightness(1.02);
  animation: arcane20-art-breathe 10s ease-in-out infinite;
}

.arcane20-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.arcane20-fx__svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.arcane20-fx__veil {
  position: absolute;
  inset: -8%;
  background:
    linear-gradient(
      98deg,
      rgba(20, 180, 170, 0.42) 0%,
      rgba(60, 220, 210, 0.28) 22%,
      rgba(120, 80, 200, 0.18) 48%,
      rgba(160, 60, 220, 0.38) 72%,
      rgba(200, 50, 180, 0.45) 100%
    );
  background-size: 180% 100%;
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: arcane20-veil-shift 14s ease-in-out infinite alternate;
}

.arcane20-fx__turb {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse 55% 45% at 18% 42%, rgba(45, 220, 200, 0.75) 0%, transparent 68%),
    radial-gradient(ellipse 50% 55% at 78% 58%, rgba(170, 70, 255, 0.7) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(120, 100, 255, 0.35) 0%, transparent 70%),
    linear-gradient(95deg, rgba(30, 200, 185, 0.55) 0%, rgba(140, 60, 220, 0.5) 100%);
  mix-blend-mode: screen;
  opacity: 0.68;
  animation: arcane20-turb-drift 16s ease-in-out infinite alternate;
}

.arcane20-fx__filaments {
  position: absolute;
  inset: -10%;
  opacity: 0.62;
  background:
    repeating-radial-gradient(circle at 22% 34%, rgba(90, 240, 220, 0.22) 0 0.8px, transparent 1.6px 7px),
    repeating-radial-gradient(circle at 74% 62%, rgba(200, 100, 255, 0.24) 0 0.9px, transparent 1.8px 8px),
    repeating-linear-gradient(38deg, transparent 0 10px, rgba(255, 255, 255, 0.05) 10px 11px),
    repeating-linear-gradient(-52deg, transparent 0 7px, rgba(255, 255, 255, 0.04) 7px 8px);
  background-size: 125% 125%, 135% 135%, 16px 16px, 12px 12px;
  mix-blend-mode: overlay;
  animation: arcane20-filament-drift 18s linear infinite;
}

.arcane20-fx__mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 55%, rgba(50, 210, 195, 0.28) 0%, transparent 72%),
    radial-gradient(ellipse 65% 60% at 88% 45%, rgba(170, 70, 255, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(80, 40, 120, 0.22) 0%, transparent 65%);
  mix-blend-mode: screen;
  animation: arcane20-mist-breathe 11s ease-in-out infinite alternate;
}

.arcane20-wisp {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--size, 40px);
  height: calc(var(--size, 40px) * 0.72);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(10px);
  opacity: 0;
  animation: arcane20-wisp-drift var(--duration, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.arcane20-wisp--teal { background: rgba(40, 210, 190, 0.55); }
.arcane20-wisp--cyan { background: rgba(70, 230, 220, 0.5); }
.arcane20-wisp--aqua { background: rgba(90, 220, 255, 0.45); }
.arcane20-wisp--violet { background: rgba(150, 80, 255, 0.52); }
.arcane20-wisp--purple { background: rgba(120, 50, 220, 0.5); }
.arcane20-wisp--magenta { background: rgba(220, 70, 200, 0.48); }

.arcane20-fx__pulse {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(80, 255, 230, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 38% at 82% 68%, rgba(220, 120, 255, 0.14) 0%, transparent 72%);
  mix-blend-mode: screen;
  animation: arcane20-pulse 8s ease-in-out infinite alternate;
}

/* -- Codex dev effects -- */

.effect-codex-signal .image-wrap,
.effect-astral .image-wrap,
.effect-codex-verdigris .image-wrap,
.effect-codex-static-bloom .image-wrap,
.effect-codex-relic .image-wrap {
  overflow: hidden;
}

.effect-codex-signal .image-wrap > img:not([class*="overlay"]) {
  filter: saturate(1.2) contrast(1.08) brightness(0.96);
  animation: codex-signal-art 6.8s ease-in-out infinite;
}

.codex-signal-fx,
.astral-fx,
.codex-verdigris-fx,
.codex-static-bloom-fx,
.codex-relic-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.codex-signal-fx__field {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 50%, rgba(90, 255, 226, 0.22), transparent 44%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(160, 255, 245, 0.12) 7px 8px),
    linear-gradient(110deg, rgba(20, 160, 180, 0.28), rgba(220, 80, 255, 0.18), rgba(255, 255, 255, 0.08));
  mix-blend-mode: screen;
  animation: codex-signal-field 8s ease-in-out infinite alternate;
}

.codex-signal-fx__ring {
  position: absolute;
  inset: 18%;
  border: 1.5px solid rgba(150, 255, 238, 0.78);
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(80, 240, 220, 0.7));
  animation: codex-signal-ring 3.6s ease-out infinite;
}

.codex-signal-fx__ring--2 { animation-delay: 0.55s; }
.codex-signal-fx__ring--3 { animation-delay: 1.1s; }
.codex-signal-fx__ring--4 { animation-delay: 1.65s; }

.codex-signal-fx__pip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #eaffff;
  transform: rotate(var(--angle)) translateX(38px);
  filter: drop-shadow(0 0 5px rgba(120, 255, 240, 0.85));
  animation: codex-signal-pip 2.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.codex-signal-fx__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  height: 22%;
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: codex-signal-scan 4.4s ease-in-out infinite;
}

.codex-signal-fx__spark {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 24% 38%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 58%, rgba(110, 255, 235, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 20%, rgba(240, 120, 255, 0.8) 0 1px, transparent 2px);
  opacity: 0.65;
  animation: codex-signal-spark 0.7s steps(2) infinite;
}

.effect-astral .image-wrap > img:not([class*="overlay"]) {
  filter: saturate(0.96) contrast(1.12) brightness(0.76) hue-rotate(12deg);
  animation: astral-art 9s ease-in-out infinite;
}

.astral-fx__nebula {
  position: absolute;
  inset: -16%;
  background:
    radial-gradient(ellipse at 22% 38%, rgba(100, 80, 255, 0.46), transparent 52%),
    radial-gradient(ellipse at 76% 62%, rgba(255, 120, 210, 0.34), transparent 58%),
    radial-gradient(ellipse at 48% 52%, rgba(70, 220, 255, 0.2), transparent 46%);
  mix-blend-mode: screen;
  animation: astral-nebula 12s ease-in-out infinite alternate;
}

.astral-fx__lens {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(210, 230, 255, 0.38);
  box-shadow:
    0 0 18px rgba(120, 130, 255, 0.45),
    inset 0 0 18px rgba(90, 240, 255, 0.18);
  animation: astral-lens 7s ease-in-out infinite;
}

.astral-fx__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(210, 245, 255, 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  mix-blend-mode: screen;
}

.astral-fx__orbit--wide {
  width: 120%;
  height: 42%;
  animation: astral-orbit 10s linear infinite;
}

.astral-fx__orbit--tight {
  width: 82%;
  height: 28%;
  animation: astral-orbit 7s linear infinite reverse;
}

.astral-star {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 4px rgba(180, 230, 255, 0.9));
  animation: astral-star 3.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.astral-fx__glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg, transparent 34%, rgba(255, 255, 255, 0.36) 48%, transparent 62%);
  mix-blend-mode: screen;
  animation: astral-glint 6.5s ease-in-out infinite;
}

.effect-codex-verdigris .image-wrap > img:not([class*="overlay"]) {
  filter: sepia(0.34) saturate(0.88) contrast(1.08) brightness(0.86) hue-rotate(18deg);
}

.codex-verdigris-fx__patina {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 18% 25%, rgba(75, 230, 190, 0.42), transparent 35%),
    radial-gradient(circle at 78% 76%, rgba(45, 150, 130, 0.46), transparent 40%),
    repeating-linear-gradient(108deg, rgba(42, 95, 80, 0.22) 0 2px, transparent 2px 9px);
  mix-blend-mode: multiply;
  opacity: 0.8;
  animation: codex-verdigris-patina 13s ease-in-out infinite alternate;
}

.codex-verdigris-fx__etch {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(42deg, transparent 0 12px, rgba(190, 255, 220, 0.18) 12px 13px),
    repeating-linear-gradient(-28deg, transparent 0 18px, rgba(35, 20, 8, 0.24) 18px 19px);
  mix-blend-mode: overlay;
  opacity: 0.52;
}

.codex-verdigris-fx__rim {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 2px rgba(86, 240, 194, 0.32),
    inset 0 0 18px rgba(20, 75, 55, 0.64);
}

.codex-verdigris-fleck {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 0.7);
  border-radius: 55% 45% 60% 40%;
  background: rgba(75, 230, 185, 0.48);
  filter: blur(1px);
  opacity: 0.38;
  animation: codex-verdigris-fleck 5.5s ease-in-out infinite;
  animation-delay: var(--delay);
}

.effect-codex-static-bloom .image-wrap > img:not([class*="overlay"]) {
  filter: saturate(1.28) contrast(1.08) brightness(0.94);
  animation: codex-static-bloom-art 5.5s ease-in-out infinite;
}

.codex-static-bloom-fx__noise {
  position: absolute;
  inset: -10%;
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(92deg, rgba(0, 255, 220, 0.1) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: codex-static-bloom-noise 0.32s steps(3) infinite;
}

.codex-static-bloom-fx__halo {
  position: absolute;
  inset: -16%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 30%),
    radial-gradient(circle at 28% 70%, rgba(70, 255, 220, 0.32), transparent 42%),
    radial-gradient(circle at 72% 30%, rgba(250, 90, 255, 0.34), transparent 44%);
  mix-blend-mode: screen;
  animation: codex-static-bloom-halo 6s ease-in-out infinite alternate;
}

.codex-static-bloom-pulse {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(80, 255, 225, 0.25) 42%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: codex-static-bloom-pulse 4.6s ease-out infinite;
  animation-delay: var(--delay);
}

.codex-static-bloom-fx__edge {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 16px rgba(125, 255, 230, 0.42), inset 0 0 28px rgba(255, 90, 245, 0.22);
}

.effect-codex-relic .image-wrap > img:not([class*="overlay"]) {
  filter: sepia(0.5) saturate(0.84) brightness(0.9) contrast(1.08);
}

.codex-relic-fx__wash {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 220, 130, 0.28), transparent 42%),
    linear-gradient(145deg, rgba(95, 58, 18, 0.24), rgba(255, 218, 125, 0.22), rgba(48, 28, 12, 0.28));
  mix-blend-mode: overlay;
  animation: codex-relic-wash 9s ease-in-out infinite alternate;
}

.codex-relic-fx__cracks {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(34deg, transparent 0 28%, rgba(40, 22, 8, 0.45) 28.4% 29.2%, transparent 29.7%),
    linear-gradient(112deg, transparent 0 54%, rgba(40, 22, 8, 0.38) 54.2% 55%, transparent 55.4%),
    linear-gradient(72deg, transparent 0 66%, rgba(255, 230, 160, 0.28) 66.2% 66.8%, transparent 67.2%);
  mix-blend-mode: multiply;
  opacity: 0.62;
}

.codex-relic-fx__glyphs {
  position: absolute;
  inset: 6%;
  opacity: 0.36;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 230, 165, 0.22) 10px 11px),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(65, 36, 12, 0.22) 17px 18px);
  border-radius: 12px;
  mix-blend-mode: soft-light;
  animation: codex-relic-glyphs 12s linear infinite;
}

.codex-relic-dust {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 230, 150, 0.72);
  filter: drop-shadow(0 0 4px rgba(255, 210, 100, 0.7));
  animation: codex-relic-dust 5.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.codex-relic-fx__gleam {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 240, 170, 0.34) 48%, transparent 57%);
  mix-blend-mode: screen;
  animation: codex-relic-gleam 7.5s ease-in-out infinite;
}

@keyframes codex-signal-art {
  0%, 100% { filter: saturate(1.2) contrast(1.08) brightness(0.96) hue-rotate(0deg); }
  50% { filter: saturate(1.38) contrast(1.12) brightness(1.05) hue-rotate(10deg); }
}

@keyframes codex-signal-field {
  0% { transform: translateY(-1%) scale(1); opacity: 0.62; }
  100% { transform: translateY(1%) scale(1.05); opacity: 0.84; }
}

@keyframes codex-signal-ring {
  0% { transform: scale(0.26); opacity: 0; }
  18% { opacity: 0.74; }
  100% { transform: scale(1.45); opacity: 0; }
}

@keyframes codex-signal-pip {
  0%, 100% { opacity: 0.16; }
  46%, 54% { opacity: 0.95; }
}

@keyframes codex-signal-scan {
  0% { transform: translateY(-115%); opacity: 0; }
  14%, 74% { opacity: 0.46; }
  100% { transform: translateY(455%); opacity: 0; }
}

@keyframes codex-signal-spark {
  0%, 100% { transform: translate(0, 0); opacity: 0.45; }
  50% { transform: translate(2px, -1px); opacity: 0.8; }
}

@keyframes astral-art {
  0%, 100% { filter: saturate(0.96) contrast(1.12) brightness(0.76) hue-rotate(12deg); }
  50% { filter: saturate(1.08) contrast(1.18) brightness(0.88) hue-rotate(24deg); }
}

@keyframes astral-nebula {
  0% { transform: translate(-1%, -1%) scale(1); opacity: 0.72; }
  100% { transform: translate(1.5%, 1%) scale(1.06); opacity: 0.94; }
}

@keyframes astral-lens {
  0%, 100% { transform: scale(0.94); opacity: 0.54; }
  50% { transform: scale(1.06); opacity: 0.86; }
}

@keyframes astral-orbit {
  0% { transform: translate(-50%, -50%) rotate(-18deg); }
  100% { transform: translate(-50%, -50%) rotate(342deg); }
}

@keyframes astral-star {
  0%, 100% { opacity: 0.24; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes astral-glint {
  0%, 20% { transform: translateX(-110%); opacity: 0; }
  42% { opacity: 0.7; }
  70%, 100% { transform: translateX(110%); opacity: 0; }
}

@keyframes codex-verdigris-patina {
  0% { transform: translate(-1%, 0) scale(1); opacity: 0.7; }
  100% { transform: translate(1%, 1%) scale(1.04); opacity: 0.88; }
}

@keyframes codex-verdigris-fleck {
  0%, 100% { transform: scale(0.85); opacity: 0.24; }
  50% { transform: scale(1.12); opacity: 0.54; }
}

@keyframes codex-static-bloom-art {
  0%, 100% { filter: saturate(1.28) contrast(1.08) brightness(0.94); }
  48% { filter: saturate(1.45) contrast(1.12) brightness(1.08); }
  52% { filter: saturate(0.92) contrast(1.18) brightness(0.88); }
}

@keyframes codex-static-bloom-noise {
  0% { transform: translate(0, 0); }
  50% { transform: translate(2px, -1px); }
  100% { transform: translate(-1px, 1px); }
}

@keyframes codex-static-bloom-halo {
  0% { transform: scale(1); opacity: 0.62; }
  100% { transform: scale(1.08); opacity: 0.9; }
}

@keyframes codex-static-bloom-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  16% { opacity: 0.75; }
  70% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.12; }
}

@keyframes codex-relic-wash {
  0% { transform: translateX(-1%) scale(1); opacity: 0.68; }
  100% { transform: translateX(1%) scale(1.04); opacity: 0.86; }
}

@keyframes codex-relic-glyphs {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 22px, 18px 0; }
}

@keyframes codex-relic-dust {
  0%, 100% { transform: translateY(0) scale(0.9); opacity: 0.24; }
  50% { transform: translateY(-7px) scale(1.2); opacity: 0.78; }
}

@keyframes codex-relic-gleam {
  0%, 25% { transform: translateX(-115%); opacity: 0; }
  50% { opacity: 0.72; }
  78%, 100% { transform: translateX(115%); opacity: 0; }
}

@keyframes arcane20-art-breathe {
  0%, 100% { filter: saturate(1.12) contrast(1.05) brightness(1.02) hue-rotate(0deg); }
  50% { filter: saturate(1.18) contrast(1.07) brightness(1.05) hue-rotate(6deg); }
}

@keyframes arcane20-veil-shift {
  0% { background-position: 0% 50%; opacity: 0.66; }
  100% { background-position: 100% 50%; opacity: 0.78; }
}

@keyframes arcane20-turb-drift {
  0% { transform: translate(-1.5%, -1%) scale(1.02) rotate(0deg); }
  100% { transform: translate(1.5%, 1%) scale(1.06) rotate(2deg); }
}

@keyframes arcane20-filament-drift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; transform: rotate(0deg); }
  100% { background-position: 24px 18px, -20px 26px, 16px 16px, -12px 12px; transform: rotate(3deg); }
}

@keyframes arcane20-mist-breathe {
  0% { opacity: 0.75; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.04); }
}

@keyframes arcane20-wisp-drift {
  0%, 100% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.9);
    opacity: 0.2;
  }
  35% {
    transform: translate(-50%, -50%) translate(var(--dx1, 0%), var(--dy1, 0%)) scale(1.12);
    opacity: 0.58;
  }
  70% {
    transform: translate(-50%, -50%) translate(var(--dx2, 0%), var(--dy2, 0%)) scale(1);
    opacity: 0.42;
  }
}

@keyframes arcane20-pulse {
  0% { opacity: 0.55; }
  100% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-fx { animation: none; opacity: 0.3; transform: none; }
  .depths-bubble, .depths-mote { animation: none; opacity: 0.4; bottom: 30%; }
  .depths-fx__caustics { animation: none; }
  .surge-bolt, .surge-fx__flash { animation: none; opacity: 0; }
  .effect-surge .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .bloom-petal { animation: none; opacity: 0.5; top: 40%; }
  .bloom-fx__glow { animation: none; opacity: 0.85; }
  .rift-fx__left, .rift-fx__right { animation: none; }
  .rift-fx__edge, .rift-fx__glow { animation: none; opacity: 0.7; }
  .effect-frostbite .image-wrap::before { animation: none; }
  .frostbite-sparkle { animation: none; opacity: 0.5; }
  .effect-overclock .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .effect-overclock .image-wrap::before { animation: none; }
  .overclock-fx__ripple { animation: none; }
  .mirage-fx__band { animation: none; }
  .mirage-fx__heat { animation: none; }
  .effect-eclipse .image-wrap > img:not([class*="overlay"]) { animation: none; filter: brightness(0.48); }
  .eclipse-fx__corona, .eclipse-fx__umbra { animation: none; }
  .effect-void .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .void-mote { animation: none; opacity: 0.4; }
  .void-splotch { animation: none; opacity: 0.65; }
  .void-fx__core { animation: none; }
  .neon-fx__trace, .neon-fx__glow { animation: none; opacity: 0.7; }
  .snowflake { animation: none; opacity: 0.5; top: 40%; }
  .effect-corrupt .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .corrupt-block { animation: none; opacity: 0; }
  .effect-prism .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .prism-fx__beam { animation: none; opacity: 0.15; }
  .effect-haunt .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .haunt-fx__ghost { animation: none; opacity: 0.2; }
  .haunt-fx__mist { animation: none; }
  .effect-rust .image-wrap > img:not([class*="overlay"]) { animation: none; filter: sepia(0.35); }
  .rust-fx__creep { animation: none; }
  .rust-pit { animation: none; opacity: 0.5; }
  .effect-toxic .image-wrap::before { animation: none; }
  .toxic-drip, .toxic-bubble { animation: none; opacity: 0.4; }
  .toxic-fx__fog { animation: none; }
  .effect-nova .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .nova-fx__core, .nova-ray { animation: none; opacity: 0.3; }
  .effect-gold-2-0 .image-wrap > img:not([class*="overlay"]) { animation: none; filter: sepia(0.45) saturate(1.35) brightness(1.08); }
  .gold20-fx__plate { animation: none; }
  .gold20-fx__sheen { animation: none; opacity: 0.35; transform: none; }
  .smolder-wisp { animation: none; opacity: 0.35; bottom: 40%; }
  .smolder-fx__haze { animation: none; }
  .effect-vhs .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .vhs-fx__bleed, .vhs-fx__tracking, .vhs-fx__scanlines, .vhs-fx__noise { animation: none; opacity: 0.2; }
  .vhs-fx__scanlines { opacity: 0.18; }
  .effect-candlelight .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .candlelight-fx__glow, .candlelight-fx__flicker, .candlelight-fx__warmth { animation: none; opacity: 0.7; }
  .aurora-fx__ribbon { animation: none; opacity: 0.62; }
  .aurora-fx__shimmer { animation: none; opacity: 0.85; }
  .effect-phosphor .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .phosphor-fx__sweep { animation: none; opacity: 0.3; }
  .inkwell-blot { animation: none; opacity: 0.5; }
  .effect-hologram .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .hologram-fx__scan, .hologram-fx__flicker { animation: none; opacity: 0.4; }
  .sandstorm-grain { animation: none; opacity: 0.4; }
  .sandstorm-fx__haze { animation: none; }
  .pulsewave-fx__ring { animation: none; opacity: 0.3; }
  .effect-bloodmoon .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .bloodmoon-fx__disc, .bloodmoon-fx__mist { animation: none; }
  .gridlock-fx__grid, .gridlock-fx__edge { animation: none; opacity: 0.3; }
  .drizzle-streak { animation: none; opacity: 0.35; top: 40%; }
  .money-bag-dollar { animation: none; opacity: 0.55; top: 35%; }
  .comet-fx__tail, .comet-fx__head { animation: none; opacity: 0.4; }
  .spore-particle { animation: none; opacity: 0.45; }
  .spores-fx__fog { animation: none; }
  .petrichor-drop { animation: none; opacity: 0.4; top: 40%; }
  .sunbeam-fx__ray, .sunbeam-fx__dust { animation: none; opacity: 0.5; }
  .effect-thunderhead .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .thunderhead-fx .surge-bolt, .thunderhead-fx .surge-fx__flash, .thunderhead-fx__canopy { animation: none; opacity: 0.4; }
  .ashfall-flake { animation: none; opacity: 0.4; top: 40%; }
  .lava-fx__glow, .lava-fx__crack, .lava-fx__ember { animation: none; }
  .lavalamp-blob { animation: none; opacity: 0.75; bottom: 38%; }
  .lavalamp-fx__base { animation: none; opacity: 0.9; }
  .interference-fx__sheen { animation: none; opacity: 0.15; }
  .signal-fx__ring, .signal-fx__static, .signal-fx__burst { animation: none; opacity: 0.2; }
  .zerog-debris { animation: none; opacity: 0.45; }
  .magnetize-fleck { animation: none; opacity: 0.5; }
  .enchanted-fx__rune, .enchanted-fx__pulse { animation: none; opacity: 0.4; }
  .shatter-crack, .shatter-fx__glint { animation: none; opacity: 0.5; }
  .effect-polaroid .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .polaroid-fx__wash, .polaroid-fx__chemical { animation: none; opacity: 0.3; }
  .charcoal-fx__stroke { animation: none; opacity: 0.35; }
  .stainedglass-fx__pane { animation: none; opacity: 0.35; }
  .biolume-orb { animation: none; opacity: 0.5; }
  .effect-codex-signal .image-wrap > img:not([class*="overlay"]),
  .effect-astral .image-wrap > img:not([class*="overlay"]),
  .effect-codex-static-bloom .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .codex-signal-fx__field, .codex-signal-fx__ring, .codex-signal-fx__pip, .codex-signal-fx__scan, .codex-signal-fx__spark,
  .astral-fx__nebula, .astral-fx__lens, .astral-fx__orbit, .astral-star, .astral-fx__glint,
  .codex-verdigris-fx__patina, .codex-verdigris-fleck,
  .codex-static-bloom-fx__noise, .codex-static-bloom-fx__halo, .codex-static-bloom-pulse,
  .codex-relic-fx__wash, .codex-relic-fx__glyphs, .codex-relic-dust, .codex-relic-fx__gleam {
    animation: none;
  }
  .codex-signal-fx__ring, .codex-signal-fx__pip, .astral-star, .codex-static-bloom-pulse, .codex-relic-dust { opacity: 0.35; }
  .effect-foil-2-0 .image-wrap > img:not([class*="overlay"]) { animation: none; filter: brightness(1.06) contrast(1.1) saturate(1.08); }
  .foil20-fx__base, .foil20-fx__brush, .foil20-fx__glint { animation: none; }
  .effect-holo-2-0 .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(1.14) contrast(1.06) brightness(1.04); }
  .holo20-fx__spectrum, .holo20-fx__pattern, .holo20-fx__sparkle { animation: none; }
  .holo20-fx__spectrum { opacity: 0.2; transform: none; }
  .effect-arcane-2-0 .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(1.12) contrast(1.05) brightness(1.02); }
  .arcane20-fx__veil, .arcane20-fx__turb, .arcane20-fx__filaments, .arcane20-fx__mist, .arcane20-fx__pulse { animation: none; }
  .arcane20-wisp { animation: none; opacity: 0.35; }
  .effect-beast-mode .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .effect-beast-mode .image-wrap::before { animation: none; opacity: 0; }
  .beast-mode-fx__ambient,
  .beast-mode-fx__tension,
  .beast-mode-fx__red-core,
  .beast-mode-fx__red-pulse,
  .beast-mode-fx__red-vignette,
  .beast-mode-fx__grain,
  .beast-mode-claw,
  .beast-mode-impact,
  .beast-mode-spark { animation: none; opacity: 0; }
  .beast-mode-fx__ambient { opacity: 0.35; }
  .effect-stampede .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .effect-stampede .image-wrap::after { opacity: 0.8; }
  .stampede-fx__sheet,
  .stampede-fx__mist,
  .stampede-fx__blob,
  .stampede-fx__speck { animation: none; opacity: 0; }
  .stampede-fx__ground,
  .stampede-fx__mist { opacity: 0.85; }
  .effect-lockup .image-wrap > img:not([class*="overlay"]) { animation: none; }
  .lockup-fx__dim { animation: none; opacity: 0.28; }
  .lockup-fx__vignette,
  .lockup-fx__rail,
  .lockup-fx__bar { animation: none; }
  .lockup-fx__bar { transform: translateY(0); }
  .lockup-fx__rail { opacity: 0.7; }
  .lockup-fx__vignette { opacity: 0.4; }
  .effect-firefly .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(0.88) brightness(0.78); }
  .firefly-fx__twilight { animation: none; opacity: 0.92; }
  .firefly-fx__glow-wash,
  .firefly-fx__fly,
  .firefly-fx__pool,
  .firefly-fx__core,
  .firefly-fx__halo { animation: none; }
  .firefly-fx__glow-wash { opacity: 0.25; }
  .firefly-fx__fly { opacity: 0.65; }
  .firefly-fx__pool { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
  .firefly-fx__core { opacity: 0.85; transform: scale(1); }
  .firefly-fx__halo { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
  .effect-shift-change .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(0.92) brightness(0.88); }
  .shift-change-fx__wash,
  .shift-change-fx__orbit,
  .shift-change-fx__stamp { animation: none; }
  .shift-change-fx__wash--night { opacity: 0.45; }
  .shift-change-fx__orbit--sun { transform: rotate(0deg); opacity: 0.85; }
  .shift-change-fx__orbit--moon { opacity: 0; }
  .shift-change-fx__stamp--in { opacity: 0.92; transform: rotate(-3deg) scale(1); }
  .shift-change-fx__stamp--out { opacity: 0; }
  .effect-facet .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(1.08) contrast(1.04) brightness(1.02); }
  .facet-fx__gem { animation: none; top: 18%; opacity: 0.75; transform: translateX(-50%) rotate(var(--spin, 0deg)) scale(0.9); }
  .facet-fx__gem--hero { top: 32%; opacity: 0.9; transform: translateX(-50%) rotate(var(--spin, 0deg)) scale(1.05); }
  .facet-fx__gem--hero .facet-fx__gem-flash { animation: none; opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
  .effect-terminal-board .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(0.94) contrast(1.05) brightness(0.96) hue-rotate(-3deg); }
  .terminal-fx__cell--city .terminal-fx__pane,
  .terminal-fx__cell--dash .terminal-fx__pane { animation: none; }
  .terminal-fx__cell--status-flip { animation: none; }
  .terminal-fx__pane--a { animation: none; opacity: 1; transform: none; background-color: rgba(14, 14, 16, 0.72); }
  .terminal-fx__pane--b { animation: none; opacity: 0; transform: none; }
  .terminal-fx__cell { animation: none; }
  .effect-under-siege .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(1.04) contrast(1.05) brightness(0.97) sepia(0.08); }
  .under-siege-fx__soldier-blob { animation: none; opacity: 0.85; }
  .under-siege-fx__soldier-blob:nth-child(odd) { left: 12%; }
  .under-siege-fx__soldier-blob:nth-child(even) { left: 38%; }
  .under-siege-fx__soldier-blob:nth-child(3n) { left: 64%; }
  .under-siege-fx__banner-pendant { animation: none; }
  .under-siege-fx__haze { animation: none; opacity: 0.65; }
  .effect-smoke-bomb .image-wrap > img:not([class*="overlay"]) { animation: none; opacity: 1; filter: saturate(0.88) contrast(1.04) brightness(0.84) hue-rotate(-6deg); }
  .smoke-bomb-fx__grey-wash { animation: none; opacity: 0.65; }
  .smoke-bomb-fx__puff { animation: none; opacity: 0.55; transform: scale(1.2) translateY(-58%); }
  .smoke-bomb-fx__smoke-cover { animation: none; opacity: 0.72; transform: scale(1); }
  .smoke-bomb-fx__puff:nth-child(3),
  .smoke-bomb-fx__puff:nth-child(4) { opacity: 0.3; }
  .smoke-bomb-fx__bomb-orb { animation: none; opacity: 0.85; transform: translate(0, 0) rotate(720deg) scale(1); }
  .effect-festive .image-wrap > img:not([class*="overlay"]) { animation: none; filter: saturate(0.98) contrast(1.04) brightness(0.92) sepia(0.1); }
  .festive-fx__night { animation: none; opacity: 0.95; }
  .festive-fx__firework,
  .festive-fx__burst,
  .festive-fx__spark { animation: none; opacity: 0; }
  .festive-fx__tree-glow,
  .festive-fx__tree-star,
  .festive-fx__tree-light,
  .festive-fx__lantern-pool,
  .festive-fx__eye,
  .festive-fx__mouth::after { animation: none; }
  .festive-fx__tree-glow { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  .festive-fx__tree-star { opacity: 1; transform: translateX(-50%) scale(1); }
  .festive-fx__tree-light { opacity: 0.85; transform: scale(1); }
  .festive-fx__lantern-pool { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  .festive-fx__eye { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 190, 60, 0.95)); }
}