.category-hero--shockwave .category-artifact { position: absolute; z-index: -1; top: 4%; right: -8%; width: min(54vw, 790px); aspect-ratio: 1; pointer-events: none; opacity: .62; }
.category-hero--shockwave .category-artifact::before { content: ''; position: absolute; inset: 39%; border-radius: 50%; background: #fff6e2; box-shadow: 0 0 22px #ffb46e, 0 0 76px #d51317; animation: ff-shock-flash 4.2s ease-out infinite; }
.category-hero--shockwave .category-artifact::after { content: ''; position: absolute; left: 50%; top: 50%; width: 62%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,244,220,.95), transparent); transform: translate(-50%,-50%); animation: ff-shock-line 4.2s ease-out infinite; }
.category-hero--shockwave .category-artifact i { --delay: 0s; position: absolute; inset: 17%; border: 1px solid rgba(255,229,199,.82); border-radius: 50%; box-shadow: inset 0 0 18px rgba(213,19,23,.28), 0 0 15px rgba(255,172,103,.18); animation: ff-shock-ring 4.2s cubic-bezier(.16,1,.3,1) infinite; animation-delay: var(--delay); }
.category-hero--shockwave .category-artifact i:nth-child(1) { --delay: 0s; }.category-hero--shockwave .category-artifact i:nth-child(2) { --delay: .34s; }.category-hero--shockwave .category-artifact i:nth-child(3) { --delay: .68s; }.category-hero--shockwave .category-artifact i:nth-child(4) { --delay: 1.02s; }.category-hero--shockwave .category-artifact i:nth-child(5) { --delay: 1.36s; }.category-hero--shockwave .category-artifact i:nth-child(n+6) { display: none; }
@keyframes ff-shock-ring { 0%,16% { opacity: 0; transform: scale(.16); } 27% { opacity: .88; } 78%,100% { opacity: 0; transform: scale(1.45); } }
@keyframes ff-shock-flash { 0%,14%,100% { opacity: 0; transform: scale(.2); } 22% { opacity: 1; transform: scale(1); } 42% { opacity: 0; transform: scale(2.2); } }
@keyframes ff-shock-line { 0%,16%,100% { opacity: 0; transform: translate(-50%,-50%) scaleX(.08); } 25% { opacity: .9; } 54% { opacity: 0; transform: translate(-50%,-50%) scaleX(1.4); } }
@media (max-width: 680px) { .category-hero--shockwave .category-artifact { top: 17%; right: -56%; width: 142vw; opacity: .38; } }
@media (prefers-reduced-motion: reduce) { .category-hero--shockwave .category-artifact::before, .category-hero--shockwave .category-artifact::after, .category-hero--shockwave .category-artifact i { animation: none; opacity: .28; transform: scale(.82); } }