/* Cabin lights: the night-mode switch and the dimming transition, shared by every page.
   Palettes live with each page's tokens (wayfare.css, landing.html, app.html). */
.cabin-switch { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color .2s ease; }
.cabin-switch:hover { background: var(--mist, rgba(127,127,127,.12)); }
.cabin-switch svg { width: 18px; height: 22px; overflow: visible; }
.cabin-switch .frame { fill: none; stroke: currentColor; stroke-width: 1.4; }
.cabin-switch .sky { fill: #a9d4ff; transition: fill .7s ease; }
.cabin-switch .sun { fill: #ffd27a; transition: opacity .4s ease, transform .7s cubic-bezier(.6,0,.2,1); transform-origin: 8px 13px; }
.cabin-switch .star { fill: #ffe7b0; opacity: 0; transition: opacity .4s ease .35s; }
.cabin-switch .shade { fill: currentColor; fill-opacity: .5; transform: translateY(-100%); transition: transform .7s cubic-bezier(.6,0,.2,1); }
.cabin-switch .pull { stroke: var(--paper, #0d1017); stroke-width: 1.2; stroke-linecap: round; }
:root[data-cabin='night'] .cabin-switch .shade { transform: none; }
:root[data-cabin='night'] .cabin-switch .sky { fill: #1d2a44; }
:root[data-cabin='night'] .cabin-switch .sun { opacity: 0; transform: translateY(4px); }
:root[data-cabin='night'] .cabin-switch .star { opacity: 1; }

/* The switch: lights dim outward from the window you pulled, like a cabin going dark row by row. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: cabin-reveal .9s cubic-bezier(.65,0,.25,1); }
@keyframes cabin-reveal { from { clip-path: circle(0 at var(--cabin-x, 90%) var(--cabin-y, 32px)); } to { clip-path: circle(150vmax at var(--cabin-x, 90%) var(--cabin-y, 32px)); } }
html.dimming, html.dimming * { transition: background-color .7s ease, color .7s ease, border-color .7s ease !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
  html.dimming, html.dimming *, .cabin-switch .shade, .cabin-switch .sun, .cabin-switch .star, .cabin-switch .sky { transition: none !important; }
}

/* ---- Nav menus (nav.mjs): Ask, Guides, Tools open a panel; Europe is a plain link -------------- */
.links { align-items: center; }
.menu { position: relative; }
.menu-btn, .menu-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 2px; font: inherit; color: var(--ink-70); cursor: pointer; text-decoration: none; }
.menu-btn svg { width: 10px; height: 6px; transition: transform .2s ease; }
.menu-btn:hover, .menu-link:hover, .menu.open .menu-btn, .menu-btn.on, .menu-link[aria-current='page'] { color: var(--ink); }
.menu-btn.on, .menu-link[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--ink); }
.menu.open .menu-btn svg { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); min-width: 320px; padding: 8px; border-radius: 20px; background: var(--card, #fff); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.14); display: grid; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility 0s .16s; z-index: 60; }
.menu-panel::before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; } /* hover bridge */
.menu.open .menu-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .16s ease, transform .16s ease; }
.menu-panel a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); white-space: normal; }
.menu-panel a b { font-weight: 600; font-size: 15px; }
.menu-panel a span { font-size: 13.5px; color: var(--ink-50); line-height: 1.35; }
.menu-panel a:hover, .menu-panel a:focus-visible, .menu-panel a[aria-current='page'] { background: var(--mist); }
:root[data-cabin='night'] .menu-panel { box-shadow: 0 24px 60px rgba(0,0,0,.5); }
@media (hover: hover) and (min-width: 1081px) { .menu:hover .menu-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .16s ease, transform .16s ease; } .menu:hover .menu-btn { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .menu-panel, .menu-btn svg { transition: none !important; } }
.links .menu-panel a[aria-current='page'] { box-shadow: none; padding-bottom: 10px; color: var(--ink); }

/* ---- Phones and small tablets: one slim row + a full-screen Menu sheet ------------------------- */
.nav-toggle, .nav-sheet { display: none; }
@media (max-width: 1080px) {
  .nav .wrap { grid-template-columns: 1fr auto !important; height: 60px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .links, .nav-cta { display: none !important; }
  .nav-right { gap: 6px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px var(--text, system-ui); cursor: pointer; }
  .nav-toggle i { position: relative; width: 14px; height: 10px; }
  .nav-toggle i::before, .nav-toggle i::after { content: ''; position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .25s ease, top .25s ease; }
  .nav-toggle i::before { top: 1px; } .nav-toggle i::after { top: 7px; }
  .nav-toggle[aria-expanded='true'] i::before { top: 4px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded='true'] i::after { top: 4px; transform: rotate(-45deg); }
  .nav-sheet { position: fixed; inset: 60px 0 0; z-index: 49; display: flex; flex-direction: column; gap: 28px; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--paper, #fff); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
  .nav-sheet[hidden] { display: none; }
  .nav-sheet.on { opacity: 1; transform: none; }
  .nav-sheet nav { display: grid; gap: 26px; }
  .nav-sheet h2 { margin: 0 0 6px; font: 600 13px/1 var(--text, system-ui); letter-spacing: .02em; color: var(--ink-50); }
  .nav-sheet a:not(.btn) { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
  .nav-sheet a:not(.btn) b { font: 600 19px/1.2 var(--display, system-ui); font-variation-settings: 'wdth' 112; letter-spacing: -0.02em; }
  .nav-sheet a:not(.btn) span { font-size: 14px; color: var(--ink-50); }
  .nav-sheet a[aria-current='page'] b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .nav-sheet-cta { justify-content: center; margin-top: auto; padding: 16px 26px; font-size: 16px; }
  html.sheet-open, html.sheet-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav-sheet, .nav-toggle i::before, .nav-toggle i::after { transition: none !important; } }
/* ---- Easter eggs (assets/eggs.js) -------------------------------------------------------------- */
.egg-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 12px); opacity: 0; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 16px; background: #0b0d12; color: #f3efe6; font: 500 14.5px/1.4 var(--text, system-ui); box-shadow: 0 18px 50px rgba(0,0,0,.25); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.egg-toast.on { opacity: 1; transform: translate(-50%, 0); }
:root[data-cabin='night'] .egg-toast { background: #ece7dc; color: #0b0d12; }
.egg-plane { position: fixed; z-index: 100; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.3)); animation: egg-fly 2.4s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes egg-fly {
  0% { transform: translate(0, 0) rotate(0deg) scale(.6); opacity: 0; }
  10% { opacity: 1; }
  60% { transform: translate(55vw, 22vh) rotate(8deg) scale(1); }
  100% { transform: translate(110vw, -12vh) rotate(-14deg) scale(.8); opacity: 0; }
}
/* First class: gold accents for the rest of the visit. */
.first-class body::before { content: ''; position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: linear-gradient(90deg, #8a6420, #f3d27a, #8a6420); }
.first-class .brand i, .first-class .mark i { background: conic-gradient(from 200deg, #f3d27a, #b8862b, #fff1c4, #f3d27a) !important; }
.first-class .btn.solid, .first-class .ask button, .first-class .send { background: linear-gradient(135deg, #f3d27a, #c9a24a) !important; color: #1a1406 !important; }