/* Behind the Scenes: a scrolling story over full-screen videos.
   Rewritten from the CSS in the deployed build of moondisaster.org
   (explainer/ScrollySection.jsx); values and selectors unchanged, including
   a few odd ones (e.g. every div in the audio panel is position: fixed),
   so the page lays out exactly as before. The audio players use the
   react-h5-audio-player styles already in base.css (rhap_ classes). */

.scrolly { position: relative; }

/* Dark shade on the left, behind the text */
.scrolly__shade {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 4; pointer-events: none;
}

/* Scroll steps (ScrollLabel) */
.step {
  height: calc(var(--h) * 1vh);
  width: 90vw; position: relative; z-index: 5; pointer-events: none;
  transition: opacity 250ms, transform 1s;
}
.step div { transition: opacity 250ms, transform 1s; }
.step h1, .step h2 { text-align: center; font-weight: bold; margin: 0 auto; line-height: 2; position: relative; }
.step h1 {
  font-family: "Druk Wide Web"; text-transform: uppercase; font-size: 3rem; color: white;
  line-height: 1.33em; border-bottom: 1px solid white; margin: 0 0 2rem 0; padding: 0 0 1rem 0;
}
.step h2 {
  font-family: "Arimo"; text-transform: none; font-weight: normal; font-size: 1.7rem;
  color: white; letter-spacing: 0.05rem; margin: 0 0 1.5rem 0;
}
.step [data-slot] { display: none; }

/* Text column (LeftCol) */
.text-col { width: 35vw; height: 60vh; margin: 10vh 5vw 20vh 10vw; position: relative; }
.text-col h1 { text-align: left !important; }
.text-col h2 { text-align: left !important; }

.gutter { height: calc(var(--h) * 1vh); }

.subtitle {
  font-family: var(--font-header) !important; font-size: 2rem !important;
  text-transform: uppercase !important; margin-bottom: 0 !important; line-height: 2.5rem !important;
}

/* Video frames (Frame): one per stage, fading in and out */
.frame {
  position: fixed; width: 100%; height: 100%; top: 0; left: 0;
  display: flex; align-items: center;
  transition: 250ms opacity, 250ms visibility;
}
.frame video { width: 100%; height: auto; pointer-events: none; }
.frame div.AudioComp { width: 100%; height: 100%; position: fixed; z-index: 10; }
.frame div.AudioComp h3 { margin: 5px 0 0px 0; }
.frame div.AudioComp div { position: fixed; width: 250px; height: 65px; }
.frame div.AudioComp div.Audio1 { top: 20vh; right: 3vw; }
.frame div.AudioComp div.Audio2 { top: 37vh; right: 3vw; }
.frame div.AudioComp div.Audio3 { top: 54vh; right: 3vw; }
.frame div.AudioComp div.Audio4 { top: 71vh; right: 3vw; }

/* Sound on/off for the two frames with sound (SmallRoundButton) */
.mute-button {
  width: 100px; height: 100px; font-size: 1.5rem;
  z-index: 1; position: absolute; bottom: 20px; right: 40px;
}
.mute-button svg { width: 1em; height: 1em; font-size: 2em; overflow: visible; }

/* Resources buttons: in the last text block on wide screens, in the last
   frame on phones */
.scrolly__resources { pointer-events: all; }
.frame__resources {
  width: 160px; height: 160px; font-size: 1.5rem;
  display: none; position: absolute; bottom: 20px; right: 20px; pointer-events: all;
}

.button-label { width: 100%; display: flex; flex-flow: column nowrap; align-items: center; letter-spacing: 0.03em; }

/* Progress dots on the right */
.progress-dots { position: fixed; right: 2vw; height: 30vh; top: 35vh; z-index: 10; }
.progress-dots svg { display: block; margin-bottom: 4vh; transition: 500ms all; }
.progress-dots circle { fill: black; stroke: gray; stroke-width: 1px; }
.progress-dots circle.filled { fill: rgba(255, 255, 255, 0.25); stroke: black; }

.scroll-down { position: fixed; bottom: 25px; left: 0; width: 100%; color: #d4d4d4; }

@media (max-width: 767px) {
  .step { height: calc((var(--tall, 0) + var(--h)) * 1vh); }
  .step h1 { font-size: 2.3rem; }
  .step h2 { font-size: 1.4rem; line-height: 2rem; }
  .text-col { width: initial; height: initial; margin: 10vh 5vw 20vh 5vw; }
  .subtitle { line-height: 2rem !important; font-size: 1.5rem !important; margin-bottom: 1rem !important; }
  .frame div.AudioComp div { height: auto; width: 100%; margin-left: 12px; }
  .frame div.AudioComp div.Audio1,
  .frame div.AudioComp div.Audio2,
  .frame div.AudioComp div.Audio3,
  .frame div.AudioComp div.Audio4 { display: flex; flex-direction: row; width: 68%; right: 10%; }
  .frame video { height: auto; }
  .mute-button { width: 60px; height: 60px; font-size: 0.7rem; bottom: 20px; left: 20px; }
  .scrolly__resources { display: none; }
  .frame__resources { width: 60px; height: 60px; font-size: 0.7rem; display: flex; }
  .progress-dots { display: none; }
}