/**
 * Shared scroll-reveal SSOT.
 * 1) Section heads (.reveal-on-scroll) — h2/h3 from top (-28px), lead p from right (36px)
 * 2) Card collections (.card-intro) — corner / mobile fly-in + bounce-lock
 * 3) Hero CTA buttons (.hero-cta-fly-btn) — random-direction fly-in + color cycle
 *
 * Default: fully visible (no-JS / SEO safe).
 * JS adds prep classes only when IO + motion are supported.
 */

/* —— Section heads: headings from top, lead paragraphs from right —— */
.reveal-on-scroll {
  opacity: 0;
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.reveal-on-scroll.reveal-from-top {
  transform: translate3d(0, -28px, 0);
}

.reveal-on-scroll.reveal-from-right {
  transform: translate3d(36px, 0, 0);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* —— Card collection intro —— */
.card-intro-grid {
  overflow: visible !important;
}

.card-intro-grid.is-wobbling {
  animation: card-grid-wobble 1.15s ease-in-out both;
}

@keyframes card-grid-wobble {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  30% {
    transform: translate3d(0.35%, -0.2%, 0) rotate(-0.18deg);
  }
  60% {
    transform: translate3d(-0.28%, 0.18%, 0) rotate(0.14deg);
  }
  85% {
    transform: translate3d(0.12%, 0.1%, 0) rotate(-0.06deg);
  }
}

.card-intro {
  opacity: 0;
  transform: translate3d(var(--card-intro-x, 0px), var(--card-intro-y, 36px), 0) scale(0.985);
  will-change: transform, opacity;
  /* Hold pre-anim state until .is-visible starts the bounce */
  transition: none;
}

.card-intro.is-visible {
  animation: card-intro-bounce-lock var(--card-intro-dur, 0.9s) cubic-bezier(0.16, 0.84, 0.22, 1) both;
  animation-delay: var(--card-intro-delay, 0ms);
}

@keyframes card-intro-bounce-lock {
  0% {
    opacity: 0;
    transform: translate3d(var(--card-intro-x, 0px), var(--card-intro-y, 36px), 0) scale(0.985);
  }
  62% {
    opacity: 1;
    /* Soft overshoot past final slot (bounce) */
    transform: translate3d(
        calc(var(--card-intro-x, 0px) * -0.1),
        calc(var(--card-intro-y, 36px) * -0.1),
        0
      )
      scale(1.02);
  }
  82% {
    transform: translate3d(
        calc(var(--card-intro-x, 0px) * 0.035),
        calc(var(--card-intro-y, 36px) * 0.035),
        0
      )
      scale(0.995);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.card-intro-done {
  opacity: 1;
  transform: none;
  animation: none;
  will-change: auto;
}

/* —— Hero CTA fly-in —— */
.hero-cta.hero-cta-fly-group {
  overflow: visible;
  /* Keep layout slot stable; motion is transform-only on children */
  position: relative;
}

.hero-cta-fly-btn {
  opacity: 0;
  transform: translate3d(var(--hero-cta-x, 0px), var(--hero-cta-y, 48px), 0);
  will-change: transform, opacity, background-color, border-color, color;
  transition:
    transform var(--hero-cta-dur, 0.78s) cubic-bezier(0.16, 0.84, 0.22, 1),
    opacity calc(var(--hero-cta-dur, 0.78s) * 0.72) ease-out;
  transition-delay: var(--hero-cta-delay, 0ms);
  /* Temporary cycle colors via inline vars while arriving */
  background-color: var(--hero-cta-cycle-bg, inherit);
  border-color: var(--hero-cta-cycle-border, inherit);
  color: var(--hero-cta-cycle-fg, inherit);
}

.hero-cta-fly-btn.is-arriving,
.hero-cta-fly-btn.is-settled {
  opacity: 1;
  transform: none;
}

.hero-cta-fly-btn.is-settled {
  will-change: auto;
  /* Drop temporary cycle vars — real button styles take over */
  background-color: unset;
  border-color: unset;
  color: unset;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s,
    border-color 0.2s;
}

.hero-cta-fly-btn.is-color-cycling {
  /* Inline --hero-cta-cycle-* wins while cycling */
  transition:
    transform var(--hero-cta-dur, 0.78s) cubic-bezier(0.16, 0.84, 0.22, 1),
    opacity calc(var(--hero-cta-dur, 0.78s) * 0.72) ease-out,
    background-color 0.12s linear,
    border-color 0.12s linear,
    color 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-on-scroll.is-visible,
  .card-intro,
  .card-intro.is-visible,
  .card-intro-done,
  .hero-cta-fly-btn,
  .hero-cta-fly-btn.is-arriving,
  .hero-cta-fly-btn.is-settled {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    background-color: unset !important;
    border-color: unset !important;
    color: unset !important;
  }

  .card-intro-grid.is-wobbling {
    animation: none !important;
  }
}