/* ===================================
   SCRATLOOP DIGITAL
   LAYOUT
   NUEVA IDENTIDAD SCRATTY
   RESPONSIVE FLUID SYSTEM
=================================== */


/* ==========================
   HEADER
========================== */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index:
        var(--z-header);

    background:
        rgba(5, 8, 22, .68);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    transition:
        background .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* ==========================
   HEADER CONTAINER
========================== */

header .container {

    min-height:
        clamp(92px, 6vw, 112px);

    display:
        flex;

    align-items:
        center;
}



/* ==========================
   NAVIGATION
========================== */

nav {

    width: 100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        clamp(20px, 3vw, 60px);
}


/* ==========================
   LOGO
========================== */

.logo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex-shrink:
        0;

    width:
        auto;
}


.logo img {

    height:
        clamp(62px, 4.5vw, 78px);

    width:
        auto;

    max-width:
        180px;

    object-fit:
        contain;

    display:
        block;

    transition:
        transform .3s ease,
        filter .3s ease;
}


.logo:hover img {

    transform:
        scale(1.04);

    filter:
        drop-shadow(
            0 0 12px
            rgba(0,200,255,.25)
        );
}


/* ==========================
   MENU
========================== */

nav ul {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        clamp(18px, 2vw, 38px);

    flex-wrap:
        nowrap;
}


nav ul li {
    position: relative;
}


nav ul a {

    position: relative;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 0;

    font-weight:
        600;

    color:
        var(--text);

    white-space:
        nowrap;

    transition:
        color .3s ease;
}


nav ul a:hover {
    color:
        var(--primary);
}


/* ==========================
   MENU UNDERLINE
========================== */

nav ul a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius:
        20px;

    background:
        var(--gradient);

    box-shadow:
        0 0 8px
        rgba(0,200,255,.25);

    transition:
        width .3s ease;
}


nav ul a:hover::after {
    width: 100%;
}


/* ==========================
   NAV CTA
========================== */

nav ul a.nav-cta {

    padding:
        10px 18px;

    border-radius:
        var(--radius-pill);

    background:
        var(--gradient);

    color:
        #ffffff;

    box-shadow:
        0 8px 25px
        rgba(0,200,255,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


nav ul a.nav-cta:hover {

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(0,200,255,.22);
}


nav ul a.nav-cta::after {
    display: none;
}


/* ==========================
   MOBILE MENU BUTTON
========================== */

.menu-toggle {

    display:
        none;

    width:
        44px;

    height:
        44px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.05);

    color:
        var(--text);

    font-size:
        1.5rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.menu-toggle:hover {

    background:
        rgba(0,200,255,.10);

    border-color:
        rgba(0,200,255,.30);
}


.menu-toggle.open {

    transform:
        rotate(90deg);
}


/* ==========================
   HEADER SCROLL
========================== */

header.scrolled {

    background:
        rgba(5,8,22,.94);

    border-bottom:
        1px solid
        rgba(0,200,255,.10);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.28);
}


/* ==========================
   MAIN OFFSET
========================== */

main {

    padding-top:
        clamp(92px, 6vw, 112px);
}



/* ==========================
   FOOTER
========================== */

footer {

    background:
        #020617;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    padding:
        20px 0;

    text-align:
        center;
}


footer p {

    color:
        var(--text-muted);

    font-size:
        .95rem;
}


/* ==========================
   SCROLL ANIMATION
========================== */

.hidden-animation {

    opacity:
        0;

    transform:
        translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.show {

    opacity:
        1;

    transform:
        translateY(0);
}


/* ==========================
   LARGE DESKTOP
========================== */

@media (min-width: 1600px) {

    header .container {

        min-height:
            100px;
    }


    .logo img {

        height:
            82px;

        max-width:
            200px;
    }


    nav ul {

        gap:
            34px;
    }

}


/* ==========================
   LAPTOP / SMALL DESKTOP
========================== */

@media (max-width: 1200px) {

    nav {

        gap:
            20px;
    }


    nav ul {

        gap:
            18px;
    }


    nav ul a {

        font-size:
            .95rem;
    }


    nav ul a.nav-cta {

        padding:
            9px 14px;
    }

}


/* ==========================
   TABLET
========================== */

@media (max-width: 900px) {

    header .container {

    min-height:
        88px;

    padding-top:
        8px;

    padding-bottom:
        8px;
}



    nav {

        position:
            relative;

        gap:
            15px;
    }


    .logo img {

        height:
            68px;
    }


    .menu-toggle {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }


    nav ul {

        display:
            none;

        position:
            absolute;

        top:
            calc(100% + 15px);

        left:
            0;

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            6px;

        padding:
            15px;

        background:
            rgba(15,23,42,.97);

        border:
            1px solid
            rgba(255,255,255,.08);

        border-radius:
            var(--radius-lg);

        box-shadow:
            var(--shadow-lg);

        backdrop-filter:
            blur(20px);
    }


    nav ul.active {
        display:
            flex;
    }


    nav ul li {
        width:
            100%;
    }


    nav ul a {

        width:
            100%;

        padding:
            13px 15px;

        border-radius:
            12px;
    }


    nav ul a:hover {

        background:
            rgba(0,200,255,.06);
    }


    nav ul a::after {
        display:
            none;
    }


    nav ul a.nav-cta {

        border-radius:
            12px;

        background:
            rgba(0,200,255,.08);

        color:
            var(--primary);

        box-shadow:
            none;
    }


    main {

        padding-top:
            88px;
    }

}


/* ==========================
   SMALL MOBILE
========================== */

@media (max-width: 600px) {

    header .container {

        min-height:
            82px;
    }


    .logo img {

        height:
            60px;

        max-width:
            155px;
    }


    main {

        padding-top:
            82px;
    }

}


/* ==========================
   VERY SMALL MOBILE
========================== */

@media (max-width: 400px) {

    header .container {

        padding-left:
            14px;

        padding-right:
            14px;
    }


    .logo img {

        height:
            56px;

        max-width:
            145px;
    }


    .menu-toggle {

        width:
            42px;

        height:
            42px;
    }

}


/* ==========================
   REDUCED MOTION
========================== */

@media (prefers-reduced-motion: reduce) {

    header,
    .logo img,
    nav ul a,
    .menu-toggle,
    .hidden-animation {

        transition:
            none;
    }

}