/* ==========================================================================
   FUNDESET: animations.css
   Estados de animación, keyframes, fallbacks reduced-motion / sin GSAP.
   Regla: todo movimiento tiene motivo (jerarquía, narrativa, feedback o estado).
   ========================================================================== */

/* Molinillo del footer gira lento siempre (fallback sin GSAP) */
@keyframes girar {
  to { transform: rotate(360deg); }
}
.molinillo__aspas { transform-origin: 50px 50px; }
.molinillo--gira .molinillo__aspas { animation: girar 14s linear infinite; }

/* Molinillo del nav: media vuelta al pasar el cursor (solo cuando GSAP no lo mueve) */
.no-gsap .nav__brand .molinillo__aspas { transition: transform 0.6s ease; }
.no-gsap .nav__brand:hover .molinillo__aspas { transform: rotate(180deg); }

/* Cuando GSAP toma el control del molinillo, se apaga el keyframe CSS */
.molinillo--sopla { animation: none !important; }

/* Aparición suave (la activa IntersectionObserver). Los elementos con
   transform de reposo lo declaran con --despl / --rot para componer. */
.revelar {
  opacity: 0;
  transform: translateY(calc(var(--despl, 0px) + 24px)) rotate(var(--rot, 0deg));
}
.revelar.visible {
  opacity: 1;
  transform: translateY(var(--despl, 0px)) rotate(var(--rot, 0deg));
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sello: el tag de proyecto cae cuando la foto termina de revelarse */
.historia__tag[data-revelar="sello"] { opacity: 0; transform: scale(1.6); }
.historia__tag[data-revelar="sello"].visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.22s ease, transform 0.38s cubic-bezier(0.2, 1.9, 0.4, 1);
}

/* Polaroids del equipo: el retrato se revela como en el cuarto oscuro */
.persona.revelar .persona__marco img { filter: sepia(0.4) blur(6px) brightness(1.1); }
.persona.revelar.visible .persona__marco img { filter: none; transition: filter 1.4s ease 0.2s; }

/* Aliados: entrada escalonada corta */
.aliado.revelar { transform: translateY(14px); }
.aliado.revelar.visible { transform: none; }
.aliado.revelar.visible:nth-child(2) { transition-delay: 0.06s; }
.aliado.revelar.visible:nth-child(3) { transition-delay: 0.12s; }
.aliado.revelar.visible:nth-child(4) { transition-delay: 0.18s; }
.aliado.revelar.visible:nth-child(5) { transition-delay: 0.24s; }
.aliado.revelar.visible:nth-child(6) { transition-delay: 0.30s; }

/* Misión/Visión: las hojas se despegan del cuaderno, levemente */
.hoja.revelar {
  transform: rotateX(-16deg) translateY(20px);
  transform-origin: top center;
}
.hoja.revelar.visible {
  transform: rotateX(0deg);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.hoja:nth-child(2).revelar.visible { transition-delay: 0.12s; }

/* Palabras animadas por GSAP (título del hero y cita del equipo) */
.palabra { display: inline-block; }

/* Anotación de error de la carta: sacudida corta al aparecer */
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-2px); }
  70%      { transform: translateX(2px); }
}
.carta__error:not([hidden]) { animation: sacudir 0.3s ease; }

/* ==========================================================================
   FALLBACKS
   ========================================================================== */

/* Sin GSAP (archivo no cargado): estados finales */
.no-gsap .draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.no-gsap .transformacion__foto { clip-path: none !important; }
.no-gsap .transformacion__boceto { clip-path: none !important; }
.no-gsap .transformacion__lapiz { display: none !important; }
.no-gsap .revelar,
.no-gsap .historia__tag[data-revelar="sello"] { opacity: 1; transform: none; }
.no-gsap .s-hero__fondo { clip-path: none !important; opacity: 1 !important; }

/* Usuario prefiere menos movimiento: todo estático en estado final */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .transformacion__foto, .transformacion__boceto, .s-hero__fondo { clip-path: none !important; }
  .transformacion__lapiz { display: none !important; }
  .revelar, .historia__tag[data-revelar="sello"] { opacity: 1; transform: none; }
  .persona.revelar .persona__marco img { filter: none; }
  .fill-luego { fill-opacity: 1; }
}