/* ==========================================================================
   VERDE STUDIO — Resilient Scroll Reveals & Micro-Interactions
   ========================================================================== */

/* 1. Base Fallback: Elements are fully visible by default */
.reveal-fade-up,
.reveal-slide-left,
.reveal-slide-right,
.reveal-scale {
  opacity: 1;
  transform: none;
}

/* 2. When JavaScript animation engine is confirmed ready, enable initial hidden state */
html.js-animation-ready .reveal-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.js-animation-ready .reveal-slide-left {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.js-animation-ready .reveal-slide-right {
  opacity: 0;
  transform: translateX(35px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.js-animation-ready .reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* 3. When triggered into viewport */
html.js-animation-ready .reveal-fade-up.is-visible,
html.js-animation-ready .reveal-slide-left.is-visible,
html.js-animation-ready .reveal-slide-right.is-visible,
html.js-animation-ready .reveal-scale.is-visible {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Stagger Delays */
.reveal-delay-1 { transition-delay: 0.1s !important; }
.reveal-delay-2 { transition-delay: 0.2s !important; }
.reveal-delay-3 { transition-delay: 0.3s !important; }
.reveal-delay-4 { transition-delay: 0.4s !important; }
.reveal-delay-5 { transition-delay: 0.5s !important; }

/* Keyframe Animations */
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

@keyframes floatElement {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes shimmerLine {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.1% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.animate-float {
  animation: floatElement 5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 6s ease-in-out infinite;
}

.hero-halo {
  animation: slowSpin 60s linear infinite;
}

/* Interactive Micro-Interactions */
.hover-lift {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-arrow {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-trigger:hover .hover-arrow {
  transform: translateX(6px);
}

/* Underline Animation on Links */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--color-neon-lime);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Pop effect on Cart and Wishlist badges */
@keyframes badgePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.badge-pop {
  animation: badgePop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accessibility / Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .reveal-fade-up,
  .reveal-slide-left,
  .reveal-slide-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}