/*
 * Motion layer (Lenis + GSAP). Everything here is scoped to html.has-motion,
 * which motion.js adds only after its libraries load and only when the
 * visitor hasn't asked for reduced motion. Without it the page is untouched.
 */

/* Brief navy cover while the motion script boots (set by an inline script in
   <head>; removed by motion.js, or after 2.5s if the scripts fail to load). */
html.motion-init::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #0B2545;
}

/* Lenis (from lenis.css) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* No horizontal scroll from off-screen rail cards. Clipped on <main> (full
   width) rather than <body>, whose overflow would propagate to the viewport. */
html.has-motion main { overflow-x: clip; }

/* ---------- Page loader ---------- */
.loader { position: fixed; inset: 0; z-index: 9999; background: var(--navy); display: flex; align-items: center; justify-content: center; will-change: transform; }
.loader__inner { display: flex; align-items: center; gap: 18px; color: #fff; }
.loader__mark { width: 64px; height: 64px; border-radius: 50%; background: var(--navy-mid); display: flex; align-items: center; justify-content: center; gap: 4px; flex: none; }
.loader__mark span:first-child { font-weight: 800; font-size: 30px; line-height: 1; color: var(--mist); }
.loader__mark span:last-child { width: 5px; height: 28px; border-radius: 3px; background: var(--orange); }
.loader__word { font-size: clamp(30px, 6vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }

/* ---------- Split-text masks: room for descenders while words rise ---------- */
.sw-mask, .sc-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* ---------- Header: hide on scroll down, solid after the hero ---------- */
html.has-motion .site-header { transition: background-color .4s ease, box-shadow .4s ease; }
html.has-motion .site-header.is-solid { background: #fff; box-shadow: 0 6px 24px rgba(11,37,69,.08); }

/* ---------- Pinned sideways rail ("What you'll explore", desktop) ---------- */
@media (min-width: 900px) {
  html.has-motion .cards.cards--rail { display: flex; flex-wrap: nowrap; gap: 20px; }
  html.has-motion .cards.cards--rail > .card { flex: 0 0 clamp(360px, 44vw, 600px); }
}

/* ---------- Image reveals ---------- */
html.has-motion .photo img { will-change: transform; }

/* ---------- Mobile menu (full-screen overlay, circular wipe) ---------- */
.menu-toggle { display: none; }
@media (max-width: 859px) {
  html.has-motion .menu-toggle { display: inline-flex; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink); align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; }
  html.has-motion .menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
  html.has-motion .site-header__right { gap: 10px; }
}
@media (max-width: 400px) {
  html.has-motion .site-header__inner { padding-left: 16px; padding-right: 16px; gap: 10px; }
  html.has-motion .site-header .btn--sm { padding-left: 14px; padding-right: 14px; }
}
/* Very small phones: the menu (and the sticky bottom bar) carry Register instead */
@media (max-width: 360px) {
  html.has-motion .site-header .btn--sm { display: none; }
}
.menu-overlay { position: fixed; inset: 0; z-index: 90; background: var(--navy); color: #fff; display: flex; flex-direction: column; padding: 14px 20px 32px; clip-path: circle(0px at 100% 0); }
.menu-overlay[hidden] { display: none; }
.menu-overlay__top { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.menu-overlay__brand { font-weight: 800; font-size: 17px; color: #fff; }
.menu-overlay__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--navy-mid); color: #fff; font-size: 24px; line-height: 1; }
.menu-overlay nav { flex: 1; display: flex; align-items: center; }
.menu-overlay ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.menu-overlay li { overflow: hidden; }
.menu-overlay nav a { display: block; color: #fff; font-size: clamp(34px, 10vw, 48px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; padding: 4px 0; }
.menu-overlay nav a:hover { color: var(--orange); text-decoration: none; }
.menu-overlay__cta { overflow: hidden; }
.menu-overlay__cta .btn { width: 100%; padding: 16px 20px; font-size: 16px; }

/* ---------- Registration popup: backdrop fades with the panel ---------- */
html.has-motion .checkout[open]::backdrop { animation: afd-backdrop-in .45s ease both; }
html.has-motion .checkout.is-closing::backdrop { opacity: 0; transition: opacity .32s ease; }
@keyframes afd-backdrop-in { from { opacity: 0; } }

/* ---------- Footer brand word ---------- */
.footer-word { overflow: hidden; padding: 8px var(--gutter) 0; max-width: var(--max); margin: 0 auto; }
.footer-word span { display: block; font-size: clamp(44px, 11.5vw, 168px); font-weight: 800; letter-spacing: -.045em; line-height: .95; color: var(--navy-mid); white-space: nowrap; user-select: none; }