/* ==========================================================================
   Motion layer — client request 2026-10-07 (not part of the Figma frames).
   Section reveal on load/scroll, smooth anchor scrolling (js/motion.js) and the
   mobile nav-drawer open/close transition.
   Revert keyword: "revert animations" — delete this file and js/motion.js and the
   "motion" blocks in each page <head> (backup: backups/pre-animations-2026-10-07/).
   Uses `translate` (not `transform`) so it never fights other transforms.
   ========================================================================== */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);   /* soft ease-out: quick start, gentle settle */
  --motion-reveal: 700ms;
  --motion-drawer: 300ms;
}

/* ---------- Section reveal (html.motion is set by the inline head script) ----------
   Keep this selector list in sync with REVEAL in js/motion.js. Only content moves;
   section backgrounds and photos stay put so nothing flashes. The footer is never animated: it sits at the very
   bottom, so it could not scroll far enough to trigger and its offset would extend the page. */
html.motion :is(
  .hero__row > *, .section__inner > *, .breakline__logo, .prefooter__card,
  .contact-hero__inner > *, .contact-form-wrap,
  .legal-hero__inner > *, .legal
) {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0ms),
    translate var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0ms);
}
html.motion .is-in { opacity: 1; translate: none; }

/* Header settles in on load */
html.motion .site-header__inner { animation: motion-fade-down 600ms var(--motion-ease) both; }
@keyframes motion-fade-down { from { opacity: 0; translate: 0 -8px; } }

/* ---------- Mobile nav drawer: fade + slight drop on open, the same in reverse on close ---------- */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .nav-drawer {
    opacity: 1;
    transition: opacity var(--motion-drawer) var(--motion-ease), display var(--motion-drawer) allow-discrete;
  }
  .nav-drawer[hidden] { opacity: 0; }
  .nav-drawer__inner { translate: none; transition: translate var(--motion-drawer) var(--motion-ease); }
  .nav-drawer[hidden] .nav-drawer__inner { translate: 0 -12px; }
  @starting-style {
    .nav-drawer { opacity: 0; }
    .nav-drawer__inner { translate: 0 -12px; }
  }
}

/* Sections focused after an anchor scroll (tabindex=-1) get no focus ring */
html section[tabindex="-1"]:focus, html header[tabindex="-1"]:focus { outline: none; }