/* DOM-film fallback (reduced motion, ?gl=0, no WebGL2): owned by the fallback pass.
   Everything here is scoped to html:not(.gl-on). The elements themselves are
   created by js/fallback.js, which only loads when WebGL did not boot, so the
   WebGL page never fetches or decodes any of these images. */

/* ---- phone framing -------------------------------------------------------
   The engine centres every leg (object-fit: cover). On a portrait phone that
   crops 3/4 of the plate width, so keep each leg's subject in frame. Same
   focus points as the WebGL film (direction.js FOCUS) where it has one; the
   ridge is tuned so the igloo entrance (plate x 58-64%) is not cut off at
   390 px wide. Both Ridge legs share it, so the loop still lands on the
   start frame. */
html:not(.gl-on) [data-sc-waypoint="Ridge"] :is(img, video)    { object-position: 57% 50%; }
html:not(.gl-on) [data-sc-waypoint="Far Side"] :is(img, video) { object-position: 48% 60%; }
html:not(.gl-on) [data-sc-waypoint="Beam"] :is(img, video)     { object-position: 50% 55%; }

/* ---- plate overlays ------------------------------------------------------
   A full-plate layer inside a leg, above its poster (z 0) and clip (z 1).
   Its images use the same cover geometry and object-position as the poster,
   so anything registered to the plate stays registered at any aspect. */
.fb-plate {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.fb-plate > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}

/* ---- keepsakes: the three artifacts over the fog still -------------------- */
.fb-keep {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.fb-keep__item {
  --x: 50; --y: 60; --s: 30vh; --r: 0deg;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--s);
  aspect-ratio: 1;
  margin: calc(var(--s) * -0.5) 0 0 calc(var(--s) * -0.5);
  opacity: 0;
  will-change: opacity, transform;
}
.fb-keep__art {
  position: absolute; inset: 0;
  transform: rotate(var(--r));
}
/* a soft cold bloom behind each block: snow-white core, a breath of the glow
   accent at the rim, so the ice separates from the fog without a hard edge */
.fb-keep__art::before {
  content: "";
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(238, 243, 246, 0.62) 0%,
    rgba(238, 243, 246, 0.30) 38%,
    color-mix(in oklab, var(--glow, #8ff6ff) 14%, transparent) 60%,
    transparent 78%);
}
.fb-keep__art img {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* the mono tag under each artifact, like the WebGL film's callouts */
.fb-keep__tag {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, 0.2rem);
  white-space: nowrap;
  font-family: var(--font-hud, "Martian Mono", ui-monospace, monospace);
  font-size: var(--hud-size, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #16212b);
  display: flex; gap: 0.9em; align-items: baseline;
  padding: 0.35em 0.7em;
  border-top: 1px solid color-mix(in oklab, var(--ink, #16212b) 40%, transparent);
  background: radial-gradient(closest-side, rgba(238, 243, 246, 0.55), rgba(238, 243, 246, 0) 100%);
}
.fb-keep__tag b { font-weight: 400; opacity: 0.62; }

/* wide: a staggered triptych in the lower two-thirds, clear of the top-left copy */
.fb-keep__item--1 { --x: 20; --y: 62; --s: min(36vh, 25vw); --r: -9deg; }
.fb-keep__item--2 { --x: 51; --y: 57; --s: min(42vh, 29vw); --r: 2deg; }
.fb-keep__item--3 { --x: 81; --y: 66; --s: min(33vh, 23vw); --r: 7deg; }

/* portrait phones: a zig-zag down the column under the copy */
@media (max-aspect-ratio: 4/5) {
  .fb-keep__item--1 { --x: 29; --y: 41; --s: min(37vw, 19vh); }
  .fb-keep__item--2 { --x: 70; --y: 60; --s: min(41vw, 21vh); }
  .fb-keep__item--3 { --x: 31; --y: 79; --s: min(35vw, 18vh); }
}

/* landscape phones: clear of the copy, the readout and Sound */
@media (max-height: 500px) and (min-aspect-ratio: 3/2) {
  .fb-keep__item--1 { --x: 33; --y: 66; --s: min(30vh, 22vw); }
  .fb-keep__item--2 { --x: 55; --y: 52; --s: min(34vh, 25vw); }
  .fb-keep__item--3 { --x: 77; --y: 60; --s: min(28vh, 20vw); }
}
/* wider than the plate: the frame crops top and bottom, keep the saucer in */
@media (min-aspect-ratio: 16/9) {
  html:not(.gl-on) [data-sc-waypoint="Far Side"] :is(img, video) { object-position: 48% 40%; }
  html:not(.gl-on) [data-sc-waypoint="Beam"] :is(img, video) { object-position: 50% 40%; }
}

/* belt and braces: never show any of this over the WebGL film */
html.gl-on .fb-plate,
html.gl-on .fb-keep { display: none !important; }