/* ---------- Intro ---------- */

.intro {

  min-height: 100svh;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 12px;

  text-align: center;

  padding-block: 32px;

  position: relative;

  overflow: hidden

}



.intro-art {

  width: min(100%, 32rem);

  height: auto;

  display: block;

  margin-inline: auto

}



.scalp {

  fill: var(--accent-soft);

  stroke: var(--accent);

  stroke-width: 3;

  stroke-linecap: round

}



.strand {

  fill: none;

  stroke: var(--ink);

  stroke-width: 2.2;

  stroke-linecap: round;

  stroke-dasharray: 1;

  stroke-dashoffset: 1;

  animation: grow 1.6s cubic-bezier(.3, .7, .2, 1) forwards;

  transform-box: fill-box;

  transform-origin: 50% 100%

}



.strand.shed {

  animation: grow 1.6s cubic-bezier(.3, .7, .2, 1) forwards, shed 1.2s ease-in forwards

}



@keyframes grow {

  to {

    stroke-dashoffset: 0

  }

}



@keyframes shed {

  to {

    opacity: 0;

    transform: translateY(22px) rotate(8deg)

  }

}



.intro-title {

  display: grid;

  gap: 6px;

  justify-items: center

}



.intro-title .big {

  font-size: clamp(3rem, 13vw, 6rem);

  font-weight: 800;

  letter-spacing: -.03em;

  animation: lift .9s .2s cubic-bezier(.2, .8, .2, 1) both

}



.intro-title .sub {

  font-family: var(--font-mono);

  font-size: clamp(.8rem, 3.2vw, 1.05rem);

  letter-spacing: .32em;

  text-transform: uppercase;

  color: var(--accent);

  animation: lift .9s .5s cubic-bezier(.2, .8, .2, 1) both

}



@keyframes lift {

  from {

    transform: translateY(14px)

  }



  to {

    transform: none

  }

}



.intro-tag {

  color: var(--ink-soft);

  max-width: 30rem;

  margin-inline: auto

}