/* ============================================================
   HERO EFFECTS ENGINE — 100 efek via 1 layer .rz-hfx + variabel
   Dipakai storefront (hero) & admin (preview kartu efek).
   ============================================================ */
.rz-hfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.rz-hfx::before, .rz-hfx::after { content: ''; position: absolute; pointer-events: none; }
.rz-hfx::before {
    inset: -25%; background: var(--fxg, none); background-size: var(--fxgs, 200% 200%); background-position: 50% 50%;
    mix-blend-mode: var(--fxgb, screen); opacity: var(--fxgo, .9); filter: var(--fxgf, none); transform-origin: center;
    animation: var(--fxga, none) var(--fxgd, 16s) var(--fxgt, ease) infinite var(--fxgdir, normal);
}
.rz-hfx::after {
    inset: 0; background: var(--fxp, none); background-size: var(--fxps, auto); background-repeat: repeat;
    mix-blend-mode: var(--fxpb, screen); opacity: var(--fxpo, .8); transform-origin: center;
    animation: var(--fxpa, none) var(--fxpd, 12s) var(--fxpt, linear) infinite var(--fxpdir, normal);
}

@keyframes fxDrift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes fxSpin { to { transform: rotate(1turn); } }
@keyframes fxPulse { 0%,100% { opacity: .2; } 50% { opacity: .85; } }
@keyframes fxScale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes fxFall { from { background-position: 0 0; } to { background-position: 0 640px; } }
@keyframes fxFallSlant { from { background-position: 0 0; } to { background-position: 180px 640px; } }
@keyframes fxScrollY { from { background-position: 0 0; } to { background-position: 0 88px; } }
@keyframes fxScrollX { from { background-position: 0 100%; } to { background-position: 140px 100%; } }
@keyframes fxTwinkle { 0%,100% { opacity: .18; } 50% { opacity: .95; } }
@keyframes fxSweep { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes fxFlicker { 0%,100% { opacity: .5; } 47% { opacity: .55; } 50% { opacity: .18; } 53% { opacity: .6; } }
@keyframes fxJitter { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); } 50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,2px); } }
@keyframes fxRings { 0% { transform: scale(.25); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fxNoise { 0% { background-position: 0 0; } 100% { background-position: 7px -9px; } }
@keyframes fxBlink { 50% { opacity: 0; } }

/* ── Aurora ── */
[class*="heffect-aurora"] .rz-hfx::before { --fxga: fxDrift; --fxgd: 15s; --fxgo: .55; --fxgs: 220% 220%; }
.heffect-aurora1 .rz-hfx::before { --fxg: linear-gradient(120deg,#1e3a8a,#2563eb,#06b6d4,#1e3a8a); }
.heffect-aurora2 .rz-hfx::before { --fxg: linear-gradient(120deg,#7c2d12,#ea580c,#f59e0b,#7c2d12); }
.heffect-aurora3 .rz-hfx::before { --fxg: linear-gradient(120deg,#064e3b,#059669,#34d399,#064e3b); }
.heffect-aurora4 .rz-hfx::before { --fxg: linear-gradient(120deg,#4c1d95,#7c3aed,#c084fc,#4c1d95); }
.heffect-aurora5 .rz-hfx::before { --fxg: linear-gradient(120deg,#78350f,#d97706,#fcd34d,#78350f); }
.heffect-aurora6 .rz-hfx::before { --fxg: linear-gradient(120deg,#831843,#db2777,#fb7185,#831843); }

/* ── Mesh ── */
[class*="heffect-mesh"] .rz-hfx::before { --fxga: fxDrift; --fxgd: 18s; --fxgo: .6; --fxgs: 200% 200%; }
.heffect-mesh  .rz-hfx::before { --fxg: radial-gradient(40% 40% at 30% 30%,#6366f1,transparent),radial-gradient(40% 40% at 70% 60%,#ec4899,transparent); }
.heffect-mesh1 .rz-hfx::before { --fxg: radial-gradient(40% 40% at 25% 35%,#ec4899,transparent),radial-gradient(40% 40% at 75% 55%,#8b5cf6,transparent); }
.heffect-mesh2 .rz-hfx::before { --fxg: radial-gradient(40% 40% at 28% 32%,#0ea5e9,transparent),radial-gradient(40% 40% at 72% 60%,#14b8a6,transparent); }
.heffect-mesh3 .rz-hfx::before { --fxg: radial-gradient(40% 40% at 30% 30%,#ef4444,transparent),radial-gradient(40% 40% at 70% 60%,#f59e0b,transparent); }
.heffect-mesh4 .rz-hfx::before { --fxg: radial-gradient(40% 40% at 25% 35%,#a5b4fc,transparent),radial-gradient(40% 40% at 75% 55%,#fbcfe8,transparent); --fxgo: .7; }

/* ── Glow ── */
[class*="heffect-glow"] .rz-hfx::before { --fxga: fxPulse; --fxgd: 4s; --fxgb: soft-light; --fxgo: .8; --fxgs: 100% 100%; }
.heffect-glow1 .rz-hfx::before { --fxg: radial-gradient(circle at 50% 40%,rgba(255,255,255,.45),transparent 55%); }
.heffect-glow2 .rz-hfx::before { --fxg: radial-gradient(circle at 50% 45%,rgba(255,214,170,.5),transparent 55%); }
.heffect-glow3 .rz-hfx::before { --fxg: radial-gradient(circle at 50% 40%,rgba(147,197,253,.5),transparent 55%); }
.heffect-glow4 .rz-hfx::before { --fxg: radial-gradient(circle at 20% 25%,rgba(255,255,255,.45),transparent 50%); }
.heffect-glow5 .rz-hfx::before { --fxg: radial-gradient(circle at 25% 35%,rgba(255,255,255,.4),transparent 45%),radial-gradient(circle at 75% 60%,rgba(255,255,255,.35),transparent 45%); }
.heffect-glow6 .rz-hfx::before { --fxg: radial-gradient(circle at 50% 45%,rgba(244,114,182,.5),transparent 55%); }

/* ── Beam (sinar berputar) ── */
[class*="heffect-beam"] .rz-hfx::before { --fxga: fxSpin; --fxgd: 26s; --fxgt: linear; --fxgo: .5; --fxgs: 100% 100%; }
.heffect-beam1 .rz-hfx::before { --fxg: conic-gradient(from 0deg,rgba(255,255,255,.16),transparent 18deg,rgba(255,255,255,.12) 36deg,transparent 54deg,rgba(255,255,255,.14) 72deg,transparent 90deg); }
.heffect-beam2 .rz-hfx::before { --fxg: conic-gradient(from 0deg,rgba(252,211,77,.2),transparent 22deg,rgba(252,211,77,.14) 44deg,transparent 66deg); }
.heffect-beam3 .rz-hfx::before { --fxg: conic-gradient(from 0deg,rgba(147,197,253,.2),transparent 22deg,rgba(147,197,253,.14) 44deg,transparent 66deg); }
.heffect-beam4 .rz-hfx::before { --fxg: conic-gradient(from 0deg,rgba(244,114,182,.16),rgba(96,165,250,.16) 90deg,rgba(52,211,153,.16) 180deg,rgba(252,211,77,.16) 270deg,rgba(244,114,182,.16)); }
.heffect-beam5 .rz-hfx::before { --fxg: conic-gradient(from 0deg,rgba(255,255,255,.1),transparent 30deg); --fxgd: 40s; --fxgo: .35; }

/* ── Sweep (kilau menyapu) ── */
[class*="heffect-sweep"] .rz-hfx::before { --fxga: fxSweep; --fxgd: 4.5s; --fxgt: linear; --fxgo: .7; --fxgs: 250% 100%; --fxgb: screen; }
.heffect-sweep1 .rz-hfx::before { --fxg: linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%); }
.heffect-sweep2 .rz-hfx::before { --fxg: linear-gradient(100deg,transparent 35%,rgba(253,224,150,.35) 50%,transparent 65%); }
.heffect-sweep3 .rz-hfx::before { --fxg: linear-gradient(100deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%); --fxgd: 2.4s; }
.heffect-sweep4 .rz-hfx::before { --fxg: linear-gradient(70deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%); }
.heffect-sweep5 .rz-hfx::before { --fxg: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%); --fxgd: 7s; --fxgo: .5; }

/* ── Star (bintang berkelip) ── */
[class*="heffect-star"] .rz-hfx::after { --fxpa: fxTwinkle; --fxpd: 3s; --fxpb: screen; --fxpo: .85; }
.heffect-star1 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 1px,transparent 1.7px); --fxps: 48px 48px; }
.heffect-star2 .rz-hfx::after { --fxp: radial-gradient(circle,#fde68a 1px,transparent 1.7px); --fxps: 52px 52px; }
.heffect-star3 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 1px,transparent 1.6px); --fxps: 30px 30px; }
.heffect-star4 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 1.2px,transparent 2px); --fxps: 84px 84px; }
.heffect-star5 .rz-hfx::after { --fxp: radial-gradient(circle,#bfdbfe 1px,transparent 1.7px); --fxps: 50px 50px; }
.heffect-star6 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 1px,transparent 1.7px); --fxps: 46px 46px; --fxpd: 1.6s; }

/* ── Bokeh (lingkaran blur) ── */
[class*="heffect-bokeh"] .rz-hfx::before { --fxga: fxScale; --fxgd: 9s; --fxgdir: alternate; --fxgf: blur(2px); --fxgo: .5; --fxgs: 100% 100%; }
.heffect-bokeh1 .rz-hfx::before { --fxg: radial-gradient(circle at 20% 30%,rgba(255,255,255,.4),transparent 18%),radial-gradient(circle at 65% 55%,rgba(255,255,255,.3),transparent 16%),radial-gradient(circle at 82% 25%,rgba(255,255,255,.25),transparent 14%); }
.heffect-bokeh2 .rz-hfx::before { --fxg: radial-gradient(circle at 22% 32%,rgba(253,224,150,.45),transparent 18%),radial-gradient(circle at 68% 58%,rgba(252,211,77,.3),transparent 16%); }
.heffect-bokeh3 .rz-hfx::before { --fxg: radial-gradient(circle at 20% 30%,rgba(244,114,182,.4),transparent 17%),radial-gradient(circle at 60% 55%,rgba(96,165,250,.35),transparent 16%),radial-gradient(circle at 85% 30%,rgba(52,211,153,.3),transparent 14%); }
.heffect-bokeh4 .rz-hfx::before { --fxg: radial-gradient(circle at 25% 30%,rgba(147,197,253,.4),transparent 18%),radial-gradient(circle at 70% 60%,rgba(96,165,250,.3),transparent 16%); }
.heffect-bokeh5 .rz-hfx::before { --fxg: radial-gradient(circle at 22% 32%,rgba(251,113,133,.4),transparent 18%),radial-gradient(circle at 68% 55%,rgba(244,114,182,.3),transparent 16%); }

/* ── Dust (partikel halus) ── */
[class*="heffect-dust"] .rz-hfx::after { --fxpa: fxFall; --fxpd: 16s; --fxpt: linear; --fxpb: screen; --fxpo: .6; }
.heffect-dust1 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 2px); --fxps: 32px 32px; }
.heffect-dust2 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(253,224,150,.8) 1px,transparent 2px); --fxps: 34px 34px; }
.heffect-dust3 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 2px); --fxps: 22px 22px; }
.heffect-dust4 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(191,219,254,.8) 1px,transparent 2px); --fxps: 32px 32px; }
.heffect-dust5 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 2px); --fxps: 30px 30px; --fxpd: 26s; }

/* ── Snow ── */
[class*="heffect-snow"] .rz-hfx::after { --fxpa: fxFall; --fxpd: 9s; --fxpt: linear; --fxpb: screen; --fxpo: .85; }
.heffect-snow1 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 1.5px,transparent 2.6px); --fxps: 44px 44px; }
.heffect-snow2 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 1.4px,transparent 2.4px); --fxps: 30px 30px; --fxpd: 6s; }
.heffect-snow3 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 2.4px,transparent 3.6px); --fxps: 60px 60px; }
.heffect-snow4 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 1px,transparent 2px); --fxps: 54px 54px; --fxpo: .6; }

