/*
 * Page d'attente de starbridge.ci (10/11/2026), reprise de la page « bientôt disponible » de la Collecte
 * (infra/sites/collecte-attente/) avec une bascule FR/EN. Déposée par infra/scripts/attente-production.sh.
 *
 * Charte Starbridge (Lambano, 03/11) : monochrome, logo X orbital, police Outfit, fond nuit comme le site.
 * Contrastes calculés sur #000 : #fff 21 : 1, #b0b0b0 9,7 : 1.
 *
 * Prête pour une politique de sécurité stricte (le bloc starbridge.ci n'en pose pas encore) : tout vient
 * de cette origine et rien n'est en ligne (ni <style>, ni attribut style, ni image data:). orbite.js pose
 * seulement des transformations par le CSSOM ; langue.js ne change que des textes et des attributs.
 *
 * Scène 3D en CSS : .tilt ouvre le contexte 3D. Sur .tilt, .orbite et .porteur, aucune propriété qui
 * regroupe (opacity, filter, overflow, mask, clip-path) : elle aplatirait la scène. Les masques vont sur
 * des feuilles (.anneau) ou sur un élément dont l'enfant reste dans son plan (.sillage).
 * Mouvement : transform et opacity seulement ; rotations en linear, entrées sur la courbe du site.
 */
@font-face {
  font-family: 'Outfit';
  src: url('/outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --f: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --s-bg: #000;
  --s-texte: #fff;
  --s-doux: #b0b0b0;
  --s-filet: #333;
  color-scheme: dark;
}

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

html {
  background: var(--s-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--s-bg);
  color: var(--s-texte);
  font-family: var(--f);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Ciel : dégradé et deux trames d'étoiles (la seconde scintille) ---- */
.ciel {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 40%, #101010 0%, #050505 55%, #000 100%);
}

.ciel::before,
.ciel::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ciel::before {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 37% 72%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.4px 1.4px at 64% 31%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 82% 84%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 91% 9%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 23% 52%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.3px 1.3px at 51% 93%, rgba(255, 255, 255, 0.6), transparent);
  background-size: 243px 243px;
}

.ciel::after {
  background-image:
    radial-gradient(1.3px 1.3px at 7% 63%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 29% 11%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 58% 47%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 76% 22%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 88% 69%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 44% 88%, rgba(255, 255, 255, 0.4), transparent);
  background-size: 377px 377px;
  animation: scintille 5s ease-in-out infinite alternate;
}

/* ---- Mise en page ---- */
.entete,
main,
.pied {
  position: relative;
  z-index: 1;
}

/* Trois colonnes : le logo reste au centre de la page, la bascule de langue se range à droite. La rangée
   fait au moins 44 px (cible tactile des boutons), avec ou sans JavaScript : le logo ne bouge pas. */
.entete {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-auto-rows: minmax(44px, auto);
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0
    max(16px, env(safe-area-inset-left));
}

.logo {
  grid-column: 2;
  display: block;
  height: clamp(22px, 1.2rem + 0.5vw, 30px);
  width: auto;
  aspect-ratio: 1215.1 / 240.8;
  color: var(--s-texte);
}

/* ---- Bascule de langue : cachée sans JavaScript (la page reste alors en français) ---- */
.langues {
  grid-column: 3;
  justify-self: end;
  display: flex;
  /* La pastille est à 4 px du bord du bouton : elle s'aligne ainsi sur la gouttière de 16 px. */
  margin-right: -4px;
}

.langues[hidden] {
  display: none;
}

.langue {
  position: relative;
  z-index: 0;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--s-doux);
  font: 500 0.8125rem/1 var(--f);
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--ease);
}

.langue::before {
  content: '';
  position: absolute;
  inset: 8px 4px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.langue[aria-pressed='true'] {
  color: var(--s-texte);
}

.langue[aria-pressed='true']::before {
  border-color: var(--s-filet);
  background-color: rgba(255, 255, 255, 0.08);
}

@media (hover: hover) {
  .langue:hover {
    color: var(--s-texte);
  }
}

.langue:focus-visible {
  outline: none;
}

.langue:focus-visible::before {
  outline: 2px solid var(--s-texte);
  outline-offset: 2px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 44px);
  padding: 24px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  text-align: center;
  /* Les coins des orbites inclinées dépassent sur les côtés (vides, mais comptés dans la largeur). */
  overflow-x: clip;
}

.texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 46rem;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(2.125rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.resume {
  margin: 0;
  max-width: 32rem;
  color: var(--s-doux);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  /* Lignes de longueur égale : sans cela, la dernière ne garde que deux mots à 1440 px. */
  text-wrap: balance;
}

.pied {
  padding: 0 max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  text-align: center;
  color: var(--s-doux);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ---- Scène 3D : un globe et deux orbites en X, comme l'icône du logo ---- */
.scene {
  --taille: min(38rem, 58vh, 88vw);
  position: relative;
  flex: none;
  width: var(--taille);
  height: calc(var(--taille) * 0.62);
  perspective: calc(var(--taille) * 2.4);
  animation: scene-entree 1.1s var(--ease) both;
}

/* Halo derrière le globe. */
.scene::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--taille) * 1.05);
  height: calc(var(--taille) * 0.8);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.035) 55%,
    transparent
  );
  animation: souffle 6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Parallaxe posée par orbite.js (rotateX, rotateY). */
.tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.orbite {
  position: absolute;
  left: calc(50% - var(--taille) * 0.46);
  top: calc(50% - var(--taille) * 0.46);
  width: calc(var(--taille) * 0.92);
  height: calc(var(--taille) * 0.92);
  transform-style: preserve-3d;
  /* Rayon de l'orbite, en longueurs seules : Chrome refuse calc(50% - 2px) comme rayon de dégradé. */
  --r: calc(var(--taille) * 0.46);
}

.orbite-a {
  transform: rotateZ(28deg) rotateX(74deg);
}

/* Le miroir inverse le sens de parcours : les deux satellites se croisent comme dans le logo. */
.orbite-b {
  transform: rotateZ(-28deg) rotateX(74deg) scaleX(-1);
}

