/* ════════════════════════════════════════════════════════════
   L'ARRIVÉE — l'écran de mot de passe qui se replie, puis la montée
   Voir assets/js/arrivee.js pour le déroulé et les durées.
   ════════════════════════════════════════════════════════════ */

/* Le panneau ne disparaît pas : il se replie sur lui-même et recule.
   C'est ce recul qui fait qu'on part de LUI et qu'on monte. */
body.sen-va .connexion-boite {
  animation: repli 900ms cubic-bezier(.7, 0, .84, 0) forwards;
  pointer-events: none;
}
@keyframes repli {
  0%   { transform: none; opacity: 1; filter: blur(0); }
  55%  { transform: scale(.86) translateY(6px); opacity: .85; }
  100% { transform: scale(.14) translateY(38px); opacity: 0; filter: blur(7px); }
}

.arrivee {
  position: fixed; inset: 0; z-index: 9000; overflow: hidden;
  background: #06090f;
  opacity: 0; animation: arrivee-vient 620ms ease-out 340ms forwards;
  cursor: default;
}
.arrivee-gw { background: #080503; }
@keyframes arrivee-vient { to { opacity: 1; } }

.arrivee-partie { animation: arrivee-part 460ms ease-in forwards; }
@keyframes arrivee-part { to { opacity: 0; transform: scale(1.045); } }

.arrivee-toile { position: absolute; inset: 0; display: block; }

/* ── le logo, planté au sommet ──────────────────────────────
   Il est posé en px par le JS, à l'endroit exact de la pointe : d'où le
   translate(-50%, -100%), qui le fait reposer DESSUS et non dedans. */
.arrivee-logo {
  position: absolute; left: 50%; top: 50%;
  width: clamp(110px, 15vw, 210px); height: auto;
  transform: translate(-50%, -100%) scale(.6) translateY(24px);
  opacity: 0; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .7));
  transition: opacity .9s cubic-bezier(.22, 1, .32, 1),
              transform 1.1s cubic-bezier(.22, 1, .32, 1);
  pointer-events: none;
}
.arrivee-gw .arrivee-logo { width: clamp(120px, 16vw, 230px); }
.arrivee-logo.la {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) translateY(-14px);
}
/* Le chemin arrive tout en haut : là, le logo pend sous le repère au lieu
   de se poser dessus, sinon il sort de l'écran. */
.arrivee-logo.sous { transform: translate(-50%, 0) scale(.6) translateY(24px); }
.arrivee-logo.sous.la { transform: translate(-50%, 0) scale(1) translateY(0); }

/* ── l'altitude ─────────────────────────────────────────────
   1 886 m, c'est le puy de Sancy. Le chiffre n'est pas décoratif :
   c'est le sommet de chez eux. */
.arrivee-jauge {
  position: absolute; right: clamp(1.4rem, 3vw, 3rem); top: 50%;
  transform: translateY(-50%);
  width: 2px; height: min(38vh, 300px);
  background: rgba(243, 236, 226, .12);
}
.arrivee-jauge span {
  position: absolute; inset: 0; transform-origin: 50% 100%;
  background: linear-gradient(rgba(255, 214, 150, .95), rgba(255, 150, 70, .5));
  transform: scaleY(0);
}
.arrivee-metres {
  position: absolute; right: 12px; bottom: -2px; white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  color: rgba(243, 236, 226, .62);
  transition: color .5s ease;
}
.arrivee-metres i { font-style: normal; opacity: .55; margin-left: 2px; }
.arrivee-haut .arrivee-metres { color: rgba(255, 206, 150, .95); }

/* ── ce qui est dit ─────────────────────────────────────────
   Les deux lignes montent d'un cran, décalées : c'est la seule chose
   qui bouge à ce moment-là, ça suffit. */
.arrivee-mots {
  position: absolute; left: 0; right: 0; bottom: clamp(8vh, 14vh, 140px);
  text-align: center; pointer-events: none;
}
.arrivee-salut, .arrivee-devise {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .32, 1);
}
.arrivee-salut {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243, 236, 226, .6);
}
.arrivee-salut em { font-style: normal; color: #fff; }
.arrivee-devise {
  margin-top: .7rem; transition-delay: .22s;
  font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1;
  color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, .6);
}
.arrivee-gw .arrivee-devise { font-style: italic; color: #f6e6d2; }
.arrivee-dit .arrivee-salut,
.arrivee-dit .arrivee-devise { opacity: 1; transform: none; }

/* ── passer ─────────────────────────────────────────────────
   Il se connecte dix fois par jour : la neuvième, il n'a pas envie du
   spectacle. Discret, mais toujours là. */
.arrivee-passer {
  position: absolute; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(243, 236, 226, .2); background: rgba(0, 0, 0, .25);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(243, 236, 226, .6);
  opacity: 0; animation: arrivee-vient 500ms ease-out 2.2s forwards;
  transition: border-color .2s, color .2s;
}
.arrivee-passer:hover { border-color: rgba(243, 236, 226, .5); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  body.sen-va .connexion-boite { animation: none; opacity: 0; }
  .arrivee, .arrivee-salut, .arrivee-devise, .arrivee-passer {
    animation: none; opacity: 1; transform: none;
  }
  .arrivee-logo { transition: none; }
}

/* ── CONODOR ────────────────────────────────────────────────
   Le tissu occupe tout l'écran : le logo se pose SOUS le halo, au
   milieu, et la devise est celle de la charte. */
.arrivee-cnd { background: #02090C; }
.arrivee-cnd .arrivee-devise {
  font-family: 'Bebas Neue', 'Montserrat', sans-serif;
  font-style: normal; letter-spacing: .04em; color: #EAF7F7;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
}
.arrivee-cnd .arrivee-logo { width: clamp(150px, 22vw, 320px); }
.arrivee-cnd .arrivee-jauge span {
  background: linear-gradient(rgba(43,217,210,.95), rgba(228,178,9,.55));
}
.arrivee-cnd.arrivee-haut .arrivee-metres { color: rgba(43,217,210,.95); }

/* ── LES TROIS JOUEURS ──────────────────────────────────────
   Le tambouyé, la danseuse en madras, le joueur de chacha — la version
   néon turquoise du site. Ils sont ancrés sur le MÊME point que le mot
   CONODOR, mais tirés vers le haut : le logo pend sous ce point, eux se
   tiennent dessus. */
.arrivee-trois {
  position: absolute; left: 50%; top: 50%;
  width: clamp(150px, 20vw, 290px); height: auto;
  transform: translate(-50%, -100%) translateY(6px) scale(.82);
  opacity: 0; pointer-events: none;
  filter: invert(1) sepia(1) saturate(4) hue-rotate(155deg) brightness(1.1)
          drop-shadow(0 0 30px rgba(0, 180, 200, .45));
  transition: opacity 1s cubic-bezier(.22, 1, .32, 1),
              transform 1.2s cubic-bezier(.22, 1, .32, 1);
}
.arrivee-trois.la {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-14px) scale(1);
}
@media (prefers-reduced-motion: reduce) { .arrivee-trois { transition: none; } }