/* ==========================================================================
   animations.css · EL MOVIMIENTO
   --------------------------------------------------------------------------
   Todo lo que se mueve, cambia de estado con transición o responde al
   cursor vive aquí: revelados, fotografía, atmósfera, navegación,
   hovers y microinteracciones.

   Principio: la página respira. Quaaykop se revela, DM Sans se estabiliza,
   la fotografía da profundidad, el color marca la transición emocional.

   Todo estado oculto depende de html.motion, que pone animations.js solo
   cuando hay JavaScript y la persona no pidió movimiento reducido. Sin eso,
   el sitio se ve completo y quieto.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens de movimiento
   Para cambiar la velocidad o la distancia de todo el sitio, se edita aquí.
   animations.js lee --motion-stagger y --motion-parallax desde este bloque.
   -------------------------------------------------------------------------- */
:root {
  --motion-duration-text:       800ms;    /* párrafos y bloques en DM Sans */
  --motion-duration-reveal:     1500ms;   /* máscara de los titulares en Quaaykop */
  --motion-duration-image:      1200ms;   /* entrada de fotografías */
  --motion-duration-atmosphere: 1300ms;   /* cambio de color de fondo entre secciones */
  --motion-duration-nav:        600ms;    /* transformación de la navegación */
  --motion-duration-hover:      250ms;    /* botones y enlaces */
  --motion-duration-state:      300ms;    /* abrir menú, mostrar mensaje de éxito */

  --motion-distance-text:  20px;          /* recorrido vertical del texto */
  --motion-scale-image:    1.03;          /* escala inicial de las fotos */
  --motion-arrow-shift:    4px;           /* desplazamiento de la flecha en hover */
  --motion-stagger:        160;           /* ms entre elementos que entran juntos */
  --motion-parallax:       20;            /* px máximos de parallax en fotos marcadas */

  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-reveal:     cubic-bezier(0.33, 0, 0.15, 1);
  --ease-atmosphere: cubic-bezier(0.45, 0, 0.25, 1);
}


/* --------------------------------------------------------------------------
   2. Texto: fade con recorrido corto, siempre hacia arriba
   -------------------------------------------------------------------------- */
html.motion .reveal { opacity: 0; transform: translateY(var(--motion-distance-text)); }
html.motion .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration-text) ease-out,
    transform var(--motion-duration-text) ease-out;
}


/* --------------------------------------------------------------------------
   3. Titulares en Quaaykop: revelado con máscara
   El texto no viaja: una máscara se retira de arriba abajo.
   animations.js envuelve el contenido en .reveal-mask__inner; se recorta
   esa capa y se observa el contenedor, que siempre mide completo.
   -------------------------------------------------------------------------- */
.reveal-mask__inner { display: block; padding: 0 0.1em 0.16em 0; margin: 0 -0.1em -0.16em 0; }
html.motion .reveal-mask .reveal-mask__inner { clip-path: inset(0 0 100% 0); opacity: 0; }
html.motion .reveal-mask.is-visible .reveal-mask__inner {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition:
    clip-path var(--motion-duration-reveal) var(--ease-reveal),
    opacity calc(var(--motion-duration-reveal) * 0.66) ease-out;
  transition-delay: inherit;
}


/* --------------------------------------------------------------------------
   4. Fotografía: entra despacio, de 1.03 a 1
   El parallax usa la propiedad translate y la entrada usa scale,
   así no se pisan entre sí.
   -------------------------------------------------------------------------- */
.image-block > img { translate: 0 var(--parallax-y, 0px); }
html.motion .image-block.reveal-image { opacity: 0; }
html.motion .image-block.reveal-image > img { scale: var(--motion-scale-image); }
html.motion .image-block.reveal-image.is-visible { opacity: 1; transition: opacity var(--motion-duration-image) ease-out; }
html.motion .image-block.reveal-image.is-visible > img { scale: 1; transition: scale var(--motion-duration-image) var(--ease-out); }


/* --------------------------------------------------------------------------
   5. Frase central: la sección es alta y la frase se queda quieta
   mientras se atraviesa. scroll, pausa, reflexión, continuación.
   -------------------------------------------------------------------------- */
.pause__stick { display: flex; align-items: center; padding-block: var(--space-2xl); }
.pause__stick > .container { width: 100%; }
html.motion .pause__track { height: 175svh; }
html.motion .pause__stick { position: sticky; top: 0; height: 100svh; padding-block: 0; }


/* --------------------------------------------------------------------------
   6. Atmósfera: el color vive en el body y cambia despacio.
   Las secciones se vuelven transparentes y conservan su tinta.
   -------------------------------------------------------------------------- */
body { transition: background-color var(--motion-duration-atmosphere) var(--ease-atmosphere); }
html.atmosphere main > :is(section, div, header, article) { background-color: transparent !important; }


/* --------------------------------------------------------------------------
   7. Navegación: espaciosa al inicio; discreta y translúcida al bajar
   -------------------------------------------------------------------------- */
