/* ============================================================
   MGM Game FX - styles for game-fx.js (see header there).
   body.mgfx-on + body.mgfx-<world> scope everything; colours come
   from --mgfx-c1/c2/c3 + --mgfx-glare set by the script per world.
   Entrance keyframes only define their start (and middle) frames,
   so every element eases back to its own authored transform,
   opacity and filter - nothing is overwritten once they finish.
   ============================================================ */

/* ── 0. first paint: hide entrance targets until the script decides (failsafe after 2.6s) ── */
html.mgfx-boot :is(
    .w-frame, .w-feat, .w-realm, .w-flag, .ae-card, .ae-feat, .c-frame, .c-card, .c-feat, .c-flag, .eq-frame, .eq-feat, .eq-flag,
    .loa-frame, .loa-feat, .loa-flag, .lf-card, .lf-flag, .lf-ab, .mbx-card, .mbx-stat, .mbx-loop-card, .mbx-step, .ws-tile, .ws-panel,
    .arm-card, .cs-tile, .cs-realm, .cs-road-step, .cs-fig, .cs-quote, .cs-soon, .lf-tablewrap, .pg-ui,
    .w-h, .ae-h, .c-h, .eq-h, .loa-h, .lf-h2, .cs-h, .snh-title,
    .w-eyebrow, .ae-eyebrow, .c-eyebrow, .eq-eyebrow, .loa-eyebrow, .lf-eyebrow, .lf-kick, .cs-kicker, .snh-eyebrow,
    .w-lead, .ae-lead, .c-lead, .eq-lead, .loa-lead, .lf-lead, .cs-lead, .snh-sub, .cs-hero-lead,
    .w-orn, .ae-rule, .c-orn, .eq-orn, .loa-orn, .lf-divider, .cs-orn,
    .wh-chips > *, .w-cta > *, .ae-cta > *, .c-cta > *, .eq-cta > *, .loa-cta > *, .lf-btnrow > *, .cs-cta > *, .wh-pill, .wh-back, img.wh-logo,
    .wsc-path, .ws-tbl tbody
) { opacity: 0; animation: mgfxSafe .5s linear 2.6s forwards; }
@keyframes mgfxSafe { to { opacity: 1; } }

mgfx-l { display: block; margin: 0 !important; }

