/* =========================
   SCENE 15
========================= */

.scene-15 {
    position: absolute;
    inset: 0;
  
    opacity: 0;
    transition: opacity .5s ease;
  
    pointer-events: none;
  }
  
  .scene15-content {
    position: absolute;
    inset: 0;
  }
  
  
  /* =========================
     MAIN THREE-COLUMN LAYOUT
  ========================= */
  
  .scene15-fixed {
    position: absolute;
  
    left: calc(6vw + 5rem);
    right: 6vw;
  
    top: 43%;
    transform: translateY(-50%);
  
    display: grid;
    grid-template-columns: 1fr 1fr 1.45fr;
    column-gap: clamp(4rem, 8vw, 10rem);
  
    /*
      Bottom-align the three primary phrases:
      dots / circle / line that wanders.
    */
    align-items: start;
  }
  
  
  /* =========================
     DOTS AND CIRCLE
  ========================= */
  
  .scene15-part {
    height: 4.3rem;
  
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  
  .scene15-small {
    position: relative;
    display: block;
    text-align: center;
  }
  
  .scene15-serif {
    position: relative;
    display: inline-block;
  
    font-family: var(--serif);
    font-size: clamp(2rem, 2.6vw, 3rem);
    line-height: .95;
  
    color: var(--cream);
  }
  
  
  /* =========================
     WANDERING LINE COLUMN
  ========================= */
  
  .scene15-wander {
    position: relative;
  
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  
    min-height: 16rem;
  }
  
  .scene15-wander-line {
    position: relative;
  
    /*
      Same primary phrase height as the dots/circle blocks.
    */
    height: 4.3rem;
  
    display: flex;
    align-items: flex-end;
    gap: .45rem;
  
    white-space: nowrap;
  }
  
  .scene15-a {
    position: relative;
    display: inline-block;
  
    padding-bottom: .12rem;
  }
  
  .scene15-line-word {
    position: relative;
  
    font-size: clamp(2.2rem, 3vw, 3.4rem);
    line-height: .9;
  }
  
  .scene15-wander-line .type-text-scene15-fixed {
    position: relative;
    display: inline-block;
  
    padding-bottom: .12rem;
  }
  
  
  /* =========================
     CHANGING COPY
  ========================= */
  
  .scene15-changing {
    position: relative;
  
    margin-top: 1.65rem;
  
    width: min(28.125rem, 33vw);
    min-height: 10rem;
  
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .type-text-scene15-changing {
    position: relative;
  
    display: block;
    width: 100%;
    min-height: calc(3 * 1.65rem);
  
    line-height: 1.65rem;
    text-align: left;
    white-space: normal;
  }
  
  
  /* =========================
     SEPARATE FINAL LINE
  ========================= */
  
  .scene15-final-line {
    position: relative;
  
    display: flex;
    align-items: flex-end;
  
    margin-top: 1.35rem;
  
    min-height: 2.5rem;
  
    color: var(--cream);
    white-space: nowrap;
  }
  
  .scene15-how-to {
    position: relative;
  
    display: inline-block;
  
    font-family: var(--mono);
    font-size: 1.22rem;
    line-height: 1.65rem;
  
    /*
      Align mono text to the bottom of the larger serif word.
    */
    padding-bottom: .05rem;
  }
  
  .scene15-return {
    position: relative;
  
    display: inline-block;
  
    margin-left: .28em;
  
    font-family: var(--serif);
    font-size: clamp(2rem, 2.8vw, 3.15rem);
    line-height: .82;
  
    color: var(--cream);
  }
  
  
  /* =========================
     GLOBAL POSITION OVERRIDES
  ========================= */
  
  .scene-15 .small-text,
  .type-text-scene15-fixed,
  .type-text-scene15-changing,
  .type-text-scene15-final {
    position: relative;
  }
  
  
  /* =========================
     CURSORS
  ========================= */
  
  .type-text-scene15-fixed::after,
  .type-text-scene15-changing::after,
  .type-text-scene15-final::after,
  .scene15-a::after,
  .scene15-line-word::after,
  .scene15-serif::after {
    content: "|";
    display: inline-block;
  
    margin-left: .08em;
  
    opacity: 0;
    transform: translateY(-.03em);
  }
  
  .type-text-scene15-fixed.is-typing::after,
  .type-text-scene15-fixed.cursor-end::after,
  .type-text-scene15-changing.is-typing::after,
  .type-text-scene15-changing.cursor-end::after,
  .type-text-scene15-final.is-typing::after,
  .type-text-scene15-final.cursor-end::after,
  .scene15-a.is-typing::after,
  .scene15-a.cursor-end::after,
  .scene15-line-word.is-typing::after,
  .scene15-line-word.cursor-end::after,
  .scene15-serif.is-typing::after,
  .scene15-serif.cursor-end::after {
    opacity: 1;
    animation: blink .85s steps(1) infinite;
  }
  
  
  /* =========================
     RESPONSIVE
  ========================= */
  
  @media (max-width: 65.625rem) {
    .scene15-fixed {
      left: calc(5vw + 3.5rem);
      right: 4vw;
  
      grid-template-columns: .8fr .8fr 1.45fr;
      column-gap: 3rem;
    }
  
    .scene15-changing {
      width: min(25.625rem, 38vw);
    }
  }
  
  @media (max-width: 47.5rem) {
    .scene15-fixed {
      top: 38%;
  
      grid-template-columns: 1fr 1fr;
      row-gap: 4rem;
    }
  
    .scene15-wander {
      grid-column: 1 / -1;
      align-items: center;
    }
  
    .scene15-changing {
      width: 78vw;
      align-items: center;
    }
  
    .type-text-scene15-changing {
      text-align: center;
    }
  
    .scene15-final-line {
      justify-content: center;
    }
  }
/* Final line: visually bottom-align the mono phrase and serif word. */
.scene15-final-line {
  align-items: flex-end;
}

.scene15-how-to {
  line-height: 1;
  padding-bottom: 0.08em;
}

.scene15-return {
  line-height: 0.82;
}

/* The final blinking cursor follows the serif scale rather than body-copy size. */
.scene15-final-line.is-typing::after,
.scene15-final-line.cursor-end::after {
  align-self: flex-end;
  font-family: var(--serif);
  font-size: clamp(2rem, 2.8vw, 3.15rem);
  line-height: 0.82;
  height: 0.82em;
  margin-left: 0.08em;
  transform: none;
}