/* Homepage scroll reveal — premium fade / slide / scale / soft blur */

:root {
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 0.8s;
  --reveal-distance: 35px;
  --reveal-scale: 0.98;
  --reveal-blur: 6px;
  --reveal-stagger-step: 0.07s;
}

/* Shared hidden / visible (full motion) */
html.home-reveal-full body.page-home .scroll-reveal:not(.is-visible),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0) scale(var(--reveal-scale));
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) ease;
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

html.home-reveal-full body.page-home .scroll-reveal.is-visible,
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Stagger parents: container stays in layout; only children animate */
html.home-reveal-full body.page-home .scroll-reveal.scroll-reveal-stagger:not(.is-visible),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal.scroll-reveal-stagger:not(.is-visible) {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Hero / banner — slightly stronger scale */
html.home-reveal-full body.page-home .scroll-reveal.scroll-reveal--zoom:not(.is-visible),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal.scroll-reveal--zoom:not(.is-visible) {
  transform: translate3d(0, 28px, 0) scale(0.96);
}

/* Section title blocks — gentler movement */
html.home-reveal-full body.page-home .scroll-reveal.scroll-reveal--soft:not(.is-visible),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal.scroll-reveal--soft:not(.is-visible) {
  transform: translate3d(0, 22px, 0) scale(0.99);
  filter: blur(4px);
}

/* Delays for sequential sections */
body.page-home .scroll-reveal.scroll-reveal--delay-1:not(.is-visible),
body.page-home .scroll-reveal.scroll-reveal--delay-1.is-visible {
  transition-delay: 0.12s;
}

body.page-home .scroll-reveal.scroll-reveal--delay-2:not(.is-visible),
body.page-home .scroll-reveal.scroll-reveal--delay-2.is-visible {
  transition-delay: 0.22s;
}

/* Staggered children — product / feature / contact cards */
html.home-reveal-full body.page-home .scroll-reveal-stagger:not(.is-visible) > *,
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger:not(.is-visible) > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.98);
  filter: blur(5px);
  transition:
    opacity 0.75s ease,
    transform 0.75s var(--reveal-ease),
    filter 0.75s ease;
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *,
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(1),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(1) {
  transition-delay: calc(var(--reveal-stagger-step) * 1);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(2),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(2) {
  transition-delay: calc(var(--reveal-stagger-step) * 2);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(3),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(3) {
  transition-delay: calc(var(--reveal-stagger-step) * 3);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(4),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(4) {
  transition-delay: calc(var(--reveal-stagger-step) * 4);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(5),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(5) {
  transition-delay: calc(var(--reveal-stagger-step) * 5);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(6),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(6) {
  transition-delay: calc(var(--reveal-stagger-step) * 6);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(7),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(7) {
  transition-delay: calc(var(--reveal-stagger-step) * 7);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(8),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(8) {
  transition-delay: calc(var(--reveal-stagger-step) * 8);
}
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(n + 9),
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(n + 9) {
  transition-delay: calc(var(--reveal-stagger-step) * 9);
}

/* Category / brand carousel cards inside track (when track is in a stagger container) */
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > .category-card:hover,
html.home-reveal-full body.page-home .scroll-reveal-stagger.is-visible > .product-card:hover,
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > .category-card:hover,
html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger.is-visible > .product-card:hover {
  transform: translate3d(0, -4px, 0) scale(1);
  filter: blur(0);
  transition:
    transform 0.35s var(--reveal-ease),
    box-shadow 0.35s ease;
}

/* Reduced motion: fade only, no blur or movement */
html.home-reveal-a11y body.page-home .scroll-reveal:not(.is-visible) {
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity 0.45s ease;
  will-change: opacity;
}

html.home-reveal-a11y body.page-home .scroll-reveal.is-visible {
  opacity: 1;
  will-change: auto;
}

html.home-reveal-a11y body.page-home .scroll-reveal.scroll-reveal-stagger:not(.is-visible) {
  opacity: 1;
}

html.home-reveal-a11y body.page-home .scroll-reveal-stagger:not(.is-visible) > * {
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

html.home-reveal-a11y body.page-home .scroll-reveal-stagger.is-visible > * {
  opacity: 1;
  will-change: auto;
}

html.home-reveal-a11y body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
html.home-reveal-a11y body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
html.home-reveal-a11y body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
html.home-reveal-a11y body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.16s; }
html.home-reveal-a11y body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.2s; }
html.home-reveal-a11y body.page-home .scroll-reveal-stagger.is-visible > *:nth-child(n + 6) { transition-delay: 0.24s; }

/* Fallback before JS sets mode on <html> */
body.page-home .scroll-reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0) scale(var(--reveal-scale));
}

body.page-home .scroll-reveal.scroll-reveal-stagger:not(.is-visible) {
  opacity: 1;
  transform: none;
}

body.page-home .scroll-reveal-stagger:not(.is-visible) > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.98);
}

body.page-home .scroll-reveal.is-visible,
body.page-home .scroll-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Performance: lighter effect on small screens */
@media (max-width: 768px) {
  :root {
    --reveal-distance: 24px;
    --reveal-blur: 4px;
    --reveal-duration: 0.65s;
    --reveal-stagger-step: 0.05s;
  }
}

@supports not (filter: blur(1px)) {
  html.home-reveal-full body.page-home .scroll-reveal:not(.is-visible),
  html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal:not(.is-visible),
  html.home-reveal-full body.page-home .scroll-reveal-stagger:not(.is-visible) > *,
  html.js-home-reveal:not(.home-reveal-a11y) body.page-home .scroll-reveal-stagger:not(.is-visible) > * {
    filter: none;
  }
}