/* =========================
   SCENE 7
========================= */

.scene-7 {
  opacity: 0;
}


/* =========================
   DOT + KOLAM LAYERS
========================= */

.scene7-dot-field,
.scene7-kolam-layer {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}

.scene7-kolam-layer {
  z-index: 1;
}


/* =========================
   TEXT WRAPPER
========================= */

.scene7-text {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 3;

  width: 34rem;

  transform:
    translate(
      -50%,
      -50%
    );

  text-align: center;
}


/* =========================
   FIXED + CHANGING GROUPS
========================= */

.scene7-fixed,
.scene7-changing {
  position: relative;

  width: 100%;
}

.scene7-fixed {
  margin-bottom: 1.4rem;
}



/* =========================
   FIXED TEXT
========================= */

.scene7-fixed span {
  position: relative;

  display: block;

  width: 100%;

  margin-bottom: .35rem;

  text-align: center;
}


.scene7-changing {
  position: relative;
  width: 100%;
  min-height: 3.4rem;
}

.type-text-scene7-changing {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  min-height: 3.4rem;

  text-align: left;
}

.scene7-typed-line {
  position: relative;

  display: flex;
  align-items: baseline;
  justify-content: flex-start;

  min-height: 1.65rem;
  margin-inline: auto;

  line-height: 1.65rem;
  white-space: nowrap;
}

.scene7-typed-copy {
  display: inline;
}

.scene7-real-cursor {
  display: inline-block;

  margin-left: 0.08em;

  animation: blink 0.85s steps(1) infinite;
}
/*
  Keep the cursor attached to the overall changing
  text element, rather than generating one cursor
  for every internal line span.
*/
.scene7-changing
.scene7-typed-line::after {
  content: none;
}
.type-text-scene7-changing::after {
  content: none !important;
  display: none !important;
}

/* =========================
   DOTS
========================= */

.scene7-dot {
  position: absolute;

  width: .18rem;
  height: .18rem;

  border-radius: 50%;

  background:
    var(--yellow);

  opacity: 0;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(.45);
}

.scene7-dot.visible {
  animation:
    scene7DotIn
    .45s
    ease
    forwards;
}

@keyframes scene7DotIn {
  to {
    opacity: 1;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);
  }
}


/* =========================
   SVG
========================= */

.scene7-kolam-svg {
  width: 100%;
  height: 100%;

  overflow: visible;
}


/* =========================
   RESPONSIVE
========================= */

@media (
  max-width: 56.25rem
) {
  .scene7-text {
    width: 82vw;
  }

  .scene7-typed-line {
    max-width: 100%;
  }
}