.category-hero--glow .category-artifact { position: absolute; z-index: -1; inset: 0 0 0 45%; overflow: hidden; pointer-events: none; opacity: .67; }
.category-hero--glow .category-artifact::before { content: ''; position: absolute; right: 7%; top: 9%; width: 70%; height: 70%; background: radial-gradient(circle at 70% 40%, rgba(105,73,255,.22), transparent 44%), radial-gradient(circle at 32% 69%, rgba(229,23,42,.2), transparent 48%); animation: ff-glow-aura 7s ease-in-out infinite alternate; }
.category-hero--glow .category-artifact i { --x: 50%; --y: 50%; --r: 0deg; --c: #ff4054; --delay: 0s; position: absolute; left: var(--x); top: var(--y); width: 6px; height: 150px; border-radius: 6px; transform: rotate(var(--r)); background: linear-gradient(to bottom, transparent, var(--c) 22% 78%, transparent); box-shadow: 0 0 10px var(--c), 0 0 26px var(--c); animation: ff-glow-baton 5.2s ease-in-out infinite; animation-delay: var(--delay); }
.category-hero--glow .category-artifact i:nth-child(1) { --x: 18%; --y: 27%; --r: -34deg; --c: #ff3f52; --delay: -.5s; }.category-hero--glow .category-artifact i:nth-child(2) { --x: 31%; --y: 58%; --r: 24deg; --c: #fff0c7; --delay: -2.6s; }.category-hero--glow .category-artifact i:nth-child(3) { --x: 45%; --y: 19%; --r: 41deg; --c: #705eff; --delay: -1.4s; }.category-hero--glow .category-artifact i:nth-child(4) { --x: 57%; --y: 51%; --r: -19deg; --c: #4bb7ff; --delay: -3.7s; }.category-hero--glow .category-artifact i:nth-child(5) { --x: 70%; --y: 25%; --r: 16deg; --c: #ff4c78; --delay: -.9s; }.category-hero--glow .category-artifact i:nth-child(6) { --x: 82%; --y: 57%; --r: -43deg; --c: #ffe8b5; --delay: -2.1s; }.category-hero--glow .category-artifact i:nth-child(7) { --x: 92%; --y: 20%; --r: 33deg; --c: #856dff; --delay: -4.1s; }.category-hero--glow .category-artifact i:nth-child(n+8) { display: none; }
@keyframes ff-glow-baton { 0%,100% { opacity: .28; transform: rotate(var(--r)) translate3d(0,18px,0) scale(.82); } 50% { opacity: .9; transform: rotate(var(--r)) translate3d(0,-16px,0) scale(1.04); } }
@keyframes ff-glow-aura { from { opacity: .35; transform: scale(.88); } to { opacity: .9; transform: scale(1.08); } }
@media (max-width: 680px) { .category-hero--glow .category-artifact { left: 31%; opacity: .39; } .category-hero--glow .category-artifact i { height: 112px; } }
@media (prefers-reduced-motion: reduce) { .category-hero--glow .category-artifact::before, .category-hero--glow .category-artifact i { animation: none; opacity: .34; } }