/* --- TOS & Privacy Expander --- */
.tos-expander {
    position: relative;
    max-height: 400px;
    overflow: hidden;
    transition: max-height 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.tos-expander.expanded {
    max-height: 5000px;
}

.tos-blur {
    position: absolute;
    bottom: -1px;
    /* Slight overlap to ensure no bottom gaps */
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(8, 8, 12, 0.4) 30%,
            rgba(8, 8, 12, 0.8) 60%,
            var(--bg-card) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 50px;
    transition: opacity 0.5s ease;
    z-index: 10;
    pointer-events: none;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}

.tos-expander.expanded .tos-blur {
    opacity: 0;
    pointer-events: none;
}

.expand-btn {
    pointer-events: auto;
    /* Turn interaction back on for the button */
    background: var(--grad-primary);
    color: white;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.5);
    animation: pulseArrow 2s infinite;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.3rem;
}

.expand-btn:hover {
    transform: scale(1.1);
}

@keyframes pulseArrow {
    0% {
        transform: translateY(0);
        box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    }

    50% {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(99, 102, 241, 0.6);
    }

    100% {
        transform: translateY(0);
        box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    }
}