/* Motion: scroll reveal, the Today panel moment, reduced-motion and print overrides. */

/* Today panel: rows fade up 6px with a 60ms stagger on load (opacity and transform, 240ms; the last row is fully in by 480ms; no JS needed, so nothing can stay hidden). */
.today-rows li { animation: settle 240ms var(--ease-out) both; }
.today-rows li:nth-child(2) { animation-delay: 60ms; } .today-rows li:nth-child(3) { animation-delay: 120ms; }
.today-rows li:nth-child(4) { animation-delay: 180ms; } .today-rows li:nth-child(5) { animation-delay: 240ms; }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Trust strip: the items settle in with the same 60ms stagger as the Today rows. Plain CSS, so it plays at load and never depends on scroll. */
.trust-row li { animation: settle 240ms var(--ease-out) both; }
.trust-row li:nth-child(2) { animation-delay: 60ms; } .trust-row li:nth-child(3) { animation-delay: 120ms; }
.trust-row li:nth-child(4) { animation-delay: 180ms; } .trust-row li:nth-child(5) { animation-delay: 240ms; }

/* Status chip layout (all motion settings): the hidden longest label sizes the chip; the visible label is laid over it, so the width never changes during the tick. */
.today-rows .lbl { position: relative; display: inline-block; }
.today-rows .lbl-max { visibility: hidden; white-space: nowrap; }
.today-rows .lbl-now { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; }

/* Today status tick (today-tick.js): the chip colors cross-fade and the new icon fades in. */
@media (prefers-reduced-motion: no-preference) {
  .today-rows .s { transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
  .today-rows .s svg.tick-in { animation: tick-icon 240ms var(--ease-out); }
  @keyframes tick-icon { from { opacity: 0; } }
}

/* Scroll reveal: content is visible unless motion.js has set html.js-motion and motion is allowed.
   Lists reveal child by child (motion.js sets --i and data-reveal-item); other blocks reveal whole. */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion [data-reveal]:not([data-reveal-list]), html.js-motion [data-reveal-item] { opacity: 0; transform: translateY(10px); filter: blur(3px); transition: opacity 900ms var(--ease-out) calc(var(--i, 0) * 70ms), transform 1000ms var(--ease-out) calc(var(--i, 0) * 70ms), filter 900ms var(--ease-out) calc(var(--i, 0) * 70ms); }
  html.js-motion [data-reveal].in:not([data-reveal-list]), html.js-motion [data-reveal-list].in > [data-reveal-item] { opacity: 1; transform: none; filter: none; }
  /* Fallback reveal (motion.js, after 2.5 s): final state at once, no transition. */
  html.js-motion .reveal-now { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  /* The booking form reveals with opacity and transform only, never blur. */
  html.js-motion .form[data-reveal] { filter: none; transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-item] { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto; }
  details::details-content { transition: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  [data-reveal], [data-reveal-item] { opacity: 1 !important; transform: none !important; filter: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .site-header { position: static; }
  details::details-content { content-visibility: visible !important; block-size: auto !important; }
  details > p { display: block !important; }
  /* The flow line and markers print fully drawn. */
  #flow .steps li h3::before { transform: none !important; }
  #flow .steps li::after { background: var(--main) !important; border-color: var(--main) !important; }
}