.region-effects-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.region-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.8s ease-in-out;
}

.region-effect.active {
    opacity: 1;
}

@keyframes fall {
    0% {
        transform: translateY(-15vh) translateX(0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateY(115vh) translateX(30px);
        opacity: 0;
    }
}

/* Freljord Snow - Make it bigger and more visible with frosty ice tint */
.freljord-snow {
    background: radial-gradient(circle at 50% 50%, rgba(174, 234, 252, 0.15), rgba(200, 240, 255, 0.05));
}

.freljord-snow .snowflake {
    position: absolute;
    top: -15px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    filter: blur(1px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: fall linear infinite;
}

/* Demacia Rays - Stronger gold */
.demacia-rays {
    background: radial-gradient(circle at 50% -20%, rgba(255, 215, 0, 0.4), transparent 75%);
}

.demacia-rays .sun-flare {
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.08) 2deg,
            transparent 15deg,
            rgba(255, 255, 255, 0.05) 20deg,
            transparent 35deg);
    animation: rotate 60s linear infinite;
    filter: blur(2px);
}

/* Shadow Isles Mist - Spectral mist + Clouds */
.shadow-isles-mist {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 60, 50, 0.2);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.7);
    z-index: 5;
}

.black-mist-cloud {
    position: absolute;
    background: radial-gradient(circle, rgba(0, 150, 120, 0.4) 0%, transparent 80%);
    filter: blur(40px);
    border-radius: 50%;
    will-change: transform;
    pointer-events: none;
    opacity: 0.8;
}

@keyframes mist-roll-rtl {
    from {
        transform: translateX(120vw);
    }

    to {
        transform: translateX(-120vw);
    }
}

/* Noxus Embers - Deep Night Atmosphere */
.noxus-embers {
    background: rgba(0, 0, 0, 0.50) !important;
    box-shadow: inset 0 0 150px rgba(139, 0, 0, 0.5);
    display: block !important;
}

.noxus-embers .ember {
    position: absolute;
    bottom: -20px;
    background: #ff4d00;
    box-shadow: 0 0 12px #ff4655, 0 0 5px #fffc00;
    border-radius: 50%;
    animation: rise linear infinite;
    opacity: 0.9;
}

/* Ionia Petals - Spiritual tint + petals */
.ionia-petals {
    background: radial-gradient(circle at 50% 50%, rgba(255, 128, 171, 0.1), rgba(156, 39, 176, 0.05));
}

.ionia-petals .petal {
    position: absolute;
    top: -15px;
    width: 10px;
    height: 14px;
    background: #ff80ab;
    border-radius: 50% 0 50% 0;
    box-shadow: 0 0 5px rgba(255, 128, 171, 0.5);
    animation: fall-rotate linear infinite;
}

/* Shurima Haze - More aggressive heat shimmer */
.shurima-haze {
    background: radial-gradient(circle at 50% 50%, rgba(255, 120, 0, 0.15), rgba(255, 200, 0, 0.1));
    overflow: hidden;
}

.heat-wave {
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(255, 180, 0, 0.4), transparent 80%);
    filter: blur(20px);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    animation: shimmer-rise-aggressive linear infinite;
}

