* {
  box-sizing: border-box;
}

:root {
  --color: #1e293b;
  --c1: #fbda61;
  --c2: #ff5acd;
  --c3: #2563eb;
  --gradient: linear-gradient(
    60deg,
    var(--c3),
    var(--c2),
    var(--c1),
    var(--c2),
    var(--c3)
  );
  --scale-start: 0.5;
  --scale-end: 1.001;
  --hover-offset: 5%;

  /* 
    linear easing generator
    https://linear-easing-generator.netlify.app/
  */
  /* prettier-ignore */
  --ease-elastic: linear(
    0, 0.186 2.1%, 0.778 7.2%, 1.027 9.7%, 1.133, 1.212, 1.264, 1.292 15.4%,
    1.296, 1.294, 1.285, 1.269 18.9%, 1.219 20.9%, 1.062 25.8%, 0.995 28.3%,
    0.944 31.1%, 0.93, 0.921, 0.92 35.7%, 0.926, 0.94 39.7%, 1.001 47%, 1.014,
    1.021 52.4%, 1.02 56.4%, 1 65.5%, 0.994 70.7%, 1.001 88.4%, 1
  );
  --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion) {
  :root {
    --scale-start: var(--scale-end);
    --ease-elastic: ease-out;
    --ease-bounce-out: ease-out;
    --hover-offset: 0;
  }
}

body {
  padding-inline: 1rem;
  font-family: system-ui;
  font-weight: 800;
  font-size: calc(1rem + 10vmin);
  text-align: center;
  overflow-x: hidden;
}

.intro {
  display: flex;
  justify-content: center;
  gap: 0.2em;
  font-size: 0.5em;
  -webkit-margin-before: calc(50vh - 1ex);
          margin-block-start: calc(50vh - 1ex);
}

.intro span {
  display: inline-block;
}

.intro span:first-child {
  transform-origin: right bottom;
  -webkit-animation: wave 250ms 1s ease 3;
          animation: wave 250ms 1s ease 3;
}

.intro span:last-child {
  -webkit-animation: hover 500ms linear infinite;
          animation: hover 500ms linear infinite;
}

.box {
  margin-block: 80vh;
}

.text {
  margin-inline: auto;
  padding-block: 0.2em;
  max-inline-size: 15ch;
  text-wrap: balance;
  background-image: var(--gradient);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@supports (animation-timeline: view()) {
  .box {
    -webkit-animation: trigger steps(1) both, fade linear both;
            animation: trigger steps(1) both, fade linear both;
    animation-timeline: view();
    animation-range: entry 80% contain 40%;
  }

  .text {
    -webkit-animation: pop-back 300ms var(--ease-bounce-out) forwards;
            animation: pop-back 300ms var(--ease-bounce-out) forwards;
  }

  @container style(--animate: true) {
    .text {
      -webkit-animation: pop 600ms var(--ease-elastic) forwards,
        text-gradient 1s cubic-bezier(0, 0.55, 0.45, 1) forwards;
              animation: pop 600ms var(--ease-elastic) forwards,
        text-gradient 1s cubic-bezier(0, 0.55, 0.45, 1) forwards;
    }
  }
}

.smile {
  width: 1em;
  margin-inline: auto;
  overflow: hidden;
  white-space: nowrap;
  -webkit-margin-after: calc(50vh - 1ex);
          margin-block-end: calc(50vh - 1ex);
}

.smile div {
  display: flex;
  -webkit-animation: wink 1s steps(1) infinite;
          animation: wink 1s steps(1) infinite;
}

.smile span {
  display: inline-block;
  width: 1em;
}

@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@-webkit-keyframes trigger {
  to {
    --animate: true;
  }
}

@keyframes trigger {
  to {
    --animate: true;
  }
}

@-webkit-keyframes pop {
  from {
    scale: var(--scale-start);
  }
  to {
    scale: var(--scale-end);
  }
}

@keyframes pop {
  from {
    scale: var(--scale-start);
  }
  to {
    scale: var(--scale-end);
  }
}

@-webkit-keyframes text-gradient {
  100% {
    background-position: 150% center;
  }
}

@keyframes text-gradient {
  100% {
    background-position: 150% center;
  }
}

@-webkit-keyframes pop-back {
  from {
    scale: var(--scale-end);
  }
  to {
    color: var(--color);
    scale: var(--scale-start);
  }
}

@keyframes pop-back {
  from {
    scale: var(--scale-end);
  }
  to {
    color: var(--color);
    scale: var(--scale-start);
  }
}

@-webkit-keyframes wink {
  0%,
  100% {
    translate: 0 0;
  }
  25%,
  75% {
    translate: -100% 0;
  }
  50% {
    translate: -200% 0;
  }
}

@keyframes wink {
  0%,
  100% {
    translate: 0 0;
  }
  25%,
  75% {
    translate: -100% 0;
  }
  50% {
    translate: -200% 0;
  }
}

@-webkit-keyframes wave {
  50% {
    rotate: 10deg;
  }
}

@keyframes wave {
  50% {
    rotate: 10deg;
  }
}

@-webkit-keyframes hover {
  from,
  to {
    translate: 0 calc(var(--hover-offset) * -1);
  }
  50% {
    translate: 0 var(--hover-offset);
  }
}

@keyframes hover {
  from,
  to {
    translate: 0 calc(var(--hover-offset) * -1);
  }
  50% {
    translate: 0 var(--hover-offset);
  }
}