/* ============================================================
   PixelDev — animations.css
   Keyframes + reduced-motion handling.
   ============================================================ */

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{
  0%{opacity:0;transform:scale(.92)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes panel-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.94)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes sheet-up{
  from{transform:translateY(28px);opacity:.4}
  to{transform:translateY(0);opacity:1}
}
@keyframes slide-l{
  from{transform:translateX(24px);opacity:.4}
  to{transform:translateX(0);opacity:1}
}
@keyframes pulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes glow-breathe{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.5)}
  50%{box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 16px rgba(255,210,74,.35)}
}
.spot.near{animation:glow-breathe 1.6s ease-in-out infinite}

/* content entrance inside panels */
.panel-body > *{animation:fade-up .3s ease-out both}
@keyframes fade-up{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
/* stagger a little */
.panel-body > *:nth-child(2){animation-delay:.04s}
.panel-body > *:nth-child(3){animation-delay:.08s}
.panel-body > *:nth-child(4){animation-delay:.12s}
.panel-body > *:nth-child(5){animation-delay:.16s}

/* ============================================================
   Reduced motion: strip decorative animation & transitions.
   Functional states (open/close) become instant.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .panel-body > *{animation:none!important;opacity:1!important;transform:none!important}
  .spot.near{animation:none}
}
