/*
 * Win animation effects stylesheet.
 *
 * This file contains animation-heavy win-layer visuals and is imported
 * separately from `styles.css` to keep core UI styling focused and maintainable.
 */

.win-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}

.win-fx-particles {
  position: absolute;
  inset: 0;
}

.win-fx-text {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 100%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: clamp(1.4rem, 5.5vmin, 3.5rem);
  font-weight: 400;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: none;
  white-space: pre-line;
  line-height: 1.2;
  text-align: center;
  color: #fef08a;
  text-shadow:
    0 0 12px rgba(250, 204, 21, 0.75),
    0 0 28px rgba(236, 72, 153, 0.6),
    0 0 48px rgba(56, 189, 248, 0.5);
  opacity: 0;
  animation:
    win-fx-title-display var(--win-fx-text-duration, 2000ms) linear forwards,
    win-fx-text-glow-pulse calc(1200ms / var(--animation-speed, 1)) ease-in-out 3;
  padding: 0 8px;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.app-shell[data-orientation="portrait"] .win-fx-text {
  font-size: clamp(1.2rem, 4.5vmin, 2.2rem);
}

.win-fx-piece {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--piece-size, 36px);
  height: var(--piece-size, 36px);
  margin-left: calc(var(--piece-size, 36px) * -0.5);
  margin-top: calc(var(--piece-size, 36px) * -0.5);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--piece-color, #ffffff) 70%, white 30%);
  border-radius: 6px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--piece-color, #ffffff) 74%, white 26%),
    color-mix(in srgb, var(--piece-color, #ffffff) 62%, #1e293b 38%)
  );
  color: #f8fafc;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--piece-color, #ffffff) 70%, transparent 30%),
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px -1px 0 rgba(15, 23, 42, 0.35);
  transform: translate(var(--piece-x), var(--piece-y));
  will-change: transform, filter, opacity;
  animation: win-fx-piece-blast calc(2606ms / var(--animation-speed, 1)) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
  animation-delay: var(--piece-delay, 0ms);
}

.win-fx-piece.win-fx-spark {
  width: var(--piece-size, 10px);
  height: var(--piece-size, 10px);
  border-radius: 999px;
  border: 0;
  color: transparent;
  animation: win-fx-piece-blast calc(2091ms / var(--animation-speed, 1)) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}

.win-fx-piece.win-fx-firework {
  border-radius: 999px;
  border: 0;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--piece-color, #ffffff) 82%, transparent 18%),
    0 0 24px color-mix(in srgb, var(--piece-color, #ffffff) 66%, transparent 34%);
  animation: win-fx-firework-burst calc(1660ms / var(--animation-speed, 1)) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}

.win-fx-piece.win-fx-firework-core {
  border: 1px solid color-mix(in srgb, var(--piece-color, #ffffff) 74%, white 26%);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--piece-color, #ffffff) 88%, transparent 12%),
    0 0 30px color-mix(in srgb, var(--piece-color, #ffffff) 72%, transparent 28%);
  animation:
    win-fx-firework-burst calc(1660ms / var(--animation-speed, 1)) cubic-bezier(0.2, 0.74, 0.24, 1) forwards,
    win-fx-sparkle-twinkle calc(320ms / var(--animation-speed, 1)) ease-in-out 3;
  animation-delay: var(--piece-delay, 0ms);
}

.win-fx-piece.win-fx-circle {
  border-radius: 999px;
}

.win-fx-piece.win-fx-square {
  border-radius: 4px;
}

.win-fx-piece.win-fx-diamond {
  border-radius: 2px;
  transform: translate(var(--piece-x), var(--piece-y)) rotate(45deg);
}

.win-fx-piece.win-fx-star {
  clip-path: polygon(
    50% 0%,
    61% 36%,
    98% 36%,
    68% 57%,
    79% 92%,
    50% 70%,
    21% 92%,
    32% 57%,
    2% 36%,
    39% 36%
  );
}

.win-fx-piece.win-fx-fall {
  animation: win-fx-confetti-fall var(--piece-fall-duration, 2990ms) cubic-bezier(0.18, 0.82, 0.24, 1) forwards;
  opacity: 0;
}

/* ── Shimmer dust: tiny twinkling particles ── */
.win-fx-piece.win-fx-shimmer {
  width: var(--piece-size, 4px);
  height: var(--piece-size, 4px);
  border: 0;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--piece-color, #ffffff) 90%, white 10%),
    transparent 70%
  );
  box-shadow:
    0 0 6px color-mix(in srgb, var(--piece-color, #ffffff) 70%, transparent 30%),
    0 0 14px color-mix(in srgb, var(--piece-color, #ffffff) 40%, transparent 60%);
  animation:
    win-fx-shimmer-drift calc(2800ms / var(--animation-speed, 1)) ease-in-out forwards,
    win-fx-sparkle-twinkle calc(400ms / var(--animation-speed, 1)) ease-in-out infinite;
  animation-delay: var(--piece-delay, 0ms);
}

/* ── Rising embers: upward-floating warm particles ── */
.win-fx-piece.win-fx-ember {
  width: var(--piece-size, 5px);
  height: var(--piece-size, 5px);
  border: 0;
  border-radius: 999px;
  color: transparent;
  animation: win-fx-ember-rise calc(3200ms / var(--animation-speed, 1)) cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
  animation-delay: var(--piece-delay, 0ms);
}
@keyframes win-fx-title-display {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.96);
  }

  26% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }

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

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

  100% {
    opacity: 0;
    transform: translate(-50%, -54%) scale(0.98);
  }
}

@keyframes win-fx-piece-blast {
  0% {
    opacity: 0;
    transform: translate(var(--piece-x), var(--piece-y)) scale(0.46) rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  56% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(
      calc(var(--piece-x) + var(--piece-dx) + var(--piece-drift, 0px)),
      calc(var(--piece-y) + var(--piece-dy) + var(--piece-gravity, 0px))
    ) scale(var(--piece-scale-end, 0.3)) rotate(var(--piece-rot));
    filter: blur(1.3px);
  }
}

@keyframes win-fx-firework-burst {
  0% {
    opacity: 0;
    transform: translate(var(--piece-x), var(--piece-y)) scale(0.36) rotate(0deg);
  }

  10% {
    opacity: 1;
  }

  52% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(
      calc(var(--piece-x) + var(--piece-dx) + var(--piece-drift, 0px)),
      calc(var(--piece-y) + var(--piece-dy) + (var(--piece-gravity, 0px) * 0.34))
    ) scale(0.08) rotate(var(--piece-rot));
    filter: blur(1.1px);
  }
}

@keyframes win-fx-piece-color-cycle {
  0% {
    filter: hue-rotate(0deg) saturate(1.1);
  }

  100% {
    filter: hue-rotate(360deg) saturate(1.35);
  }
}

@keyframes win-fx-confetti-fall {
  0% {
    opacity: 0;
    transform: translate(var(--piece-x), var(--piece-y)) rotate(0deg) scale(0.8);
  }

  8% {
    opacity: var(--piece-opacity, 1);
  }

  40% {
    opacity: var(--piece-opacity, 1);
    transform: translate(
      calc(var(--piece-x) + (var(--piece-dx) * 0.4)),
      calc(var(--piece-y) + (var(--piece-dy) * 0.46))
    ) rotate(calc(var(--piece-rot) * 0.45)) scale(0.86);
  }

  100% {
    opacity: 0;
    transform: translate(
      calc(var(--piece-x) + var(--piece-dx)),
      calc(var(--piece-y) + var(--piece-dy))
    ) rotate(var(--piece-rot)) scale(var(--piece-scale-end, 0.44));
    filter: blur(0.6px);
  }
}

@keyframes win-fx-sparkle-twinkle {
  0% {
    opacity: 0.4;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.22);
  }

  50% {
    opacity: 1;
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.55),
      0 0 18px color-mix(in srgb, var(--piece-color, #ffffff) 60%, transparent 40%);
  }

  100% {
    opacity: 0.42;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
  }
}

@keyframes win-fx-board-pulse {
  0% {
    transform: scale(1);
    filter: saturate(1);
  }

  24% {
    transform: scale(1.018);
    filter: saturate(1.5);
  }

  54% {
    transform: scale(1.012);
    filter: saturate(1.28);
  }

  78% {
    transform: scale(1.006);
    filter: saturate(1.12);
  }

  100% {
    transform: scale(1);
    filter: saturate(1);
  }
}

@keyframes win-fx-screen-flash {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 0.98;
  }

  24% {
    opacity: 0.78;
  }

  44% {
    opacity: 0.4;
  }

  100% {
    opacity: 0;
  }
}

@keyframes win-fx-app-shake {
  0% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-4px, 2px);
  }

  20% {
    transform: translate(4px, -3px);
  }

  32% {
    transform: translate(-3px, 2px);
  }

  46% {
    transform: translate(3px, -2px);
  }

  62% {
    transform: translate(-2px, 1px);
  }

  78% {
    transform: translate(1px, -1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes win-fx-board-chroma {
  0% {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }

  20% {
    filter:
      drop-shadow(3px 0 0 rgba(244, 114, 182, 0.62))
      drop-shadow(-3px 0 0 rgba(56, 189, 248, 0.64));
  }

  44% {
    filter:
      drop-shadow(-2px 0 0 rgba(244, 114, 182, 0.48))
      drop-shadow(2px 0 0 rgba(56, 189, 248, 0.52));
  }

  68% {
    filter:
      drop-shadow(1px 0 0 rgba(244, 114, 182, 0.3))
      drop-shadow(-1px 0 0 rgba(56, 189, 248, 0.34));
  }

  100% {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}

@keyframes win-fx-text-glow-pulse {
  0% {
    text-shadow:
      0 0 12px rgba(250, 204, 21, 0.75),
      0 0 28px rgba(236, 72, 153, 0.6),
      0 0 48px rgba(56, 189, 248, 0.5);
  }

  50% {
    text-shadow:
      0 0 18px rgba(250, 204, 21, 0.95),
      0 0 38px rgba(236, 72, 153, 0.82),
      0 0 64px rgba(56, 189, 248, 0.72),
      0 0 80px rgba(250, 204, 21, 0.3);
  }

  100% {
    text-shadow:
      0 0 12px rgba(250, 204, 21, 0.75),
      0 0 28px rgba(236, 72, 153, 0.6),
      0 0 48px rgba(56, 189, 248, 0.5);
  }
}

@keyframes win-fx-shimmer-drift {
  0% {
    opacity: 0;
    transform: translate(var(--piece-x), var(--piece-y)) scale(0.5);
  }

  12% {
    opacity: 1;
  }

  60% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translate(
      calc(var(--piece-x) + var(--piece-dx)),
      calc(var(--piece-y) + var(--piece-dy))
    ) scale(0.2);
  }
}

@keyframes win-fx-ember-rise {
  0% {
    opacity: 0;
    transform: translate(var(--piece-x), var(--piece-y)) scale(0.6);
  }

  10% {
    opacity: 0.9;
  }

  40% {
    opacity: 0.8;
    transform: translate(
      calc(var(--piece-x) + (var(--piece-dx) * 0.4)),
      calc(var(--piece-y) + (var(--piece-dy) * 0.5))
    ) scale(0.7);
  }

  100% {
    opacity: 0;
    transform: translate(
      calc(var(--piece-x) + var(--piece-dx)),
      calc(var(--piece-y) + var(--piece-dy))
    ) scale(0.15);
    filter: blur(0.8px);
  }
}

/* ── Screen-level effect activation classes ── */

.win-fx-layer.win-fx-flash-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(254, 240, 138, 0.72) 0%,
    rgba(250, 204, 21, 0.36) 40%,
    transparent 76%
  );
  animation: win-fx-screen-flash calc(600ms / var(--animation-speed, 1)) ease-out forwards;
}

.win-fx-shake-active {
  animation: win-fx-app-shake calc(520ms / var(--animation-speed, 1)) ease-out !important;
}

.win-fx-vignette-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 36%,
    rgba(15, 23, 42, 0.42) 100%
  );
  animation: win-fx-vignette-fade calc(1400ms / var(--animation-speed, 1)) ease-in forwards;
}

@keyframes win-fx-vignette-fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.win-fx-chroma-active {
  animation: win-fx-board-chroma calc(900ms / var(--animation-speed, 1)) ease-out;
}

.win-fx-particles-pulse-active {
  animation: win-fx-board-pulse calc(800ms / var(--animation-speed, 1)) ease-out;
}

/* ── Reduced motion: disable intensive animations ── */
@media (prefers-reduced-motion: reduce) {
  .win-fx-text {
    animation: win-fx-title-display var(--win-fx-text-duration, 2000ms) linear forwards;
    opacity: 1;
  }

  .win-fx-piece.win-fx-firework-core {
    animation: win-fx-firework-burst calc(1660ms / var(--animation-speed, 1)) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
    animation-delay: var(--piece-delay, 0ms);
  }

  .win-fx-piece.win-fx-shimmer {
    animation: win-fx-shimmer-drift calc(2800ms / var(--animation-speed, 1)) ease-in-out forwards;
    animation-delay: var(--piece-delay, 0ms);
  }

  .win-fx-shake-active {
    animation: none !important;
  }

  .win-fx-layer.win-fx-flash-active::before {
    display: none;
  }

  .win-fx-chroma-active {
    animation: none;
  }

  .win-fx-particles-pulse-active {
    animation: none;
  }
}

.menu-title {
  position: relative;
  color: var(--color-title);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: none;
  will-change: auto;
  animation: none;
}

.menu-title::before {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  text-align: center;
  letter-spacing: inherit;
}

/* ── Plasma Surface: reusable animated texture skin ── */
.plasma-surface {
  background-image: url("./textures/plasma.png");
  background-size: 130%;
  background-position: 30% 35%;
  animation: plasma-bg-drift calc(var(--plasma-bg-drift-duration-ms, 18000ms) / var(--animation-speed, 1)) linear infinite;
}

/* Full filter+hue cycle for non-title, non-tile hosts (displacement filter conflicts with 3D flip transforms) */
.plasma-surface:not(.menu-title):not(.tile-front):not(.tile-back) {
  animation:
    plasma-bg-drift calc(var(--plasma-bg-drift-duration-ms, 18000ms) / var(--animation-speed, 1)) linear infinite,
    plasma-texture-hue calc(var(--plasma-hue-cycle-duration-ms, 10800ms) / var(--animation-speed, 1)) ease-in-out infinite;
}

/* Tile-front plasma: zoomed in 500%, each tile offset by its index */
.tile-front.plasma-surface,
.tile-back.plasma-surface {
  animation: plasma-tile-drift calc(var(--plasma-tile-drift-duration-ms, 90000ms) / var(--animation-speed, 1)) linear infinite;
  animation-delay: calc(var(--tile-index, 0) * -1 * var(--plasma-tile-index-offset-delay-ms, 6185ms));
}

/* Glow overlay */
.plasma-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 50%, color-mix(in srgb, var(--color-menu-title) 64%, transparent 36%) 0%, transparent 58%),
    radial-gradient(120% 90% at 82% 50%, color-mix(in srgb, var(--color-btn-text) 72%, transparent 28%) 0%, transparent 62%),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-title) 34%, transparent 66%) 50%, transparent 100%);
  mix-blend-mode: screen;
  opacity: var(--plasma-glow-opacity, 0.7);
  animation: plasma-glow-sweep calc(var(--plasma-glow-sweep-duration-ms, 12400ms) / var(--animation-speed, 1)) ease-in-out infinite;
}