/* ── 1. entrance states ── */
.mgfx-on .mgfx-pre { opacity: 0 !important; }
.mgfx-on .mgfx-in {
    animation-duration: .95s; animation-timing-function: cubic-bezier(.2, .75, .25, 1);
    animation-fill-mode: both; animation-delay: var(--mgfx-d, 0ms);
}
.mgfx-on .mgfx-in.mgfx-k-lead { animation-name: mgfxUp; animation-duration: .9s; }
.mgfx-on .mgfx-in.mgfx-k-brow { animation-name: mgfxWipe; animation-duration: .8s; }
.mgfx-on .mgfx-in.mgfx-k-orn  { animation-name: mgfxDraw; animation-duration: 1s; }
.mgfx-on .mgfx-in.mgfx-k-chip { animation-name: mgfxChip; animation-duration: .6s; }
.mgfx-on .mgfx-in.mgfx-k-seq  { animation-name: mgfxFade; animation-duration: .3s; }
.mgfx-on .mgfx-k-orn:is(.w-orn--left, .c-orn--left, .eq-orn--left, .loa-orn--left) { transform-origin: 0 50%; }
@keyframes mgfxUp   { from { opacity: 0; transform: translateY(16px); } }
@keyframes mgfxFade { from { opacity: 0; } }
@keyframes mgfxWipe { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mgfxDraw { from { opacity: 0; transform: scaleX(0); } }
@keyframes mgfxChip { 0% { opacity: 0; transform: translateY(10px) scale(.86); } 70% { opacity: 1; transform: translateY(0) scale(1.04); } }

/* sequences: nodes/rows light up one after another (body. prefix outranks the idle loops in section 9) */
body.mgfx-on .mgfx-k-seq > * { animation: mgfxLightUp .75s cubic-bezier(.2, .8, .2, 1) both; }
body.mgfx-on .mgfx-k-seq > :nth-child(2)  { animation-delay: .16s; } body.mgfx-on .mgfx-k-seq > :nth-child(3)  { animation-delay: .32s; }
body.mgfx-on .mgfx-k-seq > :nth-child(4)  { animation-delay: .48s; } body.mgfx-on .mgfx-k-seq > :nth-child(5)  { animation-delay: .64s; }
body.mgfx-on .mgfx-k-seq > :nth-child(6)  { animation-delay: .80s; } body.mgfx-on .mgfx-k-seq > :nth-child(7)  { animation-delay: .96s; }
body.mgfx-on .mgfx-k-seq > :nth-child(8)  { animation-delay: 1.12s; } body.mgfx-on .mgfx-k-seq > :nth-child(n+9) { animation-delay: 1.28s; }
@keyframes mgfxLightUp {
    0% { opacity: .12; transform: translateY(8px); filter: grayscale(1) brightness(.6); }
    55% { opacity: 1; filter: brightness(1.55) drop-shadow(0 0 12px var(--mgfx-c1)); }
}

/* ── 2. per-world card + heading entrances ── */
/* SWG - hologram: desaturated flicker, blue scan line */
.mgfx-swg .mgfx-in.mgfx-k-card { animation-name: mgfxHoloIn; animation-duration: 1.1s; }
.mgfx-swg .mgfx-in.mgfx-k-head { animation-name: mgfxHoloTxt; animation-duration: 1.2s; }
@keyframes mgfxHoloIn {
    0% { opacity: 0; transform: translateY(18px) scaleY(.94); filter: saturate(0) brightness(1.7); }
    30% { opacity: .85; } 40% { opacity: .25; }
    55% { opacity: 1; filter: saturate(.5) brightness(1.3); }
}
@keyframes mgfxHoloTxt {
    0% { opacity: 0; transform: translateX(-10px); filter: drop-shadow(0 0 0 rgba(159, 220, 255, 0)); }
    18% { opacity: .9; transform: translateX(4px); } 24% { opacity: .15; } 32% { opacity: 1; transform: translateX(-2px); filter: drop-shadow(0 0 14px rgba(159, 220, 255, .95)); }
    40% { opacity: .55; } 48% { opacity: 1; transform: none; }
    70% { filter: drop-shadow(0 0 8px rgba(159, 220, 255, .5)); }
}
/* WoW - forged: rise + gold border trace, title gilded left to right */
.mgfx-wow .mgfx-in.mgfx-k-card { animation-name: mgfxRise; animation-duration: 1s; }
.mgfx-wow .mgfx-in.mgfx-k-head,
.mgfx-daoc .mgfx-in.mgfx-k-head {
    animation-name: mgfxSweep, mgfxGlow; animation-duration: 1.25s, 1.9s;
    -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%); mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.mgfx-daoc .mgfx-in.mgfx-k-head {
    -webkit-mask-image: linear-gradient(90deg, #000 47%, transparent 53%); mask-image: linear-gradient(90deg, #000 47%, transparent 53%);
    animation-duration: 1.6s, 2.2s;
}
@keyframes mgfxRise { from { opacity: 0; transform: translateY(30px); } }
@keyframes mgfxSweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes mgfxGlow { 0%, 30% { filter: drop-shadow(0 0 0 transparent); } 58% { filter: drop-shadow(0 0 16px var(--mgfx-c1)); } }
/* CoH - comic panel slam + halftone flash; title lands with a BAM */
.mgfx-coh .mgfx-in.mgfx-k-card { animation-name: mgfxSlam; animation-duration: .8s; }
.mgfx-coh .mgfx-in.mgfx-k-head { animation-name: mgfxBam; animation-duration: .9s; }
@keyframes mgfxSlam { 0% { opacity: 0; transform: scale(1.14) rotate(-2deg); } 55% { opacity: 1; transform: scale(.985) rotate(.4deg); } 78% { transform: scale(1.006); } }
@keyframes mgfxBam {
    0% { opacity: 0; transform: scale(1.7) skewX(-12deg); filter: blur(4px); }
    48% { opacity: 1; transform: scale(.96) skewX(2deg); filter: blur(0) drop-shadow(4px 4px 0 rgba(0, 0, 0, .9)); }
    70% { transform: scale(1.02); }
}
/* EQ - emerge from planar mist, teal bloom */
.mgfx-eq .mgfx-in.mgfx-k-card { animation-name: mgfxMist; animation-duration: 1.2s; }
.mgfx-eq .mgfx-in.mgfx-k-head { animation-name: mgfxMistTxt; animation-duration: 1.4s; }
@keyframes mgfxMist { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(10px) brightness(1.3); } }
@keyframes mgfxMistTxt {
    0% { opacity: 0; transform: translateY(10px) scale(1.03); filter: blur(12px); }
    60% { opacity: 1; filter: blur(0) drop-shadow(0 0 16px rgba(55, 201, 193, .75)); }
}
/* LoA - forge-hot: cards arrive glowing and cool down */
.mgfx-loa .mgfx-in.mgfx-k-card { animation-name: mgfxForge; animation-duration: 1.3s; }
.mgfx-loa .mgfx-in.mgfx-k-head { animation-name: mgfxKindle; animation-duration: 1.4s; }
@keyframes mgfxForge {
    0% { opacity: 0; transform: translateY(26px); filter: brightness(2) saturate(2.4) sepia(.5) hue-rotate(-12deg); }
    45% { opacity: 1; filter: brightness(1.35) saturate(1.5) sepia(.25); }
}
@keyframes mgfxKindle {
    0% { opacity: 0; transform: translateY(12px); filter: brightness(2.2) drop-shadow(0 0 0 transparent); }
    45% { opacity: 1; filter: brightness(1.4) drop-shadow(0 0 22px rgba(255, 120, 50, .95)); }
}
/* DAoC - illuminated pages unfurl from the top; titles inked left to right (see WoW rule) */
.mgfx-daoc .mgfx-in.mgfx-k-card { animation-name: mgfxUnfurl; animation-duration: 1.1s; transform-origin: 50% 0; }
@keyframes mgfxUnfurl { from { opacity: 0; transform: perspective(1100px) rotateX(-24deg) translateY(12px); } }
/* WAR - cards stomp down with a shudder; titles hammered in red */
.mgfx-war .mgfx-in.mgfx-k-card { animation-name: mgfxStomp; animation-duration: .9s; }
.mgfx-war .mgfx-in.mgfx-k-head { animation-name: mgfxHammer; animation-duration: 1s; }
@keyframes mgfxStomp {
    0% { opacity: 0; transform: translateY(-34px) scale(1.03); } 55% { opacity: 1; transform: translateY(4px) scale(1); }
    70% { transform: translateY(-2px) rotate(-.4deg); } 85% { transform: translateY(1px) rotate(.2deg); }
}
@keyframes mgfxHammer {
    0% { opacity: 0; transform: translateY(-50px) scale(1.2); } 45% { opacity: 1; transform: translateY(6px) scale(.98); filter: drop-shadow(0 0 18px rgba(226, 49, 45, .9)); }
    60% { transform: translateY(-3px); } 72% { transform: translateX(3px); } 84% { transform: translateX(-2px); }
}
/* Marvel - comic pop with overshoot + halftone flash */
.mgfx-mh .mgfx-in.mgfx-k-card { animation-name: mgfxPop; animation-duration: .8s; }
.mgfx-mh .mgfx-in.mgfx-k-head { animation-name: mgfxKaPow; animation-duration: .85s; }
@keyframes mgfxPop { 0% { opacity: 0; transform: scale(.55) rotate(-5deg); } 60% { opacity: 1; transform: scale(1.06) rotate(1.5deg); } 80% { transform: scale(.98) rotate(-.5deg); } }
@keyframes mgfxKaPow { 0% { opacity: 0; transform: scale(.2) rotate(-10deg); } 55% { opacity: 1; transform: scale(1.18) rotate(3deg); } 75% { transform: scale(.95) rotate(-1deg); } }
/* UO - moonlit fade with a blue halo */
.mgfx-uo .mgfx-in.mgfx-k-card { animation-name: mgfxMoon; animation-duration: 1.2s; }
.mgfx-uo .mgfx-in.mgfx-k-head { animation-name: mgfxMoonTxt; animation-duration: 1.4s; }
@keyframes mgfxMoon { from { opacity: 0; transform: translateY(18px); filter: brightness(1.5) blur(4px); } }
@keyframes mgfxMoonTxt { 0% { opacity: 0; transform: translateY(8px); filter: blur(8px); } 55% { opacity: 1; filter: blur(0) drop-shadow(0 0 16px rgba(92, 182, 255, .85)); } }

/* ── 3. one-shot card overlays ── */
@property --mgfx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
mgfx-l.mgfx-trace {
    position: absolute; inset: -1px; z-index: 6; border-radius: inherit; padding: 2px !important; pointer-events: none;
    background: conic-gradient(from var(--mgfx-a), transparent 0 60%, var(--mgfx-c2) 76%, #fff 82%, var(--mgfx-c1) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: mgfxTrace 1.6s cubic-bezier(.45, .05, .3, 1) both;
}
@keyframes mgfxTrace { 0% { --mgfx-a: 0deg; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { --mgfx-a: 360deg; opacity: 0; } }
mgfx-l.mgfx-scan { position: absolute; inset: 0; z-index: 6; border-radius: inherit; overflow: hidden; pointer-events: none; animation: mgfxFade 1.4s ease both reverse; }
mgfx-l.mgfx-scan::before {
    content: ""; position: absolute; left: 0; right: 0; top: -45%; height: 40%;
    background: linear-gradient(180deg, transparent, rgba(159, 220, 255, .12) 70%, rgba(200, 238, 255, .9) 97%, transparent);
    animation: mgfxScan 1.15s cubic-bezier(.4, 0, .2, 1) both; animation-delay: inherit;
}
mgfx-l.mgfx-scan::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(159, 220, 255, .08) 0 1px, transparent 1px 4px); animation: mgfxFlashOut 1.2s ease both; animation-delay: inherit; }
@keyframes mgfxScan { to { top: 105%; } }
@keyframes mgfxFlashOut { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
mgfx-l.mgfx-flash {
    position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255, 255, 255, .5) 1.4px, transparent 1.9px) 0 0 / 9px 9px;
    animation: mgfxFlashOut .75s ease-out both;
}
.mgfx-mh mgfx-l.mgfx-flash { background: radial-gradient(circle, rgba(255, 216, 58, .6) 1.6px, transparent 2.1px) 0 0 / 10px 10px; }