/* ── Rain ── */
[class*="heffect-rain"] .rz-hfx::after { --fxpa: fxFall; --fxpd: .9s; --fxpt: linear; --fxpb: screen; --fxpo: .5; }
.heffect-rain1 .rz-hfx::after { --fxp: linear-gradient(transparent 60%,rgba(255,255,255,.5) 60%); --fxps: 3px 20px; }
.heffect-rain2 .rz-hfx::after { --fxp: linear-gradient(transparent 50%,rgba(255,255,255,.6) 50%); --fxps: 2px 16px; --fxpd: .6s; }
.heffect-rain3 .rz-hfx::after { --fxp: linear-gradient(transparent 60%,rgba(255,255,255,.5) 60%); --fxps: 3px 22px; --fxpa: fxFallSlant; }

/* ── Confetti ── */
[class*="heffect-conf"] .rz-hfx::after { --fxpa: fxFall; --fxpd: 7s; --fxpt: linear; --fxpb: normal; --fxpo: .85; }
.heffect-conf1 .rz-hfx::after { --fxp: radial-gradient(circle,#f43f5e 2px,transparent 3px),radial-gradient(circle,#3b82f6 2px,transparent 3px),radial-gradient(circle,#f59e0b 2px,transparent 3px); --fxps: 60px 60px,84px 84px,108px 108px; }
.heffect-conf2 .rz-hfx::after { --fxp: radial-gradient(circle,#fda4af 2px,transparent 3px),radial-gradient(circle,#a5b4fc 2px,transparent 3px),radial-gradient(circle,#6ee7b7 2px,transparent 3px); --fxps: 64px 64px,88px 88px,112px 112px; }
.heffect-conf3 .rz-hfx::after { --fxp: radial-gradient(circle,#fcd34d 2px,transparent 3px),radial-gradient(circle,#fff 2px,transparent 3px); --fxps: 70px 70px,100px 100px; }

/* ── Wave (lengkung bawah menyapu) ── */
[class*="heffect-wave"] .rz-hfx::after { --fxpa: fxScrollX; --fxpd: 7s; --fxpt: linear; --fxpb: screen; --fxpo: .5; --fxps: 140px 100%; }
.heffect-wave1 .rz-hfx::after { --fxp: radial-gradient(120% 60% at 50% 130%,rgba(255,255,255,.22),transparent 60%); }
.heffect-wave2 .rz-hfx::after { --fxp: radial-gradient(120% 60% at 50% 130%,rgba(147,197,253,.3),transparent 60%); }
.heffect-wave3 .rz-hfx::after { --fxp: radial-gradient(120% 55% at 50% 132%,rgba(255,255,255,.2),transparent 58%),radial-gradient(120% 55% at 50% 140%,rgba(147,197,253,.2),transparent 58%); }
.heffect-wave4 .rz-hfx::after { --fxp: radial-gradient(120% 60% at 50% 130%,rgba(255,255,255,.2),transparent 60%); --fxpd: 14s; }
.heffect-wave5 .rz-hfx::after { --fxp: radial-gradient(120% 60% at 50% 130%,rgba(252,211,77,.28),transparent 60%); }

/* ── Grid cyber ── */
[class*="heffect-grid"] .rz-hfx::after { --fxpa: fxScrollY; --fxpd: 6s; --fxpt: linear; --fxpb: screen; --fxpo: .5; --fxps: 44px 44px; }
.heffect-grid1 .rz-hfx::after { --fxp: linear-gradient(rgba(56,189,248,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.18) 1px,transparent 1px); }
.heffect-grid2 .rz-hfx::after { --fxp: linear-gradient(rgba(232,121,249,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(232,121,249,.2) 1px,transparent 1px); }
.heffect-grid3 .rz-hfx::after { --fxp: linear-gradient(rgba(252,211,77,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(252,211,77,.18) 1px,transparent 1px); }
.heffect-grid4 .rz-hfx::after { --fxp: linear-gradient(rgba(56,189,248,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.18) 1px,transparent 1px); --fxps: 26px 26px; }
.heffect-grid5 .rz-hfx::after { --fxp: linear-gradient(rgba(148,163,184,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.2) 1px,transparent 1px); --fxpd: 14s; }

/* ── Scanline / CRT ── */
[class*="heffect-scan"] .rz-hfx::after { --fxpa: fxFlicker; --fxpd: .25s; --fxpt: steps(2); --fxpb: multiply; --fxpo: .5; --fxps: 100% 4px; }
.heffect-scan1 .rz-hfx::after { --fxp: repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.35) 2px 3px); }
.heffect-scan2 .rz-hfx::after { --fxp: repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.4) 3px 5px); --fxps: 100% 6px; }
.heffect-scan3 .rz-hfx::after { --fxp: repeating-linear-gradient(transparent 0 2px,rgba(0,255,120,.18) 2px 3px); --fxpb: screen; }

/* ── Static / noise ── */
[class*="heffect-static"] .rz-hfx::after { --fxpa: fxNoise; --fxpd: .3s; --fxpt: steps(3); --fxpb: screen; --fxpo: .25; --fxps: 3px 3px; }
.heffect-static1 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(255,255,255,.6) .5px,transparent 1px); }
.heffect-static2 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(255,255,255,.5) .5px,transparent 1px); --fxps: 2px 2px; --fxpo: .18; }
.heffect-static3 .rz-hfx::after { --fxp: radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.6px); --fxps: 4px 4px; --fxpo: .35; }

