/**
 * Animations — Livine Holistic Wellness
 * All keyframes, animation utilities, and scroll-triggered animation classes.
 */

/* -------------------------------------------------------
   KEYFRAMES
------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%                      { transform: translateY(-12px); }
  60%                      { transform: translateY(-6px); }
}

/* Hero mouse scroll indicator */
@keyframes scrollWheel {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* -------------------------------------------------------
   PAGE-LOAD FADE-IN
   .fade-in elements are visible by default — no opacity:0.
   Transition is kept so if .visible is ever added via JS
   in future, it will animate smoothly.
   NOTE: existing main.js does NOT trigger .fade-in elements,
   so we must NOT hide them by default.
------------------------------------------------------- */
.fade-in {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.delay-1 { transition-delay: 0.2s; }
.fade-in.delay-2 { transition-delay: 0.4s; }
.fade-in.delay-3 { transition-delay: 0.6s; }

/* -------------------------------------------------------
   SCROLL-TRIGGERED ANIMATIONS
   Elements with .scroll-animate start hidden; main.js adds
   .animated (not .visible) when they enter the viewport.
------------------------------------------------------- */
.scroll-animate {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate.slide-left  { transform: translateX(-30px); }
.scroll-animate.slide-right { transform: translateX(30px); }
.scroll-animate.scale        { transform: scale(0.9); }

.scroll-animate.slide-left.animated,
.scroll-animate.slide-right.animated,
.scroll-animate.scale.animated {
  transform: translateX(0) scale(1);
}

/* Stagger delays for grid children */
.scroll-animate.delay-1 { transition-delay: 0.1s; }
.scroll-animate.delay-2 { transition-delay: 0.2s; }
.scroll-animate.delay-3 { transition-delay: 0.3s; }
.scroll-animate.delay-4 { transition-delay: 0.4s; }

/* -------------------------------------------------------
   UTILITY ANIMATION CLASSES
   Apply directly to elements for immediate animation.
------------------------------------------------------- */
.anim-fade-in    { animation: fadeIn    0.6s ease forwards; }
.anim-fade-up    { animation: fadeInUp  0.6s ease forwards; }
.anim-scale-in   { animation: scaleIn   0.4s ease forwards; }
.anim-pulse      { animation: pulse     2s   ease infinite; }
.anim-bounce     { animation: bounce    1.5s ease infinite; }
.anim-spin       { animation: spin      1s   linear infinite; }

/* Popup entrance */
.scale-in {
  animation: scaleIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* -------------------------------------------------------
   HERO SCROLL INDICATOR
------------------------------------------------------- */
.mouse {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  margin: 0 auto 8px;
  position: relative;
}

.wheel {
  width: 4px;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 1.5s ease infinite;
}

/* -------------------------------------------------------
   REDUCED MOTION — respect user preferences
------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  .fade-in,
  .scroll-animate,
  .scale-in {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}