/* The page side of the replica player (js/replica-player.js).

   The scene itself is styled by css/replica.css inside each stage's shadow
   root, exactly as in the videos; nothing here reaches into it. This file sizes
   the stage on the page, draws the tab clock and the film's poster link, and
   follows the sales landing's look (css/sales-landing.css) around them. */

/* ---------- the stage ---------- */

.rpx-stage {
  display: grid;
  gap: 16px;
}

/* The hero's still (the first frame of its first scene) is the page's largest
   paint, and a browser counts an element only if its first paint is visible:
   so this stage rises into place without the fade the rest of the hero has.
   Faded in, its still never counted, and some line of scene text painted
   seconds later became the page's largest paint. */
.sl-hero-stage.rpx-stage.sl-rise {
  animation-name: rpx-rise;
}

@keyframes rpx-rise {
  from {
    transform: translateY(28px);
  }
}

/* Seen from the first paint, the stage must not change height when the site
   fonts arrive: the hero grid centres it, so a tab row that wrapped one way in
   the fallback font and another in Instrument Sans moved the whole scene. On
   one line (every hero's labels fit 583px in either font) it cannot. */
@media (min-width: 1000px) {
  .sl-hero-stage.rpx-stage .sl-tabs {
    flex-wrap: nowrap;
  }
}

/* The frame is the container the composition is chosen against: the 9:16 one
   below 560px of stage width (the player's REEL_BELOW), the 16:9 one above. */
.rpx-frame {
  position: relative;
  container-type: inline-size;
}

.rpx-host {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 800 / 615;
}

@container (max-width: 559px) {
  .rpx-host {
    aspect-ratio: 600 / 650;
  }
}

/* While a scene is measured at its own size, before it is scaled to the stage. */
.rpx-host.is-preparing {
  overflow: hidden;
}

/* The still that ships with the page: the scene's last frame, shown until the
   live scene mounts, and for good where scripts do not run. A <picture> picks
   the 9:16 still on phones. */
.rpx-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The tab clock: drawn by the player frame by frame, so it stops with the scene. */
.rpx-fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #00b2e9, #7c6bf0, #f68b35);
  transform: scaleX(0);
  transform-origin: left;
}

/* The story rail: the stage follows the chapter being read. */
.rpx-story-stage {
  min-width: 0;
}

/* On narrow screens the story is one column, and a rail pinned above it cannot
   stay pinned: the rail is a grid row exactly as tall as the stage, so the stage
   scrolls away with it (css/sales-landing.css meant it to follow the chapters;
   measured, it never does). Each chapter carries its own stage there instead,
   as the app's own sales pages do, and the rail goes. */
.rpx-chapter-stage {
  display: none;
}

/* Shipped hidden and unhidden by the player: without script there is no empty box. */
.rpx-chapter-stage[hidden] {
  display: none !important;
}

@media (max-width: 999px) {
  [data-rp-story] .sl-story-rail {
    display: none;
  }

  .rpx-chapter-stage {
    display: grid;
    margin-top: 10px;
  }

  .rpx-chapter-stage .rpx-frame {
    width: 100%;  /* a grid item with auto margins would shrink to its percentage-sized content: 0 */
    max-width: 680px;
    margin-inline: auto;
  }
}

/* ---------- the film ---------- */

.sl-section.rpx-film {
  padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 96px);
  scroll-margin-top: 36px;
}

.rpx-film-head {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.rpx-film-frame {
  display: grid;
  gap: 14px;
  margin: 0;
}

.rpx-film-link,
.rpx-film-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(4, 3, 33, 0.1);
  border-radius: 22px;
  background: #f5f6f8;
  box-shadow: 0 24px 60px -28px rgba(4, 3, 33, 0.35);
}

.rpx-film-link {
  position: relative;
  overflow: hidden;
}

.rpx-film-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rpx-film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 16px;
  border-radius: 999px;
  background: #040321;
  box-shadow: 0 18px 40px -14px rgba(4, 3, 33, 0.55);
  color: #fff;  /* set here: `.sl a { color: inherit }` outranks the link's own colour */
  font: 600 15px/1 "Instrument Sans", system-ui, sans-serif;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.rpx-film-play svg {
  flex: none;
}

.rpx-film-link:hover .rpx-film-play,
.rpx-film-link:focus-visible .rpx-film-play {
  background: #0b0a33;
  transform: translate(-50%, -50%) scale(1.04);
}

.rpx-film-link:focus-visible {
  outline: 3px solid #00b2e9;
  outline-offset: 4px;
}

.rpx-film-len.is-tall {
  display: none;
}

.rpx-film-caption {
  display: grid;
  gap: 10px;
  color: rgba(4, 3, 33, 0.62);
  font-size: 0.92rem;
  line-height: 1.5;
}

.rpx-film-caption details {
  max-width: 760px;
}

.rpx-film-caption summary {
  color: #046c8e;
  font-weight: 600;
  cursor: pointer;
}

.rpx-film-caption ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 1.3em;
}

.rpx-film-caption li b {
  color: #040321;
}

/* Phones get the 9:16 cut, as tall as the screen allows. */
@media (max-width: 640px) {
  .rpx-film-link,
  .rpx-film-video.is-tall {
    aspect-ratio: 9 / 16;
    max-width: min(100%, calc((100svh - 160px) * 9 / 16));
    margin-inline: auto;
  }

  .rpx-film-len.is-wide {
    display: none;
  }

  .rpx-film-len.is-tall {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpx-film-play {
    transition: none;
  }
}