/* ── Glitch ── */
[class*="heffect-glitch"] .rz-hfx::before { --fxga: fxJitter; --fxgd: .45s; --fxgt: steps(2); --fxgb: screen; --fxgo: .5; --fxgs: 100% 100%; }
.heffect-glitch1 .rz-hfx::before { --fxg: linear-gradient(90deg,rgba(255,0,90,.18),transparent 40%,rgba(0,200,255,.18)); }
.heffect-glitch2 .rz-hfx::before { --fxg: linear-gradient(90deg,rgba(255,0,90,.22),transparent 45%,rgba(0,200,255,.22)); --fxgd: .25s; }
.heffect-glitch3 .rz-hfx::before { --fxg: linear-gradient(90deg,rgba(255,0,90,.12),transparent 45%,rgba(0,200,255,.12)); --fxgo: .3; }

/* ── Neon (glow tepi pulsing) ── */
[class*="heffect-neon"] .rz-hfx::before { --fxga: fxPulse; --fxgd: 2.4s; --fxgb: screen; --fxgo: .7; --fxgs: 100% 100%; }
.heffect-neon1 .rz-hfx::before { --fxg: radial-gradient(120% 90% at 50% 120%,rgba(236,72,153,.6),transparent 60%); }
.heffect-neon2 .rz-hfx::before { --fxg: radial-gradient(120% 90% at 50% 120%,rgba(34,211,238,.6),transparent 60%); }
.heffect-neon3 .rz-hfx::before { --fxg: radial-gradient(120% 90% at 50% 120%,rgba(167,139,250,.6),transparent 60%); }
.heffect-neon4 .rz-hfx::before { --fxg: radial-gradient(120% 90% at 50% 120%,rgba(74,222,128,.55),transparent 60%); }
.heffect-neon5 .rz-hfx::before { --fxg: radial-gradient(120% 90% at 50% 120%,rgba(252,211,77,.55),transparent 60%); }

