/* EPAI: capa de movimiento propia, encima del kit (no edita sus archivos).
   Curvas de la skill animate (Emil Kowalski): ease-out fuerte para entradas, ease-in-out para máscaras.
   Todo lo que se mueve con el puntero va bajo (hover: hover) and (pointer: fine); todo tiene versión reducida. */
:root {
  --ep-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ep-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------------------------------------------------------------- fotos */

/* 1. la foto del consultorio respira despacio, como una cámara que se acerca (Ken Burns) */
.hero__media { overflow: hidden; }
.hero__media > img { animation: ep-respira 22s ease-in-out 1.4s infinite alternate; transform-origin: 40% 60%; }
@keyframes ep-respira { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }

/* 2. las fotos se descubren una vez al llegar a ellas: la máscara baja y la foto se asienta */
.ep-js .ep-foto img { clip-path: inset(0 0 100% 0); transform: scale(1.14); transition: clip-path 900ms var(--ep-in-out), transform 1400ms var(--ep-out); }
.ep-js .ep-foto.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
/* Miss Ely sube desde el pie de su marco en vez de recortarse */
.ep-js #juegos .ep-foto img { clip-path: none; translate: 0 40%; opacity: 0; transition: translate 1000ms var(--ep-out), opacity 500ms var(--ep-out); }
.ep-js #juegos .ep-foto.is-in img { translate: 0 0; opacity: 1; }

/* 3. al pasar el mouse la foto se acerca dentro de su marco */
@media (hover: hover) and (pointer: fine) {
  :is(.ep-foto, .hero__media, .develop) { overflow: hidden; }
  :is(.ep-foto.is-in, .develop) img { transition: transform 700ms var(--ep-out), scale 700ms var(--ep-out); }
  :is(.ep-foto.is-in, .develop):hover img { transform: scale(1.06); }
  .hero__media:hover > img { animation-play-state: paused; }
}

/* ---------------------------------------------------------------- botones */

/* un brillo cruza el botón principal al pasar el mouse; se levanta con sombra rosa y se hunde al presionar */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn--primary { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 160ms var(--ep-out), box-shadow 240ms var(--ep-out); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -10px rgb(178 60 103 / .55); }
  html:not([data-motion="off"]) .btn--xl:hover { transform: translateY(-4px); }
  .btn--primary:hover::before { transform: translateX(120%); transition: transform 750ms var(--ep-out); }
  html:not([data-motion="off"]) .btn--secondary:hover { transform: translateY(-2px); }
}
html:not([data-motion="off"]) .btn:active,
html:not([data-motion="off"]) .btn--primary:active { transform: scale(.96); box-shadow: none; transition-duration: 120ms; }

/* el botón principal del hero invita una sola vez, al terminar la entrada: un pulso suave de luz */
.hero .btn--primary::before { animation: ep-brillo 1100ms var(--ep-out) 1.6s 1 both; }
@keyframes ep-brillo { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* ---------------------------------------------------------------- detalles */

/* Miss Ely flota despacio en su marco */
.frame--juegos > img { animation: ep-flota 4.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes ep-flota { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-14px) rotate(1deg); } }

/* tarjetas de pasos, renglones de servicios y colegios entran en cascada (una vez) */
.ep-js .ep-sube { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ep-out), transform 700ms var(--ep-out); transition-delay: calc(var(--i, 0) * 90ms); }
.ep-js .ep-sube.is-in { opacity: 1; transform: none; }
.ep-js .step-num { display: inline-grid; transform: scale(.6); opacity: 0; transition: transform 500ms var(--ep-out), opacity 300ms var(--ep-out); transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
.ep-js .ep-sube.is-in .step-num { transform: none; opacity: 1; }

/* las tarjetas de pasos se levantan al pasar el mouse */
@media (hover: hover) and (pointer: fine) {
  #proceso .card { transition: transform 300ms var(--ep-out), box-shadow 300ms var(--ep-out); }
  #proceso .card.is-in:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -22px rgb(58 53 55 / .45); }
}

/* ---------------------------------------------------------------- movimiento reducido: sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .hero__media > img, .frame--juegos > img, .hero .btn--primary::before { animation: none; }
  .ep-js .ep-foto img { clip-path: none !important; translate: none !important; }
  .ep-js .ep-foto img, .ep-js .ep-sube, .ep-js .step-num { transform: none !important; }
  .ep-js .ep-foto img { transition: opacity 300ms ease; }
  .ep-js .ep-sube, .ep-js .step-num { transition: opacity 300ms ease; }
  .btn--primary::before { display: none; }
  html:not([data-motion="off"]) .btn--primary:hover, #proceso .card.is-in:hover { transform: none; }
}