/* ==========================================
   Premium Header
========================================== */

.header-premium{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    margin-block:16px;

    padding:
        var(--header-padding-y)
        var(--header-padding-x);

    gap:var(--header-gap);

    background:var(--brand-gradient);

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

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

    overflow:hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}




/* ==========================================
   Logo
========================================== */

.header-logo{

    display:block;

    width:auto;

    height:clamp(52px,4vw,68px);

    padding:6px;

    background:var(--white);

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

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

    animation:logoZoom var(--animation-normal) ease;

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.header-logo:hover{

    transform:scale(1.05);

    box-shadow:var(--shadow-logo-hover);

}


/* ==========================================
   Title
========================================== */

.header-title{

    margin:0;

    color:var(--white);

    font-family:var(--font-family);

    font-size:clamp(2rem,2.3vw,2.8rem);

    font-weight:var(--fw-extrabold);

    line-height:1.2;

    letter-spacing:.4px;

    animation:titleReveal var(--animation-normal) ease forwards;

}

.header-title::after{

    content:"";

    display:block;

    width:100%;

    height:3px;

    margin-top:8px;

    background:var(--white);

    border-radius:999px;

    transform:scaleX(0);

    transform-origin:left;

    animation:underlineSlide var(--animation-slow) ease forwards;

}


/* ==========================================
   Animations
========================================== */

@keyframes logoZoom{

    0%{

        opacity:0;

        transform:scale(.6);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes titleReveal{

    0%{

        opacity:0;

        transform:translateY(20px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes underlineSlide{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}