/* The world fills the viewport; the stage keeps the reference proportions and scales to fit. */
.world {
  display: grid;
  place-items: center;
  height: 100dvh;
  padding: var(--world-pad);
}

/* The Factory stage and the nav frame share one box, stacked in the same grid cell,
   so the navigation sits beside the collage but persists across every scene. */
.stage,
.frame {
  grid-area: 1 / 1;
  width: min(
    100vw - 2 * (var(--world-pad) + var(--nav-space)),
    (100dvh - 2 * var(--world-pad)) * var(--stage-ratio)
  );
  aspect-ratio: var(--stage-ratio);
}

.frame {
  position: relative;
  z-index: var(--z-nav);
  pointer-events: none;
}

/* A scene that is not the active one stays laid out (so it can be measured) but unseen. */
[data-scene].is-away {
  visibility: hidden;
  pointer-events: none;
}

.stage {
  position: relative;
  z-index: var(--z-scene);
  container-type: inline-size;
  transition:
    filter var(--recede-ms, 600ms) var(--ease-scene),
    opacity var(--recede-ms, 600ms) var(--ease-scene),
    scale var(--recede-ms, 600ms) var(--ease-scene);
}

/* While a card has taken over, the collage fades and softens behind it. */
.stage.is-receded {
  filter: blur(6px);
  opacity: 0.35;
  scale: 0.985;
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-receded {
    filter: none;
    scale: none;
  }
}

.headline__word {
  display: inline-block;
}

.headline__char {
  display: inline-block;
}

/* Headline — top-right block of the collage */
.headline {
  position: absolute;
  left: 42.8%;
  top: 0;
  width: 57.2%;
  font-size: 5.85cqw;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-wrap: balance;
}

.headline .mark {
  top: 0.4cqw;
  right: 0;
  width: 1.5cqw;
  border-width: 0.5cqw;
}

/* Small corner bracket used across the composition */
.mark {
  position: absolute;
  top: 1.6cqw;
  right: 1.6cqw;
  width: 1.1cqw;
  aspect-ratio: 1;
  border: 0.2cqw solid currentColor;
  border-left: 0;
  border-bottom: 0;
  opacity: 0.85;
}