/* ============================================
   WAB. — Accueil : le premier écran
   Le bureau à trame de points, presque vide : le nom « WeAreBrothers. »
   en bas, tapé en touches de clavier, et deux touches. Le canevas
   .hero__pixels se creuse de gros pixels de couleur au passage de la
   souris ou du doigt, avec des signes informatiques qui surgissent
   (js/desk/pixels.js) ; au repos, des motifs tirés au hasard restent
   sur les bords, changent au survol et se redessinent au clic
   (pixels-patterns.js) ; jamais sous le nom ni sous les touches
   ([data-pixels-keep]). Survolée, une touche du nom se brouille en
   symboles puis revient (js/desk/scramble.js).
   ============================================ */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(560px, 100svh);
    padding: calc(var(--bar-h) + 24px) var(--gutter) clamp(40px, 7vh, 64px);
    overflow: clip;
}

/* Un motif des bords se redessine au clic : la main le dit. */
.hero.is-over-pattern {
    cursor: pointer;
}

.hero__pixels {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.hero__copy {
    --key: min(84px, (100vw - 2 * var(--gutter)) / 9.9);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--measure) + 160px);
    margin-inline: auto;
}

/* Le nom en touches de clavier (dessin de desk-keys.css), comme
   « WAB. » dans le pied de page : W, A et B dans leur teinte, le point
   en bleu, les autres lettres en touches blanches. Deux rangées
   (« WeAre » puis « Brothers. ») tant que l'écran est étroit, une
   seule dès qu'elles tiennent côte à côte. */
.hero__title {
    line-height: 1;
}

.hero__keys {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--key) * 0.14) calc(var(--key) * 0.1);
    width: fit-content;
}

.hero__keys .keys {
    --key: inherit;
    gap: calc(var(--key) * 0.1);
}

/* Le symbole qui remplace un instant la lettre d'une touche. */
.hero__keys .key__face.is-glyph {
    font-family: var(--font-mono);
    font-weight: var(--w-regular);
    font-size: calc(var(--key) * 0.42);
    color: var(--klein-text);
}

/* Sur une touche de couleur, il garde l'encre de la touche. */
.hero__keys .key--tint .key__face.is-glyph {
    color: var(--glyph);
}

@media (min-width: 1100px) {
    .hero__copy {
        --key: min(82px, (100vw - 2 * var(--gutter)) / 15.4);
    }
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: min(100%, 300px);
    margin-top: clamp(20px, 3vw, 32px);
}

@media (min-width: 600px) {
    .hero__actions {
        flex-direction: row;
        width: fit-content;
        gap: 16px;
    }
}

/* Cible du lien d'évitement, pas une commande : pas d'anneau autour
   de tout le premier écran. */
.hero:focus-visible {
    outline: none;
}

/* Sur ordinateur, le bas garde la place du dock. */
@media (min-width: 900px) {
    .hero {
        padding-bottom: var(--dock-space);
    }
}