@keyframes shimmer-rise-aggressive {
    0% {
        transform: translateY(0) scaleX(1) skewX(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    40% {
        transform: translateY(-80px) scaleX(1.3) skewX(15deg);
        opacity: 0.9;
    }

    70% {
        transform: translateY(-160px) scaleX(1.5) skewX(-15deg);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-250px) scaleX(1.7) skewX(15deg);
        opacity: 0;
    }
}

/* Bilgewater Rain - Multi-dimensional Depth */
.bilgewater-rain {
    background: linear-gradient(180deg, rgba(0, 30, 40, 0.4), rgba(0, 207, 188, 0.1));
}

.bilgewater-rain .drop {
    position: absolute;
    top: -50px;
    background: rgba(0, 255, 230, 0.6);
    box-shadow: 0 0 5px rgba(0, 255, 230, 0.4);
    animation: drip linear infinite;
}

.drop-back {
    width: 1px;
    height: 20px;
    opacity: 0.3;
    filter: blur(2px);
}

.drop-mid {
    width: 1px;
    height: 40px;
    opacity: 0.6;
    filter: blur(1px);
}

.drop-front {
    width: 2px;
    height: 65px;
    opacity: 0.9;
    filter: none;
    box-shadow: 0 0 10px rgba(0, 255, 230, 0.8);
}

/* Piltover & Zaun - Dual Layer Effect */
.pilt-zaun-combined {
    background: linear-gradient(to bottom, rgba(0, 246, 255, 0.15) 0%, transparent 40%, transparent 60%, rgba(57, 255, 20, 0.20) 100%);
}

/* Zaun Toxic Fog (Bottom) */
.zaun-fog-particle {
    position: absolute;
    background: radial-gradient(circle, rgba(57, 255, 20, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: drift-fog linear infinite;
    pointer-events: none;
}

/* Piltover Hextech Machinery (Top) */
.hx-wrap {
  --c1: #00e5ff;
  --c2: #0080ff;
  --c3: #c8f0ff;
  --glow: 0 0 8px #00e5ff, 0 0 24px #00e5ff, 0 0 48px #0060cc;
  --glow-sm: 0 0 6px #00e5ff, 0 0 16px #0080ff;

  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  z-index: 10;
}

/* ── scan line ── */
.hx-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 3px,
    rgba(0,200,255,0.015) 3px,
    rgba(0,200,255,0.015) 4px
  );
  pointer-events: none;
  animation: scan 6s linear infinite;
}

@keyframes scan {
  0%   { background-position: 0 0; }
  100% { background-position: 0 400px; }
}

@keyframes modeSwitch {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.hx-scene {
  position: relative;
  width: min(50vw, 50vh, 220px);
  height: min(50vw, 50vh, 220px);
  animation: modeSwitch 18s ease-in-out infinite;
}

/* ── outer hex ring ── */
.hex-outer {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  border: 1.5px solid rgba(0,200,255,0.22);
  box-shadow: inset 0 0 20px rgba(0,180,255,0.05);
  animation: hexSpin 12s linear infinite, hexPulse 4s ease-in-out infinite;
}

.hex-outer::before {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  border: 1px solid rgba(0,220,255,0.12);
}

@keyframes hexSpin {
  to { transform: rotate(360deg); }
}

@keyframes hexPulse {
  0%,100% { filter: drop-shadow(0 0 4px rgba(0,200,255,0.4)); opacity: 0.7; }
  50%      { filter: drop-shadow(0 0 14px rgba(0,220,255,0.8)); opacity: 1; }
}

/* ── inner hex ring ── */
.hex-inner {
  position: absolute;
  inset: 18%;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  border: 1.5px solid rgba(0,230,255,0.32);
  animation: hexSpinRev 8s linear infinite, hexPulse2 3s ease-in-out infinite;
}

@keyframes hexSpinRev {
  to { transform: rotate(-360deg); }
}

@keyframes hexPulse2 {
  0%,100% { filter: drop-shadow(0 0 6px rgba(0,220,255,0.5)); }
  50%      { filter: drop-shadow(0 0 18px rgba(0,240,255,0.9)); }
}

/* ── orbiting nodes ── */
.orbit-ring {
  position: absolute;
  inset: 10%;
  animation: hexSpin 10s linear infinite;
}

.node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(180,240,255,0.9);
  box-shadow: var(--glow-sm);
  top: 50%; left: 50%;
  transform-origin: 0 0;
}

.node::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,220,255,0.4) 0%, transparent 70%);
}

.node:nth-child(1) { animation: nodePulse1 2s ease-in-out infinite; }
.node:nth-child(2) { animation: nodePulse2n 2s ease-in-out infinite; animation-delay: 0.33s; }
.node:nth-child(3) { animation: nodePulse3 2s ease-in-out infinite; animation-delay: 0.66s; }
.node:nth-child(4) { animation: nodePulse4 2s ease-in-out infinite; animation-delay: 1s; }
.node:nth-child(5) { animation: nodePulse5 2s ease-in-out infinite; animation-delay: 1.33s; }
.node:nth-child(6) { animation: nodePulse6 2s ease-in-out infinite; animation-delay: 1.66s; }

