/* Home: one fixed screen, the aquarium layers behind a pill menu and the name. */
html, body.home { height: 100%; overflow: hidden; }
html { scrollbar-gutter: auto; }   /* never scrolls; no gutter strip beside the art */
body.home { position: fixed; inset: 0; background: #050d24; touch-action: none; }

.scene { position: fixed; inset: 0; overflow: hidden; }

.layer {
  position: absolute;
  inset: 0;                /* without JS: every layer simply covers the window */
  will-change: transform;
  pointer-events: none;
}
.layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  margin: 0;
  border-radius: 0;
  user-select: none;
}

/* Loading: a soft picture of the water shows at once, then the whole aquarium
   fades in together once every layer is decoded, so nothing pops in piecemeal.
   No CSS filters anywhere in the scene: phones (iOS Safari especially) give up on
   filtered full-screen layers and paint them as blank sheets. The stand-in is
   blurred at build time instead. */
.js .layer .main { opacity: 0; transition: opacity 0.8s ease; }
.js .scene.ready .layer .main { opacity: 1; }
.layer .placeholder { transition: opacity 0.4s ease 0.8s; }
.js .scene.ready .layer .placeholder { opacity: 0; }

/* Dark mode dims the art with a 10% black veil (same as brightness(0.9), minus the filter). */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.home-nav { position: relative; z-index: 10; }

.home-name {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding: 2rem;
  color: #f7f2ed;
}
.home-name .title {
  margin: 0;
  font-size: var(--size-display);
  color: #f7f2ed;
}

/* Narrow screens keep the name on the walkway at the bottom, just with the column's
   smaller gutter (and clear of the iPhone home bar). */
@media (max-width: 900px) {
  .home-name { padding: 20pt 20pt calc(20pt + env(safe-area-inset-bottom)); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene::after { opacity: 0.1; }
}
:root[data-theme="dark"] .scene::after { opacity: 0.1; }

@media (prefers-reduced-motion: reduce) {
  .js .layer .main, .layer .placeholder { transition: none; }
}