/* =====================================================================
   Motion polish from the find-animation-opportunities review (approved by Bar
   2026-10-12): phone schedule collapse, soft dialog close, press feedback,
   menu button colour fade, faster mobile menu.
   ===================================================================== */

/* ---------- FAO-2: phones, the schedule filter collapses the days with no match ---------- */
@media (max-width: 599px) {
  :root .days { row-gap: 0; margin-block-end: -.9rem; }
  :root .day {
    display: grid; grid-template-rows: 1fr; margin-block-end: .9rem;
    transition: grid-template-rows 220ms var(--ease), margin-block-end 220ms var(--ease), visibility 0s;
  }
  :root .day-in { display: flex; flex-direction: column; min-height: 0; overflow: hidden; transition: opacity 200ms var(--ease) 60ms; }
  :root .day.is-out {
    grid-template-rows: 0fr; margin-block-end: 0; visibility: hidden;
    transition: grid-template-rows 220ms var(--ease), margin-block-end 220ms var(--ease), visibility 0s 220ms;
  }
  :root .day.is-out .day-in { opacity: 0; transition: opacity 120ms var(--ease); }
}

/* ---------- FAO-3: dialogs close the way they open (open 250ms, close 180ms) ---------- */
:root .modal { transition: display 180ms allow-discrete, overlay 180ms allow-discrete; }
:root .modal .modal-box { transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
:root .modal[open] .modal-box { animation: none; transition-duration: 250ms; }
:root .modal:not([open]) .modal-box { opacity: 0; transform: scale(.96); }
:root .modal::backdrop { opacity: 0; transition: opacity 180ms var(--ease), display 180ms allow-discrete, overlay 180ms allow-discrete; }
:root .modal[open]::backdrop { opacity: 1; transition-duration: 250ms; }
@starting-style {
  :root .modal[open] .modal-box { opacity: 0; transform: scale(.96); }
  :root .modal[open]::backdrop { opacity: 0; }
}

/* ---------- FAO-4: press feedback where the shared .btn:active rule doesn't reach ---------- */
/* header CTA: `scale` composes with the magnet's inline translate instead of losing to it
   (!important because GSAP also writes an inline `scale: none`) */
:root .header-cta { transition: background-color .25s, scale 160ms var(--ease); }
:root .header-cta:active { transform: none; scale: .97 !important; }
:root .round-btn { transition: background-color .25s, color .25s, opacity .25s, transform 160ms var(--ease); }
:root .modal-close { transition: transform 160ms var(--ease); }
:root .round-btn:not(:disabled):active, :root .modal-close:active, :root .menu-toggle:active { transform: scale(.95); }

/* ---------- FAO-5: the menu button fades with the header (and FAO-4's press) ---------- */
:root .menu-toggle { transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 160ms var(--ease); }

/* ---------- Mobile menu: opens in 450ms, closes in 250ms, rows stagger tighter ---------- */
:root .mobile-menu { transition-duration: .25s; }
:root .mobile-menu.is-open { transition-duration: .45s; }
:root .mobile-menu li { transition-duration: .2s; }
:root .mobile-menu.is-open li { transition-duration: .4s; }
:root .mobile-menu.is-open li:nth-child(2) { transition-delay: .04s; }
:root .mobile-menu.is-open li:nth-child(3) { transition-delay: .08s; }
:root .mobile-menu.is-open li:nth-child(4) { transition-delay: .12s; }