/* ==========================================================================
   FlexGold X-Cell — animations.css
   Scroll-triggered entry animations + hover effects
   Respects prefers-reduced-motion (base styles have the disable rule)
   ========================================================================== */

/* ==========================================================================
   1. BASE ANIMATION STATES (elements start hidden, JS adds .is-visible)
   ========================================================================== */

/* Fade + slide up (default for most elements) */
.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade only */
.anim-fade {
  opacity: 0;
  transition: opacity 0.65s ease;
}
.anim-fade.is-visible {
  opacity: 1;
}

/* Slide in from left */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from right */
.anim-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up (for product images) */
.anim-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anim-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delay utilities */
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.45s; }
.anim-delay-5 { transition-delay: 0.6s; }

/* ==========================================================================
   2. HERO ANIMATIONS — triggered immediately on load
   ========================================================================== */

/* Hero elements animate in on page load (no scroll needed) */
.s-hero__logo,
.s-hero__headline,
.s-hero__subtext,
.s-hero__cta,
.s-hero__product {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.s-hero--loaded .s-hero__logo    { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.s-hero--loaded .s-hero__headline { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.s-hero--loaded .s-hero__subtext  { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.s-hero--loaded .s-hero__cta      { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.s-hero--loaded .s-hero__product  { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }

/* ==========================================================================
   3. HOW IT WORKS ANIMATIONS
   ========================================================================== */

/* Title */
.s-how__title.anim-fade-up { /* inherits base */ }

/* Each step card */
.s-how__step {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.s-how__step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Step 1 → 2 → 3 stagger */
.s-how__step[data-step="1"].is-visible { transition-delay: 0s; }
.s-how__step[data-step="2"].is-visible { transition-delay: 0.15s; }
.s-how__step[data-step="3"].is-visible { transition-delay: 0.3s; }

/* Floating products */
.s-how__float--alarm,
.s-how__float--watches {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.s-how__float--alarm.is-visible  { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.s-how__float--watches.is-visible { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }

.s-how__float--p1,
.s-how__float--p2,
.s-how__float--p3 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.s-how__float--p2.is-visible { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.s-how__float--p1.is-visible  { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.s-how__float--p3.is-visible  { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }

/* ==========================================================================
   4. CATALOG SECTION ANIMATIONS
   ========================================================================== */

.s-catalog__products {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.s-catalog__products.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.s-catalog__smartwatch {
  opacity: 0;
  transform: translateX(30px) scale(0.9);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.s-catalog__smartwatch.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.2s;
}

.s-catalog__title,
.s-catalog__subtitle,
.s-catalog__body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.s-catalog__title.is-visible  { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.s-catalog__subtitle.is-visible { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.s-catalog__body.is-visible   { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

.s-catalog__cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.s-catalog__cta.is-visible { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

/* ==========================================================================
   5. CTA BANNER + FORM ANIMATIONS
   ========================================================================== */

.s-cta-banner__box {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.s-cta-banner__box.is-visible { opacity: 1; transform: scale(1); }

.s-cta-banner__prod-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.s-cta-banner__prod-left.is-visible { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }

.s-cta-banner__prod-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.s-cta-banner__prod-right.is-visible { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }

.s-form__box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.s-form__box.is-visible { opacity: 1; transform: translateY(0); }

.s-form__deco--fone {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.s-form__deco--fone.is-visible { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }

.s-form__deco--mouse {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.s-form__deco--mouse.is-visible { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }

/* ==========================================================================
   6. BUTTON HOVER GLOW PULSE
   ========================================================================== */

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0px 0px 25.28px 12.64px rgba(130, 250, 8, 0.3), inset 0px -5.056px 5.056px 0px rgba(0, 0, 0, 0.4); }
  50%       { box-shadow: 0px 0px 35px 18px rgba(130, 250, 8, 0.5), inset 0px -5.056px 5.056px 0px rgba(0, 0, 0, 0.4); }
}

.btn--hero:hover,
.btn--catalog:hover {
  animation: glow-pulse 1.5s ease-in-out infinite;
}

/* ==========================================================================
   7. STEP CIRCLE HOVER
   ========================================================================== */

.s-how__circle {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s-how__step:hover .s-how__circle {
  transform: scale(1.06);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15);
}
.s-how__step:hover .s-how__circle--accent {
  box-shadow: 0 0 0 8px rgba(130, 250, 8, 0.2);
}