/* Flares overlay */
.plasma-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      108deg,
      color-mix(in srgb, var(--color-title) 12%, transparent 88%) 0px,
      color-mix(in srgb, var(--color-title) 0%, transparent 100%) 16px,
      color-mix(in srgb, var(--color-btn-text) 16%, transparent 84%) 28px,
      color-mix(in srgb, var(--color-title) 0%, transparent 100%) 44px
    );
  mix-blend-mode: color-dodge;
  opacity: var(--plasma-flares-opacity, 0.34);
  filter: blur(1px);
  animation: plasma-flares-shift calc(var(--plasma-flares-shift-duration-ms, 7600ms) / var(--animation-speed, 1)) linear infinite;
}

.tile-front.plasma-surface::before,
.tile-back.plasma-surface::before {
  opacity: calc(var(--plasma-glow-opacity, 0.7) * var(--tile-front-opacity, var(--tile-global-opacity, 0.5)));
}

.tile-back.plasma-surface::before {
  opacity: calc(var(--plasma-glow-opacity, 0.7) * var(--tile-back-opacity, var(--tile-global-opacity, 0.5)));
}

.tile-front.plasma-surface::after,
.tile-back.plasma-surface::after {
  opacity: calc(var(--plasma-flares-opacity, 0.34) * var(--tile-front-opacity, var(--tile-global-opacity, 0.5)));
}

