/* Home page « skyspace » : la scène occupe tout le viewport, rien d'autre. */

@font-face {
    font-family: 'JetBrains Mono';
    src: url("../fonts/JetBrainsMono-Regular-am2WezT.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,
body {
    height: 100%;
    margin: 0;
    background: #0a0a0c;
    overflow: hidden;
}

.skyspace {
    position: fixed;
    inset: 0;
    /* Teinte de repli visible avant l'initialisation de WebGL, et à sa place s'il manque. */
    background: linear-gradient(180deg, #1c2436 0%, #6d6255 55%, #8d8175 100%);
}

.skyspace__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * Le compteur est posé sur le mur du fond. Sa position verticale reprend celle
 * du prototype : légèrement sous le centre optique de la salle.
 */
.skyspace__counter {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    /*
     * Le compteur de la maquette est petit : son inscription ne couvre qu'un
     * dixième de la largeur du cadre. À l'ancienne taille, la nôtre en prenait
     * plus du double et traversait le mur d'un bord à l'autre.
     */
    font-size: clamp(0.52rem, 0.88vw, 0.72rem);
    /*
     * Chiffres serrés, et c'est l'écart autour des deux-points qui respire.
     *
     * L'interlettrage de 0,42 em s'appliquait à tout, y compris entre les
     * chiffres d'un même groupe : « 0 2 3 » se lisait comme trois nombres plutôt
     * que comme un jour. Dans la maquette, un groupe est un bloc compact, et
     * seuls les séparateurs l'aèrent.
     */
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    white-space: nowrap;
    /* Couleur et halo pilotés par l'éclairage de la scène. */
    color: var(--counter-color, rgba(255, 250, 240, 0.82));
    text-shadow: 0 0 var(--counter-glow, 0.5em) var(--counter-halo, rgba(255, 240, 210, 0.25));
    opacity: var(--counter-opacity, 0.85);
    transition: color 1.5s linear, opacity 1.5s linear;
    user-select: none;
}

.skyspace__separator {
    /* C'est lui qui porte tout l'air du compteur, les chiffres étant serrés. */
    margin: 0 0.5em;
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .skyspace__counter {
        transition: none;
    }
}