/* ── 4. tilt glare + button shine ── */
mgfx-l.mgfx-glare {
    position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), var(--mgfx-glare), transparent 45%); mix-blend-mode: screen;
}
.mgfx-tilt:hover > mgfx-l.mgfx-glare { opacity: 1; }
mgfx-l.mgfx-shine {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) 0 0 / 260% 100% no-repeat;
    background-position: 160% 0; mix-blend-mode: overlay;
}
.mgfx-btn:hover > mgfx-l.mgfx-shine { animation: mgfxShine .85s ease; }
@keyframes mgfxShine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes mgfxShineIdle { 0% { background-position: 160% 0; } 16%, 100% { background-position: -60% 0; } }

/* ── 5. hero logo glint (masked to the logo's own pixels) ── */
mgfx-l.mgfx-glint {
    position: absolute; pointer-events: none; z-index: 2;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) 0 0 / 260% 100% no-repeat;
    background-position: 170% 0; mix-blend-mode: overlay;
}

/* ── 6. hero canvas + nav progress ── */
canvas.mgfx-amb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; margin: 0 !important; }
canvas.mgfx-amb--krackle { opacity: .42; }
mgfx-l.mgfx-prog {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 6; pointer-events: none;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, transparent, var(--mgfx-c2) 30%, var(--mgfx-c1)); box-shadow: 0 0 10px var(--mgfx-c2);
}

