#hero {
    position: relative;
    background-color: var(--color-bg);
}
.hero-container {
    perspective: 900px;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
}
.hero-text-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
}
.hero-h1 {
    width: 100%;
    max-width: 720px;
    text-align: center;

    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-xl);
    color: var(--color-text);
}
.hero-subtitle {
    width: 100%;
    max-width: 720px;
    text-align: center;

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-md);
    color: var(--color-text);
}
.hero-logo-wrapper {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 1 / 1;
    background-color: var(--color-text);
    padding: var(--space-lg);
    border: none;
    border-radius: var(--radius-lg);
}
.hero-logo-wrapper-float {
    bottom: 0;
    transform: translateY(25%);
    left: var(--space-lg);
    transform: rotateZ(-25deg);
    animation: float 6s ease-in-out infinite alternate;
}
.hero-logo-wrapper-rotate {
    top: var(--space-lg);
    right: var(--space-lg);

    animation: rotate 10s ease-in-out infinite alternate;
}
.hero-logo {
    fill: var(--color-bg);
}
.hero-logo-float {
    width: var(--font-size-lg);
}
.hero-logo-rotate {
    width: var(--font-size-lg);
}

@keyframes float {
    0%, 100% {
        transform: translateY(5%) rotateZ(-25deg);
    }

    50% {
        transform: translateY(calc(var(--font-size-sm) * -1)) rotateZ(-25deg);
    }
}

@keyframes rotate {
  0% {
    transform: rotateX(18deg) rotateY(-18deg);
  }
  25% {
    transform: rotateX(12deg) rotateY(18deg);
  }
  50% {
    transform: rotateX(-12deg) rotateY(12deg);
  }
  75% {
    transform: rotateX(-18deg) rotateY(-12deg);
  }
  100% {
    transform: rotateX(18deg) rotateY(-18deg);
  }
}