.af-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; contain: paint; }
.af-fx:before, .af-fx:after { content: ''; position: absolute; pointer-events: none; }
.af-fx:before { inset: -20%; background: radial-gradient(38% 30% at 22% 28%, rgba(255, 0, 33, 0.42), transparent 70%), radial-gradient(34% 28% at 78% 62%, rgba(255, 40, 70, 0.34), transparent 72%), radial-gradient(30% 24% at 50% 100%, rgba(255, 0, 33, 0.38), transparent 70%); mix-blend-mode: screen; filter: blur(14px); animation: af-fx-drift 13s ease-in-out infinite alternate; will-change: transform, opacity; }
.af-fx:after { top: -30%; bottom: -30%; left: -60%; width: 46%; background: linear-gradient(100deg, transparent 0%, rgba(255, 60, 90, 0.0) 20%, rgba(255, 60, 90, 0.34) 50%, rgba(255, 60, 90, 0.0) 80%, transparent 100%); mix-blend-mode: screen; transform: skewX(-18deg); animation: af-fx-sweep 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.af-fx i { position: absolute; bottom: -24px; left: var(--x, 50%); width: calc(var(--s, 6px) * 1.5); height: calc(var(--s, 6px) * 1.5); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8d9b, #ff0021 60%, rgba(255, 0, 33, 0) 72%); box-shadow: 0 0 20px 6px rgba(255, 0, 33, 0.75); opacity: 0; animation: af-fx-rise var(--d, 9s) linear var(--t, 0s) infinite; will-change: transform, opacity; }
.af-fx i:nth-child(3n) { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; font-style: normal; font-size: calc(var(--s, 14px) * 1.5); line-height: 1; color: #ff2441; text-shadow: 0 0 12px rgba(255, 0, 33, 0.9); }
.af-fx i:nth-child(3n):before { content: '\2665'; }
.af-fx i:nth-child(1) { --x: 6%; --s: 5px; --d: 10s; --t: 0s; }
.af-fx i:nth-child(2) { --x: 14%; --s: 8px; --d: 12s; --t: 2.4s; }
.af-fx i:nth-child(3) { --x: 22%; --s: 15px; --d: 11s; --t: 5s; }
.af-fx i:nth-child(4) { --x: 31%; --s: 6px; --d: 9s; --t: 1.2s; }
.af-fx i:nth-child(5) { --x: 39%; --s: 9px; --d: 13s; --t: 7s; }
.af-fx i:nth-child(6) { --x: 47%; --s: 18px; --d: 12s; --t: 3.4s; }
.af-fx i:nth-child(7) { --x: 55%; --s: 5px; --d: 8.5s; --t: 6.2s; }
.af-fx i:nth-child(8) { --x: 63%; --s: 7px; --d: 11.5s; --t: 0.8s; }
.af-fx i:nth-child(9) { --x: 70%; --s: 13px; --d: 10.5s; --t: 4.1s; }
.af-fx i:nth-child(10) { --x: 78%; --s: 6px; --d: 9.5s; --t: 8.3s; }
.af-fx i:nth-child(11) { --x: 85%; --s: 8px; --d: 12.5s; --t: 2s; }
.af-fx i:nth-child(12) { --x: 92%; --s: 16px; --d: 11s; --t: 5.8s; }
.af-fx i:nth-child(13) { --x: 27%; --s: 5px; --d: 14s; --t: 9s; }
.af-fx i:nth-child(14) { --x: 74%; --s: 7px; --d: 13.5s; --t: 10.5s; }
@keyframes af-fx-drift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); opacity: 0.75; } 50% { opacity: 1; } 100% { transform: translate3d(5%, 4%, 0) scale(1.12); opacity: 0.8; } }
@keyframes af-fx-sweep { 0%, 55% { transform: translateX(0) skewX(-18deg); opacity: 0; } 62% { opacity: 1; } 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; } }
@keyframes af-fx-rise { 0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 60% { transform: translate3d(calc(var(--s, 6px) * 1.4), -52vh, 0) scale(1); opacity: 0.8; } 100% { transform: translate3d(calc(var(--s, 6px) * -1.2), -104vh, 0) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .af-fx:before { animation: none; opacity: 0.8; } .af-fx:after, .af-fx i { animation: none; display: none; } }
.af-fx i { display: none !important; }