/* ==========================================================================
   BASURTO FERMIN CAFE -- Animaciones
   Lentas, discretas, elegantes. Nada de rebotes ni efectos 3D.
   ========================================================================== */

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-elegant), transform 900ms var(--ease-elegant);
  will-change: opacity, transform;
}
[data-animate].is-inview {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-delay="1"] { transition-delay: 90ms; }
[data-animate-delay="2"] { transition-delay: 180ms; }
[data-animate-delay="3"] { transition-delay: 270ms; }
[data-animate-delay="4"] { transition-delay: 360ms; }

[data-animate="fade"] { transform: none; }

[data-animate="zoom"] {
  transform: scale(0.96);
}
[data-animate="zoom"].is-inview { transform: scale(1); }

/* Parallax ligero (aplicado via JS con transform translateY calculado) */
[data-parallax] { will-change: transform; }

/* Titulos: aparicion progresiva por palabra */
.reveal-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 700ms var(--ease-elegant), transform 700ms var(--ease-elegant);
}
.reveal-title.is-inview span {
  opacity: 1;
  transform: translateY(0);
}

/* Particulas de polvo/grano solo en el hero */
.hero__particles {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__particles span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(244,240,231,0.35);
  animation: drift 18s linear infinite;
}
@keyframes drift {
  0% { transform: translate3d(0, 100%, 0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.4; }
  100% { transform: translate3d(4%, -110%, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
  .reveal-title span { opacity: 1; transform: none; }
  .hero__particles { display: none; }
  .hero__media .media-frame,
  .hero__photo { animation: none; }
}