.category-hero--lanterns .category-artifact { position: absolute; z-index: -1; inset: 0 0 0 42%; overflow: hidden; pointer-events: none; opacity: .72; }
.category-hero--lanterns .category-artifact::before { content: ''; position: absolute; right: 3%; bottom: 2%; width: 88%; height: 45%; background: radial-gradient(ellipse at center bottom, rgba(255,176,82,.22), transparent 68%); }
.category-hero--lanterns .category-artifact i { --x: 50%; --size: 20px; --delay: 0s; position: absolute; left: var(--x); bottom: -10%; width: var(--size); height: calc(var(--size) * 1.18); border-radius: 44% 44% 34% 34%; background: radial-gradient(circle at 50% 68%, #fff3b8 0 8%, #ffad43 28%, rgba(213,48,19,.78) 64%, transparent 68%); box-shadow: 0 0 12px rgba(255,170,70,.82), 0 0 28px rgba(213,19,23,.34); animation: ff-lantern-rise 12s linear infinite; animation-delay: var(--delay); }
.category-hero--lanterns .category-artifact i:nth-child(1) { --x: 13%; --size: 17px; --delay: -8s; }.category-hero--lanterns .category-artifact i:nth-child(2) { --x: 22%; --size: 25px; --delay: -2s; }.category-hero--lanterns .category-artifact i:nth-child(3) { --x: 31%; --size: 13px; --delay: -10s; }.category-hero--lanterns .category-artifact i:nth-child(4) { --x: 40%; --size: 21px; --delay: -5s; }.category-hero--lanterns .category-artifact i:nth-child(5) { --x: 49%; --size: 14px; --delay: -7s; }.category-hero--lanterns .category-artifact i:nth-child(6) { --x: 58%; --size: 27px; --delay: -1s; }.category-hero--lanterns .category-artifact i:nth-child(7) { --x: 67%; --size: 16px; --delay: -9s; }.category-hero--lanterns .category-artifact i:nth-child(8) { --x: 76%; --size: 22px; --delay: -4s; }.category-hero--lanterns .category-artifact i:nth-child(9) { --x: 85%; --size: 12px; --delay: -11s; }.category-hero--lanterns .category-artifact i:nth-child(10) { --x: 94%; --size: 19px; --delay: -6s; }.category-hero--lanterns .category-artifact i:nth-child(n+11) { display: none; }
@keyframes ff-lantern-rise { 0% { opacity: 0; transform: translate3d(-9px,12vh,0) scale(.72); } 14% { opacity: .9; } 72% { opacity: .66; } 100% { opacity: 0; transform: translate3d(18px,-92vh,0) scale(1.08); } }
@media (max-width: 680px) { .category-hero--lanterns .category-artifact { left: 27%; opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .category-hero--lanterns .category-artifact i { animation: none; opacity: .36; transform: translateY(-38vh); } }