/* Motion + glow polish: CSS transforms/opacity only (GPU-cheap), off for prefers-reduced-motion and data-saver/low-end (.lowfx) */
:root { --glow: 200, 241, 105; }
.btn:not(.ghost):not(.dark), button.primary { box-shadow: 0 0 0 0 rgba(var(--glow), 0), 0 6px 22px -8px rgba(var(--glow), .55); transition: transform .15s ease, box-shadow .25s ease, filter .2s; }
.btn:not(.ghost):not(.dark):hover { box-shadow: 0 0 0 1px rgba(var(--glow), .35), 0 10px 30px -8px rgba(var(--glow), .7); transform: translateY(-1px); }
.btn:active, button:active { transform: scale(.97); }
.card { transition: transform .2s ease, box-shadow .25s ease, border-color .25s; }
@media (hover: hover) { .card:hover, .vcard:hover, .st-card:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -16px rgba(var(--glow), .35); } }
.card:active, .vcard:active, .st-card:active { transform: scale(.985); }
#view > * { animation: fx-in .35s ease both; }
#view > *:nth-child(2) { animation-delay: .04s } #view > *:nth-child(3) { animation-delay: .08s } #view > *:nth-child(4) { animation-delay: .12s }
@keyframes fx-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
/* floating PC / shaking controllers on Explore */
.fx-hero { position: relative; height: 0; pointer-events: none; }
.fx-ic { position: absolute; color: rgb(var(--glow)); opacity: .55; filter: drop-shadow(0 0 8px rgba(var(--glow), .55)); will-change: transform; }
.fx-ic svg { width: 28px; height: 28px; }
.fx-pc { right: 6%; top: -4px; animation: fx-float 4.5s ease-in-out infinite; }
.fx-pad { right: 22%; top: 34px; animation: fx-shake 3.2s ease-in-out infinite; }
.fx-pad2 { right: 1%; top: 58px; opacity: .35; transform: scale(.8); animation: fx-shake 3.8s ease-in-out .8s infinite; }
.fx-zap { right: 36%; top: 2px; opacity: .4; animation: fx-pulse 2.6s ease-in-out infinite; }
@keyframes fx-float { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-8px) rotate(3deg) } }
@keyframes fx-shake { 0%, 70%, 100% { transform: rotate(0) } 74% { transform: rotate(-12deg) } 78% { transform: rotate(10deg) } 82% { transform: rotate(-8deg) } 86% { transform: rotate(5deg) } 90% { transform: rotate(0) } }
@keyframes fx-pulse { 0%, 100% { opacity: .25; transform: scale(.9) } 50% { opacity: .6; transform: scale(1.08) } }
/* attractive empty states */
.empty.card { position: relative; overflow: hidden; }
.empty.card::before { content: ''; position: absolute; inset: -40% 20% auto; height: 160px; background: radial-gradient(closest-side, rgba(var(--glow), .18), transparent); pointer-events: none; }
.empty.card .ic, .empty.card > svg { display: inline-block; animation: fx-float 4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(var(--glow), .5)); }
@media (max-width: 520px) { .fx-ic svg { width: 22px; height: 22px } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.lowfx *, .lowfx *::before, .lowfx *::after { animation: none !important; } .lowfx .card, .lowfx .btn { box-shadow: none !important; }