@layer components {
    .landing-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgb(255 255 255 / 0.3);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgb(255 255 255 / 0.2);

        box-sizing: content-box;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        transform: translate(-8px, 0);

        &.is-visible {
            opacity: 1;
            pointer-events: auto;
        }

        .header-layout {
            padding: var(--spacing-3) 0;
        }
    }

    .header-layout {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: var(--spacing-6);
        padding-top: var(--spacing-6);
        padding-bottom: var(--spacing-6);
        align-items: center;
        box-sizing: content-box;

        &.leading {
            justify-content: left;
        }

        & > :last-child {
            justify-self: flex-end;
        }

        & .brand-container {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-4);
            align-items: center;

            &:hover {
                text-decoration: none;
            }
        }

        .brand-icon {
            height: 3.2rem;
            width: 3.2rem;
        }

        .header-links {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-6);
            align-items: center;
            justify-self: center;

            a.header-link {
                font-size: var(--font-size-lg);
                font-weight: var(--font-weight-normal);
                cursor: pointer;
                transition: color 0.1s ease-in-out;

                &:hover {
                    color: var(--color-primary-hover);
                    text-decoration: none;
                }

                &.active {
                    color: var(--color-primary);
                }
            }
        }

        .mobile-menu-toggle-btn {
            display: none;
        }

        .header-cta {
            justify-self: flex-end;
        }
    }

    @media (max-width: 900px) {
        .header-cta {
            display: none !important;
        }
        .header-layout {
            .header-links {
                display: none !important;
            }

            .mobile-menu-toggle-btn {
                display: block;
                background: none;
                border: none;
                padding: 0;
                margin: 0;
                margin-inline-start: auto;
                background: var(--color-surface);
                border-radius: var(--radius-md);
                padding: 0 var(--spacing-2);

                .menu-icon svg {
                    height: 2rem !important;
                    width: auto;
                    fill: var(--color-text-secondary);
                }
            }
        }
    }
}

@keyframes reveal-header {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}