/* ── 7. click bursts ── */
mgfx-l.mgfx-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
mgfx-l.mgfx-bit { position: fixed; background: var(--bc); border-radius: 50%; box-shadow: 0 0 8px var(--bc); }
.mgfx-bit--swg { border-radius: 1px; height: 2px !important; width: 12px !important; }
.mgfx-bit--eq, .mgfx-bit--daoc { border-radius: 1px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mgfx-bit--coh, .mgfx-bit--uo { border-radius: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.mgfx-bit--mh { border: 2px solid #0c0c10; box-shadow: none; }
.mgfx-bit--war { border-radius: 1px; width: 3px !important; height: 11px !important; }
mgfx-l.mgfx-ring {
    position: fixed; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--mgfx-c1);
    box-shadow: 0 0 14px var(--mgfx-c2); animation: mgfxRing .6s ease-out forwards;
}
@keyframes mgfxRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }

/* ── 8. band atmosphere (one slow layer per section, paused off-screen) ── */
mgfx-l.mgfx-atmo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; animation-play-state: paused !important; }
.mgfx-live > mgfx-l.mgfx-atmo { animation-play-state: running !important; }
mgfx-l.mgfx-atmo-i { position: absolute; inset: -40% -40%; animation-play-state: paused !important; }
.mgfx-live > mgfx-l.mgfx-atmo > mgfx-l.mgfx-atmo-i { animation-play-state: running !important; }
/* SWG: faint scanlines + a hologram band rolling down */
.mgfx-swg mgfx-l.mgfx-atmo { background: repeating-linear-gradient(0deg, rgba(159, 220, 255, .025) 0 1px, transparent 1px 4px); }
.mgfx-swg mgfx-l.mgfx-atmo-i { inset: -60% 0; background: linear-gradient(180deg, transparent 44%, rgba(159, 220, 255, .045) 50%, transparent 56%); animation: mgfxRoll 9s linear infinite; }
/* WoW: warm light shafts drifting across */
.mgfx-wow mgfx-l.mgfx-atmo-i { background: repeating-linear-gradient(100deg, transparent 0 150px, rgba(255, 214, 140, .045) 210px, transparent 290px); animation: mgfxDrift 34s ease-in-out infinite alternate; }
/* CoH: halftone dots panning */
.mgfx-coh mgfx-l.mgfx-atmo { -webkit-mask-image: radial-gradient(120% 90% at 100% 0, #000, transparent 55%); mask-image: radial-gradient(120% 90% at 100% 0, #000, transparent 55%); }
.mgfx-coh mgfx-l.mgfx-atmo-i { background: radial-gradient(circle, rgba(143, 208, 255, .13) 1.3px, transparent 1.8px) 0 0 / 15px 15px; animation: mgfxPan 30s linear infinite; }
/* EQ: planar mist */
.mgfx-eq mgfx-l.mgfx-atmo-i { background: radial-gradient(30% 36% at 25% 35%, rgba(55, 201, 193, .07), transparent 70%), radial-gradient(28% 34% at 72% 62%, rgba(157, 114, 255, .06), transparent 70%); animation: mgfxDrift 26s ease-in-out infinite alternate; }
/* LoA: heat rising from below */
.mgfx-loa mgfx-l.mgfx-atmo { background: radial-gradient(70% 45% at 50% 115%, rgba(239, 106, 44, .12), transparent 70%); animation: mgfxBreathe 6s ease-in-out infinite; }
.mgfx-loa mgfx-l.mgfx-atmo-i { background: radial-gradient(18% 22% at 30% 80%, rgba(255, 148, 87, .05), transparent 70%), radial-gradient(14% 18% at 70% 90%, rgba(214, 47, 67, .05), transparent 70%); animation: mgfxRise2 14s ease-in-out infinite alternate; }
/* DAoC: a gilt sunbeam passing over the vellum */
.mgfx-daoc mgfx-l.mgfx-atmo-i { background: linear-gradient(105deg, transparent 42%, rgba(236, 208, 138, .06) 50%, transparent 58%); animation: mgfxBeam 16s ease-in-out infinite; }
/* WAR: smoke drifting over an ember glow */
.mgfx-war mgfx-l.mgfx-atmo { background: radial-gradient(80% 40% at 50% 112%, rgba(226, 49, 45, .1), transparent 70%); }
.mgfx-war mgfx-l.mgfx-atmo-i { background: radial-gradient(22% 30% at 30% 40%, rgba(120, 110, 105, .06), transparent 70%), radial-gradient(26% 26% at 70% 60%, rgba(90, 84, 80, .06), transparent 70%); animation: mgfxDrift 22s ease-in-out infinite alternate; }
/* Marvel: halftone corner energy */
.mgfx-mh mgfx-l.mgfx-atmo { -webkit-mask-image: radial-gradient(90% 80% at 0 100%, #000, transparent 60%); mask-image: radial-gradient(90% 80% at 0 100%, #000, transparent 60%); }
.mgfx-mh mgfx-l.mgfx-atmo-i { background: radial-gradient(circle, rgba(57, 198, 240, .14) 1.6px, transparent 2.2px) 0 0 / 14px 14px; animation: mgfxPan 26s linear infinite reverse; }
/* UO: a sky that twinkles */
.mgfx-uo mgfx-l.mgfx-atmo-i { background: radial-gradient(circle, rgba(191, 228, 255, .55) .8px, transparent 1.3px) 0 0 / 97px 83px, radial-gradient(circle, rgba(255, 255, 255, .4) .7px, transparent 1.2px) 40px 30px / 131px 109px; animation: mgfxTwinkle 5s ease-in-out infinite alternate; opacity: .5; }
@keyframes mgfxRoll { from { transform: translateY(-30%); } to { transform: translateY(30%); } }
@keyframes mgfxDrift { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -3%, 0); } }
@keyframes mgfxPan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-150px, -150px, 0); } }
@keyframes mgfxBreathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes mgfxRise2 { from { transform: translate3d(0, 6%, 0); } to { transform: translate3d(2%, -8%, 0); } }
@keyframes mgfxBeam { 0% { transform: translate3d(-40%, 0, 0); } 60%, 100% { transform: translate3d(40%, 0, 0); } }
@keyframes mgfxTwinkle { from { opacity: .25; } to { opacity: .6; } }

