/* PAGE 2 · SECTION: the section itself, the heading and the footnote.
   The staircase is in levels_stairs.css, the panel under it in levels_panel.css. */

/* ----- The section itself ----- */
.page-2 {
  position: relative;  /* the faint background lines (section_lines.css) are placed within this section */
  min-height: 100vh;  /* the section is at least as tall as the screen */
  display: flex;  /* flexbox lets the column inside fill the whole height of the section */
  padding-top: calc(var(--header-h) + 40px);  /* room for the menu bar, plus 40px of extra space above the heading */
  padding-bottom: 32px;  /* a little space at the bottom of the section */
  background: var(--grey-bg);  /* the section's background color */
  color: var(--navy);  /* the section's text color */

  /* The four level colours, light (1) to dark (4), from the reference.
     They're set here, so they only exist inside Page 2. */

  --level-1:#dbe5f4;
  --level-2:#3b5bbf;
  --level-3:#232d80;
  --level-4:#0a0033;
}

/* The column holding everything: heading, staircase + panel, footnote */
.levels{
  position: relative;  /* puts the content on top of the background lines */
  display:grid;
  grid-template-rows: auto 1fr auto;  /* 3 rows: heading (as tall as it needs), staircase + panel (all the space left), footnote (as tall as it needs) */
  gap:28px; /* space between the 3 parts*/
}

/* The staircase + panel sits in the middle of its row, so it stays centred on the screen
   while the heading stays up at the top */
.levels-zone {
  align-self: center;
}

/* ----- Heading ----- */
.levels-head {
  display:grid;
  gap:6px; /* space between the heading and the subheading */
}

.levels-eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--indigo);
}

.levels-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 44px);  /* the heading grows with the screen size, but not too small or too big */
  font-weight: 300;
  line-height: 1.15;
}

/* ----- Footnote ----- */
.levels-note {
  margin: 0;
  font-size: 13px;
  opacity: 0.7;  /* a little lighter than the rest of the text */
  max-width: 820px;
}

/* ----- Build-up: plays once, when Page 2 scrolls into view (levels_build.js adds the classes) ----- */

/* Waiting: the steps are flattened into the ground, the text under them is invisible */
.levels.is-waiting .step{
  transform: scaleY(0);   /* ScaleY(0) = flattened into the ground */
}

.levels.is-waiting .levels-panel,.levels.is-waiting .levels-note {
  opacity: 0;  /* invisible */
}

/* When each step starts growing: One after another, from 01 to 04 */
.step-1 { --delay: 0s;}
.step-2 { --delay: 0.12s;}
.step-3 { --delay: 0.24s;}
.step-4 { --delay: 0.36s;}

/* building: Each step grows from the ground to its full height, one after another. The text under the steps fades in at the same time as the last step. */
.levels.is-building .step {
  transform-origin: bottom;               /* grow from the bottom edge, not from the middle */
  animation: levels-grow 0.45s cubic-bezier(0.3, 0.7, 0.2, 1) var(--delay) backwards; /* cubic-bezier is the speed curve; backwards = while waiting for its delay, the step already looks flat (the "from" state) */
}

/* The number and title inside each step fade in once their step has grown to full height. The text under the steps fades in at the same time as the last step. */
.levels.is-building .step > span {
  animation: levels-fade 0.25s calc(var(--delay) + 0.28s) backwards;  /* the text fades in after its step has grown to full height */
}

/* Then the text under the ground line rises in, and lastly the footnote fades in. The text under the steps fades in at the same time as the last step. */
.levels.is-building .levels-panel {
  animation: levels-rise 0.4s ease 0.7s backwards;  /* the text under the steps rises in after the last step has grown to full height */
}

.levels.is-building .levels-note {
  animation: levels-fade 0.4s 0.9s backwards;  /* the footnote fades in after the text under the steps has risen in */
}

/* The moment themselves. "From" = how it starts. */
@keyframes levels-grow { from { transform: scaleY(0)}}
@keyframes levels-fade { from { opacity: 0;}}
@keyframes levels-rise { from { opacity: 0; transform: translateY(12px)}}