@keyframes nodePulse1  { 0%,100%{opacity:.6;transform:translate(-50%,-50%) rotate(0deg)   translateY(-85px) scale(.8)} 50%{opacity:1;transform:translate(-50%,-50%) rotate(0deg)   translateY(-85px) scale(1.3)} }
@keyframes nodePulse2n { 0%,100%{opacity:.6;transform:translate(-50%,-50%) rotate(60deg)  translateY(-85px) scale(.8)} 50%{opacity:1;transform:translate(-50%,-50%) rotate(60deg)  translateY(-85px) scale(1.3)} }
@keyframes nodePulse3  { 0%,100%{opacity:.6;transform:translate(-50%,-50%) rotate(120deg) translateY(-85px) scale(.8)} 50%{opacity:1;transform:translate(-50%,-50%) rotate(120deg) translateY(-85px) scale(1.3)} }
@keyframes nodePulse4  { 0%,100%{opacity:.6;transform:translate(-50%,-50%) rotate(180deg) translateY(-85px) scale(.8)} 50%{opacity:1;transform:translate(-50%,-50%) rotate(180deg) translateY(-85px) scale(1.3)} }
@keyframes nodePulse5  { 0%,100%{opacity:.6;transform:translate(-50%,-50%) rotate(240deg) translateY(-85px) scale(.8)} 50%{opacity:1;transform:translate(-50%,-50%) rotate(240deg) translateY(-85px) scale(1.3)} }
@keyframes nodePulse6  { 0%,100%{opacity:.6;transform:translate(-50%,-50%) rotate(300deg) translateY(-85px) scale(.8)} 50%{opacity:1;transform:translate(-50%,-50%) rotate(300deg) translateY(-85px) scale(1.3)} }

/* ── connector lines ── */
.connectors {
  position: absolute;
  inset: 0;
  animation: hexSpin 10s linear infinite;
}

.conn {
  position: absolute;
  top: 50%; left: 50%;
  width: 1px;
  transform-origin: 0 0;
  background: linear-gradient(to bottom, rgba(0,180,255,0.0), rgba(0,180,255,0.18), rgba(0,180,255,0.0));
  animation: connFade 3s ease-in-out infinite;
}

.conn:nth-child(1){height:85px;transform:rotate(270deg);animation-delay:0s}
.conn:nth-child(2){height:85px;transform:rotate(330deg);animation-delay:0.33s}
.conn:nth-child(3){height:85px;transform:rotate(30deg); animation-delay:0.66s}
.conn:nth-child(4){height:85px;transform:rotate(90deg); animation-delay:1s}
.conn:nth-child(5){height:85px;transform:rotate(150deg);animation-delay:1.33s}
.conn:nth-child(6){height:85px;transform:rotate(210deg);animation-delay:1.66s}

@keyframes connFade {
  0%,100%{opacity:.3} 50%{opacity:.8}
}

/* ── crystal shards ── */
.shards-ring {
  position: absolute;
  inset: 0;
  animation: hexSpinRev 20s linear infinite;
}

.shard {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 0 0;
  animation: shardFloat 3s ease-in-out infinite;
}

.shard::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 12px solid rgba(0,210,255,0.55);
  filter: drop-shadow(0 0 4px rgba(0,200,255,0.6));
}

.shard:nth-child(1){transform:translate(-50%,-50%) rotate(0deg)   translateY(-55px) rotate(20deg);  animation-delay:0s}
.shard:nth-child(2){transform:translate(-50%,-50%) rotate(51deg)  translateY(-62px) rotate(-15deg); animation-delay:0.43s}
.shard:nth-child(3){transform:translate(-50%,-50%) rotate(102deg) translateY(-52px) rotate(30deg);  animation-delay:0.86s}
.shard:nth-child(4){transform:translate(-50%,-50%) rotate(154deg) translateY(-64px) rotate(-10deg); animation-delay:1.28s}
.shard:nth-child(5){transform:translate(-50%,-50%) rotate(205deg) translateY(-58px) rotate(25deg);  animation-delay:1.71s}
.shard:nth-child(6){transform:translate(-50%,-50%) rotate(257deg) translateY(-54px) rotate(-20deg); animation-delay:2.14s}
.shard:nth-child(7){transform:translate(-50%,-50%) rotate(308deg) translateY(-60px) rotate(10deg);  animation-delay:2.57s}

