/* ==========================================================================
   CET Juntos · Microanimaciones e interacciones
   Todo el movimiento "extra" del sitio vive acá. Cada efecto cumple una
   función de UX (orientar, confirmar una acción o guiar la lectura).
   Con "reducir movimiento" activado, todo queda estático (ver final).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barra de progreso de lectura (arriba de todo)
      Orienta: muestra cuánto falta de la página. CSS puro (scroll-driven).
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    transform-origin: left center;
    animation: reading-progress linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
}

@keyframes reading-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   2. Entrada del hero: los textos aparecen en secuencia y la foto hace un
      acercamiento lento. Guía la lectura: título → bajada → acciones.
   -------------------------------------------------------------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}

@keyframes slow-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@keyframes underline-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Después del acercamiento inicial, la foto "respira" en bucle (casi imperceptible) */
@keyframes hero-drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.04) translate(-1%, -0.5%); }
}

.hero-bg {
  animation:
    slow-zoom 2.4s var(--ease-out) both,
    hero-drift 22s 2.4s ease-in-out infinite alternate;
}

/* Brillo que cruza "Pedí una entrevista" cada unos segundos: atrae la mirada al CTA */
@keyframes btn-shine {
  0% { transform: translateX(-120%) skewX(-20deg); }
  18%, 100% { transform: translateX(260%) skewX(-20deg); }
}

.hero-actions .btn-primary {
  position: relative;
  overflow: hidden;
}

.hero-actions .btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-white), 0.35), transparent);
  transform: translateX(-120%) skewX(-20deg);
  animation: btn-shine 7s 3s ease-in-out infinite;
  pointer-events: none;
}

/* Avatares que rotan (lo maneja main.js con .is-leaving / .is-entering) */
/* Entra deslizándose desde detrás de la flor */
@keyframes avatar-in {
  from { opacity: 0; transform: translateX(1.75rem) scale(0.85); }
  to { opacity: 1; transform: none; }
}

