/* static/css/arcade-anim.css */

/* Background grid scroll */
@keyframes gridScroll {
  0%   { background-position: 0 0, 20px 20px; }
  100% { background-position: 40px 40px, 60px 60px; }
}

/* Pellet shimmer */
@keyframes pellet {
  0%, 100% { opacity: .6; filter: drop-shadow(0 0 2px #ffd92c); }
  50%      { opacity: 1;  filter: drop-shadow(0 0 6px #ffd92c); }
}

/* Horizontal movers */
@keyframes runRight {
  0%   { transform: translateX(-10%); }
  100% { transform: translateX(110%); }
}
@keyframes runLeft {
  0%   { transform: translateX(110%); }
  100% { transform: translateX(-10%); }
}

/* Scene layers */
.arcade-bg {
  background-color: #0b0f19;
  background-image:
    radial-gradient(#1f3b94 1px, transparent 1px),
    radial-gradient(#1f3b94 1px, transparent 1px);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  animation: gridScroll 20s linear infinite;
}

.dots-row {
  height: 8px;
  background-image: repeating-linear-gradient(90deg, #ffd92c 0 6px, transparent 6px 14px);
  animation: pellet 1.6s ease-in-out infinite;
}

.actor { will-change: transform; }
.actor-pac { animation: runRight 9s linear infinite; }
.actor-ghost { animation: runLeft 11s linear infinite; }

/* Optional: choppy/sprite-like cadence */
.steps-choppy { animation-timing-function: steps(8, end); }

/* Full-page floating skill logos layer (global) */
.logos-layer {
  position: fixed;        /* attach to viewport for whole site */
  inset: 0;               /* cover full viewport */
  overflow: hidden;       /* clip off-screen */
  pointer-events: none;   /* never block clicks */
  z-index: 0;             /* behind content */
}

/* Each spawned logo (randomized via CSS vars) */
.logo-float {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  will-change: transform, opacity;
  animation: drift var(--dur, 18s) linear forwards,
             fadeInOut var(--dur, 18s) ease-in-out forwards;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
}

/* 2D drift using CSS custom properties for start and delta */
@keyframes drift {
  0%   { transform: translate3d(var(--sx, -10vw), var(--sy, 50vh), 0) scale(var(--scale, 1)); }
  100% { transform: translate3d(calc(var(--sx, -10vw) + var(--dx, 120vw)),
                                calc(var(--sy, 50vh) + var(--dy, 0vh)), 0) scale(var(--scale, 1)); }
}

/* Fade-in, hold, fade-out for each logo */
@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: .85; }
  90% { opacity: .85; }
  100% { opacity: 0; }
}

/* Accessibility: disable decorative motion */
@media (prefers-reduced-motion: reduce) {
  .logo-float { animation: none !important; opacity: 0 !important; }
}


/* Gentle pulse (fade in/out) */
@keyframes fadePulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: .4; }
}
.fade-pulse { animation: fadePulse 4s ease-in-out infinite; }

/* One-time fade-in on load */
@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}
.fade-in { animation: fadeIn 800ms ease-out both; }

/* On-demand fade-out helper (use with JS or a state class) */
.fade-out { opacity: 0 !important; transition: opacity 500ms ease; }

/* Accessibility: disable decorative motion */
@media (prefers-reduced-motion: reduce) {
  .fade-pulse, .fade-in { animation: none !important; opacity: 1 !important; }
}