.view-section {
    display: none;
}

.view-section.active-view {
    display: block;
}

.section {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.hero {
    min-height: calc(100vh - 64px);
    display: grid;
    place-items: center;
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
    padding: 6px 0 58px;
    text-align: center;
}

.hero > * {
    transform: translateY(8px);
    opacity: 0;
}

body.is-ready .hero > * {
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

body.is-ready .hero h1 {
    transition-delay: 0.08s;
}

body.is-ready .btn-group {
    transition-delay: 0.14s;
}

.game-logo {
    width: min(590px, 94vw);
    margin: 0 auto 24px;
    display: block;
    animation: logoFloat 5.5s ease-in-out infinite;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 16px rgba(54, 209, 220, 0.14));
    transform-origin: center;
}

.game-logo:hover {
    animation-play-state: paused;
    transform: translateY(-4px) scale(1.02);
}

.hero h1 {
    max-width: 880px;
    margin: 0 auto;
    color: var(--txt);
    font-size: clamp(3rem, 9vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 0.94;
    text-wrap: balance;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(54, 209, 220, 0.12));
    }

    50% {
        transform: translateY(-6px) scale(1.018);
        filter: drop-shadow(0 21px 34px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 22px rgba(124, 92, 255, 0.22));
    }
}