.hero-proof-avatars img {
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.hero-proof-avatars img.is-leaving {
  opacity: 0;
  transform: translateX(-0.75rem) scale(0.85);
}

.hero-proof-avatars img.is-entering {
  animation: avatar-in 0.55s var(--ease-out);
}

.hero-content > * {
  animation: rise-in 0.8s var(--ease-out) both;
}

.hero-content > :nth-child(1) { animation-delay: 0.1s; }
.hero-content > :nth-child(2) { animation-delay: 0.2s; }
.hero-content > :nth-child(3) { animation-delay: 0.35s; }
.hero-content > :nth-child(4) { animation-delay: 0.5s; }
.hero-content > :nth-child(5) { animation-delay: 0.65s; }

/* El subrayado de "solo." se dibuja después del título */
.text-highlight::after {
  animation: underline-draw 0.7s 0.9s var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   2b. Manifiesto: cada palabra pasa de tenue a plena a medida que se lee.
       main.js envuelve las palabras en .manifesto-word y numera su posición
       (--p, de 0 a 1). Usa la línea de tiempo --manifesto (manifiesto.css).
   -------------------------------------------------------------------------- */
@keyframes word-fill {
  from { opacity: 0.16; }
  to { opacity: 1; }
}

@supports (animation-timeline: view()) {
  .manifesto-word {
    animation: word-fill linear both;
    animation-timeline: --manifesto;
    animation-range: cover calc(12% + var(--p) * 36%) cover calc(16% + var(--p) * 36%);
  }
}

/* --------------------------------------------------------------------------
   2c. Fotos que aparecen: fundido lento y la imagen se "asienta" (de apenas
       ampliada a su tamaño). [data-reveal], lo marca main.js con .is-visible.
       Usa la propiedad scale (no transform) para no pisar el zoom del hover.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 1.2s 0.1s var(--ease-out);
}

[data-reveal] img,
img[data-reveal] {
  scale: 1.06;
  transition: scale 1.8s 0.1s var(--ease-out), opacity 1.2s 0.1s var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
}

[data-reveal].is-visible img,
img[data-reveal].is-visible {
  scale: 1;
}

/* --------------------------------------------------------------------------
   2d. Parallax de la foto de fondo de Admisión: la foto se desplaza más
       despacio que la página mientras la sección cruza la pantalla.
       CSS puro (scroll-driven); sin soporte, queda fija.
   -------------------------------------------------------------------------- */
@keyframes bg-parallax {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}

@supports (animation-timeline: view()) {
  .admission-bg img {
    animation: bg-parallax linear both;
    animation-timeline: --admission;
    animation-range: cover;
  }
}

/* --------------------------------------------------------------------------
   3. Pretítulos: la línea roja se "dibuja" al entrar la sección
   -------------------------------------------------------------------------- */
.fade-in-up .eyebrow-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s 0.25s var(--ease-out);
}

.fade-in-up .eyebrow--center .eyebrow-line:first-child {
  transform-origin: right center;
}

.fade-in-up.is-visible .eyebrow-line {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   4. Listas que entran escalonadas ([data-stagger])
      main.js numera cada hijo en --i y marca el contenedor con .is-visible.
      Ayuda a leer ítem por ítem en vez de un bloque de golpe.
   -------------------------------------------------------------------------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Feedback de botones y enlaces
   -------------------------------------------------------------------------- */
/* Presionar: el botón se hunde apenas (confirma el clic) */
.btn:active,
.moments-btn:active {
  transform: scale(0.97);
}

/* La flecha de los botones principales avanza: "esto te lleva a algún lado" */
.btn-primary .icon {
  transition: transform var(--transition-fast);
}

.btn-primary:hover .icon {
  transform: translateX(3px);
}

/* Tarjetas del carrusel: se elevan al pasar el mouse */
.moment {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

@media (hover: hover) {
  .moment:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.75rem 2.5rem -1.5rem rgba(var(--rgb-carbon), 0.25);
  }
}

/* Filas de información y contacto: el ícono "salta" levemente */
.info-row-icon,
.contact-icon {
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.info-row:hover .info-row-icon,
.contact-item:hover .contact-icon {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   5b. Enlace "Consultá por…" de las tarjetas de Qué hacemos
       Aparece después del contenido de la tarjeta y la flecha "empuja" dos
       veces: señala que hay una acción disponible al final de la lectura.
   -------------------------------------------------------------------------- */
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.service-card .service-card-link {
  opacity: 0;
  transform: translateX(-0.75rem);
  transition: opacity 0.6s 0.7s var(--ease-out), transform 0.6s 0.7s var(--ease-out);
}

.service-card.is-visible .service-card-link {
  opacity: 1;
  transform: none;
}

.service-card.is-visible .service-card-link-arrow {
  animation: arrow-nudge 0.7s 1.5s var(--ease-out) 2;
}

.service-card .service-card-link:hover .service-card-link-arrow {
  animation: none;
}

/* --------------------------------------------------------------------------
   6. Preguntas frecuentes: la respuesta aparece con un fundido suave
   -------------------------------------------------------------------------- */
@keyframes answer-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to { opacity: 1; transform: none; }
}

.faq-item[open] .faq-answer {
  animation: answer-in 0.35s var(--ease-out);
}

/* --------------------------------------------------------------------------
   7. WhatsApp flotante: dos pulsos suaves unos segundos después de cargar,
      para que se note que el canal está disponible (no se repite).
   -------------------------------------------------------------------------- */
@keyframes ping {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(1.7); opacity: 0; }
}

.floating-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background-color: var(--color-whatsapp);
  opacity: 0;
  animation: ping 1.4s 4s var(--ease-out) 2;
  pointer-events: none;
}

/* Transición entre páginas: la nueva entra subiendo apenas */
@keyframes page-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

::view-transition-new(root) {
  animation-name: page-in;
}

/* --------------------------------------------------------------------------
   8. Onda sutil al hacer clic en elementos interactivos (la crea main.js)
   -------------------------------------------------------------------------- */
@keyframes click-ripple {
  from { opacity: 0.6; transform: translate(-50%, -50%) scale(0.2); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.click-ripple {
  position: fixed;
  z-index: 2000;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background-color: rgba(var(--rgb-joy-red), 0.08);
  pointer-events: none;
  animation: click-ripple 0.55s var(--ease-out) forwards;
}

/* --------------------------------------------------------------------------
   Reducir movimiento: todo estático y visible
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .click-ripple,
  .floating-whatsapp::before {
    display: none;
  }

  .hero-bg,
  .hero-actions .btn-primary::after,
  .hero-content > *,
  .text-highlight::after,
  .service-card-link-arrow,
  .manifesto-word,
  .brand-seal-ring,
  .admission-bg img {
    animation: none;
  }

  [data-stagger] > *,
  .service-card .service-card-link,
  .fade-in-up .eyebrow-line {
    opacity: 1;
    transform: none;
  }

  [data-reveal],
  [data-reveal] img,
  img[data-reveal] {
    opacity: 1;
    scale: 1;
  }
}