.category-hero--offers .category-artifact { position: absolute; z-index: -1; inset: 0 0 0 43%; overflow: hidden; pointer-events: none; opacity: .62; }
.category-hero--offers .category-artifact::before { content: ''; position: absolute; right: -12%; top: 18%; width: 82%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,238,205,.92), rgba(213,19,23,.72), transparent); transform: rotate(-21deg); box-shadow: 0 0 15px rgba(255,178,103,.48); animation: ff-offer-sweep 5.6s cubic-bezier(.16,1,.3,1) infinite; }
.category-hero--offers .category-artifact::after { content: ''; position: absolute; right: 15%; top: 23%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,230,190,.62) 0 1deg, transparent 1deg 18deg); -webkit-mask: radial-gradient(circle, transparent 0 36%, #000 37% 39%, transparent 40% 58%, #000 59% 61%, transparent 62%); mask: radial-gradient(circle, transparent 0 36%, #000 37% 39%, transparent 40% 58%, #000 59% 61%, transparent 62%); animation: ff-offer-burst 7s ease-in-out infinite; }
.category-hero--offers .category-artifact i { --x: 50%; --y: 50%; --delay: 0s; position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #fff2ce; box-shadow: 0 0 10px #ffb26d; animation: ff-offer-glint 3.8s ease-in-out infinite; animation-delay: var(--delay); }
.category-hero--offers .category-artifact i:nth-child(1) { --x: 22%; --y: 31%; --delay: -.4s; }.category-hero--offers .category-artifact i:nth-child(2) { --x: 36%; --y: 19%; --delay: -1.7s; }.category-hero--offers .category-artifact i:nth-child(3) { --x: 51%; --y: 44%; --delay: -3.1s; }.category-hero--offers .category-artifact i:nth-child(4) { --x: 65%; --y: 26%; --delay: -2.2s; }.category-hero--offers .category-artifact i:nth-child(5) { --x: 78%; --y: 52%; --delay: -.9s; }.category-hero--offers .category-artifact i:nth-child(6) { --x: 88%; --y: 35%; --delay: -2.8s; }.category-hero--offers .category-artifact i:nth-child(n+7) { display: none; }
@keyframes ff-offer-sweep { 0%,16% { opacity: 0; transform: translateX(24%) rotate(-21deg); } 38% { opacity: 1; } 78%,100% { opacity: 0; transform: translateX(-60%) rotate(-21deg); } }
@keyframes ff-offer-burst { 0%,100% { opacity: .18; transform: scale(.78) rotate(-7deg); } 46% { opacity: .75; transform: scale(1.06) rotate(3deg); } }
@keyframes ff-offer-glint { 0%,100% { opacity: .12; transform: scale(.4); } 50% { opacity: .92; transform: scale(1.25); } }
@media (max-width: 680px) { .category-hero--offers .category-artifact { left: 27%; opacity: .37; } }
@media (prefers-reduced-motion: reduce) { .category-hero--offers .category-artifact::before, .category-hero--offers .category-artifact::after, .category-hero--offers .category-artifact i { animation: none; opacity: .32; } }