.tile-back.plasma-surface::after {
  opacity: calc(var(--plasma-flares-opacity, 0.34) * var(--tile-back-opacity, var(--tile-global-opacity, 0.5)));
}

.menu-title::before {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  background:
    url("./textures/plasma.png"),
    radial-gradient(160% 114% at 12% 48%, color-mix(in srgb, var(--color-menu-title) 94%, white 6%) 0%, transparent 52%),
    radial-gradient(152% 108% at 32% 42%, color-mix(in srgb, var(--color-btn-text) 84%, var(--color-title) 16%) 0%, transparent 50%),
    radial-gradient(160% 116% at 50% 54%, color-mix(in srgb, var(--color-btn-text) 72%, black 28%) 0%, transparent 55%),
    radial-gradient(152% 108% at 68% 42%, color-mix(in srgb, var(--color-btn-text) 84%, var(--color-title) 16%) 0%, transparent 50%),
    radial-gradient(160% 114% at 88% 48%, color-mix(in srgb, var(--color-menu-title) 94%, white 6%) 0%, transparent 52%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-menu-title) 92%, transparent 8%) 0%,
      color-mix(in srgb, var(--color-btn-text) 82%, transparent 18%) 24%,
      color-mix(in srgb, var(--color-btn-text) 64%, black 36%) 50%,
      color-mix(in srgb, var(--color-btn-text) 82%, transparent 18%) 76%,
      color-mix(in srgb, var(--color-menu-title) 92%, transparent 8%) 100%
    );
  background-size: 220% 220%, 124% 112%, 120% 110%, 126% 114%, 120% 110%, 124% 112%, 98% 96%;
  background-position: 20% 25%, 14% 50%, 30% 44%, 50% 56%, 70% 44%, 86% 50%, 50% 50%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: soft-light, screen, normal, normal, normal, screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 1;
  filter: contrast(1.2) saturate(1.34) brightness(1.24);
  will-change: background-position, filter;
  animation-name: var(--plasma-main-animation, menu-title-plasma-flow), menu-title-texture-hue;
  animation-duration: calc(var(--plasma-main-duration, 18000ms) / var(--animation-speed, 1)), calc(10800ms / var(--animation-speed, 1));
  animation-timing-function: var(--plasma-main-ease, linear), ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: var(--plasma-main-direction, normal), normal;
  mix-blend-mode: normal;
}

