/* Motor de movimiento; la composición de cada escena vive en su propia hoja. */
.peek-pup { position: relative; }
.peek-pup:not(.is-peeking) { opacity: 0; }
.peek-pup.is-peeking:not(.is-entry-complete) { animation: pup-peek-arrive 850ms cubic-bezier(.2,.8,.25,1) both; }
.peek-pup.is-peeking:not(.is-waving-complete) .pup-play > .dog { animation: pup-entry-wave 360ms ease-in-out 850ms 2; }
.peek-pup.is-offscreen,
.peek-pup.is-offscreen *,
.peek-pup.is-offscreen::before,
.peek-pup.is-offscreen::after { animation-play-state: paused !important; }

.pup-play {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: visible;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pup-play > .dog { transform-origin: 50% 93%; pointer-events: none; }
.pup-play:focus-visible { outline: 3px dashed var(--color-secundario, #e86b4b); outline-offset: 8px; border-radius: 16px; }
.peek-pup .pup-play.is-greeting > .dog,
.pup-play.is-greeting > .dog { animation: pup-happy-wiggle 620ms ease-in-out 2; }
.pup-greeting {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 5%;
  translate: -50% -100%;
  width: max-content;
  max-width: 210px;
  padding: 8px 14px;
  border: 2px solid var(--color-texto, #30362c);
  border-radius: 16px 16px 16px 3px;
  background: var(--color-superficie, #fffdf8);
  color: var(--color-texto, #30362c);
  font: 700 13px/1.4 var(--sans, Arial, sans-serif);
  text-align: center;
  box-shadow: 3px 4px 0 var(--color-acento, #f4c861);
  pointer-events: none;
  animation: pup-bubble-pop 220ms ease-out both;
}
.pup-burst-paw {
  position: absolute;
  z-index: 3;
  left: calc(50% - 11px);
  top: 35%;
  width: 22px;
  height: 22px;
  background: url('../assets/paw.svg') center / contain no-repeat;
  pointer-events: none;
  animation: pup-paw-float 1050ms ease-out var(--paw-delay, 0ms) both;
}

@keyframes pup-peek-arrive {
  0% { opacity: 0; translate: 0 18px; rotate: -8deg; }
  38% { opacity: 1; translate: 0 -12px; rotate: 5deg; }
  64% { translate: 0 4px; rotate: -3deg; }
  82% { translate: 0 -3px; rotate: 1deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes pup-entry-wave {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  30% { rotate: -6deg; translate: 0 -4px; }
  70% { rotate: 6deg; translate: 0 -4px; }
}
@keyframes pup-happy-wiggle {
  0%, 100% { rotate: 0deg; translate: 0 0; scale: 1; }
  20% { rotate: -7deg; translate: 0 -9px; scale: 1.035; }
  45% { rotate: 7deg; translate: 0 -5px; scale: 1.02; }
  70% { rotate: -4deg; translate: 0 -3px; }
  85% { rotate: 3deg; }
}
@keyframes pup-bubble-pop {
  from { opacity: 0; scale: .7; }
  to { opacity: 1; scale: 1; }
}
@keyframes pup-paw-float {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; scale: .6; }
  18% { opacity: 1; }
  80% { opacity: .8; }
  100% { opacity: 0; translate: var(--paw-drift, 0px) -96px; rotate: var(--paw-tilt, 10deg); scale: 1.15; }
}

body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after,
body.motion-background-paused *,
body.motion-background-paused *::before,
body.motion-background-paused *::after { animation-play-state: paused !important; }
body.motion-paused .peek-pup { opacity: 1 !important; animation: none !important; }
body.motion-paused .peek-pup .dog,
body.motion-paused .pup-greeting { animation: none !important; }
body.motion-paused .pup-burst-paw { display: none; }
body.motion-paused { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  .peek-pup { opacity: 1 !important; animation: none !important; }
  .peek-pup .dog,
  .pup-greeting { animation: none !important; }
  .pup-burst-paw { display: none; }
}