body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
}

.frame {
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  position: relative;
  overflow: hidden;
  -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0,0,0,0.3));

  .horizontal-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .line {
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background: white;
      transform: scaleX(0);
      animation: scale-x-in 1s forwards var(--ease-in-out-cubic);

      &:nth-child(1) {
        top: 0;
      }

      &:nth-child(2) {
        bottom: 0;
      }
    }
  }

  .vertical-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .line {
      position: absolute;
      width: 1px;
      height: 50%;
      background: white;

      &:nth-child(odd) {
        top: -50%;
        animation: slide-down 0.6s 0.8s forwards var(--ease-in-out-cubic);
      }

      &:nth-child(even) {
        bottom: -50%;
        animation: slide-up 0.6s 0.8s forwards var(--ease-in-out-cubic);
      }

      &:nth-child(n+3) {
        right: 0;
      }
    }
  }

  .blingbling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, var(--primary-color), transparent);
    filter: blur(4px);
    transform: translateX(-101%);
    animation: slide-right 0.6s 1.5s forwards;
  }
}

.staggered-flip-in {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  padding: 12px 24px;
  color: white;
  font-size: 32px;
  line-height: 1;
  white-space: pre;
  overflow: hidden;

  span {
    padding: 8px;
    opacity: 0;
    transform: rotateY(90deg);
    animation: flip-in 0.6s forwards var(--ease-in-out-cubic), fade-in 0.6s forwards var(--ease-in-out-cubic);
  }
}

@keyframes flip-in {
  to {
    transform: rotateY(0);
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes scale-x-in {
  to {
    transform: scaleX(1);
  }
}

@keyframes slide-up {
  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-down {
  to {
    transform: translateY(100%);
  }
}

@keyframes slide-right {
  to {
    transform: translateX(101%);
  }
}
