/* Media Effects: CSS preview lấy từ flash-effect-demo.html (host .mfx, lớp .mfx-flash/.mfx-leak/.mfx-burst/.mfx-fx/.mfx-dark/.mfx-white).
   Keyframes đều có tiền tố mfx-. Class hiệu ứng trên host (fx-*, zoom, ...) không được đặt tên có chứa "fx-" cho class phụ. */
.mfx { container-type:size; position:relative; isolation:isolate; overflow:hidden; width:100%; height:100%; --duration:1000ms; }
.mfx-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mfx-flash { position:absolute; z-index:3; inset:-5%; pointer-events:none; opacity:0; background:var(--flash-color,#fff); mix-blend-mode:screen; }
.mfx-flash::after { content:""; position:absolute; inset:-12%; background:radial-gradient(ellipse at 52% 54%,color-mix(in srgb,var(--flash-color,#fff) 95%,transparent),color-mix(in srgb,var(--flash-color,#fff) 18%,transparent) 38%,transparent 70%); filter:blur(var(--glow,3cqmin)); }
.mfx-flash.run { animation:mfx-flash var(--duration,420ms) cubic-bezier(.12,.65,.2,1) both; }
@keyframes mfx-flash { 0%{opacity:0} 9%{opacity:var(--peak,.96)} 17%{opacity:.18} 26%{opacity:var(--peak,.96)} 39%{opacity:.08} 100%{opacity:0} }
.mfx-leak { position:absolute; z-index:2; inset:-40%; pointer-events:none; opacity:0; transform:rotate(-18deg) translateX(-35%); background:linear-gradient(90deg,transparent 25%,rgba(255,80,41,.08) 37%,rgba(255,190,91,.72) 49%,rgba(255,246,220,.82) 53%,rgba(255,67,79,.28) 61%,transparent 73%); filter:blur(3cqmin); mix-blend-mode:screen; }
.mfx.leak-on .mfx-leak { opacity:.8; animation:mfx-leak 1.1s ease-out both; }
@keyframes mfx-leak { from{transform:rotate(-18deg) translateX(-48%);opacity:0} 20%{opacity:.9} to{transform:rotate(-18deg) translateX(48%);opacity:0} }
.mfx.shake { animation:mfx-shake 280ms ease-out; }
@keyframes mfx-shake { 0%,100%{transform:translate(0) rotate(0)} 4.2%{transform:translate(3.26%,-2.88%) rotate(1.73deg)} 8.3%{transform:translate(-3.67%,2.34%) rotate(-1.65deg)} 12.5%{transform:translate(2.45%,1.84%) rotate(1.57deg)} 16.7%{transform:translate(-2.83%,-2.50%) rotate(-1.50deg)} 20.8%{transform:translate(3.17%,-2.02%) rotate(1.43deg)} 25.0%{transform:translate(-2.10%,1.57%) rotate(-1.35deg)} 29.2%{transform:translate(2.41%,2.12%) rotate(1.27deg)} 33.3%{transform:translate(-2.67%,-1.70%) rotate(-1.20deg)} 37.5%{transform:translate(1.75%,-1.31%) rotate(1.12deg)} 41.7%{transform:translate(-1.98%,1.75%) rotate(-1.05deg)} 45.8%{transform:translate(2.17%,1.38%) rotate(0.98deg)} 50.0%{transform:translate(-1.40%,-1.05%) rotate(-0.90deg)} 54.2%{transform:translate(1.56%,-1.38%) rotate(0.83deg)} 58.3%{transform:translate(-1.67%,1.06%) rotate(-0.75deg)} 62.5%{transform:translate(1.05%,0.79%) rotate(0.68deg)} 66.7%{transform:translate(-1.13%,-1.00%) rotate(-0.60deg)} 70.8%{transform:translate(1.17%,-0.74%) rotate(0.52deg)} 75.0%{transform:translate(-0.70%,0.52%) rotate(-0.45deg)} 79.2%{transform:translate(0.71%,0.63%) rotate(0.38deg)} 83.3%{transform:translate(-0.67%,-0.42%) rotate(-0.30deg)} 87.5%{transform:translate(0.35%,-0.26%) rotate(0.23deg)} 91.7%{transform:translate(-0.28%,0.25%) rotate(-0.15deg)} 95.8%{transform:translate(0.17%,0.11%) rotate(0.07deg)} }
.mfx-burst { position:absolute; z-index:2; inset:-55%; pointer-events:none; opacity:0; background:radial-gradient(circle at 51% 50%,#fff 0 2%,rgba(255,255,255,.96) 3%,rgba(255,244,190,.9) 6%,rgba(255,151,57,.62) 12%,transparent 32%),conic-gradient(from 0deg at 51% 50%,transparent 0 4deg,rgba(255,240,194,.72) 5deg,transparent 8deg 18deg,rgba(255,255,255,.55) 19deg,transparent 22deg 34deg,rgba(255,200,112,.65) 35deg,transparent 38deg 55deg,rgba(255,255,255,.6) 56deg,transparent 60deg); mix-blend-mode:screen; filter:blur(.4cqmin); }
.mfx.chromatic::after { content:""; position:absolute; z-index:2; inset:-.4cqmin; pointer-events:none; opacity:0; box-shadow:inset 2.25cqmin 0 rgba(255,0,72,.95),inset -2.25cqmin 0 rgba(0,226,255,.98),inset 0 1.5cqmin rgba(255,0,92,.45),inset 0 -1.5cqmin rgba(0,220,255,.48); mix-blend-mode:screen; }
.mfx.chromatic::after { animation:mfx-chroma 500ms ease-out both; }
@keyframes mfx-chroma { 0%{opacity:0;transform:translateX(0)} 12%{opacity:1;transform:translateX(-1.6cqmin)} 28%{transform:translateX(1.4cqmin)} 45%{transform:translateX(-.9cqmin)} 100%{opacity:0;transform:translateX(0)} }
.mfx.color-shift { animation:mfx-color-shift 1050ms ease-in-out; }
@keyframes mfx-color-shift { 0%,100%{filter:hue-rotate(0) saturate(1)} 18%{filter:hue-rotate(105deg) saturate(2.1) brightness(1.3)} 42%{filter:hue-rotate(230deg) saturate(1.8)} 65%{filter:hue-rotate(325deg) saturate(2.2) brightness(1.2)} }
.mfx-fx { position:absolute; z-index:3; inset:0; opacity:0; pointer-events:none; }
.mfx-fx::before,.mfx-fx::after { content:""; position:absolute; inset:0; }
.mfx.fx-iris .mfx-fx { background:radial-gradient(circle,transparent 0 14%,rgba(0,0,0,.97) 45%); animation:mfx-fx-iris 860ms ease-out both; }
@keyframes mfx-fx-iris { 0%{opacity:0;background-size:8% 8%} 12%{opacity:1} 100%{opacity:0;background-size:360% 360%} }
.mfx.fx-negative .mfx-fx { background:#fff; mix-blend-mode:difference; animation:mfx-fx-negative 620ms steps(1,end) both; }
@keyframes mfx-fx-negative { 0%,100%{opacity:0} 10%,18%,38%{opacity:.95} 14%,28%,55%{opacity:.15} }
.mfx.fx-prism .mfx-fx { inset:-100%; background:conic-gradient(from 40deg at 50% 50%,transparent 0 8%,rgba(255,0,75,.95) 10%,rgba(255,220,65,.96) 14%,rgba(0,255,205,.94) 18%,rgba(42,100,255,.95) 22%,rgba(255,0,180,.8) 26%,transparent 33% 100%); filter:blur(.6cqmin) saturate(1.5); mix-blend-mode:screen; animation:mfx-fx-prism 1150ms linear both; }
@keyframes mfx-fx-prism { 0%{opacity:0;transform:rotate(0deg) scale(.65)} 12%{opacity:1} 50%{opacity:.95;transform:rotate(180deg) scale(1.05)} 100%{opacity:0;transform:rotate(360deg) scale(1.8)} }
.mfx.fx-star .mfx-fx { inset:-65%; background:conic-gradient(from 8deg at 50% 50%,transparent 0 3deg,rgba(255,255,255,1) 4deg,transparent 6deg 13deg,rgba(255,235,172,.95) 14deg,transparent 16deg 27deg,rgba(255,255,255,1) 28deg,transparent 31deg 46deg,rgba(255,255,255,.95) 47deg,transparent 50deg 64deg,rgba(255,255,255,.92) 65deg,transparent 68deg 82deg,rgba(255,236,177,.9) 83deg,transparent 86deg); mix-blend-mode:screen; filter:blur(.12cqmin) drop-shadow(0 0 2.8cqmin #fff); animation:mfx-fx-star 1000ms ease-out both; }
@keyframes mfx-fx-star { 0%{opacity:0;transform:scale(.04) rotate(-25deg)} 9%{opacity:1} 24%{opacity:1} 100%{opacity:0;transform:scale(1.65) rotate(32deg)} }
.mfx.fx-portal .mfx-fx { opacity:1; }
.mfx.fx-portal .mfx-fx::before { inset:50% auto auto 50%; width:30%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 0deg,#fff, #52eaff 15%,#684dff 35%,#ff4db8 55%,#ffda6a 75%,#fff); -webkit-mask:radial-gradient(circle,transparent 0 48%,#000 51% 66%,transparent 70%); mask:radial-gradient(circle,transparent 0 48%,#000 51% 66%,transparent 70%); filter:drop-shadow(0 0 2cqmin #73eaff); transform:translate(-50%,-50%) scale(.1); animation:mfx-fx-portal 1100ms cubic-bezier(.15,.7,.2,1) both; }
@keyframes mfx-fx-portal { 0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-100deg)} 12%{opacity:1} 38%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(50deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.3) rotate(190deg)} }
.mfx.fx-lens .mfx-fx { inset:-40%; background:radial-gradient(ellipse at 26% 50%,rgba(255,255,255,.98) 0 1%,rgba(86,222,255,.82) 2%,transparent 11%),radial-gradient(circle at 43% 50%,rgba(255,88,187,.75),transparent 9%),radial-gradient(circle at 69% 50%,rgba(255,211,83,.9),transparent 12%),linear-gradient(0deg,transparent 48%,rgba(255,255,255,.96) 49.6%,rgba(111,224,255,.75) 50%,transparent 51.5%); mix-blend-mode:screen; filter:blur(.4cqmin); animation:mfx-fx-lens 1050ms ease-out both; }
@keyframes mfx-fx-lens { 0%{opacity:0;transform:translateX(-40%) scale(.7)} 16%{opacity:1} 40%{opacity:.92} 100%{opacity:0;transform:translateX(42%) scale(1.25)} }
.mfx.fx-tear .mfx-fx { background:linear-gradient(0deg,transparent 18%,rgba(255,0,94,.95) 19% 27%,transparent 28% 41%,rgba(255,255,255,.92) 42% 47%,transparent 48% 62%,rgba(0,228,255,.95) 63% 76%,transparent 77%),linear-gradient(90deg,transparent 0 18%,rgba(255,0,94,.4) 18% 52%,transparent 52% 55%,rgba(0,228,255,.5) 55% 83%,transparent 83%); mix-blend-mode:screen; animation:mfx-fx-tear 650ms steps(4,end) both; }
@keyframes mfx-fx-tear { 0%,100%{opacity:0;transform:translateX(0) skewX(0)} 12%,74%{opacity:1} 25%{transform:translateX(-8%) skewX(-9deg)} 48%{transform:translateX(6%) skewX(6deg)} 62%{transform:translateX(-3%) skewX(-4deg)} }
.mfx.fx-fireball .mfx-fx { inset:-45%; background:radial-gradient(circle at 50% 52%,#fffbd2 0 3%,#fff26c 5%,#ff8a00 13%,#fa2200 23%,rgba(213,0,33,.7) 30%,transparent 52%); mix-blend-mode:screen; filter:blur(.5cqmin) saturate(1.7); animation:mfx-fx-fireball 1000ms cubic-bezier(.12,.75,.2,1) both; }
.mfx.fx-fireball .mfx-fx::after { inset:0; background:repeating-conic-gradient(from 0deg at 50% 52%,transparent 0 8deg,rgba(255,203,62,.8) 9deg 11deg,transparent 13deg 24deg); mask:radial-gradient(circle,transparent 0 12%,#000 18% 48%,transparent 61%); }
@keyframes mfx-fx-fireball { 0%{opacity:0;transform:scale(.08)} 12%{opacity:1} 35%{opacity:1;transform:scale(.92)} 100%{opacity:0;transform:scale(1.55)} }
.mfx.fx-burn-reveal .mfx-fx { background:radial-gradient(circle at 50% 50%,transparent 0 10%,rgba(255,241,172,.98) 20%,rgba(255,117,0,.98) 33%,rgba(212,15,0,.9) 42%,transparent 60%); mix-blend-mode:screen; filter:blur(.9cqmin) saturate(1.7); animation:mfx-fx-burn-reveal 1150ms ease-in-out both; }
@keyframes mfx-fx-burn-reveal { 0%{opacity:0;transform:scale(.05)} 12%{opacity:1} 40%{opacity:1;transform:scale(1.05)} 100%{opacity:0;transform:scale(1.65)} }
.mfx.fx-rainbow .mfx-fx { inset:0; background:linear-gradient(120deg,#ff1744,#ff9100,#ffea00,#00e676,#00c8ff,#304ffe,#d500f9,#ff1744); background-size:300% 300%; mix-blend-mode:color; filter:saturate(1.8); animation:mfx-fx-rainbow 1600ms ease-in-out both; }
@keyframes mfx-fx-rainbow { 0%,100%{opacity:0;background-position:0% 50%;filter:hue-rotate(0) saturate(1)} 12%{opacity:.82} 48%{opacity:.9;background-position:100% 50%;filter:hue-rotate(90deg) saturate(2)} 82%{opacity:.82;background-position:0% 50%;filter:hue-rotate(210deg) saturate(1.8)} }
.mfx.fx-thermal .mfx-fx { background:linear-gradient(0deg,#0700ff,#00d9ff 22%,#00ff7b 40%,#f8ff00 57%,#ff8700 74%,#f00020); mix-blend-mode:color; opacity:0; animation:mfx-fx-thermal 1200ms ease-in-out both; }
@keyframes mfx-fx-thermal { 0%,100%{opacity:0;transform:translateY(70%)} 18%,58%{opacity:.82} 100%{transform:translateY(-70%)} }
.mfx.fx-zoom-focus .mfx-media,.mfx.fx-zoom-focus video { animation:mfx-zoom-focus-image 1050ms cubic-bezier(.2,.75,.2,1) both; }
.mfx.fx-zoom-focus .mfx-fx { background:radial-gradient(ellipse at 50% 48%,transparent 0 15%,rgba(0,0,0,.18) 31%,rgba(0,0,0,.76) 72%); animation:mfx-zoom-focus-vignette 1050ms ease-out both; }
@keyframes mfx-zoom-focus-image { 0%{transform:scale(1);filter:blur(0) brightness(1)} 18%{transform:scale(1.28);filter:blur(2px) brightness(.72)} 55%{transform:scale(1.22);filter:blur(1.4px) brightness(.78)} 100%{transform:scale(1);filter:blur(0) brightness(1)} }
@keyframes mfx-zoom-focus-vignette { 0%,100%{opacity:0} 20%,58%{opacity:1} }
.mfx.fx-cyber .mfx-fx { background-image:linear-gradient(rgba(255,0,255,.62) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.62) 1px,transparent 1px),radial-gradient(ellipse at 50% 50%,transparent 10%,rgba(0,0,0,.28) 100%); background-size:3.5cqmin 3.5cqmin,3.5cqmin 3.5cqmin,100% 100%; box-shadow:inset 0 0 3cqmin rgba(0,255,255,.65),inset 0 0 6cqmin rgba(255,0,255,.4); animation:mfx-cyber-grid 1150ms ease both; }
.mfx.fx-cyber .mfx-fx::after { inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,255,255,.85) 50%,transparent 65%); animation:mfx-cyber-scan 900ms linear both; }
@keyframes mfx-cyber-grid { 0%,100%{opacity:0} 15%,75%{opacity:1} }
@keyframes mfx-cyber-scan { from{transform:translateY(-100%)} to{transform:translateY(100%)} }
.mfx.fx-data-stream .mfx-fx { background:repeating-linear-gradient(90deg,transparent 0 1.6cqmin,rgba(0,255,205,.2) 1.75cqmin 1.9cqmin,transparent 2.1cqmin 3cqmin),repeating-linear-gradient(180deg,transparent 0 1cqmin,rgba(84,255,204,.92) 1.1cqmin 1.4cqmin,transparent 1.6cqmin 3.1cqmin); background-size:100% 100%,100% 190%; mix-blend-mode:screen; filter:drop-shadow(0 0 1cqmin #00ffc8); animation:mfx-data-stream 1100ms linear both; }
.mfx.fx-data-stream .mfx-fx::after { inset:0; background:linear-gradient(90deg,transparent,rgba(0,255,210,.16),transparent); }
@keyframes mfx-data-stream { 0%{opacity:0;background-position:0 0,0 -100%} 15%{opacity:1} 85%{opacity:.9} 100%{opacity:0;background-position:0 0,0 100%} }
/* New looks: holographic foil, ink bloom, orbital energy, comic impact, fractured glass */
.mfx.fx-holo .mfx-fx { inset:-12%; background:conic-gradient(from 0deg at 50% 50%,rgba(255,40,150,.55),rgba(76,255,232,.62),rgba(255,224,92,.55),rgba(129,83,255,.66),rgba(255,40,150,.55)),linear-gradient(115deg,transparent 28%,rgba(255,255,255,.8) 48%,transparent 62%); background-size:100% 100%,220% 100%; background-blend-mode:screen; mix-blend-mode:color-dodge; filter:saturate(1.7); animation:mfx-fx-holo 1500ms ease-in-out both; }
@keyframes mfx-fx-holo { 0%,100%{opacity:0;transform:rotate(-8deg) scale(.85);background-position:0 0,-100% 0} 14%,78%{opacity:.82} 50%{opacity:.9;transform:rotate(5deg) scale(1.08);background-position:0 0,100% 0} }
.mfx.fx-orbit .mfx-fx { opacity:1; background:radial-gradient(circle at 50% 50%,rgba(113,245,255,.32),transparent 15%); }
.mfx.fx-orbit .mfx-fx::before,.mfx.fx-orbit .mfx-fx::after { inset:50% auto auto 50%; width:20%; aspect-ratio:1; border:.4cqmin solid transparent; border-radius:50%; background:conic-gradient(from 20deg,#fff,transparent 18%,#5deeff 31%,transparent 52%,#c17aff 72%,transparent 86%,#fff) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; box-shadow:0 0 2.3cqmin #50dfff,0 0 5.5cqmin rgba(112,77,255,.8); transform:translate(-50%,-50%) scale(.1); animation:mfx-fx-orbit 1250ms cubic-bezier(.15,.7,.2,1) both; }
.mfx.fx-orbit .mfx-fx::after { width:34%; border-width:.25cqmin; animation-delay:90ms; animation-duration:1450ms; }
@keyframes mfx-fx-orbit { 0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-110deg)} 12%{opacity:1} 52%{opacity:1;transform:translate(-50%,-50%) scale(1.35) rotate(90deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(250deg)} }
.mfx.fx-comic .mfx-fx { inset:-35%; background:radial-gradient(circle at 50% 50%,#fff 0 2%,#fff3a1 3% 6%,#ffad29 9%,#ff3a18 15%,transparent 28%),repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,247,179,.95) 0 2deg,transparent 2.8deg 12deg); mix-blend-mode:screen; filter:drop-shadow(0 0 2.3cqmin #ff642c); animation:mfx-fx-comic 780ms cubic-bezier(.12,.75,.2,1) both; }
.mfx.fx-comic .mfx-fx::before { inset:15%; background:repeating-conic-gradient(from 6deg at 50% 50%,transparent 0 8deg,rgba(255,255,255,.9) 8.5deg 9deg,transparent 10deg 21deg); }
@keyframes mfx-fx-comic { 0%{opacity:0;transform:scale(.08) rotate(-12deg)} 10%{opacity:1} 35%{opacity:.95;transform:scale(1) rotate(5deg)} 100%{opacity:0;transform:scale(1.55) rotate(14deg)} }
/* Shape-changing effects */
.mfx.fx-vortex .mfx-fx { inset:-30%; background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.9) 0 5deg,rgba(34,230,255,.7) 6deg 11deg,transparent 13deg 29deg,rgba(187,62,255,.8) 30deg 34deg,transparent 36deg 55deg); -webkit-mask:radial-gradient(circle,transparent 0 10%,#000 17% 54%,transparent 68%); mask:radial-gradient(circle,transparent 0 10%,#000 17% 54%,transparent 68%); mix-blend-mode:screen; filter:blur(.25cqmin) drop-shadow(0 0 1.9cqmin #52eaff); animation:mfx-fx-vortex 1350ms cubic-bezier(.15,.65,.2,1) both; }
@keyframes mfx-fx-vortex { 0%{opacity:0;transform:rotate(-160deg) scale(.12) skewX(-20deg)} 12%{opacity:1} 58%{opacity:.95;transform:rotate(90deg) scale(1) skewX(8deg)} 100%{opacity:0;transform:rotate(350deg) scale(1.5) skewX(-8deg)} }
/* Motion / texture effects */
.mfx.wobble { animation:mfx-wobble 900ms ease-in-out; }
@keyframes mfx-wobble { 0%,100%{transform:scale(1,1) skew(0,0)} 15%{transform:scale(1.12,.88) skew(-4deg,0)} 30%{transform:scale(.9,1.1) skew(4deg,0)} 45%{transform:scale(1.07,.94) skew(-2.5deg,0)} 60%{transform:scale(.96,1.05) skew(2deg,0)} 78%{transform:scale(1.02,.99) skew(-.8deg,0)} }
.mfx.blur-pulse { animation:mfx-blur-pulse 800ms ease-in-out; }
@keyframes mfx-blur-pulse { 0%,100%{filter:blur(0) brightness(1)} 30%{filter:blur(10px) brightness(1.3)} 55%{filter:blur(3px) brightness(1.1)} 75%{filter:blur(7px) brightness(1.2)} }
.mfx.fx-vhs .mfx-fx { background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 .25cqmin,transparent .4cqmin .6cqmin),linear-gradient(0deg,transparent 40%,rgba(255,255,255,.55) 44%,rgba(255,0,80,.35) 47%,transparent 52%); background-size:100% 100%,100% 60%; background-repeat:repeat,no-repeat; mix-blend-mode:screen; animation:mfx-fx-vhs 1000ms steps(10,end) both; }
.mfx.fx-vhs .mfx-fx::before { background:linear-gradient(90deg,rgba(255,0,60,.25),transparent 30% 70%,rgba(0,220,255,.3)); }
@keyframes mfx-fx-vhs { 0%{opacity:0;background-position:0 0,0 -80%} 10%{opacity:1} 90%{opacity:1;background-position:0 6px,0 180%} 100%{opacity:0;background-position:0 0,0 200%} }
.mfx.fx-pixel .mfx-fx { background:conic-gradient(rgba(0,0,0,.55) 25%,rgba(255,255,255,.35) 0 50%,rgba(0,0,0,.55) 0 75%,rgba(255,255,255,.35) 0) 0 0/12.5% 16.6%; mix-blend-mode:hard-light; animation:mfx-fx-pixel 800ms steps(1,end) both; }
@keyframes mfx-fx-pixel { 0%,100%{opacity:0} 10%{opacity:1;background-size:25% 33%} 30%{background-size:12.5% 16.6%} 50%{opacity:.9;background-size:6% 8%} 70%{opacity:.6;background-size:3% 4%} 85%{opacity:.3;background-size:1.5% 2%} }
.mfx.fx-spotlight .mfx-fx { background:radial-gradient(circle 28% at var(--sx,20%) 50%,transparent 0 60%,rgba(0,0,0,.88) 100%); animation:mfx-fx-spotlight 1200ms ease-in-out both; }
@keyframes mfx-fx-spotlight { 0%{opacity:0;background-position:-40% 0} 15%{opacity:1} 50%{background-position:40% 0} 85%{opacity:1;background-position:0 0} 100%{opacity:0} }
.mfx.fx-heartbeat .mfx-fx { background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(255,0,40,.75) 100%); animation:mfx-fx-heartbeat 1000ms ease-out both; }
.mfx.fx-heartbeat .mfx-media,.mfx.fx-heartbeat video { animation:mfx-heartbeat-media 1000ms ease-out both; }
@keyframes mfx-fx-heartbeat { 0%,100%{opacity:0} 10%,34%{opacity:1} 22%,50%{opacity:.25} 60%{opacity:0} }
@keyframes mfx-heartbeat-media { 0%,100%{transform:scale(1)} 10%{transform:scale(1.07)} 22%{transform:scale(1.01)} 34%{transform:scale(1.1)} 50%{transform:scale(1)} }
.mfx.fx-sparkle .mfx-fx { background:radial-gradient(circle,#fff 0 .2cqmin,transparent .4cqmin) 0 0/7.25cqmin 8.9cqmin,radial-gradient(circle,rgba(255,236,170,.95) 0 .25cqmin,transparent .5cqmin) 2.6cqmin 4.1cqmin/10.4cqmin 8.4cqmin,radial-gradient(circle,rgba(190,235,255,.95) 0 .12cqmin,transparent .4cqmin) 5cqmin 1.5cqmin/5.9cqmin 6.6cqmin; mix-blend-mode:screen; filter:drop-shadow(0 0 .5cqmin #fff); animation:mfx-fx-sparkle 1300ms linear both; }
@keyframes mfx-fx-sparkle { 0%{opacity:0;transform:translateY(8%)} 15%{opacity:1} 50%{opacity:.55} 70%{opacity:1} 100%{opacity:0;transform:translateY(-10%)} }
.mfx.fx-bokeh { container-type:size; }
.mfx.fx-bokeh .mfx-media,.mfx.fx-bokeh video { animation:mfx-bokeh-media 1200ms ease-in-out both; }
.mfx.fx-bokeh .mfx-fx { background:radial-gradient(circle at 78% 22%,rgba(255,255,255,.85),rgba(255,255,255,0) 30%),radial-gradient(circle 9cqw at 10% 40%,rgba(255,240,120,.85),rgba(255,240,120,0)),radial-gradient(circle 8cqw at 70% 40%,rgba(255,255,255,.9),rgba(255,255,255,0)),radial-gradient(circle 7cqw at 36% 82%,rgba(255,255,255,.85),rgba(255,255,255,0)),radial-gradient(circle 6cqw at 86% 70%,rgba(255,255,255,.8),rgba(255,255,255,0)),radial-gradient(circle 7cqw at 28% 28%,rgba(255,235,120,.6),rgba(255,235,120,0)),linear-gradient(135deg,rgba(255,150,10,.7),rgba(255,205,90,.4) 55%,rgba(255,120,40,.65)); mix-blend-mode:screen; animation:mfx-fx-bokeh 1200ms ease-in-out both; }
.mfx.fx-bokeh .mfx-fx::before { background:radial-gradient(circle at 12% 12%,#fff 0 3.6cqw,transparent calc(3.6cqw + .5px)),radial-gradient(circle at 43% 11%,#fff176 0 2.2cqw,transparent calc(2.2cqw + .5px)),radial-gradient(circle at 17% 22%,#fff176 0 2.6cqw,transparent calc(2.6cqw + .5px)),radial-gradient(circle at 35% 29%,#fff 0 5.6cqw,transparent calc(5.6cqw + .5px)),radial-gradient(circle at 63% 28%,#fff 0 3.5cqw,transparent calc(3.5cqw + .5px)),radial-gradient(circle at 84% 11%,#fff 0 2.2cqw,transparent calc(2.2cqw + .5px)),radial-gradient(circle at 88%  21%,#fff 0 3cqw,transparent calc(3cqw + .5px)),radial-gradient(circle at 24% 44%,#fff176 0 2.3cqw,transparent calc(2.3cqw + .5px)),radial-gradient(circle at 56% 39%,#fff 0 4.2cqw,transparent calc(4.2cqw + .5px)),radial-gradient(circle at 9% 63%,#fff 0 3.4cqw,transparent calc(3.4cqw + .5px)),radial-gradient(circle at 59% 70%,#fff 0 4.3cqw,transparent calc(4.3cqw + .5px)),radial-gradient(circle at 29% 71%,#fff 0 2.5cqw,transparent calc(2.5cqw + .5px)),radial-gradient(circle at 94% 76%,#fff176 0 4.4cqw,transparent calc(4.4cqw + .5px)),radial-gradient(circle at 25% 80%,#fff 0 2.1cqw,transparent calc(2.1cqw + .5px)),radial-gradient(circle at 83% 88%,#fff 0 2.4cqw,transparent calc(2.4cqw + .5px)),radial-gradient(circle at 11% 82%,#fff176 0 3.4cqw,transparent calc(3.4cqw + .5px)); animation:mfx-bokeh-twinkle 1200ms ease-in-out both; }
.mfx.fx-bokeh .mfx-fx::after { background:radial-gradient(ellipse .25cqw 2cqw at 56% 10%,#fff,transparent),radial-gradient(ellipse 2cqw .25cqw at 56% 10%,#fff,transparent),radial-gradient(ellipse .25cqw 2.2cqw at 50% 26%,#fff,transparent),radial-gradient(ellipse 2.2cqw .25cqw at 50% 26%,#fff,transparent),radial-gradient(ellipse .25cqw 1.8cqw at 95% 34%,#fff,transparent),radial-gradient(ellipse 1.8cqw .25cqw at 95% 34%,#fff,transparent),radial-gradient(ellipse .25cqw 1.6cqw at 3% 52%,#fff,transparent),radial-gradient(ellipse 1.6cqw .25cqw at 3% 52%,#fff,transparent),radial-gradient(ellipse .25cqw 1.6cqw at 96% 59%,#fff,transparent),radial-gradient(ellipse 1.6cqw .25cqw at 96% 59%,#fff,transparent),radial-gradient(ellipse .25cqw 1.6cqw at 47% 80%,#fff,transparent),radial-gradient(ellipse 1.6cqw .25cqw at 47% 80%,#fff,transparent),radial-gradient(circle at 53% 14%,#fff 0 .35cqw,transparent calc(.35cqw + .5px)),radial-gradient(circle at 39% 39%,#fff 0 .35cqw,transparent calc(.35cqw + .5px)),radial-gradient(circle at 63% 40%,#fff 0 .3cqw,transparent calc(.3cqw + .5px)); animation:mfx-bokeh-twinkle 700ms ease-in-out infinite alternate; }
@keyframes mfx-bokeh-media { 0%,100%{filter:brightness(1) saturate(1) contrast(1)} 35%,60%{filter:brightness(1.4) saturate(1.25) contrast(.92)} }
@keyframes mfx-fx-bokeh { 0%{opacity:0} 30%,65%{opacity:1} 100%{opacity:0} }
@keyframes mfx-bokeh-twinkle { 0%{opacity:.55;transform:scale(.99)} 100%{opacity:1;transform:scale(1.02)} }
.mfx.fx-oldfilm .mfx-fx { background:repeating-linear-gradient(90deg,transparent 0 4.6cqmin,rgba(255,255,255,.55) 4.75cqmin,transparent 4.9cqmin 11.4cqmin),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(30,15,0,.7) 100%),rgba(120,80,30,.35); mix-blend-mode:multiply; animation:mfx-fx-oldfilm 1200ms steps(8,end) both; }
.mfx.fx-oldfilm .mfx-media,.mfx.fx-oldfilm video { animation:mfx-oldfilm-media 1200ms steps(8,end) both; }
@keyframes mfx-fx-oldfilm { 0%,100%{opacity:0;background-position:0 0,0 0,0 0} 12%,88%{opacity:1} 50%{background-position:2.1cqmin 0,0 0,0 0} 75%{background-position:-2.9cqmin 0,0 0,0 0} }
@keyframes mfx-oldfilm-media { 0%,100%{filter:sepia(0) contrast(1) brightness(1)} 12%,88%{filter:sepia(.85) contrast(1.25) brightness(.9)} 30%{filter:sepia(.85) contrast(1.4) brightness(1.15)} 60%{filter:sepia(.85) contrast(1.1) brightness(.8)} }
.mfx.fx-sunburst .mfx-media,.mfx.fx-sunburst video { animation:mfx-sunburst-media 1200ms ease-in-out both; }
.mfx.fx-sunburst .mfx-fx { inset:-45%; background:radial-gradient(circle,#fff 0 7%,rgba(255,244,170,.95) 16%,rgba(255,160,50,.5) 38%,transparent 68%),repeating-conic-gradient(rgba(255,150,40,.75) 0 3deg,rgba(255,224,120,.6) 3deg 6deg,transparent 6deg 10deg),radial-gradient(circle,rgba(255,230,140,.9) 0 .2cqmin,transparent .4cqmin) 0 0/5.75cqmin 6.6cqmin; mix-blend-mode:screen; animation:mfx-fx-sunburst 1200ms cubic-bezier(.12,.7,.2,1) both; }
@keyframes mfx-sunburst-media { 0%,100%{filter:brightness(1) saturate(1) sepia(0)} 30%,55%{filter:brightness(1.35) saturate(1.4) sepia(.35)} }
@keyframes mfx-fx-sunburst { 0%{opacity:0;transform:scale(.2) rotate(-10deg)} 25%,50%{opacity:1} 100%{opacity:0;transform:scale(1.35) rotate(14deg)} }
/* Mirror flip */
.mfx.fx-mirror .mfx-media,.mfx.fx-mirror video { animation:mfx-mirror-media 900ms steps(1,end) both; }
.mfx.fx-mirror .mfx-fx { background:linear-gradient(90deg,transparent calc(50% - .3cqmin),rgba(255,255,255,.9) 50%,transparent calc(50% + .3cqmin)); mix-blend-mode:screen; animation:mfx-fx-mirror 900ms ease-out both; }
@keyframes mfx-mirror-media { 0%,100%{transform:scale(1,1)} 20%{transform:scale(-1,1)} 45%{transform:scale(-1,-1)} 70%{transform:scale(1,-1)} 85%{transform:scale(-1,1)} }
@keyframes mfx-fx-mirror { 0%,100%{opacity:0} 15%,85%{opacity:.8} }
/* Freeze frame */
.mfx.fx-freeze .mfx-media,.mfx.fx-freeze video { animation:mfx-freeze-media 900ms steps(1,end) both; }
.mfx.fx-freeze .mfx-fx { box-shadow:inset 0 0 0 2.4cqmin #fff,inset 0 0 6cqmin rgba(255,255,255,.7); background:rgba(255,255,255,.08); animation:mfx-fx-freeze 900ms ease-out both; }
@keyframes mfx-freeze-media { 0%,100%{filter:none} 8%{filter:brightness(2.2) contrast(.8)} 16%{filter:grayscale(.6) contrast(1.2)} 80%{filter:grayscale(.6) contrast(1.2)} 90%{filter:brightness(1.5)} }
@keyframes mfx-fx-freeze { 0%,100%{opacity:0} 8%,85%{opacity:1} }
/* Letterbox */
.mfx.fx-letterbox .mfx-fx { opacity:1; }
.mfx.fx-letterbox .mfx-fx::before,.mfx.fx-letterbox .mfx-fx::after { inset:auto 0; height:14cqh; background:#000; animation:mfx-fx-letterbox-top 1100ms cubic-bezier(.2,.8,.2,1) both; }
.mfx.fx-letterbox .mfx-fx::before { top:0; bottom:auto; }
.mfx.fx-letterbox .mfx-fx::after { top:auto; bottom:0; animation-name:mfx-fx-letterbox-bottom; }
@keyframes mfx-fx-letterbox-top { 0%,100%{transform:translateY(-100%)} 25%,75%{transform:translateY(0)} }
@keyframes mfx-fx-letterbox-bottom { 0%,100%{transform:translateY(100%)} 25%,75%{transform:translateY(0)} }
/* Ripple */
.mfx.fx-ripple .mfx-fx { opacity:1; }
.mfx.fx-ripple .mfx-fx::before,.mfx.fx-ripple .mfx-fx::after { inset:50% auto auto 50%; width:30%; aspect-ratio:1; border-radius:50%; border:1.6cqmin solid rgba(255,255,255,.55); background:radial-gradient(circle,transparent 62%,rgba(140,210,255,.22) 80%,transparent 100%); box-shadow:0 0 2.5cqmin rgba(160,220,255,.6),inset 0 0 2.5cqmin rgba(160,220,255,.5); filter:blur(.25cqmin); transform:translate(-50%,-50%) scale(.1); animation:mfx-fx-ripple 1500ms cubic-bezier(.2,.6,.3,1) both; }
.mfx.fx-ripple .mfx-fx::after { animation-delay:260ms; border-width:1cqmin; border-color:rgba(255,255,255,.4); }
.mfx.fx-ripple .mfx-media,.mfx.fx-ripple video { animation:mfx-ripple-media 1300ms ease-in-out both; }
@keyframes mfx-fx-ripple { 0%{opacity:0;transform:translate(-50%,-50%) scale(.1)} 15%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) scale(5)} }
@keyframes mfx-ripple-media { 0%,100%{transform:scale(1)} 20%{transform:scale(1.03)} 45%{transform:scale(.985)} 70%{transform:scale(1.015)} }
/* Tilt haze */
.mfx.fx-tilt .mfx-media,.mfx.fx-tilt video { animation:mfx-tilt-media 1200ms ease-in-out both; }
.mfx.fx-tilt .mfx-fx { background:linear-gradient(180deg,rgba(235,240,255,.85),rgba(235,240,255,.35) 22%,transparent 40% 60%,rgba(235,240,255,.35) 78%,rgba(235,240,255,.85)); animation:mfx-fx-tilt 1200ms ease-in-out both; }
@keyframes mfx-tilt-media { 0%,100%{filter:saturate(1) contrast(1)} 30%,70%{filter:saturate(1.45) contrast(1.15)} }
@keyframes mfx-fx-tilt { 0%,100%{opacity:0;transform:scaleY(1.4)} 30%,70%{opacity:1;transform:scaleY(1)} }
/* Lớp có conic/radial phải là hình vuông căn giữa, nếu không tia và vòng bị méo theo tỉ lệ khung */
.mfx.fx-prism .mfx-fx,.mfx.fx-star .mfx-fx,.mfx.fx-comic .mfx-fx,.mfx.fx-vortex .mfx-fx,.mfx.fx-holo .mfx-fx,.mfx.fx-sunburst .mfx-fx,.mfx.fx-fireball .mfx-fx,.mfx.fx-burn-reveal .mfx-fx { inset:auto; left:50%; top:50%; translate:-50% -50%; width:var(--sq,200cqmax); height:var(--sq,200cqmax); }
.mfx.fx-vortex .mfx-fx,.mfx.fx-holo .mfx-fx,.mfx.fx-fireball .mfx-fx { --sq:150cqmax; }
.mfx.fx-burn-reveal .mfx-fx { --sq:110cqmax; }
/* Viewfinder REC */
.mfx.fx-rec .mfx-fx { background:linear-gradient(#fff,#fff) 4cqmin 4cqmin/9cqmin .45cqmin no-repeat,linear-gradient(#fff,#fff) 4cqmin 4cqmin/.45cqmin 9cqmin no-repeat,linear-gradient(#fff,#fff) calc(100% - 4cqmin) 4cqmin/9cqmin .45cqmin no-repeat,linear-gradient(#fff,#fff) calc(100% - 4cqmin) 4cqmin/.45cqmin 9cqmin no-repeat,linear-gradient(#fff,#fff) 4cqmin calc(100% - 4cqmin)/9cqmin .45cqmin no-repeat,linear-gradient(#fff,#fff) 4cqmin calc(100% - 4cqmin)/.45cqmin 9cqmin no-repeat,linear-gradient(#fff,#fff) calc(100% - 4cqmin) calc(100% - 4cqmin)/9cqmin .45cqmin no-repeat,linear-gradient(#fff,#fff) calc(100% - 4cqmin) calc(100% - 4cqmin)/.45cqmin 9cqmin no-repeat,linear-gradient(#fff,#fff) 50% 50%/4cqmin .3cqmin no-repeat,linear-gradient(#fff,#fff) 50% 50%/.3cqmin 4cqmin no-repeat,radial-gradient(circle,transparent 55%,rgba(0,0,0,.35)); animation:mfx-fx-rec 1400ms steps(1,end) both; }
.mfx.fx-rec .mfx-fx::before { inset:7cqmin auto auto 7cqmin; width:2.6cqmin; height:2.6cqmin; border-radius:50%; background:#ff2a2a; box-shadow:0 0 1.5cqmin #f00; animation:mfx-rec-dot 700ms steps(1,end) 2 both; }
@keyframes mfx-fx-rec { 0%,100%{opacity:0} 5%,92%{opacity:1} }
@keyframes mfx-rec-dot { 0%{opacity:1} 50%{opacity:0} }
/* Neon frame */
.mfx.fx-neon .mfx-media,.mfx.fx-neon video { animation:mfx-neon-media 1300ms ease-in-out both; }
.mfx.fx-neon .mfx-fx { box-shadow:inset 0 0 0 .7cqmin #fff,inset 0 0 1.6cqmin .9cqmin #ff2ad4,inset 0 0 5cqmin 2cqmin #29d8ff; mix-blend-mode:screen; animation:mfx-fx-neon 1300ms ease-in-out both; }
@keyframes mfx-neon-media { 0%,100%{filter:none} 25%,75%{filter:contrast(1.15) saturate(1.3)} }
@keyframes mfx-fx-neon { 0%{opacity:0;filter:hue-rotate(0)} 15%{opacity:1} 30%{opacity:.5} 45%{opacity:1} 100%{opacity:0;filter:hue-rotate(180deg)} }
/* Halftone pop */
.mfx.fx-halftone .mfx-media,.mfx.fx-halftone video { animation:mfx-halftone-media 1200ms ease-in-out both; }
.mfx.fx-halftone .mfx-fx { background:radial-gradient(circle,rgba(255,40,120,.75) 0 30%,transparent 34%) 0 0/4cqmin 4cqmin,radial-gradient(circle,rgba(30,200,255,.7) 0 30%,transparent 34%) 2cqmin 2cqmin/4cqmin 4cqmin; mix-blend-mode:hard-light; animation:mfx-fx-halftone 1200ms ease-in-out both; }
@keyframes mfx-halftone-media { 0%,100%{filter:none} 25%,75%{filter:contrast(1.35) saturate(1.7)} }
@keyframes mfx-fx-halftone { 0%,100%{opacity:0} 20%,75%{opacity:1} 50%{opacity:.8} }
/* Underwater */
.mfx.fx-underwater .mfx-media,.mfx.fx-underwater video { animation:mfx-underwater-media 1600ms ease-in-out both; }
.mfx.fx-underwater .mfx-fx { inset:-20%; background:radial-gradient(circle,rgba(150,235,255,.5) 0 18%,transparent 42%) 0 0/32cqmin 26cqmin,radial-gradient(circle,rgba(110,210,255,.4) 0 16%,transparent 40%) 14cqmin 11cqmin/26cqmin 22cqmin,linear-gradient(180deg,rgba(0,150,200,.35),rgba(0,60,120,.45)); mix-blend-mode:soft-light; animation:mfx-fx-underwater 1600ms ease-in-out both; }
@keyframes mfx-underwater-media { 0%,100%{filter:none} 20%,80%{filter:hue-rotate(-18deg) saturate(1.2) brightness(.92)} }
@keyframes mfx-fx-underwater { 0%{opacity:0;background-position:0 0,14cqmin 11cqmin,0 0} 20%,80%{opacity:1} 100%{opacity:0;background-position:20cqmin 10cqmin,-6cqmin 24cqmin,0 0} }
/* Color swoosh */
.mfx.fx-swoosh .mfx-fx { background:linear-gradient(100deg,transparent 0 20%,#ff2e63 20% 40%,#ffd166 40% 52%,#06d6a0 52% 64%,#118ab2 64% 80%,transparent 80%); animation:mfx-fx-swoosh 1000ms cubic-bezier(.6,0,.3,1) both; }
@keyframes mfx-fx-swoosh { 0%{opacity:1;transform:translateX(-110%)} 100%{opacity:1;transform:translateX(110%)} }
/* Spin / swing: xoay cả clip (host) */
.mfx.spin { animation:mfx-spin var(--duration) cubic-bezier(.6,0,.3,1) both; }
@keyframes mfx-spin { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(.72)} 100%{transform:rotate(360deg) scale(1)} }
.mfx.spin-in { animation:mfx-spin-in var(--duration) ease-in-out both; }
@keyframes mfx-spin-in { 0%{transform:rotate(-540deg) scale(.05);animation-timing-function:cubic-bezier(.25,.6,.35,1)} 70%{transform:rotate(10deg) scale(1.07)} 86%{transform:rotate(-3deg) scale(.98)} 100%{transform:rotate(0) scale(1)} }
.mfx.swing { animation:mfx-swing var(--duration) ease-in-out both; }
@keyframes mfx-swing { 0%,100%{transform:rotate(0)} 12%{transform:rotate(12deg)} 30%{transform:rotate(-10deg)} 48%{transform:rotate(7deg)} 64%{transform:rotate(-4deg)} 80%{transform:rotate(2deg)} }
/* Wave: sóng dùng transform + dải sáng chạy ngang */
.mfx.wave-sway { animation:mfx-wave-sway var(--duration) ease-in-out both; }
@keyframes mfx-wave-sway { 0%,100%{transform:translateY(0) rotate(0)} 12%{transform:translateY(-4%) rotate(1.6deg)} 25%{transform:translateY(0) rotate(0)} 37%{transform:translateY(4%) rotate(-1.6deg)} 50%{transform:translateY(0) rotate(0)} 62%{transform:translateY(-4%) rotate(1.6deg)} 75%{transform:translateY(0) rotate(0)} 87%{transform:translateY(3%) rotate(-1.2deg)} }
.mfx.wave-skew { animation:mfx-wave-skew var(--duration) ease-in-out both; }
@keyframes mfx-wave-skew { 0%,100%{transform:skew(0,0) scale(1)} 14%{transform:skew(6deg,2deg) scale(1.06)} 28%{transform:skew(0,0) scale(1.02)} 42%{transform:skew(-6deg,-2deg) scale(1.06)} 56%{transform:skew(0,0) scale(1.02)} 70%{transform:skew(4deg,1.5deg) scale(1.04)} 84%{transform:skew(-2deg,-1deg) scale(1.01)} }
.mfx.fx-wave-water .mfx-media,.mfx.fx-wave-water video { animation:mfx-wave-water-media 1600ms ease-in-out both; }
.mfx.fx-wave-water .mfx-fx { background:linear-gradient(0deg,transparent,rgba(190,235,255,.5) 50%,transparent) 0 0/100% 8cqmin,linear-gradient(0deg,transparent,rgba(255,255,255,.35) 50%,transparent) 0 0/100% 13cqmin; mix-blend-mode:soft-light; animation:mfx-fx-wave-water 1600ms linear both; }
@keyframes mfx-wave-water-media { 0%,100%{transform:skewX(0) scale(1);filter:none} 20%{transform:skewX(1.8deg) scale(1.03);filter:hue-rotate(-12deg) saturate(1.2)} 40%{transform:skewX(-1.8deg) scale(1.03)} 60%{transform:skewX(1.8deg) scale(1.03);filter:hue-rotate(-12deg) saturate(1.2)} 80%{transform:skewX(-1.2deg) scale(1.02)} }
@keyframes mfx-fx-wave-water { 0%{opacity:0;background-position:0 0,0 0} 15%,85%{opacity:1} 100%{opacity:0;background-position:0 -32cqmin,0 39cqmin} }
/* Nhóm gây nhiễu: hạt nhiễu là nhiều lớp chấm chu kỳ lệch nhau, giật bằng steps(1) */
.mfx.fx-static .mfx-fx,.mfx.fx-signal-loss .mfx-fx { inset:-4%; background:radial-gradient(circle,#fff 0 .22cqmin,transparent .3cqmin) 0 0/3.7cqmin 4.3cqmin,radial-gradient(circle,#000 0 .25cqmin,transparent .35cqmin) 1.1cqmin 2cqmin/2.9cqmin 3.3cqmin,radial-gradient(circle,rgba(255,255,255,.8) 0 .15cqmin,transparent .25cqmin) 2.3cqmin .6cqmin/2.3cqmin 2.7cqmin,radial-gradient(circle,rgba(0,0,0,.8) 0 .2cqmin,transparent .3cqmin) .5cqmin 1.4cqmin/1.9cqmin 2.1cqmin,radial-gradient(circle,rgba(255,255,255,.7) 0 .12cqmin,transparent .22cqmin) 1.7cqmin 1cqmin/1.3cqmin 1.6cqmin; }
.mfx.fx-static .mfx-media,.mfx.fx-static video { animation:mfx-static-media 900ms steps(1,end) both; }
.mfx.fx-static .mfx-fx { animation:mfx-fx-static 900ms steps(1,end) both; }
@keyframes mfx-static-media { 0%,100%{filter:none} 8%,40%,72%{filter:grayscale(.7) contrast(1.5) brightness(1.15)} 24%,56%,88%{filter:grayscale(.4) contrast(1.2) brightness(.85)} }
@keyframes mfx-fx-static { 0%,100%{opacity:0} 8%{opacity:.9;transform:translate(-1.7cqmin,.9cqmin)} 24%{opacity:.7;transform:translate(1.3cqmin,-1.5cqmin)} 40%{opacity:.95;transform:translate(-.6cqmin,1.9cqmin)} 56%{opacity:.75;transform:translate(1.9cqmin,.4cqmin)} 72%{opacity:.9;transform:translate(-1.4cqmin,-1cqmin)} 88%{opacity:.6;transform:translate(.8cqmin,1.2cqmin)} }
.mfx.fx-interference .mfx-media,.mfx.fx-interference video { animation:mfx-interference-media 1000ms steps(1,end) both; }
.mfx.fx-interference .mfx-fx { background:linear-gradient(0deg,transparent 38%,rgba(255,255,255,.35) 46%,rgba(0,0,0,.5) 50%,rgba(255,255,255,.25) 54%,transparent 62%) 0 0/100% 45%,repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 .3cqmin,transparent .35cqmin .8cqmin); animation:mfx-fx-interference 1000ms linear both; }
.mfx.fx-interference .mfx-fx::before { background:linear-gradient(90deg,rgba(255,0,60,.22),transparent 25% 75%,rgba(0,220,255,.25)); mix-blend-mode:screen; }
@keyframes mfx-interference-media { 0%,100%{transform:translateX(0) skewX(0)} 10%{transform:translateX(-1.6cqmin) skewX(-1.5deg)} 25%{transform:translateX(1.2cqmin)} 40%{transform:translateX(-.8cqmin) skewX(1deg)} 55%{transform:translateX(2cqmin) skewX(-2deg)} 70%{transform:translateX(-1cqmin)} 85%{transform:translateX(.6cqmin)} }
@keyframes mfx-fx-interference { 0%{opacity:0;background-position:0 -45%,0 0} 10%,90%{opacity:1} 100%{opacity:0;background-position:0 145%,0 0} }
.mfx.fx-blocks .mfx-fx { background:linear-gradient(#ff2bd6,#ff2bd6) 12% 18%/14cqmin 3cqmin no-repeat,linear-gradient(#00f0ff,#00f0ff) 58% 31%/22cqmin 2.2cqmin no-repeat,linear-gradient(#000,#000) 30% 47%/18cqmin 4cqmin no-repeat,linear-gradient(#3dff6e,#3dff6e) 70% 62%/12cqmin 2.6cqmin no-repeat,linear-gradient(#fff,#fff) 8% 76%/20cqmin 1.8cqmin no-repeat,linear-gradient(#ff2bd6,#ff2bd6) 64% 86%/16cqmin 3.2cqmin no-repeat; mix-blend-mode:screen; animation:mfx-fx-blocks 900ms steps(1,end) both; }
.mfx.fx-blocks .mfx-fx::before { background:linear-gradient(#00f0ff,#00f0ff) 40% 8%/10cqmin 2.4cqmin no-repeat,linear-gradient(#ffe600,#ffe600) 4% 40%/16cqmin 2cqmin no-repeat,linear-gradient(#ff2bd6,#ff2bd6) 78% 52%/14cqmin 3.4cqmin no-repeat,linear-gradient(#000,#000) 46% 70%/24cqmin 3cqmin no-repeat,linear-gradient(#3dff6e,#3dff6e) 20% 92%/12cqmin 2cqmin no-repeat; animation:mfx-fx-blocks 900ms steps(1,end) 150ms both; }
@keyframes mfx-fx-blocks { 0%,100%{opacity:0;transform:translateX(0)} 10%{opacity:1;transform:translateX(-4%)} 25%{opacity:0} 35%{opacity:1;transform:translateX(5%)} 50%{opacity:.8;transform:translateX(-2%)} 62%{opacity:0} 75%{opacity:1;transform:translateX(3%) translateY(2%)} 88%{opacity:.6;transform:translateX(-5%)} }
.mfx.fx-signal-loss .mfx-media,.mfx.fx-signal-loss video { animation:mfx-signal-media 1100ms steps(1,end) both; }
.mfx.fx-signal-loss .mfx-fx { animation:mfx-fx-signal 1100ms steps(1,end) both; }
.mfx.fx-signal-loss .mfx-fx::before { background:linear-gradient(0deg,transparent 40%,rgba(255,255,255,.55) 47%,rgba(0,0,0,.6) 52%,transparent 60%) 0 0/100% 40%; animation:mfx-signal-bar 1100ms linear both; }
@keyframes mfx-signal-media { 0%,100%{filter:none;transform:translateX(0)} 10%,30%,60%{filter:grayscale(1) contrast(1.7) brightness(1.3);transform:translateX(-2cqmin)} 20%,45%,75%{filter:grayscale(1) contrast(1.4) brightness(.6);transform:translateX(1.5cqmin)} 88%{filter:grayscale(.5) contrast(1.2)} }
@keyframes mfx-fx-signal { 0%,100%{opacity:0} 10%{opacity:.95;transform:translate(-1.5cqmin,1cqmin)} 20%{opacity:.8;transform:translate(1.4cqmin,-1.3cqmin)} 30%{opacity:1;transform:translate(-.7cqmin,1.6cqmin)} 45%{opacity:.9;transform:translate(1.7cqmin,.5cqmin)} 60%{opacity:1;transform:translate(-1.2cqmin,-1cqmin)} 75%{opacity:.7;transform:translate(.6cqmin,1.1cqmin)} 88%{opacity:.4} }
@keyframes mfx-signal-bar { 0%{background-position:0 -45%} 100%{background-position:0 145%} }
/* Floating emoji: hạt do JS vẽ, cỡ chữ theo cqw của lớp */
.mfx-emoji { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; container-type:size; }
.mfx-emoji > span { position:absolute; left:0; top:0; line-height:1; white-space:nowrap; opacity:0; will-change:transform,opacity; }
/* Hide / reveal transitions */
.mfx[class*="fx-"] .mfx-fx,.mfx[class*="fx-"] .mfx-fx::before,.mfx[class*="fx-"] .mfx-fx::after,.mfx[class*="fx-"] .mfx-media,.mfx[class*="fx-"] video { animation-duration:var(--duration)!important; }
.mfx-dark,.mfx-white { position:absolute; inset:0; z-index:7; pointer-events:none; opacity:0; }
.mfx-dark { background:#000; }
.mfx-white { z-index:8; background:radial-gradient(ellipse at 50% 50%,#fff 0 18%,rgba(255,255,255,.98) 42%,rgba(255,255,255,.72) 72%,rgba(255,255,255,.25)); mix-blend-mode:screen; }

/* Thumbnail tĩnh: dừng animation ở khung giữa hiệu ứng */
.mfx.is-still, .mfx.is-still *, .mfx.is-still *::before, .mfx.is-still *::after { animation-delay:-450ms !important; animation-play-state:paused !important; }