:root {
  color-scheme: dark;
  background: #1e1713;
  font-family: "Avenir Next", Futura, "Century Gothic", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  background: #1e1713;
}

.arrival {
  --ink: #f8ecdb;
  --night: #1e1713;
  --ember: #e65332;
  --sun: #f1b84b;
  align-items: center;
  background:
    radial-gradient(
      circle at 50% 49%,
      rgba(230, 83, 50, 0.14),
      transparent 12%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(241, 184, 75, 0.1),
      transparent 31%
    ),
    var(--night);
  color: var(--ink);
  display: grid;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: 2rem;
  place-items: center;
  position: relative;
}

.arrival::before,
.arrival::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.arrival::before {
  background-image: radial-gradient(
    rgba(248, 236, 219, 0.15) 0.55px,
    transparent 0.7px
  );
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
  opacity: 0.18;
  z-index: -1;
}

.arrival::after {
  background: linear-gradient(
    90deg,
    rgba(30, 23, 19, 0.75),
    transparent 32%,
    transparent 68%,
    rgba(30, 23, 19, 0.75)
  );
  z-index: 1;
}

.arrival__light {
  filter: drop-shadow(0 0 2.25rem rgba(230, 83, 50, 0.22));
  height: min(78vmin, 820px);
  left: 50%;
  mix-blend-mode: screen;
  opacity: 0.84;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(40vmin, 430px);
  z-index: -1;
}

.arrival__facet {
  border: 1px solid rgba(255, 237, 191, 0.24);
  display: block;
  overflow: hidden;
  position: absolute;
}

.arrival__facet::after {
  background: radial-gradient(
    circle,
    rgba(255, 247, 213, 0.62) 0 1px,
    transparent 1.8px
  );
  background-size: 5px 5px;
  content: "";
  inset: 0;
  mix-blend-mode: soft-light;
  opacity: 0.38;
  position: absolute;
}

.arrival__facet--top {
  background:
    radial-gradient(circle at 27% 21%, #fff0b4 0 1.4%, transparent 10%),
    linear-gradient(112deg, #8c3f32 2%, #f0ac48 42%, #ffe0 70%, #bb4c30 100%);
  border-radius: 46% 54% 40% 60% / 57% 44% 56% 43%;
  box-shadow: 0 0 3.25rem rgba(241, 184, 75, 0.34);
  height: 35%;
  left: 8%;
  top: 3%;
  transform: rotate(-5deg);
  width: 84%;
}

.arrival__facet--middle {
  background:
    radial-gradient(
      circle at 68% 22%,
      rgba(255, 231, 156, 0.46),
      transparent 13%
    ),
    linear-gradient(120deg, #34382f 0%, #7f876e 35%, #c39b5d 70%, #554633 100%);
  border-color: rgba(248, 236, 219, 0.16);
  border-radius: 54% 46% 58% 42% / 43% 58% 42% 57%;
  box-shadow: 0 0 2.5rem rgba(136, 139, 100, 0.24);
  height: 24%;
  left: 10%;
  top: 39%;
  transform: rotate(6deg);
  width: 80%;
}

.arrival__facet--bottom {
  background:
    radial-gradient(circle at 63% 21%, #ffcd79 0 1%, transparent 9%),
    linear-gradient(104deg, #702e2c 3%, #d25134 45%, #f3844d 67%, #8d3d2d 100%);
  border-radius: 42% 58% 54% 46% / 55% 45% 59% 41%;
  box-shadow: 0 0 3rem rgba(230, 83, 50, 0.32);
  height: 34%;
  left: 11%;
  top: 64%;
  transform: rotate(-3deg);
  width: 78%;
}

.arrival__orbit {
  animation: orbit-breathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  background: conic-gradient(
    from 124deg,
    transparent 0 15%,
    rgba(255, 221, 154, 0.8) 16% 25%,
    transparent 26% 56%,
    rgba(230, 83, 50, 0.42) 57% 65%,
    transparent 66% 100%
  );
  border-radius: 50%;
  height: min(74vmin, 780px);
  left: 50%;
  -webkit-mask: radial-gradient(
    ellipse,
    transparent 60.5%,
    #000 61.5% 62.2%,
    transparent 63.2%
  );
  mask: radial-gradient(
    ellipse,
    transparent 60.5%,
    #000 61.5% 62.2%,
    transparent 63.2%
  );
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-22deg) scaleX(1.58);
  width: min(74vmin, 780px);
  z-index: 0;
}

h1 {
  font-family:
    Iowan Old Style,
    Baskerville,
    "Times New Roman",
    serif;
  font-size: clamp(3.1rem, 8vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.78;
  margin: 0;
  max-width: 7ch;
  position: relative;
  text-align: center;
  text-wrap: balance;
  z-index: 2;
}

h1::after {
  background: var(--sun);
  border-radius: 50%;
  bottom: -0.23em;
  content: "";
  height: 0.045em;
  position: absolute;
  right: 0.06em;
  width: 0.045em;
}

@keyframes orbit-breathe {
  from {
    opacity: 0.42;
    transform: translate(-50%, -50%) rotate(-25deg) scaleX(1.5);
  }

  to {
    opacity: 0.88;
    transform: translate(-50%, -50%) rotate(-19deg) scaleX(1.66);
  }
}

@media (max-width: 640px) {
  .arrival {
    padding: 1.5rem;
  }

  .arrival__light {
    height: 108vmin;
    width: 68vmin;
  }

  .arrival__orbit {
    height: 106vmin;
    width: 106vmin;
  }

  h1 {
    font-size: clamp(3.7rem, 18vw, 7rem);
    line-height: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arrival__orbit {
    animation: none;
  }
}