/* =========================================================
   Séquence d'arrivée — palier du rez-de-chaussée, montée, 3ᵉ étage.
   Tout est en DOM/CSS, donc identique devant la scène 3D et devant le
   repli. Posée au-dessus des deux (#scene et #repli sont en z-index 1).
   ========================================================= */

#arrivee {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #07070a;
}

#arrivee[hidden] { display: none; }

.arrivee__photo {
  position: absolute;
  inset: 0;
  background: #07070a url('../assets/img/site/fond-ascenseur-vide.webp') center / cover no-repeat;
  transform-origin: 50.5% 48%;   /* l'embrasure, pas le centre de l'image */
  will-change: transform, filter;
}

/* Le signal d'entrée : un halo FLOU, sans bord ni rectangle. La consigne
   était de signaler l'embrasure sans dessiner un cadre par-dessus la photo. */
.arrivee__halo {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(ellipse at center,
    rgba(255, 231, 178, .22) 0%, rgba(255, 231, 178, .10) 45%, transparent 72%);
  filter: blur(14px);
}

#arrivee[data-survol="embrasure"] .arrivee__halo { opacity: 1; }
#arrivee[data-survol="embrasure"] { cursor: pointer; }

.arrivee__invite {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 1em;
  color: #efe9dc;
  font: 600 0.78rem/1.4 'Raleway', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .95);
  pointer-events: none;
  animation: arrivee-respire 3.4s ease-in-out infinite;
}

@keyframes arrivee-respire {
  0%, 100% { opacity: .45; }
  50%      { opacity: .95; }
}

.arrivee__passer {
  position: absolute;
  right: max(2vw, 14px);
  bottom: max(2vh, 14px);
  z-index: 3;
  background: none;
  border: 1px solid rgba(239, 233, 220, .34);
  border-radius: 3px;
  padding: 8px 14px;
  color: #efe9dc;
  font: 600 0.66rem/1 'Raleway', system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.arrivee__passer:hover { border-color: #e0fbab; color: #e0fbab; }
.arrivee__passer:focus-visible { outline: 2px solid #e0fbab; outline-offset: 3px; }

/* ---- La montée : abstraite, mais pas vide ----
   On avance DANS l'embrasure (la photo grandit sur ce point précis), puis les
   filées de lumière descendent — c'est ce qui se lit comme une montée. */
.arrivee__montee {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 62px,
    rgba(255, 214, 140, .16) 62px 66px,
    transparent 66px 128px);
}

.arrivee__etages {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(84px, 18vh, 190px);
  line-height: 1;
  color: #e0fbab;
  text-shadow: 0 0 60px rgba(224, 251, 171, .45);
  opacity: 0;
}

body[data-etape="montee"] .arrivee__photo {
  animation: arrivee-entrer 900ms cubic-bezier(.4, 0, .75, .3) forwards;
}
body[data-etape="montee"] .arrivee__montee {
  animation: arrivee-filees 1800ms 900ms linear forwards;
}
body[data-etape="montee"] .arrivee__etages {
  animation: arrivee-compteur 1800ms 900ms ease-out forwards;
}
/* ⚠ `animation: none` est INDISPENSABLE sur l'invite : une propriété animée
   l'emporte sur une déclaration simple, si bien qu'un `opacity: 0` seul la
   laissait affichée pendant toute la montée (constaté à la capture, pas en
   relisant la feuille de style). Le halo, lui, n'a qu'une transition : son
   opacité se laisse écraser normalement. */
body[data-etape="montee"] .arrivee__invite {
  animation: none;
  opacity: 0;
}
body[data-etape="montee"] .arrivee__halo { opacity: 0; }

@keyframes arrivee-entrer {
  from { transform: scale(1);   filter: brightness(1); }
  to   { transform: scale(4.2); filter: brightness(.12); }
}

/* Les filées DESCENDENT : c'est le décor qui défile vers le bas quand on
   monte. Une filée qui monte lirait comme une descente. */
@keyframes arrivee-filees {
  from { opacity: 0;   background-position-y: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  to   { opacity: 0;   background-position-y: 1900px; }
}

@keyframes arrivee-compteur {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.85); }
  16%  { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  84%  { opacity: .9; }
  100% { opacity: 0; }
}

/* Au 3ᵉ : le voile s'efface et découvre la scène qui attendait dessous. */
body[data-etape="palier-3"] #arrivee {
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}

/* ⚠ En mouvement réduit la mise en scène n'est pas montée du tout (voir
   js/main.js) : rien ici n'a donc à la neutraliser. Cette règle ne couvre
   que le cas où le réglage change PENDANT la visite. */
@media (prefers-reduced-motion: reduce) {
  #arrivee *, #arrivee { animation: none !important; transition: none !important; }
}