/* davidrussell.tech — 3D layer. Everything here is scoped to html.is-3d,
   which main.js adds only once the scene is actually running. */

#sky {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block;
  opacity: 0; transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-3d #sky { opacity: 1; }
.is-3d body::before { opacity: 0; transition: opacity 1.6s; }

/* Sections become flight distance. The panel rides along, sticky, and JS sets --near (0..1)
   from the scroll position, never from the camera, so content never waits for the flight. */
.is-3d .hero { min-height: 150vh; align-content: start; padding-top: 0; pointer-events: none; }
.is-3d .hero__inner { position: sticky; top: 20vh; opacity: var(--near, 1); }
.is-3d .hero__inner.is-near > * { pointer-events: auto; }
.is-3d .stop { min-height: 220vh; padding-block: 0; border: 0; pointer-events: none; }
.is-3d .panel {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  width: min(44rem, 46vw); max-width: none; padding-block: 4.5rem 1.5rem;
  opacity: var(--near, 0);
  transform: translate3d(0, calc((1 - var(--near, 0)) * 2.5rem), 0);
}
/* the sheet the content is printed on: enough ink behind it that text never fights the scene */
.is-3d .panel__sheet {
  background: rgba(8, 8, 10, 0.78); border: 1px solid var(--line);
  padding: clamp(1rem, 1.6vw, 1.6rem); max-height: 100%; overflow-y: auto; overscroll-behavior: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
@supports (backdrop-filter: blur(6px)) { .is-3d .panel__sheet { background: rgba(8, 8, 10, 0.6); backdrop-filter: blur(7px); } }
.is-3d .panel.is-near .panel__sheet { pointer-events: auto; }
.is-3d .panel h2 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.is-3d .panel .lede { font-size: 1em; }
.is-3d .features { margin-bottom: 1rem; font-size: 0.95em; }
.is-3d .features li { padding-block: 0.2em; }
.is-3d .chips { margin-bottom: 0.9rem; }
.is-3d .plate { margin-bottom: 1rem; }
/* only the panel that also carries features and thumbnails has to crop its lead image */
.is-3d .plate img { max-height: 48vh; object-fit: contain; }
.is-3d .panel__sheet:has(.thumbs) .plate img { max-height: 27vh; object-fit: cover; object-position: top left; }
.is-3d .about { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
.is-3d .stop[data-side="left"] .panel { margin-left: auto; }   /* body left, panel right */
.is-3d .stop[data-side="right"] .panel { margin-right: auto; } /* body right, panel left */
.is-3d .foot { display: none; }

@media (max-width: 800px), (orientation: portrait) {
  .is-3d .panel { width: auto; justify-content: flex-end; padding-block: 38svh 1rem; margin: 0 !important; }
  .is-3d .plate img { max-height: 22vh; }
  .is-3d .about img { display: none; } .is-3d .about { grid-template-columns: 1fr; }
}

/* flight-path rail */
.rail { display: none; }
.is-3d .rail {
  display: flex; flex-direction: column; gap: 0.9rem;
  position: fixed; right: calc(var(--gutter) * 0.6); top: 50%; transform: translateY(-50%); z-index: 15;
  list-style: none; margin: 0; padding: 0;
}
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; text-decoration: none; }
.rail span { background: rgba(8, 8, 10, 0.75); padding: 0.45em 0.6em; opacity: 0; transform: translateX(6px); transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-size: 0.66rem; }
.rail a::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  border: 1px solid var(--muted); transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rail a:hover span, .rail a:focus-visible span, .rail a[aria-current="true"] span { opacity: 1; transform: none; }
.rail a[aria-current="true"]::after {
  background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scale(1.35);
}
@media (max-width: 800px) { .is-3d .rail span { display: none; } }

/* ?debug overlay */
.debug {
  position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 50; margin: 0;
  font: 11px/1.5 ui-monospace, Consolas, monospace; color: var(--accent);
  background: rgba(5, 6, 10, 0.7); padding: 0.5rem 0.7rem; border: 1px solid var(--line);
  white-space: pre; pointer-events: none;
}