/* ==========================================================================
   SCROLL ANIMATIONS — site-wide reveal effects
   Layered on top of styles.css base reveal
   ========================================================================== */

/* Helper rows on products.html: copy + visual slide in from sides */
.helper-row.reveal .helper-copy,
.helper-row.reveal .helper-visual {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.helper-row.reveal .helper-copy { transform: translateX(-40px); }
.helper-row.reveal .helper-visual { transform: translateX(40px); transition-delay: .15s; }
.helper-row-alt.reveal .helper-copy { transform: translateX(40px); }
.helper-row-alt.reveal .helper-visual { transform: translateX(-40px); }
.helper-row.reveal.in .helper-copy,
.helper-row.reveal.in .helper-visual {
  opacity: 1;
  transform: translateX(0);
}

/* Brand grid: copy left, products right */
.brand-grid.in > .brand-copy { animation: slideRight .9s cubic-bezier(.2,.7,.2,1) both; }
.brand-grid.in > .brand-products { animation: slideLeft .9s cubic-bezier(.2,.7,.2,1) .12s both; }
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Extend the existing reveal system with directional + scale variants.
   Base .reveal already exists in styles.css (opacity 0, translateY 24px).
   These variants override the initial transform. */

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal-right.in { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }

.reveal-blur {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
  transition: opacity .9s ease-out, filter .9s ease-out, transform .9s ease-out;
}
.reveal-blur.in { opacity: 1; filter: blur(0); transform: translateY(0); }

.reveal-rise {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal-rise.in { opacity: 1; transform: translateY(0); }

/* Stagger delays — extra steps */
.reveal.delay-5,
.reveal-left.delay-5,
.reveal-right.delay-5,
.reveal-scale.delay-5,
.reveal-blur.delay-5,
.reveal-rise.delay-5 { transition-delay: .40s; }
.reveal.delay-6,
.reveal-left.delay-6,
.reveal-right.delay-6,
.reveal-scale.delay-6,
.reveal-blur.delay-6,
.reveal-rise.delay-6 { transition-delay: .48s; }
.reveal.delay-7,
.reveal-left.delay-7,
.reveal-right.delay-7,
.reveal-scale.delay-7,
.reveal-blur.delay-7,
.reveal-rise.delay-7 { transition-delay: .56s; }
.reveal.delay-8,
.reveal-left.delay-8,
.reveal-right.delay-8,
.reveal-scale.delay-8,
.reveal-blur.delay-8,
.reveal-rise.delay-8 { transition-delay: .64s; }

/* Apply same delay scale to all directional variants */
.reveal-left.delay-1 { transition-delay: .08s; }
.reveal-left.delay-2 { transition-delay: .16s; }
.reveal-left.delay-3 { transition-delay: .24s; }
.reveal-left.delay-4 { transition-delay: .32s; }
.reveal-right.delay-1 { transition-delay: .08s; }
.reveal-right.delay-2 { transition-delay: .16s; }
.reveal-right.delay-3 { transition-delay: .24s; }
.reveal-right.delay-4 { transition-delay: .32s; }
.reveal-scale.delay-1 { transition-delay: .08s; }
.reveal-scale.delay-2 { transition-delay: .16s; }
.reveal-scale.delay-3 { transition-delay: .24s; }
.reveal-scale.delay-4 { transition-delay: .32s; }
.reveal-blur.delay-1 { transition-delay: .08s; }
.reveal-blur.delay-2 { transition-delay: .16s; }
.reveal-blur.delay-3 { transition-delay: .24s; }
.reveal-blur.delay-4 { transition-delay: .32s; }
.reveal-rise.delay-1 { transition-delay: .08s; }
.reveal-rise.delay-2 { transition-delay: .16s; }
.reveal-rise.delay-3 { transition-delay: .24s; }
.reveal-rise.delay-4 { transition-delay: .32s; }

/* AUTO-REVEAL: marker on a parent makes all common children reveal in stagger.
   Add `data-auto-reveal` to a section / container. The init script adds
   .reveal + .delay-N to direct child cards / headings. */
[data-auto-reveal] .auto-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-auto-reveal] .auto-rv.in { opacity: 1; transform: translateY(0); }

/* Image blur-in */
.img-reveal {
  opacity: 0;
  filter: blur(16px) saturate(0.8);
  transform: scale(1.04);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.4s ease;
}
.img-reveal.in {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
}

/* Stat counters — start a touch lower for impact */
.count-up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.count-up.in { opacity: 1; transform: translateY(0); }

/* Honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .reveal-rise,
  .img-reveal, .count-up, [data-auto-reveal] .auto-rv {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}