@import url("/manifesto.css?v=scroll-1");
@import url("/products.css");
/* One persistent scene. Only the logo and foreground content transition. */
:root { --scene-duration: 800ms; --scene-ease: cubic-bezier(.22, .7, .18, 1); }
.descent, .descent-stage { position: fixed; inset: 0; height: 100svh; }
.descent-stage { touch-action: auto; }
.descent-intro { pointer-events: none; }
.descent-intro .brand, .descent-intro .ways, .descent-intro .join { pointer-events: auto; }
.descent-intro .brand {
  position: fixed;
  top: var(--home-logo-top);
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top left;
  text-decoration: none;
  color: inherit;
  z-index: 2;
  transition: top var(--scene-duration) var(--scene-ease),
    left var(--scene-duration) var(--scene-ease),
    transform var(--scene-duration) var(--scene-ease),
    font-size var(--scene-duration) var(--scene-ease);
}
.in-water .brand { color: transparent; }
.descent-intro .brand span {
  white-space: nowrap;
  overflow: hidden;
  max-width: 6em;
  opacity: 1;
  transition: opacity 240ms ease, max-width var(--scene-duration) var(--scene-ease);
}
:is(.is-manifesto, .is-products, .is-kit-detail) .descent-intro .brand span {
  opacity: 0;
  max-width: 0;
}
/* Keep the remaining symbol's link tight while retaining its accessible name. */
:is(.is-manifesto, .is-products, .is-kit-detail) .descent-intro .brand { gap: 0; }
/* Moving the logo independently leaves the motto in its original position. */
.descent-intro .tagline { margin-top: calc(clamp(34px, 3.4vw, 48px) * 1.05 + clamp(26px, 4.2vw, 72px)); }
.tagline, .ways, .descent-intro .join { transition: opacity 340ms ease, visibility 0s; }
html.is-manifesto { height: auto; overflow-x: clip; overflow-y: auto; }
.is-manifesto body { height: auto; overflow: visible; }
.is-manifesto .descent-intro .brand {
  top: 28px;
  left: 28px;
  transform: translateX(0);
  font-size: 25px;
}
.is-manifesto .tagline, .is-manifesto .ways, .is-manifesto .descent-intro .join {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 340ms ease, visibility 0s 340ms;
}
.is-manifesto .manifesto-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 560ms 220ms ease, visibility 0s;
}
.card .descent-intro .brand { position: static; transform: none; }
.card .descent-intro .tagline { margin-top: clamp(26px, 4.2vw, 72px); }
@media (max-width: 620px) {
  .is-manifesto .descent-intro .brand { top: 24px; left: 18px; font-size: 22px; }
}
@media (max-height: 650px) {
  .descent-intro .tagline { margin-top: calc(clamp(34px, 3.4vw, 48px) * 1.05 + 22px); }
}
@media (max-height: 420px) {
  .descent-intro .tagline { margin-top: calc(clamp(34px, 3.4vw, 48px) * 1.05 + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .descent-intro .brand, .tagline, .ways, .descent-intro .join, .manifesto-panel,
  .is-manifesto .manifesto-panel { transition: none; }
  .descent-intro .brand span { transition: none; }
}

/* The living light contracts into a floating glass capsule on inner routes.
   Keep the canvas at viewport size so its clock and texture never restart. */
:root {
  --nav-inset: 24px;
  --nav-top: max(20px, env(safe-area-inset-top));
  --nav-height: 64px;
}
.scene-nav { display: contents; }
.scene-links {
  position: fixed;
  top: var(--nav-top);
  right: calc(var(--nav-inset) + 28px);
  left: calc(var(--nav-inset) + 76px);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s 240ms;
}
:is(.is-manifesto, .is-products) .scene-links {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 400ms 300ms ease, visibility 0s;
}
.scene-links > * {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
  color: #5f5c62;
  font: 400 14px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.scene-links a:hover, .scene-links [aria-current="page"] { color: #211d28; }
.scene-links [aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.scene-links [aria-disabled="true"] { color: #99969b; cursor: default; }
.scene-links a:focus-visible { outline: 1px solid #45404d; outline-offset: 4px; border-radius: 4px; }
.descent-stage { background: transparent; }
.descent-light {
  z-index: 1;
  clip-path: inset(0 0 0 0 round 0px);
  transition: clip-path var(--scene-duration) var(--scene-ease), opacity var(--scene-duration) ease;
}
.descent-intro { z-index: 3; }
.descent-stage::before, .descent-stage::after {
  content: "";
  position: fixed;
  top: var(--nav-top);
  left: var(--nav-inset);
  right: var(--nav-inset);
  height: var(--nav-height);
  border-radius: 999px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.descent-stage::before {
  z-index: 0;
  background: #ffffffa6;
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  backdrop-filter: blur(20px) saturate(110%);
}
.descent-stage::after {
  z-index: 2;
  /* A single hairline, without the stacked inset highlights of a bevel. */
  border: 1px solid #fffffff2;
  background: linear-gradient(180deg, #ffffff24, transparent 55%);
  box-shadow: 0 10px 32px -8px rgba(48, 54, 64, .045),
    0 22px 64px -12px rgba(48, 54, 64, .035);
}
:is(.is-manifesto, .is-products) body { background: #faf9f6; }
:is(.is-manifesto, .is-products) .descent { z-index: 3; pointer-events: none; }
:is(.is-manifesto, .is-products) .descent-light {
  opacity: 1;
  clip-path: inset(var(--nav-top) var(--nav-inset)
    calc(100% - var(--nav-top) - var(--nav-height)) var(--nav-inset) round 999px);
}
:is(.is-manifesto, .is-products) .descent-stage::before,
:is(.is-manifesto, .is-products) .descent-stage::after { opacity: 1; }
:is(.is-manifesto, .is-products) .in-water .mark { visibility: visible; }
:is(.is-manifesto, .is-products) .descent-intro .brand {
  top: calc(var(--nav-top) + (var(--nav-height) - 44px) / 2);
  left: calc(var(--nav-inset) + 12px);
  width: 44px;
  height: 44px;
  justify-content: center;
  font-size: 25px;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.brand:focus-visible { outline: 1px solid #45404d; outline-offset: 3px; }
.manifesto-panel::before { display: none; }
.manifesto-panel { padding-top: max(112px, 15vh); }
@media (max-width: 620px) {
  :root { --nav-inset: 12px; --nav-top: max(12px, env(safe-area-inset-top)); --nav-height: 56px; }
  :is(.is-manifesto, .is-products) .descent-intro .brand { font-size: 22px; left: calc(var(--nav-inset) + 8px); }
  .manifesto-panel { padding-top: 94px; }
  .scene-links { left: calc(var(--nav-inset) + 58px); right: calc(var(--nav-inset) + 18px); gap: 14px; }
  .scene-links > * { font-size: 12px; }
}
@media (max-width: 370px) {
  .scene-links { gap: 9px; right: calc(var(--nav-inset) + 14px); }
  .scene-links > * { font-size: 10.5px; }
}
@media (max-height: 700px) {
  .manifesto-panel { padding-top: calc(var(--nav-top) + var(--nav-height) + 16px); }
}
@media (max-height: 450px) and (min-width: 621px) {
  :root { --nav-top: 8px; --nav-height: 48px; }
  .manifesto-panel { padding-top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .descent-light, .descent-stage::before, .descent-stage::after,
  .scene-links, :is(.is-manifesto, .is-products) .scene-links { transition: none; }
}

/* Center the actual logo/wordmark together, independent of the canvas mask. */
.descent-intro .brand { width: max-content; }
.descent-intro.in-water .brand { color: #000; }
.descent-intro.in-water .mark { visibility: visible; }
:is(.is-manifesto, .is-products) .descent-intro .brand { width: 44px; }

/* Content scrolls below the fixed glass navigation. */
html { scroll-padding-top: calc(var(--nav-top) + var(--nav-height) + 24px); }
.manifesto-panel { display: none; position: relative; padding-bottom: max(64px, env(safe-area-inset-bottom)); }
.is-manifesto .manifesto-panel { display: block; }
/* Let the landing content grow too, rather than clipping short viewports. */
html:not(.is-manifesto):not(.is-products) .descent,
html:not(.is-manifesto):not(.is-products) .descent-stage {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 100svh;
  overflow: visible;
}
html:not(.is-manifesto):not(.is-products) .descent-intro {
  position: relative;
  inset: auto;
  min-height: 100svh;
  overflow: visible;
}
html:not(.is-manifesto):not(.is-products) .descent-light { position: fixed; height: 100svh; }

/* Animate intentional route changes only, never initial layout or browser resizing. */
html:not(.scene-changing) .descent-intro .brand,
html:not(.scene-changing) .descent-intro .brand span { transition: none; }