/* The landing page's scenes (crates/tally-web/src/landing/scenes.rs): the frame around the
   product's own live view, ecosystem and river bodies, the poster over the globe's and
   the ecosystem's stages until Play, and the heatmap's poster. The bodies are styled by
   the product's own live.css, labs.css and river.css; only the frame, the poster and the
   button are styled here.

   The poster is a still captured from the same scene over the same data
   (deploy/tally/landing-posters.py), one image per theme: the stylesheet shows the one
   for the theme in use, and the other, never displayed, is never fetched (both lazy).
   Dark is the visitor's system setting unless the theme picker says otherwise
   (data-theme on <html>). No inline style anywhere; the script only sets data-*. */

/* ---------------------------------------------------------------- the frame */

.lp-scene-frame {
  position: relative;
}

/* Above the figure, so it never covers the scene's own header. */
.lp-scene-tag {
  display: flex;
  margin-bottom: 10px;
}

.lp-scene-body {
  min-width: 0;
}

/* The bodies were made for the app's page width; here they sit in the chapter's. */
.lp-scene .lv-layout,
.lp-scene .eco-layout {
  min-width: 0;
}

/* ------------------------------------------------------------------ posters */

.lp-poster-img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-poster-dark {
  display: none;
}

:where(:root[data-theme="dark"]) .lp-poster-light {
  display: none;
}

:where(:root[data-theme="dark"]) .lp-poster-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .lp-poster-light {
    display: none;
  }

  :where(:root:not([data-theme="light"])) .lp-poster-dark {
    display: block;
  }
}

/* Over a stage: the still fills it, the button sits in the middle. */
.lp-poster {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  opacity: 1;
  transition: opacity .55s var(--ease-out);
}

.lp-poster .lp-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A still with labels at its edges is shown whole, on the stage's own background (the
   ecosystem's dotted grid), so the margins read as the stage. */
.lp-scene-ecosystem .lp-poster[data-fit="whole"] {
  background: inherit;
}

.lp-poster[data-fit="whole"] .lp-poster-img {
  object-fit: contain;
}

.lp-poster[data-state="leaving"] {
  opacity: 0;
  pointer-events: none;
}

.lp-poster[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-poster {
    transition: none;
  }
}

/* --------------------------------------------------------------------- Play */

.lp-play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--button-bg);
  color: var(--button-ink);
  font-size: 15px;
  font-weight: 620;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .08), 0 18px 40px -18px rgba(11, 13, 18, .55);
  cursor: pointer;
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out);
}

.lp-play:hover {
  background: var(--button-hover);
}

.lp-play:active {
  transform: translateY(1px);
}

.lp-play:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.lp-play-icon {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 7px 6px 7px 8px;
  border-radius: 6px;
  background: var(--revenue);
  fill: #ffffff;
}

/* Without the script there is nothing to play: the still is the figure. */
.lp-scene:not([data-lp-ready]) .lp-play {
  display: none;
}

.lp-poster[data-state="loading"] .lp-play {
  cursor: progress;
}

.lp-poster[data-state="loading"] .lp-play-icon {
  animation: lp-breathe 1.1s var(--ease-in-out) infinite alternate;
}

.lp-poster[data-state="failed"] .lp-play {
  display: none;
}

@keyframes lp-breathe {
  to {
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-poster[data-state="loading"] .lp-play-icon {
    animation: none;
  }
}

.lp-play-state {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.lp-play-state:empty {
  display: none;
}

.lp-poster[data-state="failed"] .lp-play-state {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-2);
}

/* -------------------------------------------------------------- the heatmap */

.lp-heatmap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}