/* =========================
   SCENE 14
========================= */

.scene-14 {
    position: absolute;
    inset: 0;
  
    opacity: 0;
    transition: opacity .5s ease;
  
    pointer-events: none;
  }
  
  .scene14-content {
    position: absolute;
    inset: 0;
  }
  
  
  /* =========================
     TEXT POSITION
  ========================= */
  
  .scene14-text {
    position: absolute;
  
    top: 34%;
    left: 50%;
  
    width: min(47.5rem, 72vw);
  
    /*
      Seven rows are reserved:
      three first-part lines,
      one blank line,
      two second-part lines,
      plus breathing room.
    */
    min-height: calc(7 * 1.65rem);
  
    transform: translateX(-50%);
  }
  
  .scene-14 .small-text,
  .type-text-scene14 {
    position: relative;
  
    display: flex;
    flex-direction: column;
    align-items: center;
  
    width: 100%;
    min-height: calc(7 * 1.65rem);
  
    line-height: 1.65rem;
    text-align: left;
    white-space: normal;
  }
  
  
  /* =========================
     INDIVIDUAL CENTRED LINES
  ========================= */
  
  .scene14-typed-line {
    position: relative;
  
    /*
      Invisible final text and visible typing
      share the same grid cell.
    */
    display: grid;
    grid-template-areas: "line";
  
    width: max-content;
    min-height: 1.65rem;
  
    margin-inline: auto;
  
    line-height: 1.65rem;
    white-space: nowrap;
  }
  
  .scene14-line-sizer {
    grid-area: line;
  
    visibility: hidden;
    pointer-events: none;
  
    white-space: nowrap;
  }
  
  .scene14-line-visible {
    grid-area: line;
  
    display: inline-flex;
    align-items: baseline;
    justify-self: start;
  
    white-space: nowrap;
  }
  
  .scene14-typed-copy {
    display: inline;
  }
  
  
  /* =========================
     REAL CURSOR
  ========================= */
  
  .scene14-real-cursor {
    display: inline-block;
  
    margin-left: .08em;
  
    animation:
      blink
      .85s
      steps(1)
      infinite;
  }
  
  
  /*
    Disable the shared pseudo cursor.
    Scene 14 uses its own cursor inside
    the currently active line.
  */
  
  .type-text-scene14::after,
  .type-text-scene14.is-typing::after,
  .type-text-scene14.cursor-end::after {
    content: none !important;
    display: none !important;
  }
  
  
  /* =========================
     KOLAM
  ========================= */
  
  .scene14-kolam {
    position: absolute;
  
    left: 0;
    right: 0;
  
    bottom: 17vh;
  
    width: 100%;
    height: 6.875rem;
  
    overflow: hidden;
  }
  
  .scene14-svg {
    width: 100%;
    height: 100%;
  
    display: block;
  }
  
  
  /* =========================
     DOTS
  ========================= */
  
  .scene14-dot {
    fill: var(--yellow);
  
    opacity: 0;
  
    transition:
      opacity
      .28s
      linear;
  }
  
  .scene14-dot.show {
    opacity: 1;
  }
  
  
  /* =========================
     PATHS
  ========================= */
  
  .scene14-path {
    fill: none;
  
    stroke: var(--cream);
    stroke-width: 1.6;
  
    stroke-linecap: round;
    stroke-linejoin: round;
  
    vector-effect:
      non-scaling-stroke;
  }
  
  
  /* =========================
     RESPONSIVE
  ========================= */
  
  @media (max-width: 56.25rem) {
    .scene14-text {
      top: 31%;
  
      width: 82vw;
    }
  
    .scene14-kolam {
      bottom: 19vh;
      height: 5.375rem;
    }
  
    .scene14-path {
      stroke-width: 1.3;
    }
  
    .scene14-dot {
      r: 2.8;
    }
  }