/*
 * ÉCRAN DE LANCEMENT + PRÉCHARGEMENT (D7 + D8) — Dovion.io
 *
 * Overlay plein écran affiché AU DÉMARRAGE, pendant le chargement des ressources. Il présente une
 * courte animation (soleil qui se lève, voilier qui traverse, titre qui apparaît) et une BARRE DE
 * PRÉCHARGEMENT. js/boot.js le masque une fois le jeu prêt ; une bascule CSS de sécurité
 * (bootFailsafe) le retire même si le JS échoue, pour ne jamais bloquer le jeu.
 *
 * REFAIT EN PASTEL CRAYON (2026-08-23 soir, demande Simon : « refais aussi l'écran de chargement
 * quand on lance le jeu »). Il était resté en dégradé prune/rose « aube Ghibli » — la seule surface
 * du jeu que la charte n'avait pas traversée, et c'est la PREMIÈRE que le joueur voit : la promesse
 * graphique était démentie avant même le menu. Il devient donc ce qu'est devenu le reste du jeu :
 * du papier, de l'encre marine, et des couleurs posées au crayon.
 *
 * Deux thèmes, comme partout ailleurs : `body.theme-sombre` bascule toute la palette. Le splash étant
 * peint AVANT l'exécution des scripts, la classe est posée par le petit script de tête d'index.html
 * (il relit le réglage dans localStorage) — sans lui, un joueur en thème sombre prendrait un éclair
 * blanc plein écran à chaque lancement.
 *
 * Rendu identique PC et mobile (portrait ET paysage).
 */

#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;                 /* au-dessus de tout, y compris le menu */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Ciel de papier : crème en haut, ciel pastel vers l'horizon. Les couleurs de la charte. */
  background: linear-gradient(180deg, #faf6ee 0%, #f3efe4 34%, #e2eef2 58%, #c9e4ee 78%, #a8d8e8 100%);
  color: #2b3a55;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  /* SÉCURITÉ : si js/boot.js ne s'exécute pas, l'overlay disparaît quand même après ~9 s. */
  animation: bootFailsafe 0.6s ease 9s forwards;
  will-change: opacity;
}

/* MASQUAGE piloté par le JS (fondu doux) — prime sur le failsafe. */
#boot-splash.boot-hide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  animation: none;
}

/* --- SCÈNE : soleil + mer + voilier (animation de lancement) --- */
.boot-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* SOLEIL DE BEURRE, posé sur la ligne de mer. Il reste DIFFUS : sur un fond papier clair, un disque
   franc écraserait le titre en encre juste au-dessus. C'est un halo chaud, pas une source. */
.boot-sun {
  position: absolute;
  left: 50%;
  bottom: 26%;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 223, 160, 0.72) 0%, rgba(246, 223, 160, 0.44) 42%, rgba(246, 223, 160, 0.16) 66%, rgba(246, 223, 160, 0) 82%);
  filter: blur(2px);
  transform: translateY(60%) scale(0.9);
  opacity: 0;
  animation: bootSunRise 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

/* MER : menthe puis ciel soutenu, fermée en haut par un TRAIT D'ENCRE — c'est ce trait, et non un
   contraste de valeur, qui pose l'horizon dans une charte crayon. Même geste que les coques. */
.boot-sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, #b8e0c8 0%, #97cddd 55%, #7fbdd2 100%);
  border-top: 3px solid rgba(43, 58, 85, 0.55);
}

/* voilier qui TRAVERSE l'écran, bas sur la mer, sous le titre et au-dessus de la barre. */
.boot-boat {
  position: absolute;
  bottom: 20%;
  left: -80px;
  width: 68px;
  height: 64px;
  animation: bootBoatSail 5.5s ease-in-out 0.2s infinite;
}

/* --- CONTENU : logo + tagline + barre --- */
.boot-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
}

/* Le voile sombre derrière le titre n'a plus lieu d'être : le fond est clair et le titre est en
   encre. On le neutralise plutôt que de le retirer du HTML — la structure reste commune aux thèmes,
   et le thème sombre le RALLUME (voir plus bas) puisque là, le besoin revient inversé. */
.boot-core::before { content: none; }

.boot-title {
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #2b3a55;
  text-shadow: 0 2px 0 rgba(250, 246, 238, 0.9);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  animation: bootTitleIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.boot-tagline {
  margin: 0;
  font-size: clamp(0.82rem, 3.4vw, 1.05rem);
  letter-spacing: 0.06em;
  color: #4a5a76;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(250, 246, 238, 0.85);
  opacity: 0;
  animation: bootTaglineIn 0.9s ease 1s forwards;
}

/* --- BARRE DE PRÉCHARGEMENT (D8) — ancrée en bas, sur la mer. --- */
.boot-progress {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 8%;
  /* centrage par marges auto (PAS par transform) : l'animation bootTaglineIn anime `transform`
     et effacerait un translateX(-50%) une fois figée (forwards). Les marges auto sont donc sûres. */
  margin: 0 auto;
  box-sizing: border-box;
  width: min(340px, 74vw);
  padding: 12px 16px 4px;
  text-align: center;
  opacity: 0;
  animation: bootTaglineIn 0.9s ease 1.15s forwards;
}

/* Plus de halo sombre : sur la mer pastel, c'est un VOILE PAPIER qui détache la barre. */
.boot-progress::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 122%;
  height: 190%;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  background: rgba(250, 246, 238, 0.78);
  pointer-events: none;
}

