
/* APPS1982 Forum Banner Effects - 40 presets */
.forum-ad-fx{position:relative;isolation:isolate;transform-origin:center;--ad-fx-color:#52D8FF}
.forum-ad-fx>.forum-ad-link,.forum-ad-fx>.forum-ad-fx-preview-face{position:relative;z-index:3}
.forum-ad-fx::before,.forum-ad-fx::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;z-index:1;opacity:0}
.forum-ad-fx-particles{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:4}
.forum-ad-fx-particle{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--s,6px);height:var(--s,6px);opacity:.85;animation-delay:var(--delay,0s)!important;animation-duration:var(--dur,3s)!important}
.fx-none{animation:none!important}

/* Fire family */
.fx-fire{box-shadow:0 0 18px #ff4d00,0 0 34px rgba(255,70,0,.45);animation:fxHeat 1.8s ease-in-out infinite}
.fx-fire::after{opacity:.8;background:linear-gradient(0deg,rgba(255,45,0,.45),transparent 45%);mix-blend-mode:screen;animation:fxFlameGlow 1.2s ease-in-out infinite}
.fx-ember{box-shadow:0 0 16px #ff7a18}.fx-ember::before{opacity:.55;background:radial-gradient(circle at 50% 110%,#ffcc33,transparent 50%)}
.fx-lava{box-shadow:0 0 0 2px #ff3b00,0 0 24px #ff5a00}.fx-lava::after{opacity:.75;background:linear-gradient(110deg,transparent 0 35%,rgba(255,60,0,.35) 45%,transparent 55% 70%,rgba(255,190,0,.3) 78%,transparent 90%);background-size:220% 100%;animation:fxSweep 2.8s linear infinite}
.fx-flame-border::before{opacity:1;padding:2px;background:linear-gradient(90deg,#ff2a00,#ffb300,#fff06a,#ff2a00);background-size:300% 100%;animation:fxGradient 1.4s linear infinite;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.fx-inferno{box-shadow:0 0 22px #ff0000,0 0 50px rgba(255,0,0,.45);animation:fxInferno 1.1s ease-in-out infinite alternate}.fx-inferno::after{opacity:.7;background:radial-gradient(ellipse at 50% 110%,#ffdd00 0,#ff3b00 28%,transparent 65%)}

/* Ice / snow */
.fx-ice{box-shadow:0 0 0 2px #8be9ff,0 0 24px rgba(83,220,255,.6)}.fx-ice::after{opacity:.38;background:linear-gradient(135deg,rgba(255,255,255,.65),transparent 28%,rgba(120,220,255,.35) 52%,transparent 75%)}
.fx-frost::after{opacity:.8;background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.7),transparent 25%),linear-gradient(135deg,rgba(190,240,255,.35),transparent 60%);filter:blur(.4px)}
.fx-snow{box-shadow:0 0 18px rgba(185,235,255,.55)}.fx-blizzard{box-shadow:0 0 26px rgba(180,235,255,.8);animation:fxColdPulse 1.8s ease-in-out infinite}
.fx-crystal::before{opacity:.85;background:conic-gradient(from 45deg,transparent,#dffaff55,#7adfff55,transparent,#ffffff66,transparent);animation:fxSpin 7s linear infinite}

/* Wind / weather */
.fx-wind::after{opacity:.45;background:repeating-linear-gradient(170deg,transparent 0 14px,rgba(220,245,255,.35) 16px 17px,transparent 19px 34px);background-size:180% 100%;animation:fxWind 2.3s linear infinite}
.fx-storm{box-shadow:0 0 22px #61718c}.fx-storm::after{opacity:.45;background:linear-gradient(120deg,#24304455,#8297b955,#18213255);animation:fxStorm 2.2s ease-in-out infinite alternate}
.fx-rain::after{opacity:.2;background:repeating-linear-gradient(105deg,transparent 0 10px,#a6e5ff 11px 12px,transparent 13px 22px);animation:fxRainBg .9s linear infinite}
.fx-water::after{opacity:.45;background:radial-gradient(ellipse at 50% 110%,rgba(42,168,255,.55),transparent 65%);animation:fxWater 2.3s ease-in-out infinite}
.fx-bubble{box-shadow:0 0 20px rgba(63,195,255,.35)}

/* Electricity */
.fx-lightning{animation:fxLightning 2.7s steps(1,end) infinite}.fx-lightning::after{opacity:.7;background:linear-gradient(115deg,transparent 46%,#fff 48%,#bdf7ff 50%,transparent 52%);animation:fxBolt 2.7s linear infinite}
.fx-electric-blue{box-shadow:0 0 0 2px #28bfff,0 0 24px #009dff;animation:fxElectric .8s ease-in-out infinite alternate}
.fx-electric-purple{box-shadow:0 0 0 2px #b447ff,0 0 24px #8d24ff;animation:fxElectric 1s ease-in-out infinite alternate}

/* Neon */
.fx-neon-blue{box-shadow:0 0 4px #2ad7ff,0 0 12px #2ad7ff,0 0 28px #008cff;animation:fxNeon 1.7s ease-in-out infinite alternate}
.fx-neon-red{box-shadow:0 0 4px #ff355e,0 0 12px #ff355e,0 0 28px #d70032;animation:fxNeon 1.8s ease-in-out infinite alternate}
.fx-neon-green{box-shadow:0 0 4px #39ff8a,0 0 12px #39ff8a,0 0 28px #00b95e;animation:fxNeon 1.9s ease-in-out infinite alternate}
.fx-neon-purple{box-shadow:0 0 4px #c04cff,0 0 12px #c04cff,0 0 28px #7a18d8;animation:fxNeon 1.6s ease-in-out infinite alternate}

/* Color movement */
.fx-rainbow::before{opacity:1;padding:2px;background:linear-gradient(90deg,#ff004c,#ff9d00,#fff700,#2cff66,#00d9ff,#7258ff,#ff3bdd,#ff004c);background-size:400% 100%;animation:fxGradient 3s linear infinite;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.fx-aurora::after{opacity:.6;background:linear-gradient(115deg,#00ffd555,#7258ff55,#ff3bdd55,#00ffd555);background-size:300% 300%;mix-blend-mode:screen;animation:fxAurora 5s ease infinite}
.fx-color-wave::after{opacity:.55;background:linear-gradient(120deg,transparent 10%,var(--ad-fx-color) 40%,#ff5bd7 58%,transparent 86%);background-size:260% 100%;mix-blend-mode:screen;animation:fxSweep 3.2s ease-in-out infinite}

/* Metallic shine */
.fx-gold-shine{box-shadow:0 0 0 1px #dba72e,0 0 18px rgba(255,190,30,.45)}.fx-gold-shine::after{opacity:.7;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.8) 42%,rgba(255,220,120,.75) 48%,transparent 62%);background-size:260% 100%;animation:fxSweep 2.8s ease-in-out infinite}
.fx-silver-shine{box-shadow:0 0 0 1px #c5d0df,0 0 18px rgba(210,230,255,.45)}.fx-silver-shine::after{opacity:.75;background:linear-gradient(110deg,transparent 25%,#fff 44%,#bfe0ff 50%,transparent 62%);background-size:260% 100%;animation:fxSweep 3s ease-in-out infinite}

/* Magic / space */
.fx-magic{box-shadow:0 0 22px var(--ad-fx-color);animation:fxMagic 2.4s ease-in-out infinite}.fx-magic::before{opacity:.45;background:conic-gradient(from 0deg,transparent,var(--ad-fx-color),transparent,#c64cff,transparent);animation:fxSpin 7s linear infinite}
.fx-stars{box-shadow:0 0 18px rgba(255,255,255,.28)}.fx-sparkle::after{opacity:.55;background:radial-gradient(circle at 15% 25%,#fff 0 1px,transparent 3px),radial-gradient(circle at 72% 18%,#fff 0 1px,transparent 3px),radial-gradient(circle at 82% 70%,#fff 0 1px,transparent 3px);animation:fxTwinkle 1.6s ease-in-out infinite}
.fx-cosmic{box-shadow:0 0 24px #6d3eff}.fx-cosmic::after{opacity:.55;background:radial-gradient(circle at 20% 20%,#723cff88,transparent 28%),radial-gradient(circle at 80% 70%,#00d8ff77,transparent 32%),radial-gradient(circle at 50% 50%,#ff3bb855,transparent 45%);animation:fxCosmic 5s ease-in-out infinite alternate}

/* Dark family */
.fx-smoke::after{opacity:.35;background:radial-gradient(circle at 20% 80%,#b9c0c855,transparent 35%),radial-gradient(circle at 70% 70%,#7d858e55,transparent 42%);filter:blur(8px);animation:fxSmoke 5s ease-in-out infinite alternate}
.fx-shadow{box-shadow:0 12px 30px rgba(0,0,0,.75),0 0 20px rgba(0,0,0,.55);animation:fxShadow 2.4s ease-in-out infinite alternate}
.fx-poison{box-shadow:0 0 22px #54ff00}.fx-poison::after{opacity:.4;background:radial-gradient(circle at 20% 90%,#6aff0088,transparent 35%),radial-gradient(circle at 80% 80%,#b9ff0088,transparent 38%);filter:blur(5px);animation:fxSmoke 3.5s ease-in-out infinite alternate}
.fx-darkness{box-shadow:0 0 28px #4f00a8}.fx-darkness::after{opacity:.5;background:radial-gradient(circle,#6d22bb55 0,rgba(0,0,0,.72) 72%);animation:fxDark 2.8s ease-in-out infinite alternate}

/* Motion */
.fx-pulse{animation:fxPulse 1.65s ease-in-out infinite;box-shadow:0 0 16px var(--ad-fx-color)}
.fx-float{animation:fxFloat 3.4s ease-in-out infinite}
.fx-zoom{animation:fxZoom 3s ease-in-out infinite}
.fx-tilt{animation:fxTilt 3.7s ease-in-out infinite}
.fx-shake{animation:fxShake 1.8s ease-in-out infinite;box-shadow:0 0 12px var(--ad-fx-color)}

/* Particle shapes */
.fx-p-fire{bottom:-10%;top:auto;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 60%,#fff7a0,#ff9b00 42%,#ff2600 75%,transparent 78%);filter:blur(.2px);animation:fxParticleUp linear infinite}
.fx-p-snow{top:-8%;color:#fff;font-size:var(--s,12px);width:auto;height:auto;text-shadow:0 0 6px #bfefff;animation:fxParticleDown linear infinite}
.fx-p-wind{left:-20%;top:var(--y,50%);width:var(--s,55px);height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#dff8ff,transparent);animation:fxParticleWind linear infinite}
.fx-p-rain{top:-12%;width:2px;height:var(--s,18px);background:linear-gradient(#dff8ff,#57c8ff);transform:rotate(12deg);animation:fxParticleRain linear infinite}
.fx-p-bubble{bottom:-12%;top:auto;border:1px solid rgba(210,248,255,.9);border-radius:50%;background:rgba(140,220,255,.12);box-shadow:inset 0 0 5px rgba(255,255,255,.5);animation:fxParticleBubble linear infinite}
.fx-p-magic{border-radius:50%;background:var(--ad-fx-color);box-shadow:0 0 8px var(--ad-fx-color),0 0 16px var(--ad-fx-color);animation:fxParticleMagic linear infinite}
.fx-p-smoke{bottom:-18%;top:auto;border-radius:50%;background:rgba(160,170,180,.22);filter:blur(5px);animation:fxParticleSmoke linear infinite}
.fx-p-poison{bottom:-15%;top:auto;border-radius:50%;background:#67ff2255;box-shadow:0 0 10px #6aff00;filter:blur(2px);animation:fxParticleSmoke linear infinite}

/* Keyframes */
@keyframes fxHeat{50%{filter:saturate(1.25) brightness(1.08)}}
@keyframes fxFlameGlow{50%{opacity:.45;transform:scaleY(1.08)}}
@keyframes fxSweep{0%{background-position:180% 0}100%{background-position:-80% 0}}
@keyframes fxGradient{to{background-position:300% 0}}
@keyframes fxInferno{to{box-shadow:0 0 30px #ff2700,0 0 66px rgba(255,70,0,.75)}}
@keyframes fxColdPulse{50%{filter:brightness(1.1) saturate(1.2)}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxWind{to{background-position:-180% 0}}
@keyframes fxStorm{to{filter:brightness(1.18)}}
@keyframes fxRainBg{to{background-position:-24px 40px}}
@keyframes fxWater{50%{transform:scaleY(1.03);opacity:.65}}
@keyframes fxLightning{0%,94%,100%{filter:none}95%{filter:brightness(1.7)}96%{filter:none}97%{filter:brightness(1.35)}}
@keyframes fxBolt{0%,92%{transform:translateX(-120%);opacity:0}94%{transform:translateX(0);opacity:.9}97%,100%{transform:translateX(120%);opacity:0}}
@keyframes fxElectric{to{filter:brightness(1.15);transform:translateY(-1px)}}
@keyframes fxNeon{to{filter:brightness(1.2)}}
@keyframes fxAurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fxMagic{50%{filter:hue-rotate(25deg) brightness(1.12)}}
@keyframes fxTwinkle{50%{opacity:1;filter:brightness(1.7)}}
@keyframes fxCosmic{to{filter:hue-rotate(38deg) saturate(1.35)}}
@keyframes fxSmoke{to{transform:translate(5%,-5%) scale(1.12);opacity:.55}}
@keyframes fxShadow{to{box-shadow:0 18px 42px rgba(0,0,0,.9),0 0 28px rgba(50,0,90,.5)}}
@keyframes fxDark{to{opacity:.72;filter:hue-rotate(30deg)}}
@keyframes fxPulse{50%{transform:scale(1.025);box-shadow:0 0 28px var(--ad-fx-color)}}
@keyframes fxFloat{50%{transform:translateY(-7px)}}
@keyframes fxZoom{50%{transform:scale(1.035)}}
@keyframes fxTilt{25%{transform:rotate(-.8deg)}75%{transform:rotate(.8deg)}}
@keyframes fxShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.2px)}50%{transform:translateX(1.2px)}75%{transform:translateX(-.6px)}}
@keyframes fxParticleUp{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:.9}100%{transform:translateY(-180px) translateX(var(--drift,0px)) scale(1.2);opacity:0}}
@keyframes fxParticleDown{0%{transform:translateY(-10px) translateX(0) rotate(0);opacity:0}10%{opacity:.95}100%{transform:translateY(240px) translateX(var(--drift,20px)) rotate(360deg);opacity:.1}}
@keyframes fxParticleWind{0%{transform:translateX(0);opacity:0}15%{opacity:.8}100%{transform:translateX(520px);opacity:0}}
@keyframes fxParticleRain{0%{transform:translateY(-20px) translateX(0) rotate(12deg);opacity:0}12%{opacity:.9}100%{transform:translateY(260px) translateX(-45px) rotate(12deg);opacity:.15}}
@keyframes fxParticleBubble{0%{transform:translateY(0) scale(.65);opacity:0}15%{opacity:.8}100%{transform:translateY(-220px) translateX(var(--drift,10px)) scale(1.15);opacity:0}}
@keyframes fxParticleMagic{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate(var(--drift,35px),-120px) scale(1.25);opacity:0}}
@keyframes fxParticleSmoke{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:.5}100%{transform:translateY(-150px) translateX(var(--drift,25px)) scale(2.2);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .forum-ad-fx,.forum-ad-fx::before,.forum-ad-fx::after,.forum-ad-fx-particle{animation:none!important}
  .forum-ad-fx-particles{display:none!important}
}


/* APPS1982 MOBILE FX SAFETY
   Keep banner effects, but never let transforms / particles / pseudo layers
   paint outside the banner or outside the mobile viewport. */
@media (max-width:700px){
  .forum-ad-card.forum-ad-fx{
    box-sizing:border-box!important;
    width:min(var(--forum-ad-width,320px),100%)!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    transform:none!important;
    translate:none!important;
    rotate:none!important;
    scale:none!important;
    transform-origin:center center!important;
    isolation:isolate!important;
  }

  .forum-ad-card.forum-ad-fx::before,
  .forum-ad-card.forum-ad-fx::after{
    inset:0!important;
    max-width:100%!important;
    max-height:100%!important;
    border-radius:inherit!important;
    transform:none!important;
  }

  .forum-ad-card.forum-ad-fx>.forum-ad-link{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    border-radius:inherit;
  }

  .forum-ad-card.forum-ad-fx img{
    display:block;
    max-width:100%!important;
    height:auto!important;
  }

  .forum-ad-card .forum-ad-fx-particles{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    overflow:hidden!important;
    border-radius:inherit!important;
    contain:strict;
  }

  .forum-ad-card .forum-ad-fx-particle{
    max-width:24%!important;
    max-height:55%!important;
  }

  /* Motion presets may animate transform on the whole banner on desktop.
     On mobile, keep their visual glow but lock the banner box in place. */
  .forum-ad-card.fx-pulse,
  .forum-ad-card.fx-float,
  .forum-ad-card.fx-zoom,
  .forum-ad-card.fx-tilt,
  .forum-ad-card.fx-shake{
    transform:none!important;
  }
}


/* APPS1982 FINAL MOBILE PARTICLE ANCHOR
   Required because banner particles are position:absolute.
   The banner itself must be the containing block on mobile. */
@media (max-width:700px){
  .forum-ad-zone>.forum-ad-card.forum-ad-fx{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    contain:paint!important;
  }
  .forum-ad-zone>.forum-ad-card.forum-ad-fx>.forum-ad-fx-particles{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
}
