/* ===== Scroll reveal — subtle, premium (vanilla CSS) ===== */

:root {
  --reveal-duration: 1s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance-y: 56px;
  --reveal-distance-x: 40px;
  --reveal-scale: 0.92;
  --reveal-blur: 12px;
  --reveal-stagger: 0.12s;
}

@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance-y), 0) scale(var(--reveal-scale));
    filter: blur(var(--reveal-blur));
    transition:
      opacity var(--reveal-duration) var(--reveal-ease),
      transform var(--reveal-duration) var(--reveal-ease),
      filter var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform, filter;
  }

  html.js-reveal .reveal--left {
    transform: translate3d(calc(var(--reveal-distance-x) * -1), 36px, 0) scale(var(--reveal-scale));
  }

  html.js-reveal .reveal--right {
    transform: translate3d(var(--reveal-distance-x), 36px, 0) scale(var(--reveal-scale));
  }

  html.js-reveal .reveal--fade {
    transform: scale(var(--reveal-scale));
  }

  html.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    will-change: auto;
  }

  @media (max-width: 767px) {
    html.js-reveal .reveal {
      --reveal-blur: 8px;
      --reveal-distance-y: 40px;
      --reveal-distance-x: 28px;
    }
  }

  /* Calm hover polish (replaces stronger lifts while reveals are active) */
  html.js-reveal .trust-strip__item {
    transition:
      transform 0.4s var(--reveal-ease),
      box-shadow 0.4s var(--reveal-ease),
      border-color 0.4s var(--reveal-ease),
      background 0.4s var(--reveal-ease);
  }

  html.js-reveal .trust-strip__item:hover {
    transform: translateY(-2px);
  }

  html.js-reveal .category-spotlight {
    transition:
      transform 0.45s var(--reveal-ease),
      border-color 0.45s var(--reveal-ease),
      box-shadow 0.45s var(--reveal-ease);
  }

  html.js-reveal .category-spotlight:hover {
    transform: translateY(-2px);
  }

  html.js-reveal .trust-feature:hover {
    transform: translateY(-1px);
  }

  html.js-reveal .community-feature:hover {
    transform: translateY(-2px);
  }

  html.js-reveal .step-card:hover {
    transform: translateY(-2px);
  }

  html.js-reveal .step-card:hover .step-mockup {
    transform: scale(1.01);
  }

  html.js-reveal .btn-primary:hover,
  html.js-reveal .btn-secondary:hover,
  html.js-reveal .community__cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(231, 139, 123, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}