/* Full-screen travel uses a broad ease-in-out rather than a concentrated burst. */
:root {
  --motion-fast: 240ms;
  --motion-menu: 320ms;
  --motion-settle: 420ms;
  --motion-page: 600ms;
  --motion-enter: 600ms;
  --motion-ease: cubic-bezier(0.42, 0, 0.58, 1);
}
html {
  background: #080908;
}
.page-content-surface {
  position: relative;
  min-height: 100vh;
  background: #080908;
  overflow: clip;
}
.page-content-surface.surface-entering {
  z-index: 3200;
}
.page-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  z-index: 3000;
  background: #080908;
  visibility: hidden;
  color-scheme: dark;
}
.persistent-shell body > .bottom-dock {
  z-index: 3500;
}
.persistent-shell body > .dock-menu,
.persistent-shell body > .reach-menu {
  z-index: 3600;
}
/* One material, one control owner: page changes never swap dock surfaces. */
/* Optical material is owned by glass-material.css on every page. */
.embedded-page .bottom-dock,
.embedded-page .dock-menu,
.embedded-page .reach-menu,
.embedded-page #music-fireflies {
  visibility: hidden !important;
  pointer-events: none !important;
}
.embedded-page #opening-intro {
  display: none !important;
}
.opening-intro {
  z-index: 4000 !important;
}
/* Offscreen positioning alone leaks when a surface is transformed. */
.skip-link:not(:focus-visible) {
  clip-path: inset(100%);
  pointer-events: none;
}
html.page-switching .skip-link {
  visibility: hidden;
}
html.page-switching {
  cursor: progress;
}
/* Home has percentage-height children; give their permanent wrapper a definite
   viewport height so the scene and ambient floor reach the bottom edge. */
html[data-page='home'] .page-content-surface {
  height: 100dvh;
  min-height: 100dvh;
}

/* The persistent dock adopts About's outer frame, while content stays inset. */
html.persistent-shell[data-active-page='about'] body > .bottom-dock {
  --dock-side: 24px;
}
@media (max-width: 760px) {
  html.persistent-shell[data-active-page='about'] body > .bottom-dock {
    --dock-side: 20px;
  }
}
@media (max-width: 520px) {
  html.persistent-shell[data-active-page='about'] body > .bottom-dock {
    --dock-side: 16px;
  }
}