/* ==========================================================
   HERO: o nome dela escrito à caneta no caderno
   ========================================================== */

#hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(4rem + env(safe-area-inset-top, 0px));
  overflow: hidden;
}

.hero__fita { top: 1.4rem; right: -14px; --l: 120px; --r: 32deg; }

.hero__sobre {
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  opacity: 0;
  transition: opacity .8s ease;
}

.hero__nome-caixa {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: .4rem 0 1.6rem;
}

.hero__nome {
  font-family: var(--fonte-mao);
  font-weight: 400;
  font-size: clamp(3.4rem, 19vw, 7rem);
  line-height: 1.5;
  color: var(--caneta);
  padding: 0 .12em 0 .02em;
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 2s cubic-bezier(.5, .1, .4, 1) .45s;
  outline: none;
}

.hero__sublinhado {
  position: absolute;
  left: 2%;
  right: 4%;
  bottom: .4rem;
  width: 96%;
  height: 1.3rem;
  color: var(--batom);
  stroke-width: 2.6;
  --atraso: 2.35s;
}

.hero__coracao {
  position: absolute;
  top: .1rem;
  right: -2.2rem;
  width: clamp(2.2rem, 9vw, 3.4rem);
  color: var(--batom);
  stroke-width: 2.4;
  transform: rotate(12deg);
  --atraso: 2.9s;
}

.hero__texto {
  max-width: 30rem;
  font-size: 1.12rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .9s ease 3s, transform .9s ease 3s;
}

.hero__seguir {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  margin-top: 2.6rem;
  font-size: .95rem;
  text-decoration: none;
  opacity: 0;
  transition: opacity .8s ease 3.6s;
}

.hero__seguir svg { width: 20px; height: 36px; margin-left: 1.6rem; --atraso: 3.8s; }

/* a coreografia começa quando o envelope abre */
.escrevendo .hero__sobre,
.escrevendo .hero__seguir { opacity: 1; }
.escrevendo .hero__nome { clip-path: inset(-20% -10% -20% 0); }
.escrevendo .rabisco path { stroke-dashoffset: 0; }
.escrevendo .hero__texto { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .hero__coracao { right: -3.4rem; }
}