/* ==========================================================================
   Landing Page Styles
   ========================================================================== */
.landing-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
    z-index: 100;
    transition: opacity 0.5s ease-out;
    gap: var(--spacing-lg);
    text-align: center;
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
}
.landing-page.hidden {
    opacity: 0;
    pointer-events: none;
}

.landing-page-logo {
    width: clamp(240px, 60vw, 520px);
    height: auto;
    max-width: 100%;
}
.landing-page-title {
    font-size: clamp(2.2rem, 10vw, 4rem);
    line-height: var(--line-height-titles);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-heading);
    max-width: 800px;
}
.landing-page-subtitle {
    font-size: clamp(1.05rem, 4.6vw, 1.5rem);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    max-width: 600px;
}
.landing-page-button {
    background-color: var(--color-background-accent);
    color: var(--color-text-accent);
    border: none;
    border-radius: 5rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    margin-top: var(--spacing-lg);
}
@media (hover: hover) and (pointer: fine) {
    .landing-page-button:hover {
        background-color: #1f1f1f;
    }
}