/* =========================
   ANIMATIONS
   - Solo animación visual
   - NO layout
   - NO lógica
   - NO anticipa JS
   ========================= */

/* =========================
   BLOCK TRANSITIONS
   - Transición suave entre pantallas
   ========================= */

.block {
  transition: opacity var(--transition-slow);
}

/* =========================
   CONTENT FADE
   - Entrada editorial del contenido
   - Se activa solo en .block.active
   ========================= */

.block .content {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium);
}

.block.active .content {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   FLOATING OBJECTS
   - Animación decorativa genérica
   - NO ligada a Collection
   - NO ligada a productos específicos
   ========================= */

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Clase utilitaria opcional
   (solo se usa cuando exista contenido flotante real) */
.is-floating {
  animation: float 12s ease-in-out infinite;
}