@property --progress-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --progress-rotation {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* https://easings.net/#easeOutQuart */
@function --ease-out-quart(--value) {
  --value-eased: calc(1 - pow(calc(1 - var(--value)), 4));
  --value-eased-clamped: clamp(0, var(--value-eased), 1);

  result: var(--value-eased-clamped);
}

@function --ease-out-expo(--value) {
  --value-eased: calc(1 - pow(2, calc(-10 * var(--value))));
  --value-eased-clamped: clamp(0, var(--value-eased), 1);

  result: var(--value-eased-clamped);
}

@function --ease-in-cubic(--value) {
  --value-eased: calc(var(--value) * var(--value) * var(--value));
  --value-eased-clamped: clamp(0, var(--value-eased), 1);

  result: var(--value-eased-clamped);
}

.container {
  width: 100%;
  overflow-x: clip;
}

.text-container {
  margin-block-start: 20vh;
  display: flex;
  flex-direction: column;
}

.text {
  --progress-y: 0;
  --direction: 1;

  --radius-x: 100vw;
  --radius-y: 20vh;

  --angle-start: 90deg;
  --angle-end: 90deg;

  --rotation-start: -10deg;

  --progress-ease-clamped: --ease-out-expo(var(--progress-y));
  --progress-y-inverted: calc(1 - var(--progress-y));

  --opacity: --ease-out-quart(var(--progress-y));
  --scale: calc(1 + (0.6 * --ease-out-quart(var(--progress-y-inverted))));

  --rotation: calc(
    var(--rotation-start) * var(--direction) *
      --ease-in-cubic(var(--progress-y-inverted))
  );

  --start-x: calc(var(--radius-x) * var(--direction));
  --x: calc(var(--start-x) - (var(--start-x) * var(--progress-ease-clamped)));
  --y: calc(30vh * var(--progress-y-inverted));

  margin-inline: auto;

  font-size: var(--font-size-fluid-2);
  text-transform: uppercase;
  font-weight: var(--font-weight-9);
  text-align: center;

  opacity: var(--opacity);
  transform: translateX(var(--x)) translateY(var(--y)) scale(var(--scale))
    rotate(var(--rotation));

  animation: zipper 1ms linear forwards;
  animation-timeline: view(block);
  animation-range: entry 0% contain 100%;

  &:nth-child(even) {
    --direction: -1;
  }
}

@keyframes zipper {
  from {
    --progress-y: 0;
  }

  to {
    --progress-y: 1;
  }
}