/* Rail de papier CERNÉ D'ENCRE : la barre se lit par son contour, pas par sa luminosité. */
.boot-bar {
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: rgba(250, 246, 238, 0.95);
  box-shadow: inset 0 0 0 2px rgba(43, 58, 85, 0.55);
  overflow: hidden;
}

.boot-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #f4a09a, #f6dfa0 70%, #b8e0c8);
  transition: width 0.28s ease;
}

.boot-pct {
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #2b3a55;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ================================================================================================
   THÈME SOMBRE — même écran, encre et papier échangés. Règle d'or de la charte sombre : tout bloc
   qui pose une couleur pose le FOND ET L'ENCRE ensemble, sinon on obtient du texte foncé sur fond
   foncé — exactement le défaut que Simon avait relevé sur les autres écrans.
   ============================================================================================== */
body.theme-sombre #boot-splash {
  background: linear-gradient(180deg, #141a24 0%, #18202c 36%, #1d2a38 60%, #22384a 80%, #2b4a5f 100%);
  color: #e8eef6;
}
/* La mer de nuit doit rester une MER : au banc, elle se confondait avec le ciel et l'horizon
   disparaissait. On la refroidit franchement et on double le trait — c'est lui qui la pose. */
body.theme-sombre .boot-sea {
  background: linear-gradient(180deg, #2b5560 0%, #234759 55%, #1c3646 100%);
  border-top: 3px solid rgba(210, 232, 245, 0.62);
}
/* Halo du soleil : au banc, un jaune à 34 % sur fond nuit virait au GRIS SALE (le jaune désaturé
   par le fond froid). Plus resserré, plus chaud, il redevient une lueur d'aube. */
body.theme-sombre .boot-sun {
  background: radial-gradient(circle, rgba(255, 216, 150, 0.3) 0%, rgba(246, 190, 140, 0.14) 38%, rgba(246, 190, 140, 0) 68%);
}
body.theme-sombre .boot-title { color: #f4efe4; text-shadow: 0 2px 0 rgba(12, 18, 26, 0.75); }
body.theme-sombre .boot-tagline { color: #bcc9da; text-shadow: 0 1px 0 rgba(12, 18, 26, 0.7); }
body.theme-sombre .boot-progress::before { background: rgba(18, 24, 34, 0.78); }
body.theme-sombre .boot-bar {
  background: rgba(18, 24, 34, 0.9);
  box-shadow: inset 0 0 0 2px rgba(200, 224, 240, 0.45);
}
body.theme-sombre .boot-pct { color: #e8eef6; }
/* La coque du voilier est dessinée en encre marine (SVG d'index.html) : sur fond nuit elle
   disparaîtrait. On l'éclaircit d'un trait, sans toucher au balisage. */
body.theme-sombre .boot-boat svg path[fill="#2b3a55"] { fill: #cfe0ef; }
body.theme-sombre .boot-boat svg path[stroke="#2b3a55"] { stroke: #cfe0ef; }

/* ================= ANIMATIONS ================= */
@keyframes bootSunRise {
  from { transform: translateY(60%) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bootBoatSail {
  0%   { transform: translateX(0) rotate(-2deg); }
  50%  { transform: translateX(calc(100vw + 160px)) rotate(2deg); }
  50.01% { transform: translateX(calc(100vw + 160px)) rotate(2deg); }
  100% { transform: translateX(calc(100vw + 160px)) rotate(2deg); }
}

@keyframes bootTitleIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bootTaglineIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bootFailsafe {
  to { opacity: 0; visibility: hidden; }
}

/* léger tangage du voilier sur les vagues */
.boot-boat svg { animation: bootBob 2.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes bootBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-3px) rotate(1.5deg); }
}

/* PAYSAGE mobile bas : compacter pour tout garder visible sans scroll. */
@media (max-height: 480px) {
  .boot-sun { width: 180px; height: 180px; margin-left: -90px; bottom: 30%; }
  .boot-core { gap: 12px; margin-bottom: 6%; }
  .boot-title { font-size: clamp(2rem, 9vh, 3.4rem); }
  .boot-boat { bottom: 24%; }
  .boot-progress { bottom: 6%; }
}

/* Accessibilité : mouvement réduit → pas d'animations, tout apparaît directement. */
@media (prefers-reduced-motion: reduce) {
  #boot-splash, .boot-sun, .boot-boat, .boot-boat svg,
  .boot-title, .boot-tagline, .boot-progress {
    animation: none !important;
  }
  .boot-sun { opacity: 1; transform: none; }
  .boot-title, .boot-tagline, .boot-progress { opacity: 1; transform: none; }
  #boot-splash.boot-hide { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
}