/* ============================================================
   VantaPlay MOTION layer — hover, transitions, micro-interactions.
   Loaded after vanta.css + aurum.css. Pure enhancement; respects
   prefers-reduced-motion.
   ============================================================ */

/* Smooth base transitions on interactive elements */
.game-card,.campaign-banner,.quick-paths a,.tile,.btn-blue,.primary-btn,.outline-btn,.ghost-btn,.railbtn,.navlink,.promo-card{
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .2s ease, background .2s ease;
}

/* Game card lift + glow on hover */
.game-card{will-change:transform}
.game-card:hover{transform:translateY(-6px)}
.game-card:hover .game-cover{box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(201,255,61,.25)}
.game-cover .art{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.game-card:hover .game-cover .art{transform:scale(1.07)}
.game-card:hover .game-meta h3{color:var(--acid,#c9ff3d)}
.game-meta h3{transition:color .2s ease}

/* Campaign banners: subtle zoom of the bg image on hover */
.campaign-banner{will-change:transform}
.campaign-banner:hover{transform:translateY(-4px)}
.campaign-banner:after{transition:opacity .3s ease}
.campaign-banner:hover:after{opacity:.85}
.campaign-banner>div{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.campaign-banner:hover>div{transform:translateY(-3px)}

/* Quick-path rows: acid sweep */
.quick-paths a{position:relative;overflow:hidden}
.quick-paths a:after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acid,#c9ff3d);transform:scaleY(0);transform-origin:bottom;transition:transform .25s ease}
.quick-paths a:hover:after{transform:scaleY(1)}
.quick-paths a:hover{background:#0e120d}
.quick-paths a:hover i{transform:translateX(4px);color:var(--acid,#c9ff3d)}
.quick-paths a i{transition:transform .2s ease,color .2s ease}

/* Buttons: press + shine */
.btn-blue:active,.primary-btn:active{transform:translateY(0) scale(.98)}
.primary-btn{position:relative;overflow:hidden}
.primary-btn:before{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s ease}
.primary-btn:hover:before{left:130%}

/* Nav underline grow */
.desktop-nav a{position:relative}
.desktop-nav a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acid,#c9ff3d);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.desktop-nav a:hover:after{transform:scaleX(1)}
.desktop-nav a.active:after{transform:scaleX(1)}

/* Play button pop */
.play-btn{transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1)!important}

/* Win ticker: continuous scroll */
.win-ticker{position:relative}
.win-ticker>span:first-child{position:relative;z-index:2;background:var(--ink,#060708);padding-right:18px}
@media(min-width:701px){
  .win-ticker{display:flex;overflow:hidden}
  .win-ticker .ticker-track{display:inline-flex;gap:38px;white-space:nowrap;animation:ticker 32s linear infinite;padding-left:38px}
  .win-ticker:hover .ticker-track{animation-play-state:paused}
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Card entrance on load (staggered) */
.game-grid .game-card{animation:cardin .5s cubic-bezier(.2,.7,.2,1) backwards}
.game-grid .game-card:nth-child(1){animation-delay:.02s}
.game-grid .game-card:nth-child(2){animation-delay:.06s}
.game-grid .game-card:nth-child(3){animation-delay:.10s}
.game-grid .game-card:nth-child(4){animation-delay:.14s}
.game-grid .game-card:nth-child(5){animation-delay:.18s}
.game-grid .game-card:nth-child(6){animation-delay:.22s}
@keyframes cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Hero copy entrance */
.hero-copy-v2>*{animation:heroin .6s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy-v2>*:nth-child(1){animation-delay:.05s}
.hero-copy-v2>*:nth-child(2){animation-delay:.12s}
.hero-copy-v2>*:nth-child(3){animation-delay:.19s}
.hero-copy-v2>*:nth-child(4){animation-delay:.26s}
@keyframes heroin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Balance chip pulse when it updates (add .flash class via JS) */
.balance-chip.flash b{animation:balflash .6s ease}
@keyframes balflash{0%{color:#fff}40%{color:var(--acid,#c9ff3d);text-shadow:0 0 12px rgba(201,255,61,.6)}100%{color:#fff}}

/* Toast: nicer entrance already exists; add exit */
.toast{animation:toast-in .28s cubic-bezier(.2,.7,.2,1)}

/* Skeleton shimmer utility (for loading states) */
.skeleton{position:relative;overflow:hidden;background:#111514;border-radius:5px}
.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .primary-btn:before{display:none}
}