/* Live hero (stars, globules, name), and the static design if it can't run */
html { background: #000; }
body.space { background: transparent; margin: 0; }

.hero3d {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}

/* fixed: the stars and globules stay behind the whole site */
#hero3d-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: block;
  z-index: -4;
  visibility: hidden;   /* until it has drawn its first frame: no fade, it just arrives */
}
html[data-backdrop="live"] #hero3d-canvas { visibility: visible; }
html[data-backdrop="static"] #hero3d-canvas { display: none; }

/* touch screens: each globule is its own layer, moved as the page scrolls (js/blobs.js) */
.hero3d-globules {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: -3;
  pointer-events: none;
  will-change: transform;
}
.hero3d-globule {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  display: none;
}
/* one tile's width of overhang on every side, for the grain to jump around in */
.hero3d-grain {
  position: fixed;
  left: -512px;
  top: -512px;
  width: calc(100vw + 1024px);
  height: calc(100vh + 1024px);
  z-index: -2;
  pointer-events: none;
  will-change: transform;
  image-rendering: pixelated;
  background-size: 512px 512px;
  display: none;
}
html[data-backdrop="live"] .hero3d-globule,
html[data-backdrop="live"] .hero3d-grain { display: block; }

/* the name scrolls with the page, so it stays locked to the HTML */
#hero3d-name {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: block;
  z-index: -1;
  visibility: hidden;
}
html[data-backdrop="live"] #hero3d-name { visibility: visible; }
html[data-backdrop="static"] #hero3d-name { display: none; }

/* Static design: wallpaper + flat name. The page stays black while the live hero gets its chance;
   js/backdrop.js shows this only if the hero can't run. Not displayed means not downloaded. */
#backdrop-static {
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  background: #000 url(../assets/reigonalpha6_2560.jpg) center / cover no-repeat;
}
#backdrop-static, .hero3d-fallback { display: none; animation: backdrop-in 0.5s ease; }
html[data-backdrop="static"] #backdrop-static,
html[data-backdrop="static"] .hero3d-fallback { display: block; }
@keyframes backdrop-in { from { opacity: 0; } }

/* resume link + scroll arrow sit on top of the canvas, pinned to the bottom */
.hero3d-ui {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero3d-ui a { pointer-events: auto; }

/* Phones in landscape: everything draws edge to edge (viewport-fit=cover in index.html), and only
   text is kept clear of the Dynamic Island, on whichever side it's on (data-island, set in index.html).
   iOS reports an inset on both sides, so the other side's is ignored: anything may draw there. */
:root { --island-left: 0px; --island-right: 0px; }
html[data-island="left"] { --island-left: env(safe-area-inset-left, 0px); }
html[data-island="right"] { --island-right: env(safe-area-inset-right, 0px); }
.hero3d-ui {
  box-sizing: border-box;
  padding-left: var(--island-left);
  padding-right: var(--island-right);
}
/* The text column is always the left one. Nudged, not padded: padding narrows the row and wraps the
   screenshots and videos below the text. Its own 5% margin already covers most of the inset. */
.container_one {
  position: relative;
  left: max(0px, calc(var(--island-left) - 5%));
}


.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}