/*
 * Scroll-driven stage, wide screens only.
 * Linked by components/RootDocument.tsx with media="(min-width: 1280px)": on
 * phones and narrow windows this file never blocks rendering and none of the
 * posters it references is fetched. Plain CSS outside Tailwind's layers, so
 * these rules win over the utility classes they adjust.
 * Bump STAGE_ASSETS_VERSION (lib/stage/assets.mjs) when this file or a poster changes.
 */

:root {
  --stage-container: 72rem;
  --stage-gap: 3rem;
  /* Text column: 7 of 12 columns of the container. */
  --stage-text: calc((var(--stage-container) - var(--stage-gap)) * 7 / 12);
}

/* Sections below the hero keep the left columns; the stage takes the right. */
.chapter-container {
  max-width: var(--stage-container);
  padding-inline-end: calc(var(--stage-container) - var(--stage-text));
}

/* Projects: AIRA stacks its image above the text, LITDHOSPI gets its own row. */
.project-featured {
  display: flex;
  flex-direction: column;
}

.project-featured > .project-media {
  aspect-ratio: 16 / 10;
  height: auto;
}

.projects-rest {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.projects-rest > :first-child {
  grid-column: 1 / -1;
}

.projects-rest > :first-child > .project-media {
  aspect-ratio: 21 / 9;
}

/* The stage: fixed beside the text column, below the hero while it leaves. */
html .stage {
  display: block;
  position: fixed;
  top: 5rem;
  bottom: 1rem;
  left: calc(50% - var(--stage-container) / 2 + var(--stage-text) + var(--stage-gap));
  right: 0;
  z-index: -5;
  pointer-events: none;
  visibility: hidden;
  opacity: var(--stage-reveal, 0);
  transform: translate3d(0, var(--stage-offset, 0px), 0);
}

html[data-stage-chapter] .stage {
  visibility: visible;
}

.stage-poster {
  position: absolute;
  inset: 0;
  display: none;
  background: center / contain no-repeat;
}

html[data-stage-chapter="profil"] .stage-poster[data-poster="profil"],
html[data-stage-chapter="contact"] .stage-poster[data-poster="profil"],
html[data-stage-chapter="aira"] .stage-poster[data-poster="aira"],
html[data-stage-chapter="litdhospi"] .stage-poster[data-poster="litdhospi"],
html[data-stage-chapter="interlude"] .stage-poster[data-poster="interlude"],
html[data-stage-chapter="competences"] .stage-poster[data-poster="competences"] {
  display: block;
}

/* Once the WebGL scene has drawn, posters are neither shown nor fetched. */
html[data-stage="live"] .stage .stage-poster[data-poster] {
  display: none;
}

.stage-poster[data-poster="profil"] { background-image: url("/stage/profil-light.svg?v=1"); }
.stage-poster[data-poster="aira"] { background-image: url("/stage/aira-light.svg?v=1"); }
.stage-poster[data-poster="litdhospi"] { background-image: url("/stage/litdhospi-light.svg?v=1"); }
.stage-poster[data-poster="interlude"] { background-image: url("/stage/interlude-light.svg?v=1"); }
.stage-poster[data-poster="competences"] { background-image: url("/stage/competences-light.svg?v=1"); }
.dark .stage-poster[data-poster="profil"] { background-image: url("/stage/profil-dark.svg?v=1"); }
.dark .stage-poster[data-poster="aira"] { background-image: url("/stage/aira-dark.svg?v=1"); }
.dark .stage-poster[data-poster="litdhospi"] { background-image: url("/stage/litdhospi-dark.svg?v=1"); }
.dark .stage-poster[data-poster="interlude"] { background-image: url("/stage/interlude-dark.svg?v=1"); }
.dark .stage-poster[data-poster="competences"] { background-image: url("/stage/competences-dark.svg?v=1"); }

.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 300ms ease;
}

html[data-stage="live"] .stage-canvas {
  opacity: 1;
}

/* The stage is decoration: never in high-contrast mode. */
@media (forced-colors: active) {
  html .stage {
    display: none;
  }
}