.category-hero--spark-fountains .category-artifact { position: absolute; z-index: -1; right: -2%; bottom: 0; width: min(53vw, 790px); height: 76%; overflow: hidden; pointer-events: none; opacity: .68; }
.category-hero--spark-fountains .category-artifact::before { content: ''; position: absolute; left: 5%; right: 5%; bottom: -3%; height: 18%; background: radial-gradient(ellipse at center bottom, rgba(255,214,161,.62), rgba(213,19,23,.18) 38%, transparent 70%); }
.category-hero--spark-fountains .category-artifact::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 4px; height: 75%; transform: translateX(-50%); background: linear-gradient(to top, #fff1c7, rgba(255,178,102,.62) 32%, transparent 83%); box-shadow: 0 0 16px #ffd49a; animation: ff-fountain-core 3.8s ease-in-out infinite; }
.category-hero--spark-fountains .category-artifact i { --x: 50%; --r: 0deg; --delay: 0s; position: absolute; left: var(--x); bottom: 2%; width: 2px; height: 56%; transform-origin: 50% 100%; transform: rotate(var(--r)) scaleY(.2); border-radius: 50%; background: linear-gradient(to top, #fff2cf, rgba(255,177,96,.86) 46%, transparent 92%); box-shadow: 0 0 9px rgba(255,211,153,.72); animation: ff-fountain-spray 3.8s cubic-bezier(.16,1,.3,1) infinite; animation-delay: var(--delay); }
.category-hero--spark-fountains .category-artifact i:nth-child(1) { --x: 18%; --r: -25deg; --delay: -.4s; }.category-hero--spark-fountains .category-artifact i:nth-child(2) { --x: 25%; --r: -18deg; --delay: -2.1s; }.category-hero--spark-fountains .category-artifact i:nth-child(3) { --x: 32%; --r: -12deg; --delay: -1.2s; }.category-hero--spark-fountains .category-artifact i:nth-child(4) { --x: 39%; --r: -7deg; --delay: -3s; }.category-hero--spark-fountains .category-artifact i:nth-child(5) { --x: 45%; --r: -3deg; --delay: -.8s; }.category-hero--spark-fountains .category-artifact i:nth-child(6) { --x: 50%; --r: 2deg; --delay: -2.6s; }.category-hero--spark-fountains .category-artifact i:nth-child(7) { --x: 56%; --r: 6deg; --delay: -1.6s; }.category-hero--spark-fountains .category-artifact i:nth-child(8) { --x: 62%; --r: 10deg; --delay: -3.3s; }.category-hero--spark-fountains .category-artifact i:nth-child(9) { --x: 69%; --r: 14deg; --delay: -.2s; }.category-hero--spark-fountains .category-artifact i:nth-child(10) { --x: 76%; --r: 19deg; --delay: -2.2s; }.category-hero--spark-fountains .category-artifact i:nth-child(11) { --x: 83%; --r: 24deg; --delay: -1s; }.category-hero--spark-fountains .category-artifact i:nth-child(12) { --x: 90%; --r: 28deg; --delay: -3.5s; }
@keyframes ff-fountain-spray { 0%,100% { opacity: 0; transform: rotate(var(--r)) scaleY(.18); } 24% { opacity: 1; } 68% { opacity: .7; transform: rotate(var(--r)) scaleY(1); } }
@keyframes ff-fountain-core { 0%,100% { opacity: .2; transform: translateX(-50%) scaleY(.45); } 50% { opacity: .9; transform: translateX(-50%) scaleY(1); } }
@media (max-width: 680px) { .category-hero--spark-fountains .category-artifact { right: -42%; width: 132vw; opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .category-hero--spark-fountains .category-artifact::after, .category-hero--spark-fountains .category-artifact i { animation: none; opacity: .36; transform: rotate(var(--r)) scaleY(.72); } }