/* =========================================================
   MOTION — calm, continuous, nervous-system-respecting
   Philosophy: opacity-only, long ease-in-out, no translate jumps.
   Section reveal is two beats — heading first, content 320ms later.
   ========================================================= */

/* Section is always visible; children do the actual fade-in */
.reveal-on-scroll { /* no opacity gate */ }

/* If a section has NO beat children (nothing to reveal), fade it as a whole.
   Exception: .closing drives its own word-by-word reveal. */
.reveal-on-scroll:not(.closing):not(.recip2):not(:has(.reveal-beat-1)):not(:has(.reveal-beat-2)) {
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-on-scroll:not(.closing):not(.recip2):not(:has(.reveal-beat-1)):not(:has(.reveal-beat-2)).in {
  opacity: 1;
}

/* Two-beat children */
.reveal-beat-1,
.reveal-beat-2 {
  opacity: 0;
  transition: opacity 1300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.reveal-on-scroll.in .reveal-beat-1 { opacity: 1; transition-delay: 0ms; }
.reveal-on-scroll.in .reveal-beat-2 { opacity: 1; transition-delay: 320ms; }

/* Images within a reveal — very slow settle (2.6s) so it reads as
   "the image is always there, your eye is just adjusting." */
.reveal-on-scroll .img > .img-inner {
  transform: scale(1.025);
  transition: transform 2600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-on-scroll.in .img > .img-inner { transform: scale(1); }

/* Hero — one unified arrival, not a cascade.
   Everything fades in together over 1.8s. */
.hero__eyebrow, .hero h1, .hero__sub, .hero__ctas, .hero__corner, .hero__scroll {
  opacity: 0;
  animation: hero-enter 1800ms cubic-bezier(0.4, 0, 0.2, 1) 400ms both;
}
@keyframes hero-enter {
  to { opacity: 1; }
}

/* Hero Ken Burns — slower, barely perceptible */
.hero .img-inner { transition: transform 60s linear; }

/* Arrow drift on hover — slow, calm */
.btn .arrow, .nav__cta .arrow {
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buttons — color transitions only, no scale, no lift */
.btn {
  transition:
    background 600ms cubic-bezier(0.4, 0, 0.2, 1),
    color 600ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Option cards in finder — smooth interactive states, no translate */
.opt {
  transition:
    border-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
    background 600ms cubic-bezier(0.4, 0, 0.2, 1),
    color 600ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.opt:hover { transform: none; }

/* Respect reduced motion — skip everything */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-on-scroll.in,
  .hero__eyebrow, .hero h1, .hero__sub, .hero__ctas, .hero__corner, .hero__scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .reveal-on-scroll .img > .img-inner { transform: none !important; }
}