/* ── HD-off overrides: disable plasma animations, use solid fallback ── */
[data-hd-mode="off"] .menu-title::before {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--color-menu-title);
  -webkit-text-fill-color: var(--color-menu-title);
  filter: none;
  animation: none;
  will-change: auto;
  opacity: 1;
}

[data-hd-mode="off"] .plasma-surface {
  background-image: none;
  animation: none;
}

[data-hd-mode="off"] .plasma-surface::before,
[data-hd-mode="off"] .plasma-surface::after {
  display: none;
}

[data-hd-mode="off"] .tile-front.plasma-surface {
  background: var(--color-tile-front-bg);
}

[data-hd-mode="off"] .tile-back.plasma-surface {
  background: var(--color-tile-back-bg);
}

@keyframes menu-title-plasma-flow {
  0% {
    background-position: 20% 25%, 14% 50%, 30% 44%, 50% 56%, 70% 44%, 86% 50%, 50% 50%;
  }

  25% {
    background-position: 75% 20%, 8% 40%, 24% 56%, 44% 44%, 64% 56%, 80% 40%, 44% 48%;
  }

  50% {
    background-position: 80% 75%, 14% 58%, 30% 38%, 50% 62%, 70% 38%, 86% 58%, 50% 54%;
  }

  75% {
    background-position: 25% 80%, 20% 46%, 36% 40%, 56% 60%, 76% 40%, 92% 46%, 56% 52%;
  }

  100% {
    background-position: 20% 25%, 14% 50%, 30% 44%, 50% 56%, 70% 44%, 86% 50%, 50% 50%;
  }
}


