/* HERO
   ----------------------------- */

section.hero {
   position: relative;
   min-height: 100svh;
   min-height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--header-h) 0 var(--footer-h);
   overflow: hidden;
   isolation: isolate;
}

section.hero[data-hero-mode="code"] {
   touch-action: none;
}

section.hero .canvas {
   position: absolute;
   inset: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   pointer-events: none;
   color: var(--cream);
   font-family: var(--font-mono);
   font-weight: 400;
   opacity: 0.8;
}

section.hero .c-wrap {
   text-align: center;
}

section.hero h1 {
   max-width: 8em;
   margin: 0 auto;
   padding-bottom: 0.625rem;
   text-wrap: balance;
}

section.hero h1 .pair {
   white-space: nowrap;
}

section.hero h1 em {
   --et-size: calc(var(--impact-size) * 0.7 - 0.625rem);
   --et-trim-top: 0.191em;
   --et-trim-bottom: 0.151em;
   --et-center: 0.32em;
   --cap-center: calc(var(--impact-size) * 0.43);
   display: inline-block;
   vertical-align: baseline;
   font-size: var(--et-size);
   line-height: 1;
   transform: translateY(calc(var(--et-center) - var(--cap-center)));
}

html[lang^="en"] section.hero h1 em {
   --et-trim-top: 0.097em;
   --et-center: 0.367em;
}

section.hero h1 em::before,
section.hero h1 em::after {
   content: "";
   display: block;
}

section.hero h1 em::before {
   margin-top: calc(-1 * var(--et-trim-top));
}

section.hero h1 em::after {
   margin-bottom: calc(-1 * var(--et-trim-bottom));
}

section.hero .medias {
   position: absolute;
   top: 0;
   left: 0;
   width: 1px;
   height: 1px;
   overflow: hidden;
   visibility: hidden;
   pointer-events: none;
}

section.hero .falling {
   position: absolute;
   top: 0;
   left: 0;
   --falling-size: min(15vw, calc(3.25rem + 9.95vw));
   z-index: 5;
   width: var(--falling-size);
   height: var(--falling-size);
   object-fit: cover;
   border-radius: var(--radius);
   pointer-events: none;
   user-select: none;
}

@media (max-width: 767px) {
   section.hero .falling {
      --falling-size: 35vw;
   }
}

@media (max-width: 378px) {
   section.hero .c-wrap {
      text-align: left;
   }
}