/* El plano de la foto conserva el encuadre: los efectos viven en su contenedor. */
.hero[data-effect="radial-in"] .hero-image.is-entering {
  mask-image: radial-gradient(ellipse at 38% 50%,
    transparent max(0%, calc(var(--hero-reveal) - 60%)),
    #0008 max(0%, calc(var(--hero-reveal) - 35%)),
    #000 var(--hero-reveal));
  -webkit-mask-image: radial-gradient(ellipse at 38% 50%,
    transparent max(0%, calc(var(--hero-reveal) - 60%)),
    #0008 max(0%, calc(var(--hero-reveal) - 35%)),
    #000 var(--hero-reveal));
  animation-name: hero-reveal-inward;
}
.hero[data-effect="none"] .hero-image.is-entering,
.hero[data-effect^="slide-"] .hero-image.is-entering {
  mask-image: none;
  -webkit-mask-image: none;
}
.hero[data-effect="none"] .hero-image.is-entering { animation: none; }
.hero[data-effect="slide-left"] .hero-image.is-entering { animation-name: hero-slide-left; }
.hero[data-effect="slide-right"] .hero-image.is-entering { animation-name: hero-slide-right; }
.hero[data-effect="slide-down"] .hero-image.is-entering { animation-name: hero-slide-down; }
.hero[data-effect^="slide-"] .hero-image.is-entering {
  animation-timing-function: cubic-bezier(.65, 0, .2, 1);
}
@keyframes hero-reveal-inward {
  from { --hero-reveal: 170%; }
  to { --hero-reveal: 0%; }
}
@keyframes hero-slide-left {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes hero-slide-right {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes hero-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-image.is-entering {
    animation: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    transform: none !important;
  }
}