/*
 * Page d'attente — CSS autonome, sans Tailwind ni import de `globals.css` :
 * la page doit survivre seule et partir d'un bloc au lancement du site.
 *
 * Copie conforme de `apps/web/src/app/(holding)/holding-page.css` sur la
 * branche `dev`, où la même page existe en gabarit Next.js. Les deux doivent
 * rester visuellement identiques ; si l'une change, changer l'autre.
 *
 * Couleurs et police relevées dans les variables du fichier Figma
 * « Wireframes » (canvas Mobile - V2) : `Vert foncé` #003C19, `Twine` #C2A05E,
 * et Sofia Pro comme famille de marque. Les deux couleurs sont recopiées ici
 * plutôt que lues dans `packages/ui` (où elles portent les mêmes valeurs, sous
 * les noms `brandGreenDark` et `brandGold`) : aucun pont CSS n'existe entre le
 * paquet et une feuille de style, et cette page-ci part d'un bloc au lancement.
 *
 * Sofia Pro est sous licence et n'est pas embarquée : la page ne charge aucune
 * police distante, ce qui lui évite une requête tierce et un traceur de plus à
 * déclarer. Elle est nommée en tête de pile malgré tout — qui l'a installée
 * (l'agence, les designers) voit la vraie typographie, les autres une
 * géométrique approchante déjà présente sur leur système.
 *
 * Contrastes vérifiés sur le vert de marque : blanc 12,6:1, texte secondaire
 * 9:1, doré 5,1:1 (WCAG 2.1 AA, NFR21).
 */

:root {
  --holding-green: #003c19;
  --holding-green-dark: #002a12;
  --holding-green-light: #00491f;
  --holding-gold: #c2a05e;
  --holding-font: 'Sofia Pro', 'Century Gothic', 'Avenir Next', Avenir, 'Segoe UI', system-ui,
    -apple-system, sans-serif;
}

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

html {
  /* Aucune taille de police en px : le zoom et la taille de base choisie dans
     le navigateur doivent continuer de fonctionner (NFR22). */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--holding-green);
  color: #ffffff;
  font-family: var(--holding-font);
}

.holding {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(2rem, 6vw, 4.5rem) 1.5rem;
  background-image: radial-gradient(
      70rem 34rem at 50% -8%,
      rgba(194, 160, 94, 0.16),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      var(--holding-green-light) 0%,
      var(--holding-green) 42%,
      var(--holding-green-dark) 100%
    );
  text-align: center;
}

.holding__panel {
  align-self: center;
}

/* Le logo est le titre de la page : le `h1` ne porte pas de style de texte,
   seulement la largeur du signe. La hauteur suit le rapport du tracé. */
.holding__logo {
  margin: 0;
  line-height: 0;
}

.holding__logo svg {
  width: clamp(9.1rem, 26.6vw, 16.1rem);
  height: auto;
  /* Le tracé hérite de la couleur du texte (`currentColor`) plutôt que de
     figer un blanc : le même fichier sert sur fond clair si besoin. */
  color: #ffffff;
}

.holding__baseline {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  letter-spacing: 0.01em;
}

.holding__rule {
  width: clamp(4rem, 18vw, 8rem);
  height: 1px;
  margin: clamp(1.75rem, 4.5vw, 2.5rem) auto;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--holding-gold) 35%,
    var(--holding-gold) 65%,
    transparent
  );
}

.holding__lead {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 300;
  line-height: 1.35;
  text-wrap: balance;
}

.holding__body {
  /* Une largeur en `ch` suit la taille de police du visiteur, là où une
     largeur en rem la figerait (contrainte de `packages/ui`). */
  max-inline-size: 46ch;
  margin: clamp(1rem, 2.5vw, 1.375rem) auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.7;
}

.holding__footer {
  align-self: end;
  margin: clamp(2.5rem, 8vw, 4rem) 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

/* NFR23 — l'animation n'existe que pour qui n'a pas demandé moins de
   mouvement : elle est déclarée dans la requête média, pas désactivée après
   coup. */
@media (prefers-reduced-motion: no-preference) {
  .holding__logo,
  .holding__baseline,
  .holding__rule,
  .holding__lead,
  .holding__body {
    animation: holding-rise 900ms cubic-bezier(0.22, 0.68, 0.28, 1) both;
  }

  .holding__baseline {
    animation-delay: 120ms;
  }

  .holding__rule {
    animation-delay: 220ms;
  }

  .holding__lead {
    animation-delay: 300ms;
  }

  .holding__body {
    animation-delay: 380ms;
  }
}

@keyframes holding-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}