/* Vireta home pages (EN and IS): the app chapters (workout, views, progress).
   Loaded after style.css (tokens, header, footer, chapters); the pinned story and the finale are in story.css.
   Dark only. No inline styles (CSP). */

/* ================= in the app ================= */
.chapters .chapter {
  min-height: 0;
  padding-block: clamp(32px, 5vw, 72px);
}
.chapters .section__head {
  margin-bottom: clamp(16px, 3vw, 40px);
}
.duo {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1.34;
  margin: 0 auto;
}
.duo__device {
  position: absolute;
  z-index: 2;
  left: 3%;
  top: 2%;
  width: 54%;
}
.duo__device .device {
  transform: rotate(-4deg);
}
.duo .rig {
  position: absolute;
  right: -2%;
  bottom: 3%;
  height: 66%;
  aspect-ratio: 279 / 480;
  opacity: 0.92;
}
.duo .chip {
  position: absolute;
  z-index: 3;
  top: 18%;
  right: 0;
}
@media (min-width: 960px) {
  .chapters .chapter__media--duo {
    width: min(100%, 520px);
  }
}

/* video figures (see website/README.md: "Video figures"): a <video> laid over the sprite */
.rig__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 300ms var(--ease-inout);
}
.rig.is-poster .rig__video,
.rig.is-video .rig__video {
  opacity: 1;
}
.rig.is-video::before,
.rig.is-video .rig__canvas {
  display: none;
}
.duo .rig__video {
  mix-blend-mode: lighten;
}