/* The top bar, the same on every page that has it (the home and About). */
/* As tripsy.app does it: on top the bar is 1000 wide and is only the logo and buttons over the cream; the moment the
   page starts to leave the top it narrows to 920, centred, with a quick start and a soft landing, while its paper and
   soft shadow come in. Nothing is laid out again: the paper scales in and the logo and buttons slide inward, so the
   graphics card does it alone while the page is busy with the garden. The script sets --nav-inset and --nav-scale. */
.nav {
  --nav-inset: 40px; --nav-scale: 0.92; --nav-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: fixed; top: 12px; left: 0; right: 0; z-index: 50; isolation: isolate; max-width: 1000px; margin: 0 auto;
  padding: 9px 16px 9px 32px; display: flex; align-items: center; gap: 28px; border-radius: 999px;
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(253, 252, 248, 0.9); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 3px 5px rgba(27, 23, 10, 0.05), 0 1px 1px rgba(27, 23, 10, 0.04);
  opacity: 0; transition: opacity 0.22s ease-out, transform 0.42s var(--nav-ease);
}
/* The pill's paper and the pieces that slide are their own layers from the start, drawn while the page sits still, so
   the first scroll only moves them instead of drawing them in the same frame. */
.nav > * { transition: transform 0.42s var(--nav-ease); will-change: transform; }
.nav::before { will-change: opacity, transform; }
/* When the footer comes into view the bar slides up and out of the way */
.nav { transition: transform 0.45s var(--nav-ease), opacity 0.3s ease; }
.nav.away { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.nav.stuck::before { opacity: 1; transform: scaleX(var(--nav-scale)); }
.nav.stuck > .brand { transform: translateX(var(--nav-inset)); }
.nav.stuck > .switch, .nav.stuck > .soon, .nav.stuck > .burger { transform: translateX(calc(var(--nav-inset) * -1)); }
/* The page's other doors, in the middle of the bar on a computer; on a phone they live in the menu. */
.nav .links { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 32px; }
.nav .links a { color: var(--muted); text-decoration: none; font: 500 15px/1 var(--round); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .nav .links a:hover { color: var(--ink); } }
.nav .links a[aria-current] { color: var(--ink); }
@media (max-width: 899px) { .nav .links { display: none; } }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 26px/1 var(--app-serif); }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
/* The language: one small button with the one in use, opening the three in a card under it that grows from its
   corner (quick, eased out), the one in use marked with a dot. */
.switch { position: relative; margin-left: auto; }
.switch .pick {
  display: flex; align-items: center; gap: 4px; font: 600 12px/1 var(--round); letter-spacing: 0.05em; border: 0;
  background: none; color: var(--muted); padding: 8px 8px 8px 10px; border-radius: 999px; cursor: pointer;
  transition: transform 120ms ease-out, background-color 160ms ease, color 160ms ease;
}
.switch .pick:active { transform: scale(0.94); }
.switch .pick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-linejoin: round; transition: rotate 0.22s cubic-bezier(0.23, 1, 0.32, 1); }
.switch.open .pick { background: var(--line); color: var(--ink); }
.switch.open .pick svg { rotate: 180deg; }
html[lang="pt"] .switch .code::before { content: "PT"; }
html[lang="en"] .switch .code::before { content: "EN"; }
html[lang="es"] .switch .code::before { content: "ES"; }
.switch .picks {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 156px; padding: 6px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 2px; background: #FDFCF8;
  box-shadow: 0 18px 44px -14px rgba(27, 23, 10, 0.24), 0 0 0 1px rgba(27, 23, 10, 0.06);
  transform-origin: 90% 0; opacity: 0; transform: translateY(-4px) scale(0.97); pointer-events: none;
  transition: opacity 0.16s ease-out, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.switch.open .picks { opacity: 1; transform: none; pointer-events: auto; }
.switch .picks button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border: 0;
  border-radius: 12px; background: none; color: var(--ink); font: 500 15px/1 var(--round); text-align: left; cursor: pointer;
  transition: background-color 140ms ease;
}
.switch .picks button:active { background: var(--line); }
html[lang="pt"] .switch [data-set="pt"]::after, html[lang="en"] .switch [data-set="en"]::after,
html[lang="es"] .switch [data-set="es"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .switch .pick:hover { color: var(--ink); }
  .switch .picks button:hover { background: var(--line); }
}
@media (prefers-reduced-motion: reduce) { .switch .picks { transition: opacity 0.15s ease; transform: none; } }
.soon {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 500 15px/1 var(--round); white-space: nowrap; text-decoration: none;
}
/* Solid paper where transparency is turned down, and on touch screens, where blurring what scrolls under the bar
   every frame costs more than it shows through 10% of see-through paper. */
@media (prefers-reduced-transparency: reduce), (hover: none) {
  .nav::before { background: #FDFCF8; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* On a phone: the logo, the waitlist and a menu button; the doors and the language open from it, in a card under the
   bar that grows from the button's corner (quick, eased out; a tap anywhere else, a pick or Esc closes it). */
.burger, .menu { display: none; }
@media (max-width: 899px) {
  .nav { top: 10px; left: 12px; right: 12px; gap: 8px; padding: 8px 8px 8px 14px; }
  .soon { padding: 10px 14px; font-size: 14px; }
  .nav .switch { display: none; }
  .nav .soon { margin-left: auto; }
  .burger {
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none;
    color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .burger .x { display: none; }
  .nav.open .burger .x { display: block; }
  .nav.open .burger .lines { display: none; }
  .menu {
    display: block; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 10px; border-radius: 26px;
    background: #FDFCF8; box-shadow: 0 24px 60px -16px rgba(27, 23, 10, 0.28), 0 0 0 1px rgba(27, 23, 10, 0.06);
    transform-origin: 92% 0; opacity: 0; transform: translateY(-6px) scale(0.97); pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .nav.open .menu { opacity: 1; transform: none; pointer-events: auto; }
  .nav.stuck .menu { left: var(--nav-inset); right: var(--nav-inset); }
  .menu a { display: block; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--ink);
    font: 30px/1.1 var(--app-serif); -webkit-tap-highlight-color: transparent; }
  .menu a:active { background: var(--line); }
  .menu .langs { display: flex; gap: 6px; padding: 12px 10px 6px; margin: 6px 0 0; border-top: 1px solid var(--line); }
  .menu .langs button { flex: 1; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--muted);
    font: 500 15px/1 var(--round); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html[lang="pt"] .menu [data-set="pt"], html[lang="en"] .menu [data-set="en"], html[lang="es"] .menu [data-set="es"] { background: var(--line); color: var(--ink); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .menu { transition: opacity 0.15s ease; transform: none; } }