/* ═══════════════════════════════════════════════════════
   MAK GAMES — Motion / Animation / Effects Layer
   Keeps the existing purple-neon dark gaming aesthetic,
   adds page transitions, scroll reveals, particles, glow,
   glitch hover, confetti, skeleton loaders, and micro-motion.
   ═══════════════════════════════════════════════════════ */

/* ─── Top Route Progress Bar ─────────────────────────── */
#routeProgress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--purple-dark),var(--purple-neon),var(--purple-dark));
  background-size:200% 100%;
  box-shadow:0 0 10px rgba(139,92,246,.8),0 0 20px rgba(139,92,246,.4);
  z-index:10000;transition:width .25s ease,opacity .3s ease;
  animation:routeShimmer 1.2s linear infinite;
}
#routeProgress.done{opacity:0}
@keyframes routeShimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* ─── Animated Background Particles ──────────────────── */
#bgParticles{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
#bgParticles span{
  position:absolute;bottom:-10px;display:block;border-radius:50%;
  background:radial-gradient(circle,rgba(192,132,252,.55),rgba(139,92,246,0) 70%);
  animation:floatUp linear infinite;
  will-change:transform,opacity;
}
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}
  10%{opacity:.9}
  90%{opacity:.5}
  100%{transform:translateY(-110vh) translateX(var(--drift,20px)) scale(1.1);opacity:0}
}
#app,header,footer,main{position:relative;z-index:1}

/* ─── Loader Upgrade ──────────────────────────────────── */
#loader{
  background:radial-gradient(ellipse at 50% 40%,rgba(139,92,246,.12),var(--dark) 70%);
}
.loader-spinner{position:relative}
.loader-spinner::after{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(139,92,246,.15);
  animation:pulseRing 1.6s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.8);opacity:.8}
  100%{transform:scale(1.6);opacity:0}
}
.loader-logo{
  position:absolute;font-family:var(--font-primary);font-weight:800;
  letter-spacing:2px;font-size:.65rem;color:var(--purple-neon);
  text-transform:uppercase;top:50%;left:50%;transform:translate(-50%,-50%);
  animation:fadePulse 1.6s ease-in-out infinite;
}
@keyframes fadePulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ─── Page Transition (fade+rise for injected #mainContent) ── */
.page-enter{animation:pageIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes pageIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── Scroll Reveal ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.reveal-scale.in{opacity:1;transform:scale(1)}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.14s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.20s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.32s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.38s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.44s}
.reveal-stagger.in > *:nth-child(n+9){transition-delay:.5s}

/* ─── Hero Motion ─────────────────────────────────────── */
.hero-grid{animation:gridDrift 24s linear infinite}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:60px 60px,60px 60px}}
.hero-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(139,92,246,.10),transparent 45%);
  animation:auroraDrift 12s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate(-4%,-2%) scale(1)}
  100%{transform:translate(4%,3%) scale(1.08)}
}
.hero-badge{animation:badgeFloat 3.4s ease-in-out infinite}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero-title{background-size:200% auto;animation:shineText 5s linear infinite}
@keyframes shineText{to{background-position:200% center}}
.hero-title .highlight{position:relative;display:inline-block}
.hero-actions .btn{animation:btnRise .6s cubic-bezier(.16,1,.3,1) both}
.hero-actions .btn:nth-child(1){animation-delay:.15s}
.hero-actions .btn:nth-child(2){animation-delay:.28s}
@keyframes btnRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ─── Button Motion / Ripple ──────────────────────────── */
.btn{transform:translateZ(0)}
.btn:active{transform:scale(.96)}
.btn-primary,.btn-danger,.btn-success{position:relative}
.btn-primary::after,.btn-danger::after,.btn-success::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(139,92,246,.5);
  transition:box-shadow .4s ease;pointer-events:none;
}
.btn-primary:hover::after{box-shadow:0 0 0 6px rgba(139,92,246,0)}
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.45);
  transform:scale(0);animation:rippleAnim .6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(2.6);opacity:0}}

