.hero .wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero-footer {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: row;
  margin-top: auto;
}

.motto-hero {
  font-family: var(--display-bold);
  font-size: 1.3rem;
  font-style: none;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.2;
}

.motto-end {
  letter-spacing: .01em;
  font-size: 1.2rem;
  font-family: var(--display-bold);
  text-transform: none;
  line-height: 1.3;
}

.motto-hc {
  width: 100%;
  font-family: var(--hc);
  font-size: 1rem;
  color: rgb(6, 244, 169);
  background-color: var(--bg-dark);
  padding: 2px;
  /* breathing room around the text */
}

.motto-hc--humans .motto-gradient-letter,
.motto-hc--purpose .motto-gradient-letter {
  color: var(--accent-green);
}

.local-time {
  font-variant-numeric: tabular-nums;
}

.hero-copy {
  width: 85%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;

}

.hero-copy p {
  color: var(--text);
}

.hero-cards {
  width: clamp(140px, 45vw, 220px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: fixed;
  right: var(--page-inset);
  bottom: var(--page-inset);
  z-index: 100;
  padding: 0;
}

.hero-cards.is-horizontal {
  width: max-content;
  max-width: none;
  flex-direction: row;
}

.hero-card {
  width: auto;
  display: flex;
  flex-direction: column;
}

:root {
  --social-tile-bg: #111;
  --social-icon-fg: #f3f4ee;
}

:root[data-theme="dark"] {
  --social-tile-bg: #f3f4ee;
  --social-icon-fg: #191b20;
}

.hero-card .img {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--social-tile-bg);
  border-radius: 0;
}

.hero-card .img i {
  color: var(--social-icon-fg);
  font-size: 1.1rem;
  line-height: 1;
}

.hero-card .img .fa-instagram,
.hero-card .img .fa-whatsapp {
  font-size: 29px;
}

.hero-card .img .fa-discord {
  font-size: calc(1.1rem + 4px);
}

.hero-card .img .fa-envelope {
  font-size: calc(1.1rem + 3px);
}

.hero-card .img .fa-paper-plane {
  font-size: 22px;
}

.hero-card .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* ---------------------------------------------
   Hero image 
--------------------------------------------- */

.hero-image {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 10rem;
  margin-bottom: 0;
}

body .hero-image h1 {
  position: relative;
  top: -2rem;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  line-height: 1.1;
  font-size: clamp(.75rem, 10.22cqi, 4.2rem);
  color: var(--text);
}

.hero-image h2 .hero-motion__word {
  white-space: nowrap;
}

.hero-byline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease-in-out, visibility 0s linear 500ms;
}

.hero.is-active .hero-byline {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease-in-out;
}

.hero.is-transitioning-away .hero-byline {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-in-out, visibility 0s linear 300ms;
}

.hero-byline p {
  margin: 0;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
}

.hero-byline__name {
  font-family: var(--display-bold);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

.hero-byline__role {
  font-family: var(--display), Helvetica, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
}

.hero {
  --inspire-tone-1: var(--accent-green);
  --inspire-tone-2: var(--accent-green);
  --inspire-tone-3: var(--accent-green);
  --inspire-tone-4: var(--accent-green);
  --inspire-tone-5: var(--accent-green);
  --inspire-tone-6: var(--accent-green);
  --inspire-tone-7: var(--accent-green);
  --inspire-gradient: var(--accent-green);
}

.hero-motion {
  order: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-self: flex-start;
  width: min(calc(100% - var(--social-icon-size) - var(--social-icon-gap)), 760px);
  aspect-ratio: 2.25 / 1;
  margin-top: -10px;
  overflow: visible;
  color: var(--text-light);
  text-align: left;
}

.hero-motion__type-panel,
.hero-motion__symbol-panel {
  position: relative;
  min-width: 0;
}

.hero-motion__type-panel {
  order: -1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(10px, 1.6vw, 20px);
  background: var(--bg-dark);
  overflow: visible;
}

.hero-motion__topline,
.hero-motion__baseline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--hc), monospace;
  letter-spacing: .04em;
}

