/* Mascotas editoriales de JuriVerso.
   Cada lámina contiene ocho fotogramas (4 columnas × 2 filas). */
.jv-motion{
  --jv-sprite-duration:1s;
  display:block;
  width:100%;
  aspect-ratio:1;
  background-repeat:no-repeat;
  background-size:400% 200%;
  background-position:0 0;
  animation:none;
  transform-origin:50% 82%;
  will-change:auto;
  contain:paint;
  image-rendering:auto;
}

.jv-motion--libro{background-image:url('assets/mascotas/anim/jv-libro-sheet.png')}
.jv-motion--mazo{background-image:url('assets/mascotas/anim/jv-mazo-sheet.png');--jv-sprite-duration:.9s}
.jv-motion--honguito{background-image:url('assets/mascotas/anim/jv-honguito-sheet.png');--jv-sprite-duration:.9s}
.jv-motion--roca{background-image:url('assets/mascotas/anim/jv-roca-sheet.png');--jv-sprite-duration:1.1s}
.jv-motion--pato{background-image:url('assets/mascotas/anim/jv-pato-sheet.png');--jv-sprite-duration:.8s;border-radius:22px}

.hero-sprite:hover .jv-motion,.hero-sprite:focus-visible .jv-motion,
.mascot-card:hover .jv-motion,.mascot-card:focus-visible .jv-motion,
.companion:hover .jv-motion,.companion:focus-visible .jv-motion{
  animation:jv-sprite-eight var(--jv-sprite-duration) step-end infinite;
  will-change:background-position;
}

@keyframes jv-sprite-eight{
  0%,12.49%{background-position:0 0}
  12.5%,24.99%{background-position:33.333% 0}
  25%,37.49%{background-position:66.667% 0}
  37.5%,49.99%{background-position:100% 0}
  50%,62.49%{background-position:0 100%}
  62.5%,74.99%{background-position:33.333% 100%}
  75%,87.49%{background-position:66.667% 100%}
  87.5%,100%{background-position:100% 100%}
}

/* Portada: animación protagonista con jerarquía, sin competir con el llamado principal. */
.hero-sprite{animation:none!important}
.hero-sprite .jv-motion{
  width:min(100%,220px);
  filter:drop-shadow(0 11px 8px rgba(0,0,0,.48));
  transition:transform .22s ease,filter .22s ease;
}
.hero-sprite:nth-child(3) .jv-motion{width:min(100%,238px)}
.hero-sprite:hover .jv-motion,.hero-sprite:focus-visible .jv-motion{
  transform:translateY(-11px) scale(1.045);
  filter:drop-shadow(0 0 14px rgba(246,164,70,.52));
}
.hero-sprite:active .jv-motion{transform:translateY(-7px) scale(1.02)}

/* Tarjetas de personajes: el arte conserva una caja estable y evita saltos de diseño. */
.mascot-card .jv-motion{
  width:min(100%,158px);
  margin-inline:auto;
  filter:drop-shadow(0 9px 5px rgba(0,0,0,.38));
  transition:transform .22s ease,filter .22s ease;
}
.mascot-card:hover .jv-motion,.mascot-card:focus-visible .jv-motion{
  transform:translateY(-8px) scale(1.055);
  filter:drop-shadow(0 7px 11px rgba(255,154,41,.3));
}
.mascot-card.is-pato .jv-motion{box-shadow:0 8px 24px rgba(0,0,0,.18)}

.companion .jv-motion{
  width:63px;
  height:63px;
  flex:none;
  border-radius:50%;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.34));
}
.companion.is-pato .jv-motion{border-radius:18px}
.companion:hover .jv-motion{transform:translateY(-3px) rotate(-3deg)}

/* Acentos estáticos para los dos personajes que no incluyen fotogramas. */
.has-mascot-accent{position:relative;overflow:hidden;padding-right:clamp(132px,18vw,210px)!important}
.jv-static-accent{
  position:absolute;
  right:12px;
  bottom:-9px;
  width:clamp(112px,15vw,178px);
  height:clamp(112px,15vw,178px);
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 10px 13px rgba(20,28,31,.16));
  animation:none;
}
.jv-static-accent.is-banano{right:4px;bottom:-18px;transform:rotate(4deg)}
.has-mascot-accent:hover .jv-static-accent,.has-mascot-accent:focus-within .jv-static-accent{animation:jv-accent-float 4.4s ease-in-out infinite}
@keyframes jv-accent-float{0%,100%{translate:0 0}50%{translate:0 -7px}}

@media(max-width:900px){
  .hero-sprite .jv-motion{width:min(100%,170px)}
  .hero-sprite:nth-child(3) .jv-motion{width:min(100%,184px)}
}
@media(max-width:620px){
  .hero-sprite .jv-motion,.hero-sprite:nth-child(3) .jv-motion{width:min(100%,112px)}
  .mascot-card .jv-motion{width:min(100%,132px)}
  .has-mascot-accent{padding-right:98px!important}
  .jv-static-accent{right:-7px;width:112px;height:112px;opacity:.88}
  .companion .jv-motion{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
  .jv-motion,.jv-static-accent{animation:none!important;will-change:auto}
}