/* ─── Cards: tilt + glow sweep ────────────────────────── */
.game-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease;will-change:transform}
.game-card::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%);
  background-size:220% 220%;background-position:120% 0;
  opacity:0;transition:opacity .3s ease;
}
.game-card:hover::before{opacity:1;animation:cardSweep 1.1s ease forwards}
@keyframes cardSweep{from{background-position:120% 0}to{background-position:-20% 0}}
.game-card-img,.game-card-img-placeholder{transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s ease}
.game-card:hover .game-card-img{transform:scale(1.08);filter:saturate(1.15) brightness(1.05)}
.game-card:hover .game-card-img-placeholder{transform:scale(1.06)}
.game-card-title{transition:color .25s ease,text-shadow .25s ease}
.game-card:hover .game-card-title{color:var(--purple-neon);text-shadow:0 0 12px rgba(139,92,246,.35)}
.game-card-price{transition:transform .25s ease}
.game-card:hover .game-card-price{transform:scale(1.05)}

/* Skeleton-loading state for cards while fetching */
.game-card.skeleton{cursor:default;pointer-events:none}
.game-card.skeleton .sk-block{
  background:linear-gradient(100deg,var(--dark3) 30%,var(--dark4) 50%,var(--dark3) 70%);
  background-size:220% 100%;animation:skShimmer 1.3s ease-in-out infinite;border-radius:2px;
}
.sk-img{height:180px;width:100%}
.sk-line{height:12px;margin:.6rem 0}
.sk-line.short{width:55%}
@keyframes skShimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* ─── Featured game glow pulse ───────────────────────── */
.featured-game{animation:featureIn .7s cubic-bezier(.16,1,.3,1) both}
.featured-game::before{animation:featureGlow 5s ease-in-out infinite}
@keyframes featureGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes featureIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.featured-game-img,.featured-game-img-placeholder{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.featured-game:hover .featured-game-img{transform:scale(1.02)}

/* ─── Stat cards: count-up ready + hover glow ─────────── */
.stat-card{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
.stat-card:hover{box-shadow:0 10px 30px rgba(139,92,246,.18);border-color:rgba(139,92,246,.4)}
.stat-card .icon{display:inline-block;transition:transform .3s ease}
.stat-card:hover .icon{transform:scale(1.15) rotate(-4deg)}

/* ─── Nav underline slide ────────────────────────────── */
nav a{position:relative}
nav a::before{
  content:'';position:absolute;bottom:2px;left:50%;right:50%;height:2px;
  background:var(--purple-neon);transition:left .25s ease,right .25s ease;border-radius:2px;
}
nav a:hover::before{left:12%;right:12%}

/* ─── Cart badge pop ──────────────────────────────────── */
.cart-badge{animation:none}
.cart-badge.pop{animation:badgePop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgePop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.cart-btn{transition:transform .2s ease}
.cart-btn:active{transform:scale(.9) rotate(-6deg)}

/* ─── Logo hover glow pulse ───────────────────────────── */
.logo-link img{transition:filter .3s ease,transform .3s ease}
.logo-link:hover img{filter:drop-shadow(0 0 14px rgba(192,132,252,.6));transform:rotate(-4deg) scale(1.05)}

/* ─── Toast entrance/exit polish ─────────────────────── */
.toast{position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.toast::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:rgba(255,255,255,.5);animation:toastTimer 3s linear forwards;
}
@keyframes toastTimer{from{width:100%}to{width:0%}}
.toast.leaving{animation:toastOut .3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.95)}}

/* ─── Form field focus glow + label float feel ────────── */
.form-control{transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease}
.form-control:focus{transform:translateY(-1px)}
.form-group{animation:fieldIn .4s ease both}
.auth-box .form-group:nth-child(1){animation-delay:.05s}
.auth-box .form-group:nth-child(2){animation-delay:.1s}
.auth-box .form-group:nth-child(3){animation-delay:.15s}
@keyframes fieldIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

/* ─── Auth box entrance ───────────────────────────────── */
.auth-box{animation:authIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes authIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ─── Cat filter buttons ─────────────────────────────── */
.cat-btn{transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease}
.cat-btn:hover{transform:translateY(-2px)}
.cat-btn.active{animation:catPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes catPop{0%{transform:scale(.9)}100%{transform:scale(1)}}

/* ─── Table row entrance ──────────────────────────────── */
tbody tr{animation:rowIn .35s ease both}
tbody tr:nth-child(n+8){animation-delay:0s}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}

/* ─── Admin tab underline slide ──────────────────────── */
.admin-tab{position:relative}
.admin-tab.active{animation:tabPop .25s ease}
@keyframes tabPop{from{transform:translateY(2px);opacity:.6}to{transform:translateY(0);opacity:1}}

/* ─── Wishlist heart button ──────────────────────────── */
.wish-btn{
  position:absolute;top:.6rem;left:.6rem;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(10,10,15,.65);backdrop-filter:blur(6px);
  border:1px solid rgba(139,92,246,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;color:var(--text-secondary);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .2s ease,border-color .2s ease,background .2s ease;
}
.wish-btn:hover{transform:scale(1.12);border-color:var(--purple)}
.wish-btn.active{color:#ff5c8a;border-color:rgba(255,92,138,.4)}
.wish-btn.active.bump{animation:wishBump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes wishBump{0%{transform:scale(1)}35%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* ─── Star rating ─────────────────────────────────────── */
.stars{display:inline-flex;gap:2px;color:#4b4b5e;font-size:1.1rem;line-height:1}
.stars .on{color:#facc15;text-shadow:0 0 8px rgba(250,204,21,.45)}
.star-input{display:inline-flex;gap:.25rem;font-size:1.6rem;cursor:pointer}
.star-input span{color:#4b4b5e;transition:transform .15s ease,color .15s ease}
.star-input span:hover,.star-input span.hover{transform:scale(1.2)}
.star-input span.on{color:#facc15}
.review-item{
  border-bottom:1px solid rgba(139,92,246,.08);padding:1rem 0;
  animation:rowIn .4s ease both;
}
.review-item:last-child{border-bottom:none}
.review-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.review-user{font-family:var(--font-primary);font-weight:700;font-size:.85rem}
.review-date{font-size:.7rem;color:var(--text-muted)}
.review-comment{color:var(--text-secondary);font-size:.85rem;line-height:1.7}

/* ─── Empty states float ─────────────────────────────── */
.cart-empty .icon{animation:floatSlow 3s ease-in-out infinite}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ─── 404 Page ────────────────────────────────────────── */
.notfound-page{
  min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:4rem 2rem;
}
.notfound-code{
  font-family:var(--font-primary);font-weight:900;font-size:clamp(4rem,14vw,9rem);
  background:linear-gradient(135deg,var(--purple),var(--purple-neon));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;letter-spacing:2px;
  animation:glitch404 3.5s ease-in-out infinite;
}
@keyframes glitch404{
  0%,92%,100%{transform:translate(0,0)}
  93%{transform:translate(-3px,1px)}
  94%{transform:translate(3px,-1px)}
  95%{transform:translate(-2px,0)}
  96%{transform:translate(2px,1px)}
  97%{transform:translate(0,0)}
}
.notfound-page h2{font-family:var(--font-primary);text-transform:uppercase;margin:.75rem 0 .5rem;font-size:1.3rem}
.notfound-page p{color:var(--text-secondary);margin-bottom:1.5rem}

/* ─── Confetti (checkout success) ────────────────────── */
#confettiLayer{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden}
#confettiLayer span{
  position:absolute;top:-10px;width:8px;height:14px;opacity:.9;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  to{transform:translateY(110vh) rotate(var(--rot,540deg));opacity:0}
}

/* ─── Back to top button ─────────────────────────────── */
#toTop{
  position:fixed;bottom:1.75rem;left:1.75rem;z-index:500;
  width:44px;height:44px;border-radius:50%;
  background:var(--dark2);border:1px solid rgba(139,92,246,.25);
  color:var(--purple-neon);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.1rem;box-shadow:0 6px 20px rgba(0,0,0,.4);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s ease;
}
#toTop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#toTop:hover{border-color:var(--purple);box-shadow:0 0 20px rgba(139,92,246,.35)}

/* ─── Search input micro-motion ──────────────────────── */
.search-box input{transition:box-shadow .25s ease,border-color .25s ease}
.search-box .icon{transition:color .25s ease,transform .25s ease}
.search-box input:focus + .icon,.search-box input:focus ~ .icon{color:var(--purple-neon)}

/* ─── Detail page entrance ───────────────────────────── */
.game-detail{animation:pageIn .55s cubic-bezier(.16,1,.3,1) both}
.game-detail-img,.game-detail-img-placeholder{transition:transform .5s ease}
.game-detail-actions .btn{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.game-detail-actions .btn:hover{transform:translateY(-2px) scale(1.02)}

/* ─── Footer subtle rise on view ─────────────────────── */
footer{animation:fadeUpSlow .8s ease both}
@keyframes fadeUpSlow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ─── Utility: fade-in image once loaded ─────────────── */
img.lazy-fade{opacity:0;transition:opacity .5s ease}
img.lazy-fade.loaded{opacity:1}

/* ═══════════════════════════════════════════════════════
   MAK GAMES — ENHANCED MOTION V2 (Sepehr H.I)
   Epic animations, cursor glow, glitch, neon, 3D tilt
   ═══════════════════════════════════════════════════════ */

/* ─── LOADER Upgrade ──────────────────────────────────── */
#loader{
  background:radial-gradient(ellipse at 50% 40%,rgba(139,92,246,.15),var(--dark) 65%);
}
#loader::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 3px,
    rgba(139,92,246,.015) 3px,rgba(139,92,246,.015) 4px
  );
  pointer-events:none;z-index:0;
}
.loader-content{animation:loaderContentIn .6s ease both}
@keyframes loaderContentIn{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.loader-logo-text{animation:logoPulse 1.8s ease-in-out infinite}
@keyframes logoPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5) drop-shadow(0 0 8px rgba(192,132,252,.8))}}
.loader-hint{animation:hintBlink 2s step-end infinite}
@keyframes hintBlink{0%,90%{opacity:1}95%,100%{opacity:.3}}

/* ─── Cursor Glow motion ──────────────────────────────── */
#cursorGlow{transition:transform .05s linear}
body:has(#cursorGlow):not(.no-cursor-glow) *{cursor:none}
body:has(#cursorGlow):not(.no-cursor-glow) a,
body:has(#cursorGlow):not(.no-cursor-glow) button,
body:has(#cursorGlow):not(.no-cursor-glow) input,
body:has(#cursorGlow):not(.no-cursor-glow) select,
body:has(#cursorGlow):not(.no-cursor-glow) textarea{cursor:none}

/* ─── Custom cursor dot ───────────────────────────────── */
#cursorDot{
  position:fixed;top:0;left:0;
  width:8px;height:8px;border-radius:50%;
  background:var(--purple-neon);pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(192,132,252,.8),0 0 20px rgba(192,132,252,.4);
  transition:transform .08s ease,width .2s ease,height .2s ease,background .2s ease;
  will-change:transform;
}
#cursorDot.hovering{width:16px;height:16px;background:transparent;border:2px solid var(--purple-neon)}
#cursorDot.clicking{transform:translate(-50%,-50%) scale(.7)}

/* ─── Glitch hover effect on headings ────────────────── */
.glitch-hover{position:relative;display:inline-block}
.glitch-hover::before,.glitch-hover::after{
  content:attr(data-text);position:absolute;top:0;left:0;
  width:100%;height:100%;
  background:inherit;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.glitch-hover::before{
  text-shadow:-2px 0 var(--purple-neon);
  clip-path:polygon(0 0,100% 0,100% 33%,0 33%);
  animation:glitchTop 4s infinite;
}
.glitch-hover::after{
  text-shadow:2px 0 var(--purple);
  clip-path:polygon(0 66%,100% 66%,100% 100%,0 100%);
  animation:glitchBot 4s infinite;
}
@keyframes glitchTop{
  0%,85%,100%{transform:translate(0)}
  86%{transform:translate(-3px,-1px)}
  88%{transform:translate(2px,0)}
  90%{transform:translate(-1px,1px)}
  92%{transform:translate(0)}
}
@keyframes glitchBot{
  0%,85%,100%{transform:translate(0)}
  87%{transform:translate(3px,1px)}
  89%{transform:translate(-2px,0)}
  91%{transform:translate(1px,-1px)}
  93%{transform:translate(0)}
}

/* ─── Neon border pulse ───────────────────────────────── */
.neon-border{position:relative}
.neon-border::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(135deg,var(--purple),var(--purple-neon),var(--purple-dark),var(--purple-neon));
  background-size:300% 300%;z-index:-1;
  animation:neonRotate 4s linear infinite;
  filter:blur(4px);opacity:0;transition:opacity .3s ease;
}
.neon-border:hover::after{opacity:.7}
@keyframes neonRotate{to{background-position:300% 300%}}

/* ─── 3D Card Tilt ────────────────────────────────────── */
.game-card{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.16,1,.3,1),
             box-shadow .35s ease,border-color .35s ease;
}
.game-card.tilt-active{transition:transform .1s ease}

/* ─── Card glow on hover ──────────────────────────────── */
.game-card::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(139,92,246,.12) 0%,transparent 55%);
  opacity:0;transition:opacity .3s ease;border-radius:inherit;
}
.game-card:hover::after{opacity:1}

/* ─── Hero enhanced ───────────────────────────────────── */
.hero-title{animation:heroTitleIn .8s cubic-bezier(.16,1,.3,1) .2s both}
@keyframes heroTitleIn{
  from{opacity:0;transform:translateY(30px) skewY(2deg)}
  to{opacity:1;transform:translateY(0) skewY(0)}
}
.hero-subtitle{animation:heroSubIn .8s ease .45s both}
@keyframes heroSubIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-badge{animation:badgeIn .6s cubic-bezier(.34,1.56,.64,1) .1s both,badgeFloat 3.4s ease-in-out 1s infinite}
@keyframes badgeIn{from{opacity:0;transform:scale(.7) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ─── Floating particles in hero ─────────────────────── */
.hero-float-icons{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.hero-float-icons span{
  position:absolute;font-size:1.5rem;opacity:.08;
  animation:iconFloat linear infinite;
  will-change:transform,opacity;
}
@keyframes iconFloat{
  0%{transform:translateY(100%) rotate(0deg);opacity:0}
  10%{opacity:.12}
  90%{opacity:.06}
  100%{transform:translateY(-150%) rotate(360deg);opacity:0}
}

/* ─── Stat card counter animation ─────────────────────── */
.stat-card{position:relative;overflow:hidden}
.stat-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(139,92,246,.1),transparent 65%);
  opacity:0;transition:opacity .4s ease;
}
.stat-card:hover::before{opacity:1}
.stat-card.counting .value{
  animation:countPulse .3s ease;
}
@keyframes countPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.15);color:var(--purple-neon)}
  100%{transform:scale(1)}
}

/* ─── Section header animations ───────────────────────── */
.section-tag{animation:tagSlideIn .6s ease both}
@keyframes tagSlideIn{from{opacity:0;letter-spacing:8px}to{opacity:1;letter-spacing:2px}}
.section-title{position:relative;display:inline-block}

/* ─── Featured game enhanced ──────────────────────────── */
.featured-game{position:relative;overflow:hidden}
.featured-game::after{
  content:'';position:absolute;top:-50%;right:-20%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.08),transparent 70%);
  animation:featureAuroraFloat 8s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes featureAuroraFloat{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-30px,20px) scale(1.2)}
}

/* ─── Auth box neon border on focus ───────────────────── */
.auth-box:focus-within{
  border-color:rgba(139,92,246,.4);
  box-shadow:0 0 0 1px rgba(139,92,246,.2),0 20px 60px rgba(0,0,0,.5),inset 0 0 40px rgba(139,92,246,.03);
  transition:border-color .4s ease,box-shadow .4s ease;
}

/* ─── Button press wave ───────────────────────────────── */
.btn-primary{overflow:hidden}
.btn:active::before{
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  opacity:1;animation:btnPress .2s ease;
}
@keyframes btnPress{from{transform:scale(1.05)}to{transform:scale(1)}}

/* ─── Loading skeleton shimmer enhanced ──────────────── */
@keyframes skShimmer{
  0%{background-position:200% 0}
  100%{background-position:-50% 0}
}
.game-card.skeleton .sk-block{
  background:linear-gradient(105deg,var(--dark3) 30%,rgba(139,92,246,.08) 45%,var(--dark3) 60%);
  background-size:250% 100%;
  animation:skShimmer 1.5s ease-in-out infinite;
}

/* ─── Nav active indicator ────────────────────────────── */
nav a.active{
  position:relative;
  background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(139,92,246,.04));
}
nav a.active::after{
  box-shadow:0 0 8px rgba(139,92,246,.6);
}

