.category-hero--rockets .category-artifact { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; opacity: .7; }
.category-hero--rockets .category-artifact::before { content: ''; position: absolute; right: 5%; bottom: 6%; width: 42%; height: 18%; background: radial-gradient(ellipse at 60% 100%, rgba(255,176,99,.42), transparent 64%); }
.category-hero--rockets .category-artifact::after { content: ''; position: absolute; right: 15%; bottom: 15%; width: 9px; height: 9px; border-radius: 50%; background: #fff5d9; box-shadow: 0 0 18px #ffc078, 0 0 45px #d51317; animation: ff-rocket-flare 4.8s ease-in infinite; }
.category-hero--rockets .category-artifact i { --x: 72%; --h: 230px; --delay: 0s; position: absolute; left: var(--x); bottom: -28%; width: 2px; height: var(--h); border-radius: 50%; transform: rotate(28deg); background: linear-gradient(to top, transparent 0 18%, rgba(213,19,23,.16) 35%, #ff9a62 74%, #fff7df 98%); box-shadow: 0 0 8px rgba(255,171,105,.76); animation: ff-rocket-rise 5.6s cubic-bezier(.32,.08,.2,1) infinite; animation-delay: var(--delay); }
.category-hero--rockets .category-artifact i:nth-child(1) { --x: 59%; --h: 190px; --delay: -1.8s; }.category-hero--rockets .category-artifact i:nth-child(2) { --x: 67%; --h: 260px; --delay: -4.7s; }.category-hero--rockets .category-artifact i:nth-child(3) { --x: 75%; --h: 220px; --delay: -.6s; }.category-hero--rockets .category-artifact i:nth-child(4) { --x: 82%; --h: 280px; --delay: -3.2s; }.category-hero--rockets .category-artifact i:nth-child(5) { --x: 89%; --h: 205px; --delay: -2.4s; }.category-hero--rockets .category-artifact i:nth-child(6) { --x: 96%; --h: 245px; --delay: -5.1s; }.category-hero--rockets .category-artifact i:nth-child(n+7) { display: none; }
@keyframes ff-rocket-rise { 0%,12% { opacity: 0; transform: translate3d(0,16vh,0) rotate(28deg) scaleY(.5); } 20% { opacity: 1; } 64%,100% { opacity: 0; transform: translate3d(-28vw,-95vh,0) rotate(28deg) scaleY(1); } }
@keyframes ff-rocket-flare { 0%,44%,100% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1); } 64% { opacity: 0; transform: scale(2.4); } }
@media (max-width: 680px) { .category-hero--rockets .category-artifact { opacity: .44; } .category-hero--rockets .category-artifact i { left: calc(var(--x) - 18%); } }
@media (prefers-reduced-motion: reduce) { .category-hero--rockets .category-artifact::after, .category-hero--rockets .category-artifact i { animation: none; opacity: .35; transform: translate3d(-10vw,-35vh,0) rotate(28deg); } }