/* Armoire des victoires du Picole Explorer : le toit d'Uuzio, de nuit (DA de sa fiche du hub). */
@font-face { font-family: 'Anybody'; src: url('fonts/toit-anybody-variable.ttf') format('truetype'); font-weight: 100 900; font-stretch: 50% 150%; font-display: block; }
@font-face { font-family: 'Barlow'; src: url('fonts/toit-barlow-400.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Barlow'; src: url('fonts/toit-barlow-500.ttf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Space Mono'; src: url('fonts/toit-space-mono-700.ttf') format('truetype'); font-weight: 700; }

:root {
  --uz-nuit-0: #0c0c24;
  --uz-nuit-2: #0c2454;
  --uz-nuit-3: #0c3c6c;
  --uz-ciel-clair: #549ccc;
  --uz-rouge: #c83848;
  --uz-papier: #e8e8d8;
  --uz-papier-gris: #c8c8c8;
  --f-display: 'Anybody', sans-serif;
  --f-texte: 'Barlow', sans-serif;
  --f-mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  background: linear-gradient(to bottom, var(--uz-nuit-0) 0%, var(--uz-nuit-2) 55%, var(--uz-nuit-3) 100%);
  color: var(--uz-papier);
  font-family: var(--f-texte);
}

.scene, .grain { position: fixed; inset: 0; width: 100%; height: 100%; }
.scene { display: block; }
.grain { object-fit: cover; pointer-events: none; } /* sans mix-blend-mode : un mélange par-dessus le canvas se recompose à chaque image */

.titre { position: fixed; top: clamp(20px, 5vh, 56px); left: clamp(20px, 5vw, 72px); margin: 0; pointer-events: none; transition: opacity 0.6s; }
body.en-moment .titre { opacity: 0; }
/* intro : titre, total et signature n'arrivent qu'à la fin. La classe est posée dans le HTML pour qu'ils
   ne se montrent pas avant la première image ; le script la retire quand l'intro ne se joue pas. */
body.en-intro .titre, body.en-intro .total, body.en-intro .signature { opacity: 0; }
.titre__sur, .titre__sous, .total, .signature {
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0;
}
.titre__sur { color: var(--uz-ciel-clair); }
.titre__nom {
  margin: 6px 0 4px; font-family: var(--f-display); font-variation-settings: 'wdth' 106, 'wght' 800;
  font-size: clamp(34px, 6vw, 84px); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.01em;
}
.titre__sous { color: var(--uz-papier-gris); }

.total { position: fixed; top: clamp(20px, 5vh, 56px); right: clamp(20px, 5vw, 72px); color: var(--uz-papier-gris); text-align: right; transition: opacity 0.6s 0.15s; }
.total__n {
  display: block; font-family: var(--f-display); font-variation-settings: 'wdth' 74, 'wght' 800;
  font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: 0; color: var(--uz-papier);
}

.palmares { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.info {
  position: fixed; left: 0; top: 0; margin: 0; padding: 8px 12px; pointer-events: none;
  background: var(--uz-papier); color: var(--uz-nuit-0); border-radius: 2px;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 14px));
}
.info strong { font-family: var(--f-display); font-variation-settings: 'wdth' 74, 'wght' 900; font-size: 16px; letter-spacing: 0.02em; margin-right: 8px; }

/* annonce d'une victoire qui arrive : prend la place du titre, effacé pendant le moment ; c'est du
   ciel quelle que soit l'étagère visée (en bas au centre, elle tombait sur les coupes du haut) */
.annonce {
  position: fixed; top: clamp(20px, 5vh, 56px); left: clamp(20px, 5vw, 72px); margin: 0; pointer-events: none;
  transform: translateY(12px); opacity: 0; transition: opacity 0.5s, transform 0.5s;
}
.annonce.est-visible { opacity: 1; transform: none; }
.annonce strong {
  display: block; font-family: var(--f-display); font-variation-settings: 'wdth' 74, 'wght' 900;
  font-size: clamp(44px, 7vw, 96px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 8px;
}
.annonce span { font-family: var(--f-mono); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--uz-papier-gris); }
.info.est-erreur { transform: translate(-50%, -50%); left: 50%; top: 50%; }
body.obs { cursor: none; }

/* l'invite à pousser la porte de l'intro : le son n'est permis qu'après un geste. Elle arrive après un
   temps (qui clique vite ne la voit pas) et s'efface quand la porte s'ouvre */
.pousser {
  position: fixed; left: 0; right: 0; bottom: clamp(16px, 3vh, 32px); margin: 0; text-align: center; pointer-events: none;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--uz-papier); opacity: 0; transition: opacity 0.3s;
}
.pousser.est-visible { opacity: 0.85; transition: opacity 0.6s 0.5s; }

.signature { position: fixed; bottom: clamp(16px, 3vh, 32px); right: clamp(20px, 5vw, 72px); color: var(--uz-papier-gris); transition: opacity 0.6s 0.3s; }
.signature strong { color: var(--uz-papier); }

@media (max-width: 700px) {
  .total { top: auto; bottom: clamp(16px, 3vh, 32px); right: auto; left: clamp(20px, 5vw, 72px); text-align: left; }
  .total__n { display: inline; font-size: 28px; margin-right: 6px; }
}