/* Explo header, on Explo Contour Motion (../MOTION.md). Loaded last, after motion.css and i18n.css, so it can retune the pill.
   Lands from above, changes its material to what is behind it, draws your descent along its bottom edge, previews the link you
   point at, docks the download button only once the hero's own button is gone, and on a phone has a real menu. Behaviour: nav.js. */

/* ───────── landing + material ───────── */
.js .nav-pill { animation: mx-drop var(--mx-spring-land-ms) var(--mx-spring-land) 0.1s backwards; }
@keyframes mx-drop { from { opacity: 0; transform: translateY(-34px) scale(0.94); } to { opacity: 1; transform: none; } }

.nav-pill {
  position: relative;
  transition: height var(--mx-dur-slow) var(--mx-glide), background-color var(--mx-dur-slow) var(--mx-glide),
    border-color var(--mx-dur-slow) var(--mx-glide), box-shadow var(--mx-dur-slow) var(--mx-glide);
}
/* the night frames hold light things too (the footer's boarding pass is cream), so the glass is dense enough that nothing behind it muddies it */
.nav[data-over="night"] .nav-pill { background: rgba(1, 24, 55, 0.86); }
/* over the cream page the translucent glass went muddy grey: there it is solid navy, with a shadow that lifts it off the page */
.nav[data-over="page"] .nav-pill {
  background: rgba(2, 13, 27, 0.95);
  border-color: rgba(216, 216, 203, 0.1);
  box-shadow: inset 0 1px 0 rgba(216, 216, 203, 0.07), 0 20px 44px -20px rgba(2, 13, 27, 0.62), 0 2px 8px rgba(2, 13, 27, 0.18);
}
.nav.docked .nav-pill { height: 50px; }
.nav.docked .brand { font-size: 18px; }
.nav.docked .brand .logo { width: 22px; height: 22px; }
.brand .logo { transition: width var(--mx-dur-slow) var(--mx-glide), height var(--mx-dur-slow) var(--mx-glide), transform var(--mx-spring-stamp-ms) var(--mx-spring-stamp); }
.brand { transition: font-size var(--mx-dur-slow) var(--mx-glide); }
/* the symbol turns a quarter turn, as it does when the app launches */
@media (hover: hover) { .brand:hover .logo { transform: rotate(90deg); } }
.brand:active .logo { transform: rotate(90deg) scale(0.9); }

