/* VoxelBay — feuille de style unique.
 *
 * Pas de framework volontairement : la page tient en trois fichiers et se
 * charge en une requête chacun. Ajouter Tailwind ici coûterait un build step
 * pour habiller six éléments.
 */

:root {
  --bg: #070b18;
  --ink: #e8f1ff;
  --ink-dim: #7f92b5;
  --cyan: #38e8ff;
  --magenta: #ff5cc8;

  /* Une seule fonte système : aucun webfont à télécharger, donc aucun FOUT
     et aucun aller-retour réseau avant le premier rendu. */
  --font: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  /* Empêche le rubber-band iOS qui découvrirait du blanc sous le canvas. */
  overscroll-behavior: none;
}

/* Le canvas occupe tout le viewport et reste DERRIÈRE le texte.
   position:fixed plutôt qu'absolute : le canvas ne doit pas participer au
   flux ni s'étirer si le contenu dépasse un jour. */
#bay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Voile radial : sans lui, le texte blanc passe sur les crêtes de vagues
   claires et devient illisible. Le dégradé assombrit le centre là où le
   contenu vit, en laissant les bords respirer. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 70% at 50% 45%,
    rgba(7, 11, 24, 0.88) 0%,
    rgba(7, 11, 24, 0.55) 45%,
    rgba(7, 11, 24, 0.15) 100%
  );
}

main {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.logo {
  margin: 0;
  /* clamp() plutôt que des media queries : le titre est le seul élément dont
     la taille doit vraiment suivre le viewport, une règle suffit. */
  font-size: clamp(2.5rem, 11vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  /* Les blocs ont des arêtes nettes, le titre aussi. */
  text-shadow: 0 0 42px rgba(56, 232, 255, 0.28);
}

.logo-vox { color: var(--ink); }

.logo-bay {
  color: var(--cyan);
  text-shadow: 0 0 28px rgba(56, 232, 255, 0.55);
}

.tagline {
  margin: 0;
  font-size: clamp(0.9rem, 2.6vw, 1.15rem);
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

.status {
  margin: 0.5rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  border: 1px solid rgba(127, 146, 181, 0.22);
  border-radius: 999px;
  background: rgba(7, 11, 24, 0.5);
  backdrop-filter: blur(6px);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 10px var(--magenta);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.foot {
  position: absolute;
  bottom: 1.5rem;
  font-size: 0.72rem;
  color: rgba(127, 146, 181, 0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Respect strict de la préférence système. L'animation est décorative : la
   couper entièrement ne retire aucune information, et une mer qui ondule en
   permanence est exactement le type de mouvement qui déclenche des nausées
   chez les personnes concernées. app.js lit la même media query et cesse de
   demander des frames — masquer en CSS seul laisserait le CPU tourner. */
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}