/* The Explore stage: the red ground, the girl, and the two figures that rise
   out of the floor. Layout mirrors the home hero: a scene at the concept's
   aspect ratio covering the viewport, children placed in concept
   coordinates as percentages. Everything is scoped to .explore-page (the
   stage's root in index.html; explore-rive.html's body). */
.explore-page { background: var(--ink); }

.explore-page .stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
  container-type: size;               /* the backdrop is laid out in cq units */
}
.explore-page .scene {
  opacity: 0;                         /* explore.js fades or reveals it */
  transition: none;
}
/* The backdrop: the Behemoth artwork as the home page shows it (eyes at
   rest, the painted girl cleared — tools/compose_backdrop.py), laid out
   HERE, without a script, like the home page lays out its scene: covering
   the stage at the artwork's aspect (4128 x 1536), centred — so the page's
   very first frame is the picture the visitor just left (explore.js reads
   the box back for the prelude). */
.backdrop {
  position: absolute;
  width: max(100cqw, 100cqh * 4128 / 1536);
  height: max(100cqh, 100cqw * 1536 / 4128);
  left: calc((100cqw - max(100cqw, 100cqh * 4128 / 1536)) / 2);
  top: calc((100cqh - max(100cqh, 100cqw * 1536 / 4128)) / 2);
}
.backdrop img { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; }
/* The girl on her home spot, part of that first frame: girl-home.png at
   geometry.json's girl_home.box_home, in the artwork's percentages (the
   box is 1863.8, 981.3 – 2480.9, 2038.5 of 4128 x 1536; the height follows
   the drawing's own aspect). explore.js hides her once the prelude draws
   her frames in the same place. */
.backdrop .girl-home { left: 45.150%; top: 63.887%; width: 14.949%; height: auto; }
/* During the prelude the scene is revealed as a sector growing clockwise
   about the girl, with her wand (--wx / --wy, --reveal in degrees). */
.explore-page .scene.revealing {
  /* from 220deg: where her hand with the flute starts its swing (0 = 12 o'clock) */
  -webkit-mask-image: conic-gradient(from 220deg at var(--wx, 50%) var(--wy, 70%), #000 0deg, #000 var(--reveal, 0deg), transparent var(--reveal, 0deg));
  mask-image: conic-gradient(from 220deg at var(--wx, 50%) var(--wy, 70%), #000 0deg, #000 var(--reveal, 0deg), transparent var(--reveal, 0deg));
}
.ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* The receding frames behind the characters (drawn by explore.js). Remove
   them with `display: none` here, or TUNNEL.enabled = false in explore.js. */
.ground .tunnel { display: block; }

.explore-page .figures {
  position: absolute;
  inset: 0;
}
.explore-page .figures svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* a character is clickable (explore.js: the takeover) */
.figures svg g[id$="-figure"] { cursor: pointer; }
.figures svg g[id$="-figure"] path { pointer-events: visiblePainted; }
/* explore-rive.html: the figures are a Rive canvas in the same slot */
.figures .rive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* The world is scaled about a point above the floor, so the floor line moves
   up and more floor shows; the ground polygon follows (explore.js). */
.world {
  position: absolute;
  inset: 0;
  transform: scale(var(--world-scale, 0.86));
  transform-origin: 50% 40%;
}
/* Below the floor line nothing shows: the figures rise from under it
   (clip-path set by explore.js from the measured floor edge). */

.explore-page .layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* the girl's box (with her shadow) and her frames' boxes come from
   assets/explore/geometry.json, set by explore.js; they run past the frame's
   bottom on purpose so the shadow reaches the edge on every screen */
#x-girl-anim, #girl-anim { display: none; }
.girl-prelude { position: absolute; display: none; pointer-events: none; }

/* ---- Captions: condensed display caps, leaning like the concept ---- */
.caption {
  position: absolute;
  font-family: "Anton", "Archivo Black", sans-serif;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.98;
  pointer-events: none;
}
.caption .line { display: block; overflow: hidden; }
.caption .line > span { display: inline-block; will-change: transform, opacity; }
.caption--left {
  left: 4.5%;
  top: 11.5%;                          /* off the top edge, nearer the character */
  font-size: calc(var(--scene-h, 100vh) * 0.072);   /* the same size as the right caption's */
  transform: rotate(-9deg) skewX(-6deg);
  transform-origin: 0 100%;
}
.caption .line + .line { font-size: 0.72em; margin-top: 0.08em; }   /* the subtitle */
.caption--right {
  left: 67%;
  top: 27%;                            /* two lines now: kept clear of the beast's head */
  font-size: calc(var(--scene-h, 100vh) * 0.072);
  transform: rotate(-11deg) skewX(-6deg);
  transform-origin: 0 100%;
}

@media (prefers-reduced-motion: reduce) {
  .explore-page .scene { opacity: 1 !important; }
}