/* ───────── your descent, drawn along the bottom edge ───────── */
.nav-trace { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none; overflow: hidden; }
.nav-trace::before { content: ""; position: absolute; inset: 0; background: rgba(216, 216, 203, 0.1); }
.nav-trace::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--nav-p, 0)); transition: transform 140ms linear;
  background: linear-gradient(90deg, rgba(216, 216, 203, 0.18), #d8d8cb); opacity: 0.85; }

/* ───────── the link under your pointer gets the glider; it returns to the section you are in when you leave ───────── */
.js .links a:hover, .js .links a.on:hover { background: none; color: #d8d8cb; }

/* ───────── the download button docks in when the hero's own button has gone ───────── */
.nav-pill .cta-slot { display: flex; flex: 0 1 auto; width: var(--cta-w, auto); min-width: 0; overflow: hidden; border-radius: 999px;
  transition: width var(--mx-spring-glider-ms) var(--mx-spring-glider), opacity var(--mx-dur-base) var(--mx-glide), margin var(--mx-spring-glider-ms) var(--mx-spring-glider); }
.nav-pill .cta-slot > .btn { flex: 1 1 auto; min-width: 0; }
.nav-pill .cta-slot > .btn:focus-visible { outline-offset: -4px; outline-color: #d8d8cb; }
.js .nav-pill:not(.cta-on) .cta-slot { width: 0; opacity: 0; margin-left: -8px; visibility: hidden;
  transition: width var(--mx-spring-glider-ms) var(--mx-spring-glider), opacity var(--mx-dur-quick) var(--mx-takeoff), margin var(--mx-spring-glider-ms) var(--mx-spring-glider), visibility 0s linear var(--mx-spring-glider-ms); }

/* ───────── phone: a menu, and the bar steps aside while you read ───────── */
.menu-btn { display: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; place-items: center; cursor: pointer; color: #d8d8cb;
  border: 1px solid rgba(216, 216, 203, 0.2); background: rgba(216, 216, 203, 0.08); transition: background-color 0.2s ease, transform var(--mx-spring-stamp-ms) var(--mx-spring-stamp); }
.menu-btn:active { transform: scale(var(--mx-stamp-down)); }
.menu-btn:focus-visible { outline: 2px solid #d8d8cb; outline-offset: 2px; }
.menu-btn .bars { position: relative; width: 16px; height: 10px; }
.menu-btn .bars i { position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform var(--mx-spring-stamp-ms) var(--mx-spring-stamp); }
.menu-btn .bars i:nth-child(1) { top: 1px; }
.menu-btn .bars i:nth-child(2) { top: 7px; }
.menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars i:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav-scrim, .nav-sheet { display: none; }
@media (max-width: 760px) {
  .menu-btn { display: grid; }
  .nav { transition: transform var(--mx-spring-land-ms) var(--mx-spring-land); }
  .nav.away { transform: translateY(calc(-100% - 24px)); transition: transform var(--mx-dur-base) var(--mx-takeoff); }

  .nav-scrim { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(2, 15, 29, 0.55); opacity: 0; pointer-events: none; transition: opacity var(--mx-dur-base) var(--mx-glide); }
  .nav.open .nav-scrim { opacity: 1; pointer-events: auto; }

  .nav-sheet { display: block; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); padding: 10px; border-radius: 30px; color: #d8d8cb;
    background: rgba(2, 13, 27, 0.97); border: 1px solid rgba(216, 216, 203, 0.12); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65);
    transform-origin: 50% 0; opacity: 0; transform: translateY(-12px) scale(0.97); visibility: hidden; pointer-events: none;
    transition: opacity var(--mx-dur-quick) var(--mx-takeoff), transform var(--mx-dur-base) var(--mx-takeoff), visibility 0s linear var(--mx-dur-base); }
  .nav.open .nav-sheet { opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity var(--mx-dur-base) var(--mx-glide), transform var(--mx-spring-land-ms) var(--mx-spring-land), visibility 0s; }
  .nav-sheet .row { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-radius: 20px; font-size: 24px; letter-spacing: -0.02em;
    opacity: 0; transform: translateY(14px); }
  .nav-sheet .row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
  .nav.open .nav-sheet .row { opacity: 1; transform: none; transition: opacity var(--mx-dur-base) var(--mx-glide) calc(var(--i) * 55ms + 60ms),
    transform var(--mx-spring-land-ms) var(--mx-spring-land) calc(var(--i) * 55ms + 60ms), background-color 0.15s ease; }
  .nav-sheet .row:active { background: rgba(216, 216, 203, 0.1); }
  .nav-sheet .row:focus-visible { outline: 2px solid #d8d8cb; outline-offset: -3px; }
  .nav-sheet .btn { width: 100%; margin-top: 8px; height: 52px; opacity: 0; transform: translateY(14px); }
  .nav.open .nav-sheet .btn { opacity: 1; transform: none; transition: opacity var(--mx-dur-base) var(--mx-glide) 340ms, transform var(--mx-spring-land-ms) var(--mx-spring-land) 340ms, background-color 0.2s ease; }

  /* the language lives in the menu on a phone: the chip leaves the bar (more room for the button) and a row opens the language dialog.
     lang-modal.js adds .lang-in-menu once it has wired the row; without it the chip and its native <select> stay in the bar. */
  .nav-sheet .row-lang { display: none; width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; font-size: 24px; letter-spacing: -0.02em; -webkit-tap-highlight-color: transparent; }
  .nav.lang-in-menu .nav-sheet .row-lang { display: flex; }
  .nav.lang-in-menu .nav-pill .lang { display: none; }
  .nav-sheet .rl-cur { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: 0;
    border: 1px solid rgba(216, 216, 203, 0.18); background: rgba(216, 216, 203, 0.07); }
  .nav-sheet .row .rl-cur svg { width: 17px; height: 17px; opacity: 0.85; stroke-width: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .js .nav-pill { animation: none; }
  .nav, .nav-pill, .brand, .brand .logo, .cta-slot, .menu-btn, .menu-btn .bars i, .nav-trace::after, .nav-scrim, .nav-sheet, .nav-sheet .row, .nav-sheet .btn { transition: none !important; }
  .brand:hover .logo, .brand:active .logo { transform: none; }
}