/* OFFTO motion system — transform/opacity only, with a soft editorial rhythm. */
:root {
  --motion-ease: cubic-bezier(.22, .75, .2, 1);
  --motion-slow: 900ms;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--deep);
  color: #fff;
  transition: opacity 700ms var(--motion-ease), visibility 700ms;
}
.page-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-mark { width: 88px; margin: 0 auto 22px; }
.loader-mark img { display: block; width: 100%; }
.loader-line { width: 86px; height: 1px; margin: 0 auto; overflow: hidden; background: rgba(255,255,255,.25); }
.loader-line::after { content: ""; display: block; width: 42%; height: 100%; background: var(--teal); animation: loader-progress 1.35s var(--motion-ease) infinite; }
.loader-caption { margin: 15px 0 0; color: #b4d5d5; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
@keyframes loader-progress { from { transform: translateX(-130%); } to { transform: translateX(320%); } }

.site-header { transform: translateY(0); }
.site-header.is-scrolled { transform: translateY(-2px); }
.brand, .nav-links a, .nav-actions .pill, .mobile-toggle { transition: transform 260ms var(--motion-ease), color 220ms ease, background 220ms ease, border-color 220ms ease; }
.brand:hover { transform: translateY(-1px); }
.pill:active, .store-row img:active, .mobile-toggle:active { transform: scale(.96); }
.store-row img { transition: transform 260ms var(--motion-ease), filter 260ms ease; }
.store-row img:hover { filter: drop-shadow(0 8px 10px rgba(6,59,90,.16)); }

[data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 800ms var(--motion-ease), transform 800ms var(--motion-ease); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].revealed { opacity: 1; transform: translate3d(0, 0, 0); }
.hero-art[data-reveal] { transform: translate3d(0, 38px, 0) scale(.98); }
.hero-art[data-reveal].revealed { transform: translate3d(0, 0, 0) scale(1); }
.feature, .travel-card, .journey-item { will-change: transform; }
.feature:hover { transition-duration: 360ms; }
.travel-card { transition: transform 500ms var(--motion-ease), box-shadow 500ms var(--motion-ease); }
.travel-card:hover { box-shadow: 0 30px 75px rgba(6,59,90,.18); }
.hero-art img { will-change: transform; }

.mobile-menu { transform-origin: top center; transition: opacity 300ms var(--motion-ease), transform 400ms var(--motion-ease); }
.mobile-menu a { opacity: 0; transform: translateY(-8px); transition: opacity 260ms ease, transform 360ms var(--motion-ease); }
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu.open a:nth-child(1) { transition-delay: 60ms; }
.mobile-menu.open a:nth-child(2) { transition-delay: 100ms; }
.mobile-menu.open a:nth-child(3) { transition-delay: 140ms; }
.mobile-menu.open a:nth-child(4) { transition-delay: 180ms; }

@media (max-width: 900px) {
  .site-header.is-scrolled { transform: none; }
  .hero-art img { animation-duration: 8s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal], .hero-art[data-reveal], .hero-art[data-reveal].revealed { opacity: 1; transform: none; }
}