@keyframes menu-title-texture-hue {
  0% {
    filter: contrast(1.24) saturate(1.4) brightness(1.2) hue-rotate(0deg);
  }

  50% {
    filter: contrast(1.28) saturate(1.6) brightness(1.22) hue-rotate(44deg);
  }

  100% {
    filter: contrast(1.24) saturate(1.4) brightness(1.2) hue-rotate(0deg);
  }
}

@keyframes plasma-bg-drift {
  0% {
    background-position: 30% 35%;
    background-size: 130%;
  }

  25% {
    background-position: 62% 44%;
    background-size: 138%;
  }

  50% {
    background-position: 46% 68%;
    background-size: 133%;
  }

  75% {
    background-position: 22% 52%;
    background-size: 140%;
  }

  100% {
    background-position: 30% 35%;
    background-size: 130%;
  }
}

@keyframes plasma-tile-drift {
  0%   { background-position: 20% 20%; background-size: 500%; }
  25%  { background-position: 75% 15%; background-size: 520%; }
  50%  { background-position: 80% 80%; background-size: 500%; }
  75%  { background-position: 15% 75%; background-size: 520%; }
  100% { background-position: 20% 20%; background-size: 500%; }
}

@keyframes plasma-texture-hue {
  0% {
    filter: saturate(1.1) hue-rotate(0deg) contrast(1.04) brightness(1.08);
  }

  50% {
    filter: saturate(1.5) hue-rotate(42deg) contrast(1.2) brightness(1.12);
  }

  100% {
    filter: saturate(1.1) hue-rotate(0deg) contrast(1.04) brightness(1.08);
  }
}

@keyframes plasma-glow-sweep {
  0% {
    background-position: 8% 50%, 88% 50%, 50% 50%;
    opacity: 0.52;
  }

  50% {
    background-position: 24% 42%, 72% 42%, 50% 46%;
    opacity: 0.84;
  }

  100% {
    background-position: 8% 50%, 88% 50%, 50% 50%;
    opacity: 0.52;
  }
}

@keyframes plasma-flares-shift {
  0% {
    background-position: 0% 0%;
    transform: translateX(-4%);
  }

  100% {
    background-position: 140% 0%;
    transform: translateX(4%);
  }
}