/* ==========================================
   HERO GRID (même logique que le header)
========================================== */


.hero {
    position:relative;
    height:100vh;
}


.hero-intro {

    position:relative;
    z-index:10;

    height:100vh;

    display:grid;
    grid-template-columns:repeat(12,1fr);

    padding:20px;
    box-sizing:border-box;

    align-content:start;

    padding-top:120px;

    color:var(--text-light);
}



/* espace réservé comme le logo */


/* zone texte comme la nav */



.hero-empty{
    grid-column: span 6;
}

.hero-copy{
    grid-column: span 6;
}

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


.hero-line {
    overflow: hidden;
    line-height: .92;

    padding-bottom: 1em;
    margin-bottom: -1.18em;
}


.animate-text {
    display: inline-block;
    white-space: nowrap;

    font-family: var(--font-primary);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
}



.char {
    display: inline-block;
    transform: translateY(120%);
    animation: letterReveal .8s cubic-bezier(.22,1,.36,1) forwards;
}


@keyframes letterReveal {
    to {
        transform: translateY(0);
    }
}