/*
 * Destia 2, la page d'attente : le ciel étoilé du mod, le logo et le compte à rebours. Rien d'autre.
 * Les couleurs sont celles du site : l'or des lettres DESTIA, le violet cosmique du « 2 ».
 */

@font-face {
  font-family: 'Pixelify Sans';
  src: url('fonts/pixelify-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --nuit: #0b0824;
  --ciel-bas: #35357b;
  --or-clair: #ffe7a0;
  --violet-clair: #c3b6ff;
  --contour: #07041a;
  --cote: #160a52;
  --pixel: 'Pixelify Sans', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--pixel);
  color: #f1efff;
  background: var(--ciel-bas);
  /* Pas de ligatures : celle de « fi » en Pixelify Sans ressemble à un A. */
  font-variant-ligatures: no-common-ligatures;
  overflow-x: hidden;
}
/* Un voile sombre sur les bords du ciel, pour que le logo et le compte à rebours ressortent. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgb(7 4 26 / 55%)),
    linear-gradient(180deg, rgb(7 4 26 / 35%), transparent 30%, transparent 70%, rgb(7 4 26 / 35%));
}

/* Le ciel : l'image du mod en pixels « natifs », agrandie sans lissage (compte-a-rebours.js). */
.ciel { position: fixed; left: 0; top: 0; z-index: -1; image-rendering: pixelated; }

.teaser {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 7svh, 72px);
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  text-align: center;
}

.logo { margin: 0; line-height: 0; }
.logo img {
  width: min(860px, 92vw);
  height: auto;
  filter: drop-shadow(0 16px 24px rgb(5 3 20 / 60%));
  animation: flotte 6s ease-in-out infinite;
}
@keyframes flotte { 50% { transform: translateY(-10px) rotate(-0.4deg); } }

/* Le compte à rebours. --h : la hauteur d'un chiffre ; le contour noir et l'épaisseur en 3D font comme sur le logo. */
.compte {
  --h: clamp(32px, 10vw, 116px);
  --o: calc(var(--h) * 0.045);
  --e: calc(var(--h) * 0.07);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--h) * 0.14);
}
.compte[hidden] { display: none; }
/* Cent jours ou plus : trois chiffres pour les jours, un peu plus petits pour tenir sur un téléphone. */
.compte.is-long { --h: clamp(30px, 9vw, 104px); }
.bloc { display: flex; flex-direction: column; align-items: center; }
.chiffres, .sep {
  filter:
    drop-shadow(0 var(--e) 0 var(--cote))
    drop-shadow(var(--o) 0 0 var(--contour))
    drop-shadow(calc(var(--o) * -1) 0 0 var(--contour))
    drop-shadow(0 var(--o) 0 var(--contour))
    drop-shadow(0 calc(var(--o) * -1) 0 var(--contour));
}
.chiffres { display: flex; }
/* Chaque chiffre a sa case, toujours de la même largeur : rien ne bouge quand les secondes défilent. */
.chiffre { display: flex; justify-content: center; width: calc(var(--h) * 0.9); }
.chiffre img, .sep { display: block; flex: none; width: auto; height: var(--h); }
.unite {
  margin: calc(var(--h) * 0.2 + 6px) 0 0;
  font-size: clamp(0.68rem, 1.5vw, 1.02rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-clair);
  text-shadow: 0 2px 0 var(--contour);
}

.fin {
  margin: 0;
  max-width: 34ch;
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.1;
  color: var(--or-clair);
  text-shadow: 0 4px 0 var(--contour), 0 0 40px rgb(245 197 66 / 45%);
}
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .logo img { animation: none; }
}