/* ── 9. live stats (WoW realm pages): bars fill when the panel comes into view ── */
.mgfx-on .ws-cls .cbar i { transition: width 1.4s cubic-bezier(.2, .8, .2, 1) !important; }
.mgfx-on .ws-cls .crow:nth-child(2) .cbar i { transition-delay: .09s !important; }
.mgfx-on .ws-cls .crow:nth-child(3) .cbar i { transition-delay: .18s !important; }
.mgfx-on .ws-cls .crow:nth-child(4) .cbar i { transition-delay: .27s !important; }
.mgfx-on .ws-cls .crow:nth-child(5) .cbar i { transition-delay: .36s !important; }
.mgfx-on .ws-fa, .mgfx-on .ws-fh { transition: width 1.6s cubic-bezier(.2, .8, .2, 1), opacity .4s !important; }
.mgfx-on .ws-panel.mgfx-pre .cbar i { width: 0 !important; }
.mgfx-on .ws-panel.mgfx-pre :is(.ws-fa, .ws-fh) { width: 50% !important; }
.mgfx-on .ws-fbar { position: relative; }
.mgfx-on .ws-fbar::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%) 0 0 / 260% 100% no-repeat;
    animation: mgfxShineIdle 5s ease-in-out 1.5s 2;
}
/* realm status dots breathe with a sonar ping when the realm is up */
.mgfx-on :is(.w-live, .wh-pill).on .dot { animation: mgfxSonar 2.2s ease-out infinite; }
@keyframes mgfxSonar { 0% { box-shadow: 0 0 9px rgba(67, 214, 117, .85), 0 0 0 0 rgba(67, 214, 117, .6); } 70%, 100% { box-shadow: 0 0 9px rgba(67, 214, 117, .85), 0 0 0 9px rgba(67, 214, 117, 0); } }
/* character-cloning path: arrows nudge forward, "This Realm" breathes */
.mgfx-on .wsc-arw { animation: mgfxNudge 1.8s ease-in-out infinite; }
.mgfx-on .wsc-path > .wsc-arw:nth-child(4) { animation-delay: .3s; }
.mgfx-on .wsc-node.here { animation: mgfxHere 2.8s ease-in-out 3; }
@keyframes mgfxNudge { 0%, 100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(6px); opacity: 1; } }
@keyframes mgfxHere { 50% { box-shadow: 0 0 0 1px rgba(255, 227, 154, .55), 0 0 28px rgba(244, 201, 93, .3); } }
@media (max-width: 820px) { .mgfx-on .wsc-arw { animation-name: mgfxNudgeY; } }
@keyframes mgfxNudgeY { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(5px); opacity: 1; } }

