/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Topbar component */
@layer components {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: rgba(10, 10, 10, 0.8);
        backdrop-filter: blur(12px);
        border-bottom: var(--border-thin);
        height: 64px;
        display: flex;
        align-items: center;
        transition: background-color var(--transition-fast), backdrop-filter var(--transition-fast);

        & .topbar__inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        & .topbar__nav {
            @media (max-width: 768px) {
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: var(--color-bg);
                padding: var(--space-xl);
                display: none;
                flex-direction: column;
                z-index: 1000;
                border-top: var(--border-thin);

                &[data-state="active"] {
                    display: flex;
                }
            }

            & ul {
                display: flex;
                gap: var(--space-l);
                list-style: none;
                margin: 0;
                padding: 0;

                @media (max-width: 768px) {
                    flex-direction: column;
                    gap: var(--space-xl);
                    align-items: center;
                    margin-top: var(--space-3xl);
                }
            }

            & a {
                font-size: var(--size-step--1);
                color: var(--color-text-muted);
                text-decoration: none;
                transition: var(--transition-fast);

                @media (max-width: 768px) {
                    font-size: var(--size-step-2);
                    font-weight: 600;
                }

                &:hover {
                    color: var(--color-text-main);
                }
            }
        }

        & .topbar__logo {
            text-decoration: none;
            display: inline-block;

            & .topbar__logo-text {
                font-family: var(--font-mono);
                font-weight: 700;
                font-size: var(--size-step-1);
                letter-spacing: 0.05em;
                display: inline-block;
                animation: logo-glow-pulse 3s ease-in-out infinite;
                transition: filter 200ms ease;
            }

            &[data-scrambling="true"] .topbar__logo-text {
                filter: drop-shadow(0 0 12px rgba(0, 255, 65, 0.7));
            }

            & .topbar__logo-char {
                display: inline-block;
                background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            & .topbar__logo-punct {
                display: inline-block;
                color: var(--color-accent-blue);
                width: 6px;
            }

            & .topbar__logo-char--pop {
                animation: char-pop 380ms var(--ease-out) forwards;
            }
        }

        & .topbar__actions {
            display: flex;
            align-items: center;
            gap: var(--space-m);
        }

        & .topbar__hamburger {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 24px;
            height: 18px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 101;

            @media (max-width: 768px) {
                display: flex;
            }

            & .topbar__hamburger-line {
                width: 100%;
                height: 2px;
                background-color: var(--color-text-main);
                transition: var(--transition-fast);
                transform-origin: center;
            }

            &[data-state="active"] {
                & .topbar__hamburger-line:nth-child(1) {
                    transform: translateY(8px) rotate(45deg);
                }

                & .topbar__hamburger-line:nth-child(2) {
                    opacity: 0;
                }

                & .topbar__hamburger-line:nth-child(3) {
                    transform: translateY(-8px) rotate(-45deg);
                }
            }
        }

        &[data-menu-open="true"] {
            @media (max-width: 768px) {
                background-color: var(--color-bg);
                backdrop-filter: none;
                transition: none;
            }
        }
    }
}

@keyframes logo-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(0, 112, 243, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(0, 112, 243, 0.65));
    }
}

@keyframes char-pop {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}