.anneau,
.sillage,
.trainee,
.porteur {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/*
 * L'anneau : couronne découpée par deux masques (cercle extérieur moins ellipse intérieure). rotateX(74deg)
 * écrase la hauteur (cos 74° ≈ 0,276) : le bord intérieur est plus épais en haut et en bas (5,8 px contre
 * 1,6 px) pour que le trait paraisse régulier une fois incliné. Haut de l'élément = arrière de l'orbite,
 * d'où le dégradé : sombre derrière, clair devant.
 */
.anneau {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.55));
  -webkit-mask-image:
    radial-gradient(calc(var(--r) - 1.6px) calc(var(--r) - 5.8px) at 50% 50%, #000 calc(100% - 1px), transparent 100%),
    radial-gradient(farthest-side, #000 calc(100% - 1px), transparent 100%);
  -webkit-mask-composite: xor;
  mask-image:
    radial-gradient(calc(var(--r) - 1.6px) calc(var(--r) - 5.8px) at 50% 50%, #000 calc(100% - 1px), transparent 100%),
    radial-gradient(farthest-side, #000 calc(100% - 1px), transparent 100%);
  mask-composite: exclude;
}

/*
 * La traînée : la même couronne que l'anneau (plus large, elle épaississait le trait et marquait les
 * croisements), atténuée à l'arrière, où tourne un dégradé conique.
 */
.sillage {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), #000),
    radial-gradient(calc(var(--r) - 1.6px) calc(var(--r) - 5.8px) at 50% 50%, #000 calc(100% - 1px), transparent 100%),
    radial-gradient(farthest-side, #000 calc(100% - 1px), transparent 100%);
  -webkit-mask-composite: source-in, xor;
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), #000),
    radial-gradient(calc(var(--r) - 1.6px) calc(var(--r) - 5.8px) at 50% 50%, #000 calc(100% - 1px), transparent 100%),
    radial-gradient(farthest-side, #000 calc(100% - 1px), transparent 100%);
  mask-composite: intersect, exclude;
}

/* Navigateur qui refuse ces masques : pas d'anneau plutôt qu'un disque plein. Globe et satellites restent. */
@supports not (
  ((mask-image: radial-gradient(calc(10vw - 1px) calc(10vw - 2px) at 50% 50%, #000, transparent)) and (mask-composite: exclude)) or
  ((-webkit-mask-image: radial-gradient(calc(10vw - 1px) calc(10vw - 2px) at 50% 50%, #000, transparent)) and (-webkit-mask-composite: xor))
) {
  .anneau,
  .trainee {
    display: none;
  }
}

.trainee {
  background: conic-gradient(from 0turn, transparent 0turn 0.66turn, rgba(255, 255, 255, 0.75) 1turn);
  animation: tour 18s linear -3s infinite;
}

.porteur {
  transform-style: preserve-3d;
  animation: tour 18s linear -3s infinite;
}

/* Le satellite tourne à l'envers de son porteur et se redresse : il reste face à l'écran, plus vif devant. */
.sat {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px 1px rgba(255, 255, 255, 0.9),
    0 0 18px 4px rgba(255, 255, 255, 0.35);
  animation: contre 18s linear -3s infinite;
}

.orbite-b .trainee,
.orbite-b .porteur,
.orbite-b .sat {
  animation-duration: 26s;
  animation-delay: -9s;
}

/* Le globe reste face à l'écran : orbite.js annule sur lui la parallaxe de .tilt. */
.globe {
  position: absolute;
  left: calc(50% - var(--taille) * 0.19);
  top: calc(50% - var(--taille) * 0.19);
  width: calc(var(--taille) * 0.38);
  height: calc(var(--taille) * 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 50%, #1a1a1a 0%, #101010 52%, #060606 100%);
  box-shadow:
    inset calc(var(--taille) * -0.028) calc(var(--taille) * -0.036) calc(var(--taille) * 0.07)
      rgba(0, 0, 0, 0.85),
    inset calc(var(--taille) * 0.006) calc(var(--taille) * 0.008) calc(var(--taille) * 0.016)
      rgba(255, 255, 255, 0.28),
    0 0 calc(var(--taille) * 0.1) rgba(255, 255, 255, 0.07);
  transform: translateZ(0);
}

/* Atmosphère : un liseré clair juste autour du globe. */
.globe::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    transparent 86%,
    rgba(255, 255, 255, 0.08) 93%,
    transparent 100%
  );
}

/* ---- Entrées, décalées de 60 ms ---- */
.apparait {
  animation: monte 0.7s var(--ease) both;
}

.entete.apparait {
  animation-delay: 0.05s;
}

h1.apparait {
  animation-delay: 0.25s;
}

.resume.apparait {
  animation-delay: 0.31s;
}

.pied.apparait {
  animation-delay: 0.37s;
}

@keyframes tour {
  to {
    transform: rotateZ(1turn);
  }
}

@keyframes contre {
  0% {
    transform: rotateZ(0turn) rotateX(-74deg);
    opacity: 0.4;
  }
  50% {
    transform: rotateZ(-0.5turn) rotateX(-74deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-1turn) rotateX(-74deg);
    opacity: 0.4;
  }
}

@keyframes monte {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes scene-entree {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fondu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes souffle {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}

@keyframes scintille {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.9;
  }
}

/* ---- Téléphone à l'horizontale : la scène à gauche, le texte à droite ---- */
@media (orientation: landscape) and (max-height: 540px) {
  main {
    flex-direction: row;
    gap: 32px;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
  }

  .scene {
    --taille: min(72vh, 44vw);
  }

  .texte {
    align-items: flex-start;
    width: auto;
  }

  /* Le résumé est borné juste au-dessus de la longueur de ses deux lignes équilibrées (3 % de jeu), en em
     pour suivre sa taille de police, qui varie avec la fenêtre : la boîte du texte prend ainsi la largeur
     de sa plus longue ligne. Plus large (26rem), elle laissait un vide à droite des lignes et l'ensemble
     scène + texte, centré, penchait vers la gauche : 40 px en français, 82 px en anglais à 844 × 390.
     Valeurs à revoir si les textes changent. */
  .resume {
    max-width: 18.3em;
  }

  html:lang(en) .resume {
    max-width: 13.5em;
  }

  .entete {
    /* Rangée de 44 px : le logo reste à une quinzaine de pixels du haut, comme avant. */
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .pied {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  h1 {
    font-size: 2.25rem;
  }
}

/* ---- Mouvement réduit : les fondus restent, rien ne se déplace ni ne tourne ---- */
@media (prefers-reduced-motion: reduce) {
  .apparait,
  .scene {
    animation-name: fondu;
  }

  .scene::before,
  .ciel::after,
  .trainee,
  .porteur,
  .sat {
    animation: none;
  }

  .orbite-a .porteur,
  .orbite-a .trainee {
    transform: rotateZ(0.58turn);
  }

  .orbite-a .sat {
    transform: rotateZ(-0.58turn) rotateX(-74deg);
  }

  .orbite-b .porteur,
  .orbite-b .trainee {
    transform: rotateZ(0.62turn);
  }

  .orbite-b .sat {
    transform: rotateZ(-0.62turn) rotateX(-74deg);
  }
}