/* Motion. Principles: strong ease-out curves, short UI transitions (150-300 ms), longer only for the
   one-time page entrance; transform/opacity/filter only; never scale from 0; exits faster than entrances;
   hover effects only on devices that can hover; movement removed under prefers-reduced-motion. */

/* ---------- Page entrance (hero) ---------- */

@keyframes enter { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes sweep { from { transform: scaleX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(56px); } }
@keyframes fan-left { from { opacity: 0; transform: translateX(120px) rotate(0deg); } }
@keyframes fan-right { from { opacity: 0; transform: translateX(-120px) rotate(0deg); } }
@keyframes crow-in { from { opacity: 0; transform: translateY(18px) rotate(-6deg) scale(0.92); } }

.enter { animation: enter 800ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
.hero h1 .highlight::before { animation: sweep 700ms var(--ease-out) 450ms both; }
.hero-phones .iphone.center { animation: rise 1000ms var(--ease-out) 280ms both; }
.hero-phones .iphone.left { animation: fan-left 1100ms var(--ease-out) 480ms both; }
.hero-phones .iphone.right { animation: fan-right 1100ms var(--ease-out) 480ms both; }
.hero-crow { animation: crow-in 900ms var(--ease-spring) 820ms both; }

/* ---------- Scroll reveals (classes added by site.js) ---------- */

.js .reveal {
  opacity: 0; transform: translateY(16px); filter: blur(4px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .reveal .highlight::before { transform: scaleX(0); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--stagger, 0ms) + 250ms); }
.js .reveal.is-in .highlight::before { transform: none; }
.js .reveal .crow { transform: translateY(8px) rotate(-4deg) scale(0.95); transition: transform 900ms var(--ease-spring); transition-delay: calc(var(--stagger, 0ms) + 120ms); }
.js .reveal.is-in .crow { transform: none; }

/* ---------- Mobile menu ---------- */

.menu {
  opacity: 0; transform: translateY(-8px) scale(0.97); filter: blur(4px); transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.menu.is-open {
  opacity: 1; transform: none; filter: none;
  transition-duration: 280ms, 320ms, 280ms;
}
.menu::backdrop { opacity: 0; transition: opacity 160ms var(--ease-out); }
.menu.is-open::backdrop { opacity: 1; transition-duration: 280ms; }
.menu-links li, .menu-foot { opacity: 0; transform: translateY(10px); transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
.menu.is-open .menu-links li, .menu.is-open .menu-foot {
  opacity: 1; transform: none;
  transition-duration: 380ms; transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}

/* ---------- Reduced motion: keep gentle fades, drop movement and blur ---------- */

@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter, .hero-phones .iphone.center, .hero-phones .iphone.left, .hero-phones .iphone.right, .hero-crow { animation: fade 400ms ease both; }
  .hero h1 .highlight::before { animation: none; }
  .js .reveal { transform: none; filter: none; transition: opacity 400ms ease; }
  .js .reveal .highlight::before, .js .reveal .crow { transform: none; transition: none; }
  .menu, .menu.is-open { transform: none; filter: none; }
  .menu-links li, .menu-foot { transform: none; }
  .btn:active, .store-badge:active { transform: none; }
  .nav-inner, .nav .nav-cta { transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
}