/* ============================================================
   AUREX RÉNO-PRO — INTRO.CSS
   Écran d'ouverture cinématographique — Logo cuivre 3D
   ============================================================ */

/* ── SPLASH PLEIN ÉCRAN ── */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* État initial — visible */
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.4s cubic-bezier(.4, 0, .2, 1),
    visibility 1.4s cubic-bezier(.4, 0, .2, 1);
}

/* Quand on ferme — fondu élégant */
.intro-splash.sortie {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Supprimé du DOM après la transition */
.intro-splash.supprime {
  display: none;
}

/* ── VIDÉO PLEIN ÉCRAN ── */
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Pas de filtre — on veut voir le vrai rendu 3D cuivre */
}

/* ── VOILE TRÈS LÉGER ── */
.intro-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Juste un vignettage subtil sur les bords */
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0,0,0,.35) 100%
  );
  pointer-events: none;
}

/* ── BOUTON PASSER ── */
.intro-skip {
  position: absolute;
  bottom: 48px;
  right: 40px;
  z-index: 10;
  background: transparent;
  border: 1px solid rgba(184,131,58,.35);
  color: rgba(184,131,58,.7);
  font-family: 'Montserrat', sans-serif;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition:
    opacity .4s ease,
    color .3s ease,
    border-color .3s ease,
    background .3s ease;

  /* Caché au début, apparaît après délai (géré par JS) */
  opacity: 0;
  pointer-events: none;
}

.intro-skip.visible {
  opacity: 1;
  pointer-events: auto;
}

.intro-skip:hover {
  color: #B8833A;
  border-color: rgba(184,131,58,.7);
  background: rgba(184,131,58,.08);
}

/* ── BARRE DE PROGRESSION ── */
.intro-progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.06);
  z-index: 10;
}

.intro-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    #8C6028,
    #C9913A,
    #F0C060,
    #C9913A
  );
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  transition: width .1s linear;
}

@keyframes progressShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── BLOQUER LE SCROLL PENDANT L'INTRO ── */
body.intro-active {
  overflow: hidden;
}

/* ── MOBILE — ajustements ── */
@media (max-width: 768px) {
  .intro-skip {
    bottom: 32px;
    right: 20px;
    font-size: .58rem;
    padding: 9px 16px;
  }

  .intro-progress-wrap {
    height: 2px;
  }
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .intro-splash {
    display: none !important;
  }
  body.intro-active {
    overflow: auto;
  }
}