/* ─── Toast enhanced ──────────────────────────────────── */
.toast{
  animation:toastSlideIn .4s cubic-bezier(.34,1.56,.64,1) both;
  border-left:3px solid rgba(255,255,255,.3);
}
@keyframes toastSlideIn{
  from{opacity:0;transform:translateY(30px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ─── Page transition enhanced ───────────────────────── */
.page-enter{
  animation:pageSlideIn .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pageSlideIn{
  from{opacity:0;transform:translateY(18px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ─── Scroll reveal enhanced ─────────────────────────── */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1),
             transform .75s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-left{
  opacity:0;transform:translateX(-28px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-left.in{opacity:1;transform:translateX(0)}
.reveal-right{
  opacity:0;transform:translateX(28px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-right.in{opacity:1;transform:translateX(0)}

/* ─── Wishlist page animations ────────────────────────── */
.wishlist-empty-anim{animation:heartPulseEmpty 2s ease-in-out infinite}
@keyframes heartPulseEmpty{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ─── Footer enhanced ─────────────────────────────────── */
.footer-bottom{
  background:linear-gradient(135deg,transparent,rgba(139,92,246,.05));
  border-radius:var(--radius);padding:1rem 1.5rem;
  margin:0 -2rem -1.5rem;
}
.dev-name{
  animation:devNameGlow 3s ease-in-out infinite;
}
@keyframes devNameGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.4) drop-shadow(0 0 6px rgba(139,92,246,.5))}
}

/* ─── Mobile nav animation ────────────────────────────── */
nav.mobile-open a{
  animation:mobileNavItem .4s cubic-bezier(.34,1.56,.64,1) both;
}
nav.mobile-open a:nth-child(1){animation-delay:.05s}
nav.mobile-open a:nth-child(2){animation-delay:.1s}
nav.mobile-open a:nth-child(3){animation-delay:.15s}
@keyframes mobileNavItem{
  from{opacity:0;transform:translateY(-20px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ─── Game detail image zoom ──────────────────────────── */
.game-detail-img{transition:transform .6s cubic-bezier(.16,1,.3,1),filter .6s ease}
.game-detail-img:hover{transform:scale(1.02);filter:saturate(1.1) brightness(1.05)}

/* ─── Header scroll effect ────────────────────────────── */
header.scrolled{
  background:rgba(10,10,15,.99);
  box-shadow:0 4px 30px rgba(0,0,0,.6),0 1px 0 rgba(139,92,246,.15);
  transition:background .3s ease,box-shadow .3s ease;
}

/* ─── Price tag glow ──────────────────────────────────── */
.game-card-price.free{
  text-shadow:0 0 12px rgba(34,197,94,.4);
  animation:priceGlow 2.5s ease-in-out infinite;
}
@keyframes priceGlow{
  0%,100%{text-shadow:0 0 12px rgba(34,197,94,.3)}
  50%{text-shadow:0 0 20px rgba(34,197,94,.7)}
}
.game-card-price:not(.free){
  text-shadow:0 0 12px rgba(139,92,246,.3);
  animation:pricePurpleGlow 2.5s ease-in-out infinite;
}
@keyframes pricePurpleGlow{
  0%,100%{text-shadow:0 0 8px rgba(139,92,246,.2)}
  50%{text-shadow:0 0 18px rgba(192,132,252,.6)}
}

/* ─── Grid hover grid-glow ────────────────────────────── */
.games-grid:hover .game-card:not(:hover){
  filter:brightness(.85) saturate(.8);
  transition:filter .3s ease;
}
.game-card{transition:filter .3s ease,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease}

/* ─── Hero orbit ring ─────────────────────────────────── */
.hero-orbit{
  position:absolute;border-radius:50%;
  border:1px solid rgba(139,92,246,.06);pointer-events:none;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.hero-orbit-1{width:300px;height:300px;animation:orbitSpin 30s linear infinite}
.hero-orbit-2{width:500px;height:500px;animation:orbitSpin 50s linear infinite reverse}
.hero-orbit-3{width:700px;height:700px;animation:orbitSpin 80s linear infinite}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ─── Account sidebar avatar glow ─────────────────────── */
.avatar{
  animation:avatarGlow 3s ease-in-out infinite;
}
@keyframes avatarGlow{
  0%,100%{box-shadow:0 0 10px rgba(139,92,246,.3)}
  50%{box-shadow:0 0 25px rgba(192,132,252,.6),0 0 50px rgba(139,92,246,.2)}
}

/* ─── Table hover row flash ───────────────────────────── */
tbody tr{transition:background .2s ease}
tbody tr:hover td{
  background:rgba(139,92,246,.06);
  transition:background .2s ease;
}
tbody tr:hover td:first-child{
  border-right:2px solid rgba(139,92,246,.4);
}

/* ─── Admin stats pulse animation ─────────────────────── */
.stat-card.animate-in{animation:statCardIn .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes statCardIn{
  from{opacity:0;transform:scale(.85) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* ============================================================
   ═══════════════════════════════════════════════════════════════
   MAK GAMES — EPIC ANIMATIONS V3 ✦ DEVELOPED BY SEPEHR H.I
   Cinematic motion, parallax, typed text, scroll magic
   ═══════════════════════════════════════════════════════════════
   ============================================================ */

/* ─── ✦ TYPED TEXT CURSOR BLINK ──────────────────────────── */
.typed-cursor{
  display:inline-block;width:2px;height:1em;
  background:var(--purple-neon);margin-left:2px;
  animation:blinkCursor .75s step-end infinite;
  vertical-align:text-bottom;
}
@keyframes blinkCursor{0%,100%{opacity:1}50%{opacity:0}}

/* ─── ✦ PARALLAX SCROLL EFFECT ──────────────────────────── */
.parallax-section{
  position:relative;overflow:hidden;
  transform:translateZ(0);
}
.parallax-bg{
  position:absolute;inset:-20%;
  background-size:cover;background-position:center;
  will-change:transform;z-index:0;
}

/* ─── ✦ WOBBLE SHAKE ON ERROR ───────────────────────────── */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  10%,30%,50%,70%,90%{transform:translateX(-5px)}
  20%,40%,60%,80%{transform:translateX(5px)}
}
.shake{animation:shake .5s ease}

/* ─── ✦ FLOATING LABELS ─────────────────────────────────── */
.form-group{position:relative}
.form-group.floating label{
  position:absolute;top:.65rem;right:.8rem;
  font-size:.9rem;color:var(--text-muted);
  transition:all .2s ease;pointer-events:none;
}
.form-group.floating input:focus ~ label,
.form-group.floating input:not(:placeholder-shown) ~ label{
  top:-.6rem;right:.5rem;font-size:.7rem;color:var(--purple-neon);
}

/* ─── ✦ GLOW SPIN AROUND IMAGES ─────────────────────────── */
.glow-ring{
  position:absolute;inset:-2px;border-radius:inherit;
  background:conic-gradient(from 0deg,transparent,var(--purple-neon),transparent,var(--purple),transparent);
  animation:spinGlow 3s linear infinite;
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#fff calc(100% - 1px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#fff calc(100% - 1px));
  opacity:0;transition:opacity .3s ease;
}
.glow-ring.parent:hover .glow-ring{opacity:1}
@keyframes spinGlow{to{transform:rotate(360deg)}}

/* ─── ✦ MEGA CONFETTI BURST ─────────────────────────────── */
@keyframes confettiBurst{
  0%{transform:translateY(0) scale(1) rotate(0deg);opacity:1}
  100%{transform:translateY(-500px) translateX(var(--cx,100px)) scale(0) rotate(var(--rot,720deg));opacity:0}
}
.confetti-burst{
  position:fixed;top:50%;left:50%;pointer-events:none;z-index:9999;
}
.confetti-burst span{
  position:absolute;width:10px;height:10px;border-radius:2px;
  animation:confettiBurst 1.2s cubic-bezier(.25,.46,.45,.94) forwards;
}

/* ─── ✦ TEXT REVEAL LETTER BY LETTER ─────────────────────── */
@keyframes letterReveal{
  from{opacity:0;transform:translateY(20px) rotateX(-90deg)}
  to{opacity:1;transform:translateY(0) rotateX(0)}
}
.text-reveal span{
  display:inline-block;animation:letterReveal .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* ─── ✦ FLOATING NOTIFICATION BADGE ─────────────────────── */
.cart-badge{
  animation:badgeIdle 2s ease-in-out infinite;
}
@keyframes badgeIdle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

/* ─── SMOOTH SCROLL PROGRESS INDICATOR ───────────────── */
.scroll-progress{
  position:fixed;top:3px;left:0;height:2px;
  background:linear-gradient(90deg,var(--purple-dark),var(--purple-neon));
  z-index:9999;transition:width .1s linear;opacity:.7;
}

/* ─── ✦ PULSE GLOW ON ANY ACTIVE ELEMENT ────────────────── */
.pulse-glow{
  animation:pulseGlow 1.5s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 5px rgba(139,92,246,.3)}
  50%{box-shadow:0 0 20px rgba(139,92,246,.6),0 0 40px rgba(139,92,246,.2)}
}

/* ─── ✦ CARD ENTRANCE STAGGER FOR GRIDS ─────────────────── */
.card-enter{
  animation:cardEnter .5s cubic-bezier(.34,1.56,.64,1) both;
}
.card-enter:nth-child(1){animation-delay:.03s}
.card-enter:nth-child(2){animation-delay:.07s}
.card-enter:nth-child(3){animation-delay:.11s}
.card-enter:nth-child(4){animation-delay:.15s}
.card-enter:nth-child(5){animation-delay:.19s}
.card-enter:nth-child(6){animation-delay:.23s}
.card-enter:nth-child(7){animation-delay:.27s}
.card-enter:nth-child(8){animation-delay:.31s}
.card-enter:nth-child(n+9){animation-delay:.35s}
@keyframes cardEnter{
  from{opacity:0;transform:translateY(30px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ─── ✦ MAGNETIC HOVER PULL ─────────────────────────────── */
.magnetic{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}

/* ─── ✦ WOBBLE ON SPECIFIC ELEMENTS ─────────────────────── */
@keyframes wobble{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-3deg)}
  75%{transform:rotate(3deg)}
}
.wobble-hover:hover{animation:wobble .3s ease}

/* ─── ✦ FADE + BLUR ENTRANCE ────────────────────────────── */
.reveal-blur{
  opacity:0;filter:blur(8px);transform:translateY(20px);
  transition:opacity .8s ease,filter .8s ease,transform .8s ease;
}
.reveal-blur.in{opacity:1;filter:blur(0);transform:translateY(0)}

/* ─── ✦ SCALE + FLOAT ON SCROLL ──────────────────────────── */
.reveal-float{
  opacity:0;transform:scale(.9);
  transition:opacity .7s cubic-bezier(.34,1.56,.64,1),
             transform .7s cubic-bezier(.34,1.56,.64,1);
}
.reveal-float.in{opacity:1;transform:scale(1)}

/* ─── ✦ NEON GLOW TRACKING FOR HEADER ───────────────────── */
header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--purple-neon),transparent);
  opacity:.5;
}

/* ─── ✦ HEADER SCROLLED STATE SMOOTH ────────────────────── */
header.scrolled::after{
  opacity:1;
  animation:headerScan 2s ease-in-out infinite;
}
@keyframes headerScan{
  0%,100%{background-position:0% 0}
  50%{background-position:100% 0}
}

/* ─── ✦ LOADING TEXT ANIMATION ──────────────────────────── */
.loading-dots::after{
  content:'';animation:dots 1.5s step-end infinite;
}
@keyframes dots{
  0%{content:''}
  25%{content:'.'}
  50%{content:'..'}
  75%{content:'...'}
  100%{content:''}
}

/* ─── ✦ ENHANCED SCAN LINE ──────────────────────────────── */
.scan-line::after{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(139,92,246,.03) 20%,
    rgba(139,92,246,.08) 40%,
    rgba(139,92,246,.12) 50%,
    rgba(139,92,246,.08) 60%,
    rgba(139,92,246,.03) 80%,
    transparent 100%
  );
  animation:scanMove 6s linear infinite;
}

/* ─── ✦ PROGRESS BAR RAINBOW SHIMMER ────────────────────── */
#routeProgress{
  animation:progRainbow 1s linear infinite;
}
@keyframes progRainbow{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}

/* ─── ✦ FOOTER DEV CREDIT EPIC ENTRANCE ─────────────────── */
.dev-credit{
  position:relative;
  display:inline-block;
  animation:creditReveal 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes creditReveal{
  from{opacity:0;transform:translateY(10px) scale(.95);letter-spacing:8px}
  to{opacity:1;transform:translateY(0) scale(1);letter-spacing:normal}
}

/* ─── ✦ DEVELOPER NAME GLOW PULSE ───────────────────────── */
.dev-name{
  animation:devNameEpic 3s ease-in-out infinite;
  display:inline-block;
}
@keyframes devNameEpic{
  0%,100%{
    filter:brightness(1) drop-shadow(0 0 4px rgba(139,92,246,.3));
    transform:scale(1);
  }
  50%{
    filter:brightness(1.5) drop-shadow(0 0 12px rgba(192,132,252,.8)) drop-shadow(0 0 30px rgba(139,92,246,.3));
    transform:scale(1.03);
  }
}

/* ─── ✦ CARD BORDER ANIMATION ──────────────────────────── */
.game-card .card-border-glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--purple),var(--purple-neon),var(--purple-dark)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;
}
.game-card:hover .card-border-glow{opacity:.5;animation:borderPulse 2s ease-in-out infinite;}
@keyframes borderPulse{0%,100%{opacity:.3}50%{opacity:.7}}

/* ─── ✦ KEYBOARD SHORTCUTS BADGE ────────────────────────── */
.kbd-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:3px;
  background:var(--dark3);border:1px solid rgba(139,92,246,.2);
  font-size:.7rem;font-family:monospace;color:var(--text-secondary);
}

/* ─── ✦ RESPONSIVE REDUCED MOTION SAFE ──────────────────── */
@media(prefers-reduced-motion:reduce){
  .hero-orbit,.hero-float-icons span,#bgParticles span,
  .scan-line::after,.loader-particles{display:none !important}
}