/* ── 10. phones: keep it light ── */
@media (max-width: 700px) {
    mgfx-l.mgfx-atmo { display: none; }
    .mgfx-on .mgfx-in.mgfx-k-card { animation-duration: .7s; }
}

/* ── 11. lite tier (no GPU, or frames under ~30fps): transform + opacity only.
         The script adds body.mgfx-lite and never builds the canvas, band layers, glints,
         tilt/glare or card overlays; these rules strip filters, masks and blends from the entrances. ── */
.mgfx-lite .mgfx-in.mgfx-k-card { animation-name: mgfxRise !important; animation-duration: .7s !important; }
.mgfx-lite .mgfx-in.mgfx-k-head {
    animation-name: mgfxUp !important; animation-duration: .8s !important;
    -webkit-mask-image: none !important; mask-image: none !important;
}
.mgfx-swg.mgfx-lite .mgfx-in:is(.mgfx-k-card, .mgfx-k-head) { animation-name: mgfxHoloLite !important; }
.mgfx-coh.mgfx-lite .mgfx-in:is(.mgfx-k-card, .mgfx-k-head) { animation-name: mgfxSlam !important; }
.mgfx-war.mgfx-lite .mgfx-in:is(.mgfx-k-card, .mgfx-k-head) { animation-name: mgfxStomp !important; }
.mgfx-mh.mgfx-lite .mgfx-in.mgfx-k-card { animation-name: mgfxPop !important; }
.mgfx-mh.mgfx-lite .mgfx-in.mgfx-k-head { animation-name: mgfxKaPow !important; }
body.mgfx-lite .mgfx-k-seq > * { animation-name: mgfxUp !important; }
.mgfx-lite .ws-fbar::after { display: none; }
.mgfx-lite .wsc-node.here { animation: none; }
@keyframes mgfxHoloLite { 0% { opacity: 0; transform: translateY(14px); } 30% { opacity: .85; } 40% { opacity: .3; } 55% { opacity: 1; } }