/* ============================================================
   animations.css — estados iniciales, revelados y límites
   El contenido SIEMPRE es visible si JavaScript no carga:
   los estados ocultos sólo se aplican con .js-anim en <html>.
   ============================================================ */

/* Cortina de apertura.
   Se desvanece sola por CSS: si el JavaScript falla, nunca queda
   una capa bloqueando la página. */
@keyframes veil-out {
  to { opacity: 0; visibility: hidden; }
}
.intro-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--ice-50);
  pointer-events: none;
  opacity: 1;
  animation: veil-out .55s var(--ease) .55s forwards;
}
.intro-veil.is-gone { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease); }

/* --- Estados iniciales (sólo con JS activo) --- */
.js-anim .reveal { opacity: 0; transform: translateY(24px); }
.js-anim .reveal-up { opacity: 0; transform: translateY(40px) scale(.985); }
.js-anim .reveal-line > span { display: block; transform: translateY(110%); }
.js-anim .reveal-line { overflow: hidden; }
.js-anim .reveal-mask { clip-path: inset(0 100% 0 0 round var(--r-xl)); }
.js-anim .reveal-photo { opacity: 0; transform: scale(1.04); }

/* Apertura del hero: dos máscaras laterales que abren desde el centro */
.js-anim .stage-reveal { clip-path: inset(0 32% 0 32% round var(--r-xl)); }
.stage-reveal.is-open {
  clip-path: inset(0 0 0 0 round var(--r-xl));
  transition: clip-path 1s var(--ease);
}

/* --- Estados finales aplicados por IntersectionObserver --- */
.reveal.is-in,
.reveal-up.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal-line.is-in > span {
  transform: none;
  transition: transform var(--dur-slow) var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal-mask.is-in {
  clip-path: inset(0 0 0 0 round var(--r-xl));
  transition: clip-path 1s var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal-photo.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--delay, 0s);
}

/* Escalonado en grupos de tarjetas */
.stagger > * { --delay: 0s; }
.stagger > *:nth-child(2) { --delay: .07s; }
.stagger > *:nth-child(3) { --delay: .14s; }
.stagger > *:nth-child(4) { --delay: .21s; }
.stagger > *:nth-child(5) { --delay: .28s; }
.stagger > *:nth-child(6) { --delay: .35s; }
.stagger > *:nth-child(7) { --delay: .42s; }

/* Flotación lenta de etiquetas ancladas a fotografía */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.tag-float { animation: float-soft 6.5s var(--ease-soft) infinite; }
.tag-float--slow { animation-duration: 8.5s; animation-delay: -2s; }
.tag-float--slower { animation-duration: 10s; animation-delay: -4s; }

/* Parallax muy sutil (lo controla animations.js) */
.parallax { will-change: transform; }

/* Contador de métricas */
.count { font-variant-numeric: tabular-nums; }

/* ============================================================
   Reduced motion: sin parallax, sin contadores, sin flotación
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro-veil { display: none; }
  .js-anim .reveal,
  .js-anim .reveal-up,
  .js-anim .reveal-photo { opacity: 1 !important; transform: none !important; }
  .js-anim .reveal-line > span { transform: none !important; }
  .js-anim .reveal-mask,
  .js-anim .stage-reveal { clip-path: none !important; }
  .tag-float { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}