@keyframes shardFloat {
  0%,100%{opacity:.5; filter:drop-shadow(0 0 3px rgba(0,200,255,.4))}
  50%    {opacity:.9; filter:drop-shadow(0 0 8px rgba(0,220,255,.9))}
}

/* ── central crystal ── */
.crystal {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 42px;
  transform: translate(-50%,-50%);
  animation: crystalSpin 3s linear infinite, crystalPulse 2s ease-in-out infinite;
}

.crystal::before,
.crystal::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0; height: 0;
}

.crystal::before {
  top: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid rgba(0,200,255,0.55);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 6px rgba(0,220,255,0.7));
}

.crystal::after {
  bottom: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 21px solid rgba(0,170,255,0.45);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 6px rgba(0,200,255,0.6));
}

.crystal-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(220,245,255,0.95);
  box-shadow: var(--glow);
  transform: translate(-50%,-50%);
  animation: corePulse 1.5s ease-in-out infinite;
  z-index: 2;
}

@keyframes crystalSpin {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

@keyframes crystalPulse {
  0%,100%{ filter: drop-shadow(0 0 8px rgba(0,220,255,.6)); }
  50%    { filter: drop-shadow(0 0 28px rgba(0,240,255,1)); }
}

@keyframes corePulse {
  0%,100%{ box-shadow: 0 0 8px #00e5ff, 0 0 20px #00e5ff; transform: translate(-50%,-50%) scale(1); }
  50%    { box-shadow: 0 0 16px #00e5ff, 0 0 40px #0080ff, 0 0 60px #0040aa; transform: translate(-50%,-50%) scale(1.4); }
}

/* ── pulse rings ── */
.pulse-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pring {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,220,255,0.7);
  transform: translate(-50%,-50%);
  animation: ringExpand 4s ease-out infinite;
}

.pring:nth-child(2){ animation-delay: 1.3s; }
.pring:nth-child(3){ animation-delay: 2.6s; }

@keyframes ringExpand {
  0%  { transform: translate(-50%,-50%) scale(0.2); opacity: 0.8; }
  80% { opacity: 0; }
  100%{ transform: translate(-50%,-50%) scale(8); opacity: 0; }
}

/* ── arc sparks ── */
.arc {
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 1.5px;
  transform-origin: 0 50%;
  background: linear-gradient(to right, rgba(0,230,255,0.9), rgba(0,230,255,0));
  border-radius: 1px;
  animation: arcFlash 3s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(0,220,255,0.8);
}

.arc:nth-child(1){transform:translate(0,-50%) rotate(30deg);  animation-delay:0s}
.arc:nth-child(2){transform:translate(0,-50%) rotate(90deg);  animation-delay:0.5s}
.arc:nth-child(3){transform:translate(0,-50%) rotate(150deg); animation-delay:1s}
.arc:nth-child(4){transform:translate(0,-50%) rotate(210deg); animation-delay:1.5s}
.arc:nth-child(5){transform:translate(0,-50%) rotate(270deg); animation-delay:2s}
.arc:nth-child(6){transform:translate(0,-50%) rotate(330deg); animation-delay:2.5s}

@keyframes arcFlash {
  0%,85%,100%{ opacity:0; width:0; }
  88%{ opacity:1; width:70px; }
  95%{ opacity:0.5; width:55px; }
  97%{ opacity:1; width:65px; }
}

/* ── ambient particles ── */
.particles {
  position: absolute;
  inset: 0;
  animation: hexSpin 6s linear infinite;
}

.particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(0,220,255,0.8);
  box-shadow: 0 0 4px rgba(0,200,255,0.9);
  transform-origin: 0 0;
}

.particle:nth-child(1){ animation: particleFade1 2s ease-in-out infinite; }
.particle:nth-child(2){ animation: particleFade2 2s ease-in-out infinite; animation-delay: 0.4s; }
.particle:nth-child(3){ animation: particleFade3 2s ease-in-out infinite; animation-delay: 0.8s; }
.particle:nth-child(4){ animation: particleFade4 2s ease-in-out infinite; animation-delay: 1.2s; }
.particle:nth-child(5){ animation: particleFade5 2s ease-in-out infinite; animation-delay: 1.6s; }
.particle:nth-child(6){ animation: particleFade6 2s ease-in-out infinite; animation-delay: 2.0s; }

@keyframes particleFade1 { 0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(15deg)  translateY(-45px) scale(.5)} 50%{opacity:.9;transform:translate(-50%,-50%) rotate(15deg)  translateY(-45px) scale(1.2)} }
@keyframes particleFade2 { 0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(75deg)  translateY(-40px) scale(.5)} 50%{opacity:.9;transform:translate(-50%,-50%) rotate(75deg)  translateY(-40px) scale(1.2)} }
@keyframes particleFade3 { 0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(135deg) translateY(-50px) scale(.5)} 50%{opacity:.9;transform:translate(-50%,-50%) rotate(135deg) translateY(-50px) scale(1.2)} }
@keyframes particleFade4 { 0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(195deg) translateY(-42px) scale(.5)} 50%{opacity:.9;transform:translate(-50%,-50%) rotate(195deg) translateY(-42px) scale(1.2)} }
@keyframes particleFade5 { 0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(255deg) translateY(-48px) scale(.5)} 50%{opacity:.9;transform:translate(-50%,-50%) rotate(255deg) translateY(-48px) scale(1.2)} }
@keyframes particleFade6 { 0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(315deg) translateY(-40px) scale(.5)} 50%{opacity:.9;transform:translate(-50%,-50%) rotate(315deg) translateY(-40px) scale(1.2)} }


