/* L'ouverture « la voiture arrive » (js/opening.js). html.is-opening = page neutre, contenu masqué, défilement verrouillé. */

/* La voiture : un canvas plein écran au-dessus du contenu, sous l'en-tête et le menu, sans jamais capter un clic. */
.voyage { position: fixed; left: 0; top: 0; z-index: 48; pointer-events: none; opacity: 0; }
.footer__credits { margin-top: .6em; font-size: .78rem; opacity: .7; }

/* Pendant l'ouverture : la page est neutre (la couleur apparaîtra), le défilement est verrouillé et seul le titre est visible. */
html.is-opening {
  --bg: #F4F1EC;
  --display: #CA6F57;
  --ink: #3A2420;
  --bubble: #E9E3DB;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
html.is-opening body { overflow: hidden; }
html.is-opening:not(.is-exiting) :is(.header, .dots, .progress, .hero__photo, .hero__info) { opacity: 0; pointer-events: none; }

/* Écran de chargement : trois points, tant que la 3D arrive */
.opening__loader { display: none; position: fixed; left: 50%; top: 50%; z-index: 49; translate: -50% -50%; gap: 10px; transition: opacity .5s var(--ease-out); }
html.is-opening .opening__loader { display: flex; }
html.is-opening.is-loaded .opening__loader { opacity: 0; }
.opening__loader i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .25; animation: opening-dot 1.1s ease-in-out infinite; }
.opening__loader i:nth-child(2) { animation-delay: .16s; }
.opening__loader i:nth-child(3) { animation-delay: .32s; }
@keyframes opening-dot { 0%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-5px); } }

/* Invitation à défiler */
.opening__hint {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 60; translate: -50% 0;
  display: none; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: 92vw; white-space: nowrap;   /* ancré à left:50% : sans width, le texte se coupe à la moitié de l'écran */
  font-weight: 500; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity 1s var(--ease-out);
}
html.is-opening .opening__hint:not([hidden]) { display: flex; }
html.is-opening.is-hint .opening__hint { opacity: .85; }
.opening__hint span { position: relative; width: 1.5px; height: min(40px, 5vh); background: color-mix(in srgb, var(--ink) 22%, transparent); overflow: hidden; }
.opening__hint span::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 46%; background: var(--ink); animation: opening-scroll 1.7s var(--ease-io) infinite; }
@keyframes opening-scroll { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(240%); } }

@media (prefers-reduced-motion: reduce) {
  .opening__loader i, .opening__hint span::after { animation: none; }
}