:root {
  color-scheme: light;
  --paper: #f5f1e8;
  --ink: #172126;
  --green: #7f9561;
  --green-deep: #273521;
  --coral: #ef765b;
  --stone: #b9b5aa;
  --line: rgba(86, 111, 57, 0.42);
  --gutter: clamp(1.5rem, 4.4vw, 4.5rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  content: "";
  opacity: 0.065;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.wordmark {
  position: absolute;
  top: clamp(2rem, 6vh, 4.8rem);
  left: var(--gutter);
  z-index: 4;
  margin: 0;
  font-size: clamp(1.18rem, 2.1vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.19em;
  line-height: 1;
  text-transform: uppercase;
}

.message {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2.3rem, 8vh, 5.5rem);
  z-index: 5;
  width: min(54rem, 59vw);
}

.message h1 {
  margin: 0;
  font-size: clamp(4rem, 8.2vw, 8.2rem);
  font-weight: 690;
  letter-spacing: -0.065em;
  line-height: 0.92;
  text-wrap: balance;
}

.message p {
  margin: clamp(1.5rem, 3vh, 2.4rem) 0 0;
  font-size: clamp(1.1rem, 1.75vw, 1.8rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.artwork {
  position: absolute;
  inset: 0 0 0 35%;
  z-index: 1;
}

.sun {
  position: absolute;
  top: 12%;
  left: 46%;
  width: clamp(8rem, 16vw, 15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--coral);
  animation: sun-in 1.4s cubic-bezier(.2, .7, .2, 1) both;
}

.plane,
.tower,
.glasshouse {
  position: absolute;
  transform-origin: bottom;
  animation: rise 1.25s cubic-bezier(.2, .7, .2, 1) both;
}

.plane--green {
  right: 24%;
  bottom: 0;
  width: 49%;
  height: 76%;
  opacity: 0.65;
  background: var(--green);
  clip-path: polygon(0 0, 100% 34%, 100% 100%, 0 100%);
  animation-delay: 80ms;
}

.tower {
  bottom: 0;
  background: var(--stone);
  mix-blend-mode: multiply;
}

.tower--one {
  right: 12%;
  width: 22%;
  height: 96%;
  opacity: 0.48;
  clip-path: polygon(0 7%, 55% 0, 100% 5%, 100% 100%, 0 100%);
  animation-delay: 150ms;
}

.tower--two {
  right: -5%;
  width: 26%;
  height: 92%;
  opacity: 0.7;
  clip-path: polygon(0 9%, 33% 4%, 100% 16%, 100% 100%, 0 100%);
  animation-delay: 230ms;
}

.tower--three {
  right: -1%;
  bottom: -4%;
  width: 29%;
  height: 75%;
  opacity: 0.9;
  background: var(--ink);
  clip-path: polygon(0 24%, 27% 16%, 27% 0, 100% 13%, 100% 100%, 0 100%);
  animation-delay: 310ms;
}

.glasshouse {
  bottom: -8%;
  border: 1px solid rgba(20, 31, 25, 0.68);
  background-color: rgba(64, 85, 50, 0.3);
  background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(23, 33, 38, 0.34) 15px 16px);
  box-shadow: inset 0 -8rem 8rem rgba(26, 45, 27, 0.68);
  clip-path: polygon(0 28%, 50% 0, 100% 28%, 100% 100%, 0 100%);
}

.glasshouse--one {
  left: 19%;
  width: 31%;
  height: 36%;
  animation-delay: 420ms;
}

.glasshouse--two {
  left: 42%;
  width: 38%;
  height: 44%;
  animation-delay: 500ms;
}

.glasshouse--three {
  right: -6%;
  width: 35%;
  height: 51%;
  background-color: rgba(14, 29, 21, 0.75);
  animation-delay: 580ms;
}

.contours {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
  animation: contour-in 1.8s 250ms cubic-bezier(.2, .7, .2, 1) both,
    drift 12s 2s ease-in-out infinite alternate;
}

.contours--upper {
  top: 31%;
  left: -43%;
  width: 100%;
  height: 35%;
}

.contours--lower {
  left: -31%;
  bottom: -1%;
  width: 76%;
  height: 27%;
  opacity: 0.66;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(7%) scaleY(0.94); }
}

@keyframes sun-in {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.86); }
}

@keyframes contour-in {
  from { opacity: 0; transform: translateX(-3rem); }
}

@keyframes drift {
  to { transform: translateX(1.2rem); }
}

@media (max-width: 760px) {
  .wordmark {
    top: 1.8rem;
    font-size: 1rem;
  }

  .artwork {
    inset: 0 0 20% 1%;
    transform: translate(14%, -4%) scale(0.91);
    transform-origin: top right;
  }

  .message {
    width: calc(100% - 2 * var(--gutter));
    bottom: clamp(2rem, 6vh, 3.2rem);
  }

  .message h1 {
    font-size: clamp(3.35rem, 15.5vw, 5.4rem);
    line-height: 0.94;
  }

  .message p {
    margin-top: 1.25rem;
    font-size: 1.12rem;
  }

  .sun {
    top: 10%;
    left: 41%;
    width: 8.5rem;
  }

  .plane--green {
    right: 20%;
    height: 68%;
  }

  .tower--one,
  .tower--two {
    height: 72%;
  }

  .tower--three {
    height: 60%;
  }

  .glasshouse {
    bottom: -8%;
  }

  .contours--upper {
    top: 31%;
    left: -38%;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .message {
    bottom: 1.5rem;
  }

  .message h1 {
    font-size: clamp(3rem, 9vw, 5rem);
  }

  .message p {
    margin-top: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}