/* ============================================
   WAB. — Accueil : le nom en touches de clavier
   Demandé par Eliott le 03.10 : « WAB » écrit dans des touches
   d'ordinateur, comme le dock. Même dessin que les icônes d'app
   (assets/icons/app-*.svg) : une jupe grise au liseré d'encre, la face
   claire posée dessus, plus basse devant, un reflet en haut à gauche.
   Le point est la touche bleue, comme Contact dans le dock.
   Au chargement, les touches s'enfoncent une à une, comme si on tapait
   le nom ; au survol, la touche s'enfonce sous la souris. Rien de tout
   cela sous « réduire les animations ». Décor : le h1 garde le nom en
   texte pour les lecteurs d'écran et les moteurs.
   ============================================ */

.keys {
    --key: clamp(60px, 7vw, 100px);
    display: flex;
    justify-content: center;
    gap: calc(var(--key) * 0.1);
}

.key {
    /* La jupe : le flanc de la touche, visible surtout devant. */
    --skirt-top: oklch(0.88 0.008 85);
    --skirt-bottom: oklch(0.77 0.01 85);
    --face-top: oklch(1 0 0);
    --face-bottom: oklch(0.95 0.004 85);
    --glyph: var(--ink);
    --press: 0px;
    position: relative;
    display: block;
    width: var(--key);
    height: var(--key);
    border-radius: 21%;
    background: linear-gradient(var(--skirt-top), var(--skirt-bottom));
    box-shadow:
        inset 0 0 0 1px oklch(0.18 0.005 265 / 0.28),
        0 calc(var(--key) * 0.05) calc(var(--key) * 0.12) oklch(0.18 0.005 265 / 0.16),
        0 1px 2px oklch(0.18 0.005 265 / 0.12);
}

/* La face : posée en retrait, plus basse devant, avec le reflet. */
.key__face {
    position: absolute;
    inset: 4% 7% 13%;
    display: grid;
    place-items: center;
    border-radius: 18%;
    background:
        radial-gradient(80% 70% at 30% 12%, oklch(1 0 0 / 0.95), oklch(1 0 0 / 0) 60%),
        linear-gradient(160deg, var(--face-top), var(--face-bottom));
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.9);
    font-size: calc(var(--key) * 0.5);
    font-weight: var(--w-strong);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--glyph);
    translate: 0 var(--press);
    transition: translate var(--dur-1) var(--ease-out);
}

/* Une touche de couleur : celle de sa teinte (data-tint, os-tints.css),
   la lettre à l'encre qui s'y lit. */
.key--tint {
    --skirt-top: var(--klein-hi);
    --skirt-bottom: var(--klein-deep);
    --face-top: var(--klein-hi);
    --face-bottom: var(--klein);
    --glyph: var(--on-klein);
}

/* Le point : la touche bleue. */
.key--dot {
    --skirt-top: var(--klein-hi);
    --skirt-bottom: var(--klein-deep);
    --face-top: var(--klein-hi);
    --face-bottom: var(--klein);
    --glyph: oklch(1 0 0);
}

.key--dot .key__face {
    font-size: 0;
    background:
        radial-gradient(80% 70% at 30% 12%, oklch(1 0 0 / 0.35), oklch(1 0 0 / 0) 60%),
        linear-gradient(160deg, var(--face-top), var(--face-bottom));
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35);
}

/* Le point, dessiné : le caractère « . » serait trop petit sur la
   touche. Un carré aux coins arrondis, à la hauteur de la ligne de
   base des lettres voisines. */
.key--dot .key__face::after {
    content: '';
    width: 16%;
    aspect-ratio: 1;
    margin-top: 22%;
    border-radius: 22%;
    background: var(--glyph);
}

@media (prefers-reduced-motion: no-preference) {
    /* La frappe : chaque touche s'enfonce puis remonte, l'une après
       l'autre, une seule fois. */
    .key__face {
        animation: key-type 260ms var(--ease-out) backwards;
        animation-delay: calc(500ms + var(--i, 0) * 140ms);
    }

    @media (hover: hover) and (pointer: fine) {
        .key:hover {
            --press: calc(var(--key) * 0.035);
        }
    }
}

@keyframes key-type {
    40% {
        translate: 0 calc(var(--key) * 0.06);
    }
}