@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/barlow-condensed-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #100e24;
  color: #fff4f4;
  font-family: "Barlow Condensed", Impact, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.universe {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  height: 100svh;
  overflow: hidden;
  background: #100e24;
}

.artwork,
.atmosphere,
.frame,
.stardust {
  position: absolute;
  pointer-events: none;
}

.artwork {
  inset: -16px;
  z-index: -3;
  transform: translate(var(--drift-x, 0px), var(--drift-y, 0px));
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.artwork__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 48%;
  animation: arrive 1.4s ease-out both;
}

.atmosphere {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgb(16 14 36 / 45%), transparent 62%),
    linear-gradient(0deg, rgb(16 14 36 / 50%), transparent 22%);
}

.frame {
  inset: 24px;
  z-index: 3;
  border: 1px solid rgb(218 193 255 / 17%);
  border-radius: 5px;
}

.little-sun,
.swiss-spark,
.orbit {
  position: absolute;
  pointer-events: none;
}

.little-sun {
  top: 52px;
  left: 58px;
  width: 52px;
  color: #ffe190;
  transform: rotate(-14deg);
  animation: arrive 1s .15s both;
}

.swiss-spark {
  top: 56px;
  right: 58px;
  width: 31px;
  color: #f2dbff;
  transform: rotate(12deg);
}

.headline-wrap {
  position: absolute;
  top: 50%;
  left: 7%;
  width: 47%;
  transform: translateY(-43%) rotate(-6deg);
}

h1 {
  position: relative;
  margin: 0;
  font-size: clamp(100px, 16.8vw, 268px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.025em;
  text-transform: uppercase;
  filter: drop-shadow(0 7px 0 rgb(35 14 53 / 28%));
}

.word {
  display: block;
  width: fit-content;
  padding: .045em .055em .11em 0;
  margin-bottom: -.075em;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: word-arrive .9s cubic-bezier(.16, 1, .3, 1) both;
}

.word--helena {
  background-image: linear-gradient(165deg, #fff9e6 16%, #f7d3fb 62%, #bf97ff);
}

.word--weber {
  background-image: linear-gradient(165deg, #ebcaff 8%, #d493ff 45%, #ff74b9 90%);
  animation-delay: .1s;
}

.word--rocks {
  background-image: linear-gradient(165deg, #ff81b5 10%, #ff9c79 52%, #ffe797 92%);
  animation-delay: .2s;
}

.headline-spark {
  position: absolute;
  width: clamp(40px, 5vw, 80px);
  top: -12%;
  right: 5%;
  color: #d9ffba;
  transform: rotate(12deg);
  animation: arrive 1s .5s both;
}

.underline {
  width: 76%;
  height: auto;
  margin-top: 13px;
  margin-left: -4px;
  color: #ffb994;
  opacity: .9;
  animation: arrive 1s .45s both;
}

.orbit {
  right: 52px;
  bottom: 42px;
  width: 84px;
  color: #e9c3ff;
  opacity: .65;
  transform: rotate(10deg);
}

.stardust {
  inset: 0;
  z-index: 5;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: var(--color);
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 62%, 50% 100%, 38% 62%, 0 50%, 38% 35%);
  animation: pop .85s ease-out forwards;
}

@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes word-arrive {
  from { opacity: 0; transform: translateY(35px) rotate(3deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes pop {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
  to { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rotation)) scale(1); }
}

@media (min-width: 1800px) {
  .headline-wrap {
    left: calc(50% - 760px);
    width: 720px;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .universe {
    min-height: 560px;
    max-height: 1100px;
  }

  .artwork {
    inset: -8px -8px 20%;
  }

  .artwork__image {
    object-position: 77% 38%;
  }

  .atmosphere {
    background: linear-gradient(0deg, #100e24 4%, rgb(16 14 36 / 92%) 19%, rgb(16 14 36 / 30%) 46%, transparent 65%);
  }

  .frame {
    inset: 14px;
  }

  .little-sun {
    top: 32px;
    left: 32px;
    width: 38px;
  }

  .swiss-spark {
    top: 34px;
    right: 31px;
    width: 25px;
  }

  .headline-wrap {
    top: auto;
    bottom: 7%;
    left: 12%;
    width: 80%;
    transform: rotate(-6deg);
  }

  h1 {
    font-size: clamp(86px, 27vw, 181px);
    line-height: .77;
  }

  .headline-spark {
    top: 25%;
    right: 4%;
    width: 44px;
  }

  .underline {
    width: 68%;
    margin-top: 9px;
  }

  .orbit {
    right: 26px;
    bottom: 25px;
    width: 56px;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .universe {
    min-height: 360px;
  }

  h1 {
    font-size: min(16.5vw, 26vh);
  }

  .headline-wrap {
    left: 9%;
    transform: translateY(-42%) rotate(-6deg);
  }

  .little-sun {
    top: 32px;
    left: 36px;
    width: 34px;
  }

  .swiss-spark {
    top: 32px;
    right: 36px;
    width: 25px;
  }

  .underline {
    width: 60%;
    max-width: 330px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .artwork {
    transform: none;
  }
}

@media (forced-colors: active) {
  .word {
    background: none;
    color: CanvasText;
  }
}