/* Warm fire rim — smoother run, thinner frame, soft shake */ @property --sf-fire-angle { syntax: ""; inherits: false; initial-value: 0deg; } :root { --sf-decor-fire-1: #ff3b1f; --sf-decor-fire-2: #ffb020; --sf-decor-fire-3: #ffe08a; --sf-decor-speed: 3.2s; --sf-decor-float-dur: 3.6s; --sf-decor-float-y: 7px; --sf-decor-rim: 1.6px; } @keyframes sfDecorFireSpin { to { --sf-fire-angle: 360deg; } } /* Original float up/down + delayed left-right tilt */ @keyframes sfDecorShake { /* float up (same feel as before) */ 0% { translate: 0 0; rotate: 0deg; } 18% { translate: 0 calc(var(--sf-decor-float-y) * -1); rotate: 0deg; } 36% { translate: 0 0; rotate: 0deg; } /* short delay / settle */ 42% { translate: 0 0; rotate: 0deg; } /* tilt left-right a bit more */ 52% { translate: -1.5px -1px; rotate: -1.1deg; } 62% { translate: 1.8px -2px; rotate: 1.25deg; } 72% { translate: -1.2px -1px; rotate: -0.9deg; } 82% { translate: 1px 0; rotate: 0.7deg; } 90% { translate: 0 0; rotate: 0deg; } 100% { translate: 0 0; rotate: 0deg; } } 18% { translate: -1.4px 0; rotate: -1.05deg; } 36% { translate: 1.6px 0; rotate: 1.15deg; } 54% { translate: -1.2px 0; rotate: -0.85deg; } 72% { translate: 1px 0; rotate: 0.7deg; } 88% { translate: -0.5px 0; rotate: -0.35deg; } 100% { translate: 0 0; rotate: 0deg; } } @keyframes sfDecorGlowPulse { 0%, 100% { opacity: .38; } 50% { opacity: .78; } } #storeGrid .sf-card.sf-decor, #unbanStoreGrid .sf-card.sf-decor, #categoryStoreGrid .sf-card.sf-decor, .sf-card.sf-decor { position: relative !important; z-index: 2 !important; isolation: isolate; overflow: visible !important; transform: none !important; } #storeGrid .sf-card.sf-decor:hover, #unbanStoreGrid .sf-card.sf-decor:hover, #categoryStoreGrid .sf-card.sf-decor:hover, .sf-card.sf-decor:hover { transform: none !important; } /* Continuous soft shake — keep running on hover */ #storeGrid .sf-card.sf-decor-float .sf-card-inner, #unbanStoreGrid .sf-card.sf-decor-float .sf-card-inner, #categoryStoreGrid .sf-card.sf-decor-float .sf-card-inner, .sf-card.sf-decor-float .sf-card-inner, #storeGrid .sf-card.sf-decor-float:hover .sf-card-inner, #unbanStoreGrid .sf-card.sf-decor-float:hover .sf-card-inner, #categoryStoreGrid .sf-card.sf-decor-float:hover .sf-card-inner, .sf-card.sf-decor-float:hover .sf-card-inner { animation: none !important; transform: none !important; translate: none !important; rotate: none !important; transition: none !important; will-change: auto !important; } #storeGrid .sf-card.sf-decor:hover .sf-card-inner, #unbanStoreGrid .sf-card.sf-decor:hover .sf-card-inner, #categoryStoreGrid .sf-card.sf-decor:hover .sf-card-inner, .sf-card.sf-decor:hover .sf-card-inner { transform: none !important; } /* Thin warm running rim */ #storeGrid .sf-card.sf-decor-fire .sf-card-inner, #unbanStoreGrid .sf-card.sf-decor-fire .sf-card-inner, #categoryStoreGrid .sf-card.sf-decor-fire .sf-card-inner, .sf-card.sf-decor-fire .sf-card-inner { position: relative !important; z-index: 2 !important; overflow: hidden !important; border: none !important; box-shadow: 0 10px 26px rgba(0,0,0,.28), 0 0 16px rgba(255,120,30,.16) !important; } #storeGrid .sf-card.sf-decor-fire .sf-card-inner::before, #unbanStoreGrid .sf-card.sf-decor-fire .sf-card-inner::before, #categoryStoreGrid .sf-card.sf-decor-fire .sf-card-inner::before, .sf-card.sf-decor-fire .sf-card-inner::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: var(--sf-decor-rim) !important; box-sizing: border-box !important; /* smoother long blend — warm only, no RGB */ background: conic-gradient( from var(--sf-fire-angle), var(--sf-decor-fire-1) 0deg, var(--sf-decor-fire-2) 48deg, var(--sf-decor-fire-3) 96deg, #ff8a1a 144deg, var(--sf-decor-fire-1) 192deg, var(--sf-decor-fire-2) 240deg, var(--sf-decor-fire-3) 288deg, #ff6a00 336deg, var(--sf-decor-fire-1) 360deg ) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: sfDecorFireSpin var(--sf-decor-speed) linear infinite !important; filter: saturate(1.15) brightness(1.06) !important; pointer-events: none !important; z-index: 8 !important; } .sf-card.sf-decor-fire .sf-decor-glow { position: absolute !important; inset: -6px !important; border-radius: calc(var(--sf-radius, 14px) + 6px) !important; background: radial-gradient(circle at 50% 115%, rgba(255,120,30,.28), rgba(255,176,32,.08), transparent 72%) !important; animation: sfDecorGlowPulse 2.8s ease-in-out infinite !important; pointer-events: none !important; z-index: 0 !important; } #storeGrid .sf-card.sf-decor-fire::before, #unbanStoreGrid .sf-card.sf-decor-fire::before, #categoryStoreGrid .sf-card.sf-decor-fire::before, .sf-card.sf-decor-fire::before, #storeGrid .sf-card.sf-decor-fire::after, #unbanStoreGrid .sf-card.sf-decor-fire::after, #categoryStoreGrid .sf-card.sf-decor-fire::after, .sf-card.sf-decor-fire::after { content: none !important; display: none !important; animation: none !important; } @supports not (background: conic-gradient(from var(--sf-fire-angle), red, blue)) { @keyframes sfDecorFireSpinFallback { to { rotate: 360deg; } } .sf-card.sf-decor-fire .sf-card-inner::before { background: conic-gradient( var(--sf-decor-fire-1), var(--sf-decor-fire-2), var(--sf-decor-fire-3), #ff8a1a, var(--sf-decor-fire-1) ) !important; animation: sfDecorFireSpinFallback var(--sf-decor-speed) linear infinite !important; } } /* Pause decor while scrolling — prevents stutter seen when page moves + card animates */ html.sf-is-scrolling .sf-card.sf-decor-fire .sf-card-inner::before, html.sf-is-scrolling .sf-card.sf-decor-fire .sf-decor-glow { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .sf-card.sf-decor-fire .sf-card-inner::before, .sf-card.sf-decor-fire .sf-decor-glow, .sf-card.sf-decor-float .sf-card-inner { animation: none !important; } }