/* ==========================================================================
   INTRO DE MARQUE — accueil (overlay « L'Orée du Palm » puis lever de voile)
   ========================================================================== */

/* Sans JS : pas d'overlay (on ne bloque jamais le contenu) */
.no-js .intro { display: none; }

/* Pendant l'intro : on fige le défilement */
html.intro-active, html.intro-active body { overflow: hidden; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(120% 90% at 80% 8%, rgba(192,102,72,.20), transparent 55%),
    radial-gradient(100% 120% at 0% 110%, rgba(70,88,74,.30), transparent 55%),
    linear-gradient(160deg, #2A332B 0%, #1F261F 60%, #171C18 100%);
  will-change: transform;
}
/* léger grain pour la profondeur */
.intro::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5; pointer-events: none;
}

.intro__inner { position: relative; text-align: center; padding: 0 6vw; }

.intro__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0;
}

.intro__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 1rem + 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  margin: .5rem 0;
  white-space: nowrap;
}
/* chars SplitType : révélation par le bas, masqués au départ */
.intro__title .char { display: inline-block; will-change: transform, opacity; }

.intro__rule {
  display: block;
  width: 0;
  height: 1px;
  margin: 1.1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

@media (max-width: 600px) {
  .intro__title { white-space: normal; }
}

/* Écran de chargement : le LOGO à la place du texte (fond sombre -> logo blanc) */
.intro__logo {
  display: block;
  height: clamp(72px, 12vw, 132px);
  width: auto;
  margin: 0 auto;
  /* logo bleu-vert -> blanc, avec une ombre douce pour le détacher du fond */
  filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0,0,0,.4));
}
@media (max-width: 600px) {
  .intro__logo { height: 64px; }
}