/* ============================================================
   LUMINEYES — /01 Notre Vision (refonte)
   Fond image interactif (souris + scroll) · lueur dorée pulsante
   derrière le titre · histoire en sous-titre · palette noir/or/crème
   ============================================================ */

.intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;          /* contient les couches de fond sous le texte */
  background: #080807;
}

/* ── Couche de fond ───────────────────────────────────────── */
.intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Image dorée. Légèrement plus grande que le cadre pour permettre le
   déplacement parallaxe (souris/scroll) sans bord vide. Les variables
   --px/--py (souris) et --sy (scroll) sont pilotées par le JS. */
.intro-bg-img {
  position: absolute;
  inset: -8% -8% -8% -8%;
  background: url('images/vision-bg.jpg') center / cover no-repeat;
  /* parallaxe : souris (±) + scroll */
  transform: translate3d(
    calc(var(--px, 0) * 18px),
    calc(var(--py, 0) * 18px + var(--sy, 0) * 1px),
    0
  ) scale(1.06);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  opacity: 0.9;
}

/* Voile sombre pour garder le texte lisible (surtout à gauche). */
.intro-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,7,0.92) 0%, rgba(8,8,7,0.78) 38%, rgba(8,8,7,0.45) 70%, rgba(8,8,7,0.62) 100%),
    linear-gradient(180deg, rgba(8,8,7,0.55) 0%, rgba(8,8,7,0.20) 40%, rgba(8,8,7,0.70) 100%);
}

/* Halo doré diffus qui suit légèrement la souris (couche d'ambiance). */
.intro-bg-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  left: calc(50% + var(--px, 0) * 40px);
  top: calc(58% + var(--py, 0) * 40px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(205,152,71,0.16) 0%, rgba(205,152,71,0.06) 35%, transparent 68%);
  filter: blur(20px);
  transition: left 0.4s ease, top 0.4s ease;
  pointer-events: none;
}

/* ── Contenu au-dessus du fond ────────────────────────────── */
.intro .section-code,
.intro .intro-layout {
  position: relative;
  z-index: 2;
}

/* Titre + sous-titre à gauche, copy à droite */
.intro-headline {
  position: relative;
}

/* Lueur dorée pulsante derrière le titre */
.intro-glow {
  position: absolute;
  left: -6%;
  top: 50%;
  width: 70%;
  height: 150%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(205,152,71,0.28) 0%, rgba(205,152,71,0.10) 38%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: vision-pulse 6s ease-in-out infinite;
}

@keyframes vision-pulse {
  0%, 100% { opacity: 0.55; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateY(-50%) scale(1.08); }
}

/* Titre : plus lisible, contraste renforcé */
.intro-headline h2 {
  position: relative;
  text-shadow: 0 0.3rem 2rem rgba(0,0,0,0.6), 0 0 3rem rgba(205,152,71,0.15);
}

/* Histoire en sous-titre, sous le titre */
.intro-lede {
  margin-top: 1.6rem;
  max-width: 46ch;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: rgba(245,240,232,0.82);
  text-shadow: 0 0.2rem 1.4rem rgba(0,0,0,0.55);
}

/* La colonne de droite : on garde juste le 2e paragraphe + le principe */
.intro-copy {
  align-self: end;
}

/* Respecte les préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .intro-bg-img { transition: none; transform: scale(1.06); }
  .intro-bg-glow { transition: none; }
  .intro-glow { animation: none; opacity: 0.7; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .intro-lede { max-width: none; margin-top: 1.2rem; }
  .intro-bg-img { inset: -4%; }
  .intro-glow { width: 100%; left: -10%; }
}