/* Targon Aurora - Stronger gradients + Mountain Wind */
.targon-aurora {
    background: linear-gradient(180deg, rgba(138, 154, 214, 0.3), transparent);
    overflow: hidden;
}

.wind-streak {
    position: absolute;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    filter: blur(1px);
    pointer-events: none;
    animation: wind-move linear infinite;
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes wind-move {
    0% {
        transform: translateX(0) translateY(0) rotate(inherit) scaleX(0.5);
        opacity: 0;
    }

    20% {
        opacity: 0.4;
    }

    80% {
        opacity: 0.4;
    }

    100% {
        transform: translateX(400px) translateY(40px) rotate(inherit) scaleX(1.2);
        opacity: 0;
    }
}

/* Ixtal Leaves - Darker green with jungle tint */
.ixtal-leaves {
    background: radial-gradient(circle at 50% 50%, rgba(26, 138, 61, 0.15), rgba(0, 50, 20, 0.1));
}

.ixtal-leaves .leaf {
    position: absolute;
    top: -15px;
    width: 12px;
    height: 12px;
    background: #1a8a3d;
    border-radius: 80% 0 55% 0;
    animation: fall-rotate 5s linear infinite;
}

/* Void Glitch - Calm deep void energy */
.void-glitch {
    background: radial-gradient(circle, transparent 20%, rgba(30, 0, 40, 0.8) 100%);
    animation: void-shift 15s ease-in-out infinite;
}

/* ANIMATIONS */
@keyframes shimmer {
    0% {
        transform: translate(0, 0);
        opacity: 0.8;
    }

    50% {
        transform: translate(0.5px, -0.5px);
        opacity: 0.9;
    }

    100% {
        transform: translate(-0.5px, 0.5px);
        opacity: 0.8;
    }
}

@keyframes drip {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(110vh);
        opacity: 0;
    }
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) scale(1.5);
        opacity: 0;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fall-rotate {
    0% {
        transform: translateY(-15vh) rotate(0deg);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform: translateY(115vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes void-shift {

    0%,
    100% {
        background-color: rgba(138, 43, 226, 0.3);
    }

    33% {
        background-color: rgba(75, 0, 130, 0.4);
    }

    66% {
        background-color: rgba(158, 59, 181, 0.3);
    }
}