/**
 * CLEANTASTE — WEBSITE-WIDE SCROLL ANIMATION & INTERACTION SYSTEM
 * Premium, fluid, GPU-accelerated micro-interactions and scroll-triggered reveals.
 * Built for high performance, zero CLS (Cumulative Layout Shift), and WCAG accessibility.
 */

/* --------------------------------------------------------------------------
   01. Animation Design Tokens & Keyframes
   -------------------------------------------------------------------------- */
:root {
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --anim-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-fast: 0.2s;
  --anim-normal: 0.55s;
  --anim-slow: 0.85s;
}

/* --------------------------------------------------------------------------
   02. Global Scroll Progress Indicator Bar
   -------------------------------------------------------------------------- */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #15803D 0%, #22C55E 50%, #4ADE80 100%);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.1s linear;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.4);
}

/* --------------------------------------------------------------------------
   03. Base Scroll Reveal Classes (GPU Accelerated)
   -------------------------------------------------------------------------- */
.reveal-fade-up,
.reveal-fade-left,
.reveal-fade-right,
.reveal-scale,
.reveal-fade {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity var(--anim-normal) var(--anim-ease-out),
              transform var(--anim-normal) var(--anim-ease-out);
}

.reveal-fade-up {
  transform: translate3d(0, 24px, 0);
}

.reveal-fade-left {
  transform: translate3d(-24px, 0, 0);
}

.reveal-fade-right {
  transform: translate3d(24px, 0, 0);
}

.reveal-scale {
  transform: scale(0.94);
}

.reveal-fade {
  transform: none;
}

/* Activated State triggered by IntersectionObserver */
.is-revealed,
.is-revealed.reveal-fade-up,
.is-revealed.reveal-fade-left,
.is-revealed.reveal-fade-right,
.is-revealed.reveal-scale,
.is-revealed.reveal-fade {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* --------------------------------------------------------------------------
   04. Staggered Children Grid Animations
   -------------------------------------------------------------------------- */
.stagger-group > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--anim-normal) var(--anim-ease-out),
              transform var(--anim-normal) var(--anim-ease-out);
}

.stagger-group.is-revealed > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Dynamic Stagger Sequence (up to 12 children) */
.stagger-group.is-revealed > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger-group.is-revealed > *:nth-child(2)  { transition-delay: 0.12s; }
.stagger-group.is-revealed > *:nth-child(3)  { transition-delay: 0.19s; }
.stagger-group.is-revealed > *:nth-child(4)  { transition-delay: 0.26s; }
.stagger-group.is-revealed > *:nth-child(5)  { transition-delay: 0.33s; }
.stagger-group.is-revealed > *:nth-child(6)  { transition-delay: 0.40s; }
.stagger-group.is-revealed > *:nth-child(7)  { transition-delay: 0.47s; }
.stagger-group.is-revealed > *:nth-child(8)  { transition-delay: 0.54s; }
.stagger-group.is-revealed > *:nth-child(9)  { transition-delay: 0.61s; }
.stagger-group.is-revealed > *:nth-child(10) { transition-delay: 0.68s; }
.stagger-group.is-revealed > *:nth-child(11) { transition-delay: 0.75s; }
.stagger-group.is-revealed > *:nth-child(12) { transition-delay: 0.82s; }

/* --------------------------------------------------------------------------
   05. Card & Product Micro-Interactions
   -------------------------------------------------------------------------- */
.card-hover-lift,
.product-card,
.feature-card,
.benefit-card,
.tracker-card {
  transition: transform var(--anim-fast) var(--anim-ease-out),
              box-shadow var(--anim-fast) var(--anim-ease-out),
              border-color var(--anim-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .card-hover-lift:hover,
  .product-card:hover,
  .feature-card:hover,
  .benefit-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  }

  /* Product Card Image Zoom */
  .product-card:hover .product-img-wrapper img,
  .product-card:hover img {
    transform: scale(1.04);
  }
}

.product-img-wrapper img,
.product-card img {
  transition: transform 0.4s var(--anim-ease-out);
}

/* --------------------------------------------------------------------------
   06. Button & CTA Micro-Interactions
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-outline,
.btn-sm {
  position: relative;
  transition: transform 0.15s ease,
              box-shadow 0.2s ease,
              background-color 0.2s ease,
              color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .btn-primary:hover {
    transform: translate3d(0, -1.5px, 0);
  }

  .btn:hover .btn-arrow,
  .btn-hover-arrow:hover span[data-arrow] {
    transform: translate3d(4px, 0, 0);
  }
}

.btn:active,
.btn-primary:active {
  transform: translate3d(0, 1px, 0) scale(0.98);
}

.btn-arrow,
span[data-arrow] {
  display: inline-block;
  transition: transform 0.2s var(--anim-ease-out);
}

/* --------------------------------------------------------------------------
   07. Sticky Header Compact Morph on Scroll
   -------------------------------------------------------------------------- */
.main-header {
  transition: padding 0.25s var(--anim-ease-out),
              background 0.25s var(--anim-ease-out),
              box-shadow 0.25s var(--anim-ease-out);
}

.main-header.header-scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

/* --------------------------------------------------------------------------
   08. Hero Floating Keyframe & Gentle Parallax
   -------------------------------------------------------------------------- */
@keyframes floatSubtle {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}

.anim-float {
  animation: floatSubtle 4s ease-in-out infinite;
}

.anim-float-delayed {
  animation: floatSubtle 4.5s ease-in-out 1.5s infinite;
}

/* Gentle pulse glow for badges */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

.anim-pulse-badge {
  animation: pulseGlow 2.5s infinite;
}

/* --------------------------------------------------------------------------
   09. FAQ Accordion Smooth Expansion
   -------------------------------------------------------------------------- */
.faq-accordion-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-accordion-icon {
  transition: transform 0.3s var(--anim-spring);
  display: inline-flex;
}

.faq-accordion-item.active .faq-accordion-icon,
details[open] summary .faq-accordion-icon {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   10. Mobile Responsiveness & Touch Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Smaller translation distances on small screens to prevent scroll-drag */
  .reveal-fade-up {
    transform: translate3d(0, 14px, 0);
  }

  .reveal-fade-left {
    transform: translate3d(-14px, 0, 0);
  }

  .reveal-fade-right {
    transform: translate3d(14px, 0, 0);
  }

  .card-hover-lift:hover,
  .product-card:hover {
    transform: none; /* Disable hover lifts on mobile touch devices */
  }

  .scroll-progress-bar {
    height: 2.5px;
  }
}

/* --------------------------------------------------------------------------
   11. Reduced Motion Accessibility (WCAG 2.1 AAA)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-fade-up,
  .reveal-fade-left,
  .reveal-fade-right,
  .reveal-scale,
  .reveal-fade,
  .stagger-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scroll-progress-bar {
    display: none !important;
  }

  .anim-float,
  .anim-float-delayed,
  .anim-pulse-badge {
    animation: none !important;
  }
}