/* ============================================================
   Team PetPal — animations.css
   keyframes & motion only, no layout or styling
   DisLoPik 2026
   ============================================================ */


@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-1.2deg); }
}
.stage__pet { animation: bob 3.4s ease-in-out infinite; }
.stage__pet:hover { animation-duration: 1.6s; }


@keyframes shadow-pulse {
  0%, 100% { transform: scale(1);   opacity: .85; }
  50%      { transform: scale(.82); opacity: .55; }
}
.stage__shadow { animation: shadow-pulse 3.4s ease-in-out infinite; }


@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}
.pet__eyes { transform-origin: center; transform-box: fill-box; animation: blink 5s infinite; }


@keyframes twitch {
  0%, 88%, 100% { transform: rotate(0deg); }
  92%           { transform: rotate(-7deg); }
  96%           { transform: rotate(3deg); }
}
.pet__ear-l { transform-origin: bottom right; transform-box: fill-box; animation: twitch 6.5s infinite; }
.pet__ear-r { transform-origin: bottom left;  transform-box: fill-box; animation: twitch 6.5s .4s infinite; }


@keyframes sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(8deg); }
}
.pet__tail { transform-origin: top left; transform-box: fill-box; animation: sway 2.8s ease-in-out infinite; }


@keyframes hop {
  0%   { transform: translateY(0) scale(1, 1); }
  20%  { transform: translateY(0) scale(1.08, .9); }
  50%  { transform: translateY(-34px) scale(.94, 1.08); }
  80%  { transform: translateY(0) scale(1.06, .92); }
  100% { transform: translateY(0) scale(1, 1); }
}
.stage__pet.is-hop { animation: hop .55s ease-out; }

@keyframes float-a { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }
@keyframes float-b { 0%,100% { transform: translateY(0) rotate(5deg); }  50% { transform: translateY(-18px) rotate(5deg); } }
@keyframes float-c { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-10px) rotate(-7deg); } }
.passcard--a { animation: float-a 4.2s ease-in-out infinite; }
.passcard--b { animation: float-b 5.0s ease-in-out .3s infinite; }
.passcard--c { animation: float-c 4.6s ease-in-out .6s infinite; }


@keyframes heart-pop {
  0%   { transform: translate(-50%, 0) scale(.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -120px) scale(1.1); opacity: 0; }
}
.heart {
  position: absolute;
  left: 50%;
  bottom: 38%;
  font-size: 1.6rem;
  pointer-events: none;
  animation: heart-pop 1s ease-out forwards;
}


@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: rise .6s ease-out forwards; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .15s; }
.rise-3 { animation-delay: .25s; }
.rise-4 { animation-delay: .35s; }


.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .rise { opacity: 1; }
}


@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal[aria-hidden="false"] .modal__overlay { animation: overlay-in .25s ease-out; }
.modal[aria-hidden="false"] .modal__dialog  { animation: dialog-in .3s cubic-bezier(.2,.9,.3,1.2); }