/* ── Ripple (cincin melebar) ── */
[class*="heffect-ripple"] .rz-hfx::after { --fxpa: fxRings; --fxpd: 3.5s; --fxpt: ease-out; --fxpb: screen; --fxpo: .6; --fxps: 100% 100%; }
.heffect-ripple1 .rz-hfx::after { --fxp: radial-gradient(circle,transparent 36%,rgba(255,255,255,.3) 40%,transparent 44%); }
.heffect-ripple2 .rz-hfx::after { --fxp: radial-gradient(circle,transparent 36%,rgba(147,197,253,.4) 40%,transparent 44%); }
.heffect-ripple3 .rz-hfx::after { --fxp: radial-gradient(circle,transparent 36%,rgba(252,211,77,.4) 40%,transparent 44%); }
.heffect-ripple4 .rz-hfx::after { --fxp: radial-gradient(circle,transparent 36%,rgba(255,255,255,.3) 40%,transparent 44%); --fxpd: 2s; }

/* ── Firefly (kunang berkelip) ── */
[class*="heffect-fly"] .rz-hfx::after { --fxpa: fxTwinkle; --fxpd: 2.4s; --fxpb: screen; --fxpo: .8; --fxps: 72px 72px; }
.heffect-fly1 .rz-hfx::after { --fxp: radial-gradient(circle,#fde68a 1.6px,transparent 3px); }
.heffect-fly2 .rz-hfx::after { --fxp: radial-gradient(circle,#86efac 1.6px,transparent 3px); }
.heffect-fly3 .rz-hfx::after { --fxp: radial-gradient(circle,#93c5fd 1.6px,transparent 3px); }

/* ── Fog (kabut) ── */
[class*="heffect-fog"] .rz-hfx::before { --fxga: fxDrift; --fxgd: 24s; --fxgb: screen; --fxgo: .45; --fxgf: blur(8px); --fxgs: 200% 200%; }
.heffect-fog1 .rz-hfx::before { --fxg: radial-gradient(50% 40% at 30% 60%,rgba(255,255,255,.5),transparent),radial-gradient(45% 35% at 70% 40%,rgba(255,255,255,.4),transparent); }
.heffect-fog2 .rz-hfx::before { --fxg: radial-gradient(50% 40% at 30% 60%,rgba(191,219,254,.5),transparent),radial-gradient(45% 35% at 70% 40%,rgba(147,197,253,.4),transparent); }
.heffect-fog3 .rz-hfx::before { --fxg: radial-gradient(50% 40% at 30% 60%,rgba(216,180,254,.5),transparent),radial-gradient(45% 35% at 70% 40%,rgba(196,181,253,.4),transparent); }

/* ── Zoom / vignette bernafas ── */
[class*="heffect-zoom"] .rz-hfx::before { --fxga: fxScale; --fxgd: 10s; --fxgdir: alternate; --fxgb: multiply; --fxgo: .7; --fxgs: 140% 140%; }
.heffect-zoom1 .rz-hfx::before { --fxg: radial-gradient(circle,transparent 50%,rgba(0,0,0,.4)); }
.heffect-zoom2 .rz-hfx::before { --fxg: radial-gradient(circle,transparent 42%,rgba(0,0,0,.55)); }
.heffect-zoom3 .rz-hfx::before { --fxg: radial-gradient(circle,transparent 48%,rgba(40,18,0,.5)); }

/* ── Breath (overlay warna bernafas) ── */
[class*="heffect-breath"] .rz-hfx::before { --fxga: fxPulse; --fxgd: 5s; --fxgb: soft-light; --fxgo: .6; --fxgs: 100% 100%; }
.heffect-breath1 .rz-hfx::before { --fxg: linear-gradient(0deg,rgba(99,102,241,.6),rgba(236,72,153,.6)); }
.heffect-breath2 .rz-hfx::before { --fxg: linear-gradient(0deg,rgba(14,165,233,.6),rgba(34,211,238,.6)); }
.heffect-breath3 .rz-hfx::before { --fxg: linear-gradient(0deg,rgba(244,63,94,.6),rgba(249,115,22,.6)); }

/* ── Spark (kilau bintang besar) ── */
[class*="heffect-spark"] .rz-hfx::after { --fxpa: fxTwinkle; --fxpd: 1.8s; --fxpb: screen; --fxpo: .9; --fxps: 90px 90px; }
.heffect-spark1 .rz-hfx::after { --fxp: radial-gradient(circle,#fff 0,#fff 1px,transparent 2.4px); }
.heffect-spark2 .rz-hfx::after { --fxp: radial-gradient(circle,#fde68a 0,#fde68a 1px,transparent 2.4px); }
.heffect-spark3 .rz-hfx::after { --fxp: radial-gradient(circle,#bfdbfe 0,#bfdbfe 1px,transparent 2.4px); }

/* ── Legacy alias ── */
.heffect-particles .rz-hfx::after { --fxp: radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 2px); --fxps: 30px 30px; --fxpa: fxFall; --fxpd: 16s; --fxpt: linear; --fxpb: screen; --fxpo: .55; }
.heffect-floating .rz-hfx::before { --fxg: radial-gradient(circle at 25% 30%,rgba(255,255,255,.3),transparent 16%),radial-gradient(circle at 70% 55%,rgba(255,255,255,.25),transparent 16%); --fxga: fxScale; --fxgd: 10s; --fxgdir: alternate; --fxgf: blur(2px); --fxgo: .5; }

/* ============ PREVIEW (kartu efek di admin) ============ */
.hfx-prev { position: relative; display: block; width: 100%; height: 42px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg,#1e293b,#475569); }
.hfx-prev > i { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,.92); font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.hfx-prev.heffect-shine { background: linear-gradient(100deg,#334155 35%,#94a3b8 50%,#334155 65%); background-size: 250% 100%; animation: fxSweep 3s linear infinite; }
.hfx-prev.heffect-typewriter::after { content: ''; position: absolute; left: 12px; top: 50%; width: 2px; height: 15px; background: #fff; transform: translateY(-50%); animation: fxBlink 1s steps(1) infinite; z-index: 2; }
.hfx-prev.heffect-countdown::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%,rgba(255,90,90,.5),transparent 60%); animation: fxPulse 1.4s ease infinite; }

@media (prefers-reduced-motion: reduce) {
    .rz-hfx::before, .rz-hfx::after, .hfx-prev::after, .hfx-prev.heffect-shine { animation: none !important; }
}