@import url("brouillon.css");
@import url("footer.css");
@import url("main.css");

portfolio-header{
    display: grid; 
    padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(3rem, 9vw, 6rem);
}

.header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.header--padding{padding: 0.5rem 1rem;}

.header__portfolio{
    color: rgb(var(--blue-beeon));
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.header__portfolio__typing{color: rgb(var(--gold));}

.header__portfolio--dot{
    width: 6px;
    height: 6px;
    background-color: rgb(var(--gold));
    border-radius: 50%;
    display: block;
    animation: pulse-dot 1s ease-in-out infinite;
    box-shadow: 0 0 8px rgb(var(--gold) / 50%);
}

.header--background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(var(--blue-beeon) / 10%);
    border: 0.5px solid rgb(var(--blue-beeon));
    transform: scaleX(0);
    transform-origin: left;
    animation: progressFill 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.header__title{
    font-size: clamp(3rem, 8vw, 8rem);
    color: rgb(var(--cream));
    margin-bottom: 0.25rem;
}

.header__description{font-size: clamp(2rem, 5vw, 5rem);color: rgb(var(--gold));}

@keyframes progressFill {to {transform: scaleX(1);}}
@keyframes progressFillFooter {to {transform: scaleX(0.6);}}
@keyframes pulse-dot {0%, 100% { opacity: 1; transform: scale(1); }50% { opacity: 0.5; transform: scale(0.6);}}
@keyframes floatSmooth {
    0%, 100% {transform: translateY(0px) scale(1);}
    50% {transform: translateY(-10px) scale(1.01);}
}

@media (min-width: 768px) {
    .header--padding {flex-direction: row;gap:2rem;}
    .header__portfolio{font-size: 1rem;}
}