.category-hero--daytime .category-artifact { position: absolute; z-index: -1; inset: 0 0 0 38%; overflow: hidden; pointer-events: none; opacity: .58; mix-blend-mode: screen; }
.category-hero--daytime .category-artifact::before, .category-hero--daytime .category-artifact::after { content: ''; position: absolute; width: 68%; height: 20%; border-radius: 50%; filter: blur(14px); animation: ff-day-smoke 9s ease-in-out infinite alternate; }
.category-hero--daytime .category-artifact::before { right: -8%; top: 24%; background: linear-gradient(90deg, transparent, rgba(255,41,48,.75), rgba(255,174,153,.3), transparent); transform: rotate(-14deg); }
.category-hero--daytime .category-artifact::after { right: 18%; bottom: 24%; background: linear-gradient(90deg, transparent, rgba(40,98,255,.72), rgba(127,196,255,.28), transparent); transform: rotate(17deg); animation-delay: -4.5s; }
.category-hero--daytime .category-artifact i { --x: 50%; --y: 50%; --delay: 0s; position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #fff9e9; box-shadow: 0 0 10px rgba(255,255,255,.9); animation: ff-day-glint 4s ease-in-out infinite; animation-delay: var(--delay); }
.category-hero--daytime .category-artifact i:nth-child(1) { --x: 24%; --y: 23%; --delay: -.7s; }.category-hero--daytime .category-artifact i:nth-child(2) { --x: 38%; --y: 39%; --delay: -2.2s; }.category-hero--daytime .category-artifact i:nth-child(3) { --x: 54%; --y: 20%; --delay: -3.5s; }.category-hero--daytime .category-artifact i:nth-child(4) { --x: 68%; --y: 47%; --delay: -1.4s; }.category-hero--daytime .category-artifact i:nth-child(5) { --x: 82%; --y: 28%; --delay: -2.9s; }.category-hero--daytime .category-artifact i:nth-child(n+6) { display: none; }
@keyframes ff-day-smoke { from { opacity: .3; transform: translate3d(-6%,5%,0) rotate(-10deg) scale(.86); } to { opacity: .82; transform: translate3d(8%,-4%,0) rotate(3deg) scale(1.12); } }
@keyframes ff-day-glint { 0%,100% { opacity: .12; transform: scale(.4); } 48% { opacity: .9; transform: scale(1.2); } }
@media (max-width: 680px) { .category-hero--daytime .category-artifact { left: 23%; opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .category-hero--daytime .category-artifact::before, .category-hero--daytime .category-artifact::after, .category-hero--daytime .category-artifact i { animation: none; opacity: .34; } }