@font-face {
  font-family: Fraunces;
  font-style: italic;
  src: url("assets/fraunces-italic.woff2") format("woff2");
  font-display: swap;
}
/* The atmosphere is drawn in layers; the range itself is a local vector. */
:root {
  background: #080f1b;
}
.night {
  --scene-x: 0px;
  --scene-y: 0px;
  background:
    radial-gradient(ellipse at 67% 2%, #283c574f, transparent 51%),
    linear-gradient(
      #070e1c 0%,
      #1d2e49 42%,
      #746679 70%,
      #bf8c7b 84%,
      #141f32 100%
    );
}
.stars {
  height: 85%;
  opacity: 0.65;
  mask-image: linear-gradient(#000 0%, #000 35%, transparent 80%);
}
.sky-wash {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: none;
  background:
    radial-gradient(ellipse at 48% 58%, #eac4a723, transparent 47%),
    radial-gradient(ellipse at 5% 34%, #5e759c24, transparent 45%);
  translate: calc(var(--scene-x) * -2) calc(var(--scene-y) * -2);
  transition: translate 1.8s ease-out;
}
.last-light {
  position: absolute;
  width: 140%;
  height: 38%;
  left: -20%;
  top: 45%;
  background: conic-gradient(
    from 260deg at 60% 110%,
    transparent 0deg,
    #f5c5a208 14deg,
    transparent 24deg,
    #fad9b00a 34deg,
    transparent 44deg,
    #e6bd9b0a 50deg,
    transparent 65deg
  );
  mask-image: radial-gradient(ellipse, #000, transparent 68%);
  filter: blur(13px);
}
.horizon-haze {
  left: -20%;
  top: 44%;
  width: 140%;
  height: 46%;
  transform: none;
  background: radial-gradient(
    ellipse at 51% 49%,
    #edbe996b,
    #d7a09930 34%,
    transparent 66%
  );
  filter: blur(27px);
}
.moon {
  position: absolute;
  top: 18%;
  right: 16%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: -7px 4px 0 -1px #edd8bc;
  transform: rotate(-22deg);
  opacity: 0.63;
  filter: drop-shadow(0 0 13px #e6bf9520);
}
.cloud {
  position: absolute;
  width: 100%;
  height: 90px;
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0.2;
  background: linear-gradient(
    90deg,
    transparent,
    #c3b6ca50 35%,
    #ddd1d14a 60%,
    transparent
  );
  animation: cloud-drift 48s ease-in-out infinite alternate;
}
.cloud-one {
  top: 26%;
  left: -38%;
  transform: rotate(-8deg);
}
.cloud-two {
  top: 43%;
  right: -42%;
  height: 60px;
  opacity: 0.14;
  animation-delay: -25s;
}
.mountains {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 32px);
  height: 49%;
  object-fit: fill;
  translate: var(--scene-x) var(--scene-y);
  transition: translate 1.4s ease-out;
}
.valley-mist {
  position: absolute;
  left: -15%;
  bottom: 15%;
  width: 130%;
  height: 15%;
  background:
    radial-gradient(ellipse at 35% 50%, #b1c5e320, transparent 60%),
    radial-gradient(ellipse at 80% 50%, #dac6c411, transparent 45%);
  filter: blur(18px);
  animation: valley-breath 24s ease-in-out infinite alternate;
}
.foreground-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, transparent 25%, #030b1638 85%),
    linear-gradient(transparent 80%, #040b1770);
}
@keyframes valley-breath {
  from {
    opacity: 0.55;
    translate: -1% 0;
  }
  to {
    opacity: 1;
    translate: 2% -5px;
  }
}
.grain {
  opacity: 0.15;
}
header {
  padding-top: 39px;
}
main {
  padding: 73px 24px 265px;
}
.announcement {
  font-size: 11px;
  letter-spacing: 1.75px;
  color: #e3cab5;
  padding: 9px 15px;
  border: 1px solid #d9c5b324;
  border-radius: 100px;
  background: linear-gradient(145deg, #ccdcf00a, #0b15251c);
  box-shadow:
    inset 0 1px 0 #ebdfcf08,
    0 4px 30px #040d1714;
  backdrop-filter: blur(14px);
}
.announcement span {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 13px #e8b88c88;
}
h1 {
  margin: 23px 0;
  text-shadow: 0 8px 55px #07142644;
}
h1 em {
  font-style: italic;
  color: #f0c6a5;
  background: linear-gradient(140deg, #f5dfc7, #e7b68f 85%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
main p {
  font-size: 17px;
  color: #c4cbd7;
  margin-bottom: 30px;
  text-shadow: 0 2px 18px #13203499;
}
.waitlist {
  overflow: hidden;
  padding-top: 18px;
  padding-bottom: 18px;
  border-color: #fae2cba6;
  color: #233044;
  background: linear-gradient(135deg, #f4dec4, #dab18a);
  box-shadow:
    inset 0 1px 0 #fff9,
    inset 0 -2px 4px #9e6f4533,
    0 7px 27px #0c15263b,
    0 0 38px #edc4a02b;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.waitlist::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 25%,
    #fff5 45%,
    transparent 65%
  );
  transform: translateX(-115%);
  transition: transform 0.7s ease;
}
.waitlist span,
.waitlist svg {
  position: relative;
}
.waitlist:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 #fffb,
    0 12px 38px #dcb18c2a;
}
.waitlist:hover::before {
  transform: translateX(115%);
}
.note {
  color: #b5b8c6;
  margin-top: 15px;
}
footer {
  bottom: 33px;
  color: #9ba7b7;
}
.rule {
  background: #9cafc040;
}
header,
main,
footer {
  animation: arrive 1.2s cubic-bezier(0.2, 0.65, 0.3, 1) both;
}
main {
  animation-delay: 0.1s;
}
footer {
  animation-delay: 0.3s;
}
@keyframes arrive {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes cloud-drift {
  from {
    translate: -2% 0;
  }
  to {
    translate: 5% -10px;
  }
}
@media (min-height: 1000px) {
  main {
    padding-bottom: 320px;
  }
  .mountains {
    height: 51%;
  }
}
@media (max-width: 850px) {
  .mountains {
    width: 133%;
  }
  .moon {
    right: 12%;
  }
}
@media (max-width: 600px) {
  header {
    padding-top: 27px;
  }
  main {
    padding: 90px 20px 230px;
  }
  .announcement {
    font-size: 9px;
    letter-spacing: 1.15px;
  }
  h1 {
    margin: 29px 0 25px;
  }
  main p {
    font-size: 15px;
    margin-bottom: 27px;
  }
  .waitlist {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  .mountains {
    width: 190%;
    height: 35%;
  }
  .horizon-haze {
    top: 53%;
    height: 33%;
  }
  .night {
    background:
      radial-gradient(ellipse at 65% 5%, #283c573f, transparent 45%),
      linear-gradient(#0a1322, #263750 46%, #897281 76%, #987c79 87%, #141f32);
  }
  .moon {
    top: 15%;
    right: 12%;
    width: 24px;
    height: 24px;
    box-shadow: -5px 3px 0 -1px #edd8bc;
    opacity: 0.5;
  }
  footer {
    bottom: 25px;
  }
}
@media (max-width: 360px) {
  h1 {
    font-size: 80px;
  }
  main p {
    font-size: 14px;
  }
  main {
    padding-top: 60px;
    padding-bottom: 190px;
  }
  .mountains {
    height: 31%;
  }
}
@media (max-height: 740px) and (min-width: 601px) {
  header {
    padding-top: 24px;
  }
  main {
    padding-top: 45px;
    padding-bottom: 200px;
  }
  h1 {
    font-size: 112px;
  }
  footer {
    bottom: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before {
    animation: none !important;
    transition: none !important;
  }
}