.hero-motion__topline {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hero-motion__baseline {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.hero-motion__headline {
  display: flex;
  flex-direction: column;
  font: 500 clamp(26px, 8.2vw, 66px)/.78 var(--h1), Impact, sans-serif;
  letter-spacing: -.055em;
}

body:has(.app.menu-open) .hero-motion__floating-letter {
  visibility: hidden;
}

.hero-motion__letter {
  display: inline-block;
  transform-origin: center;
}

.hero-motion__floating-letter {
  position: fixed;
  z-index: 2147483647;
  display: inline-block;
  margin: 0;
  color: #fff;
  mix-blend-mode: difference;
  transform-origin: center;
  pointer-events: none;
  will-change: transform;
}


.hero-motion__baseline span {
  font-size: 1rem;
  font-family: var(--hc);
}

.hero-motion__topline > span {
  font-size: 1rem;
}

.hero-motion__baseline > span {
  margin-left: auto;
  text-align: right;
}

.hero-copy .hero-motion__letter-counter {
  position: relative;
  z-index: 0;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.35rem;
  isolation: isolate;
  white-space: nowrap;
  font-family: var(--hc);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.hero-motion__letter-counter::before,
.hero-motion__letter-counter::after {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  pointer-events: none;
}

.hero-motion__letter-counter::before {
  background: transparent;
}

.hero-motion__letter-counter::after {
  background: var(--inspire-gradient);
  clip-path: inset(0 calc(100% - var(--counter-progress, 1%)) 0 0);
  opacity: 1;
  transition: clip-path 250ms ease;
}

.hero-motion__letter-counter-text {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.hero-motion__headline>span {
  display: block;
  width: max-content;
  white-space: nowrap;
  transform: translateX(0);
  animation: hero-type-sequence 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.hero-motion__headline>span:nth-child(1) {
  animation-delay: 0s;
}

.hero-motion__headline>span:nth-child(2) {
  animation-delay: 1.15s;
}

.hero-motion__headline>span:nth-child(3) {
  animation-delay: 2.3s;
}

.hero-motion__headline>span:nth-child(4) {
  animation-delay: 3.45s;
}

@keyframes hero-type-sequence {

  0%,
  8%,
  16% {
    transform: translateX(0);
  }

  24%,
  36% {
    transform: translateX(calc(110vw + 100%));
  }

  36.01% {
    transform: translateX(calc(-110vw - 100%));
  }

  52%,
  100% {
    transform: translateX(0);
  }
}

.hero-motion__headline-accent {
  color: var(--accent-green);
}

.hero-motion__headline-accent .hero-motion__letter:nth-child(1) { color: var(--inspire-tone-1); }
.hero-motion__headline-accent .hero-motion__letter:nth-child(2) { color: var(--inspire-tone-2); }
.hero-motion__headline-accent .hero-motion__letter:nth-child(3) { color: var(--inspire-tone-3); }
.hero-motion__headline-accent .hero-motion__letter:nth-child(4) { color: var(--inspire-tone-4); }
.hero-motion__headline-accent .hero-motion__letter:nth-child(5) { color: var(--inspire-tone-5); }
.hero-motion__headline-accent .hero-motion__letter:nth-child(6) { color: var(--inspire-tone-6); }
.hero-motion__headline-accent .hero-motion__letter:nth-child(7) { color: var(--inspire-tone-7); }
.hero-motion__symbol-panel {
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f3f3f0;
  color: var(--bg-dark);
}

.hero-motion__dither {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-motion__dither canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-motion__symbol-panel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(40%, 100px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f3f3f0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-motion__weather-label {
  font-family: var(--hc), monospace;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: normal;
  text-transform: none;
}

.hero-motion__weather-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  color: currentColor;
  font-size: 0.8rem;
}

.hero-motion__availability-plus {
  position: relative;
  top: -1.5px;
  display: inline-block;
  transform-origin: 50% 55%;
  animation: hero-plus-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-plus-pulse {

  0%,
  100% {
    opacity: .72;
    transform: scale(.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.hero-motion__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 3;
  width: min(40%, 100px);
  height: auto;
  object-fit: contain;
}

.hero-motion__mark--pupil {
  z-index: 4;
  transform: translate3d(var(--hero-pupil-x, 0px), var(--hero-pupil-y, 0px), 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.hero-motion__mark--pupil.is-visible {
  opacity: 1;
}

.hero:not(.is-active) .hero-motion__headline>span,
.hero:not(.is-active) .hero-motion__availability-plus,
.hero.is-transitioning-away .hero-motion__headline>span,
.hero.is-transitioning-away .hero-motion__availability-plus {
  animation-play-state: paused;
}


.hero-image h2 {
  color: var(--text);
  position: relative;
  top: -25px;
  order: 1;
  align-self: center;
  width: 100%;
  margin: 0 auto;
  font-family: var(--display-bold), Helvetica, sans-serif;
  font-weight: 100;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}