.site-header {
  --header-rgb: var(--rgb-ivory);
  background-color: rgba(var(--header-rgb), 0);
  transition:
    background-color var(--motion-duration-nav) var(--ease-out),
    border-color var(--motion-duration-nav) var(--ease-out);
}
.site-header.is-scrolled {
  background-color: rgba(var(--header-rgb), 0.82);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: rgba(var(--rgb-taupe), 0.55);
}
.site-header.is-on-dark.is-scrolled { border-bottom-color: rgba(var(--rgb-ivory), 0.12); }
.site-header__inner { transition: padding var(--motion-duration-nav) var(--ease-out); }
.site-header :is(.brand, .nav-link, .nav-toggle) { transition: color var(--motion-duration-nav) var(--ease-out), border-color var(--motion-duration-hover) ease-out; }

@media (max-width: 900px) {
  .site-nav { transition: max-height 450ms var(--ease-out), padding 450ms var(--ease-out), visibility 0s linear 450ms; }
  .site-nav.is-open { transition: max-height 450ms var(--ease-out), padding 450ms var(--ease-out), visibility 0s; }
}


/* --------------------------------------------------------------------------
   8. Hover y microinteracciones
   Discretas: 250ms, sin rebotes, sin escalas, sin sombras.
   -------------------------------------------------------------------------- */
.nav-link:hover { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }
.site-header.is-on-dark .nav-link:hover { color: var(--color-on-dark); border-bottom-color: var(--color-accent); }

.button { transition: background-color var(--motion-duration-hover) ease-out, border-color var(--motion-duration-hover) ease-out, color var(--motion-duration-hover) ease-out; }
.button__arrow { transition: transform var(--motion-duration-hover) ease-out; }
.button:hover .button__arrow { transform: translateX(var(--motion-arrow-shift)); }
.button-primary:hover { background-color: var(--color-cta-hover); border-color: var(--color-cta-hover); color: var(--color-cta-text); }
.button-secondary:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.section--dark .button-primary:hover, .section--accent .button-primary:hover { background-color: var(--color-cta-hover); border-color: var(--color-cta-hover); color: var(--color-cta-text); }
.section--dark .button-secondary:hover, .section--accent .button-secondary:hover { border-color: var(--color-accent); color: var(--color-on-dark); }

.text-link { transition: color var(--motion-duration-hover) ease-out; }
.text-link:hover { color: var(--color-accent-text); }
.section--dark .text-link:hover, .section--accent .text-link:hover { color: var(--color-on-dark-muted); }

:is(.article-card, .path-card, .resource-card:not(.is-soon), .tool-link, .article-nav a) { transition: color var(--motion-duration-hover) ease-out; }
.article-card__title, .path-card__title, .resource-card__title, .article-card__arrow, .path-card__arrow, .tool-link__arrow { transition: color var(--motion-duration-hover) ease-out, transform var(--motion-duration-hover) ease-out; }
.article-card:hover .article-card__title,
.path-card:hover .path-card__title,
a.resource-card:hover .resource-card__title,
.tool-link:hover,
.article-nav a:hover { color: var(--color-cta); }
.article-card:hover .article-card__arrow,
.path-card:hover .path-card__arrow,
.tool-link:hover .tool-link__arrow { transform: translateX(var(--motion-arrow-shift)); }
a.resource-card .resource-card__foot::after { transition: color var(--motion-duration-hover) ease-out, transform var(--motion-duration-hover) ease-out; }
a.resource-card:hover .resource-card__foot::after { color: var(--color-accent-text); transform: translateX(var(--motion-arrow-shift)); }
.section--dark a.resource-card:hover .resource-card__title { color: var(--color-on-dark-muted); }

.footer__links a, .page-bottom-link a, .back-link a { transition: color var(--motion-duration-hover) ease-out; }
.footer__links a:hover, .page-bottom-link a:hover, .back-link a:hover { color: var(--color-accent-text); }

.faq-question { transition: color var(--motion-duration-hover) ease-out; }
.faq-question:hover { color: var(--color-cta); }
.faq-question__icon { transition: transform var(--motion-duration-state) var(--ease-out); }

.dia-btn, .franja-btn { transition: background-color var(--motion-duration-hover) ease-out, border-color var(--motion-duration-hover) ease-out, color var(--motion-duration-hover) ease-out; }
.dia-btn:hover, .franja-btn:hover { border-color: var(--color-cta); }

.input, .select, .textarea, .newsletter__input { transition: border-color var(--motion-duration-hover) ease-out; }
.modal__close { transition: border-color var(--motion-duration-hover) ease-out; }
.modal__close:hover { border-color: var(--color-accent); }


/* --------------------------------------------------------------------------
   9. Cambios de estado
   -------------------------------------------------------------------------- */
/* El formulario se desvanece y aparece el mensaje de éxito */
.state-leaving { opacity: 0; transition: opacity var(--motion-duration-state) ease-out; }
.state-entering { opacity: 0; }
.state-entering.is-visible { opacity: 1; transition: opacity var(--motion-duration-state) ease-out; }

/* El modal aparece con un fundido corto */
.modal.activo { animation: modal-in var(--motion-duration-state) ease-out; }
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }


/* --------------------------------------------------------------------------
   10. Movimiento reducido: todo queda quieto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .image-block > img { translate: none; }
}

/* Botón flotante de WhatsApp: el mismo gesto que los botones principales */
.wa-float { transition: background-color var(--motion-duration-hover) ease-out, transform var(--motion-duration-hover) ease-out; }
.wa-float:hover { background-color: var(--color-accent); transform: translateY(-2px); }