/*
Theme Name:   Tabbi Child
Description:  Tema hijo para la web de Tabbi (Twenty Twenty-Five)
Author:       Hostiger
Template:     twentytwentyfive
Version:      1.0.0
*/


/* ============================= */
/* ANIMACIONES GLOBALES TABBI */
/* ============================= */

.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.js-reveal.visible {
  animation: fadeUpStagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js-stagger > * {
  opacity: 0;
  transform: translateY(35px);
  will-change: opacity, transform;
}

.js-stagger.visible > * {
  animation: fadeUpReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--stagger-index, 0) * 90ms);
}

@keyframes fadeUpStagger {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes fadeUpReveal {
  0% {
    opacity: 0;
    transform: translateY(35px);
  }

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

/* ============================= */
/* FADE IN SUAVE SECCIÓN COMPLETA */
/* ============================= */

.js-section-fade {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}

.js-section-fade.visible {
  animation: sectionFadeIn 1.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sectionFadeIn {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .js-section-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}