/* ============================================================
   BG PLOMBERIE — PREMIUM FX v2 (v14)
   Ajouts par-dessus premium-fx.css v1 :
   1) Aurore borealis cuivre sur le hero (canvas)
   2) Split-text cinématographique sur les titres
   3) Parallaxe 3D sur les réalisations au scroll
   ============================================================ */


/* ─────────────────────────────────────────────
   1. (Aurore retirée — restauration du hero original v13)
   ───────────────────────────────────────────── */


/* ─────────────────────────────────────────────
   2. SPLIT-TEXT CINÉMATOGRAPHIQUE
   Sur les H2 de section (.sh). Chaque mot apparaît
   avec un délai progressif. Les <em> (italique cuivre)
   sont traités atomiquement par le JS pour préserver
   le gradient -webkit-background-clip.
   ───────────────────────────────────────────── */

/* Le wrapper de chaque mot. JS l'enveloppe automatiquement */
.sh .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;   /* éviter de couper le bas des lettres g/p/j/q */
  margin-bottom: -0.12em;
  line-height: inherit;
}
.sh .split-word > .split-inner {
  display: inline-block;
  transform: translateY(105%) rotate(2deg);
  opacity: 0;
  transition: transform 1.05s cubic-bezier(.22,.68,0,1.1),
              opacity   0.85s cubic-bezier(.22,.68,0,1);
  transform-origin: left bottom;
  line-height: inherit;
}

/* Pour les EM atomiques : le <em> est à l'intérieur du .split-inner.
   Le gradient cuivre est préservé sur le <em> lui-même. */
.sh .split-word-em > .split-inner em {
  display: inline-block;
  font-style: italic;
}

/* Déclenchement quand le .rv parent passe en .on */
.rv.on .sh .split-word > .split-inner,
.rv.on.sh .split-word > .split-inner {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

/* Cascade : délai par mot via custom property --i */
.sh .split-word > .split-inner {
  transition-delay: calc(var(--i, 0) * 70ms + 100ms);
}

/* Safety net : si pour une raison quelconque le .rv parent ne se déclenche pas
   (par exemple un H2 hors .rv ou qui démarre déjà dans le viewport),
   on assure la visibilité au bout de 3s max via une animation de secours. */
.sh .split-word > .split-inner {
  animation: splitSafetyShow 0.01s linear 3s 1 forwards;
}
@keyframes splitSafetyShow {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
/* Mais on annule cette safety net dès que la classe .on arrive (normal flow) */
.rv.on .sh .split-word > .split-inner {
  animation: none;
}


/* ─────────────────────────────────────────────
   3. PARALLAXE 3D DES RÉALISATIONS AU SCROLL
   Chaque carte se tourne légèrement en perspective selon
   sa position dans le viewport. Effet "défiler dans une galerie d'art".
   ───────────────────────────────────────────── */

#realisations .real-grid {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.real-grid > .real-item {
  transform-style: preserve-3d;
  /* --tilt est mis à jour par premium-fx.js v2 selon la position dans le viewport */
  transform: rotateY(var(--tilt, 0deg)) translateZ(0);
  transition: transform 0.18s linear,
              border-color 0.6s ease,
              box-shadow 0.7s ease,
              opacity 0.45s ease;
  transform-origin: 50% 50%;
}

/* Sur hover, on amplifie légèrement le tilt + on lève + glow cuivré */
.real-grid > .real-item:hover {
  transform: rotateY(calc(var(--tilt, 0deg) * 1.15)) translateZ(20px) translateY(-3px);
  box-shadow:
    0 40px 80px -25px rgba(0,0,0,0.85),
    0 0 90px -15px rgba(184,115,51,0.32);
}

/* La photo elle-même reçoit une légère contre-rotation pour rester nette */
.real-grid > .real-item img {
  transition: transform 1s cubic-bezier(0.22, 0.68, 0, 1.1),
              filter 0.7s ease;
  transform: scale(1.02);
}
.real-grid > .real-item:hover img {
  transform: scale(1.08);
  filter: brightness(1.05) saturate(1.1);
}

/* Reflet cuivré subtil qui apparaît sur la tranche au tilt prononcé */
.real-grid > .real-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(184,115,51, calc(0.18 + var(--tilt-abs, 0) * 0.015)) 0%,
    transparent 25%,
    transparent 75%,
    rgba(184,115,51, calc(0.18 + var(--tilt-abs, 0) * 0.015)) 100%
  );
  pointer-events: none;
  z-index: 3;
  opacity: calc(var(--tilt-abs, 0) * 0.12);
  transition: opacity 0.4s ease;
}

/* Désactivation sur mobile (gain perf + le 3D fait mal sur petit écran) */
@media (max-width: 700px) {
  #realisations .real-grid { perspective: none; }
  .real-grid > .real-item {
    transform: none !important;
  }
  .real-grid > .real-item::after { opacity: 0 !important; }
}

/* Respect prefers-reduced-motion : tout désactivé */
@media (prefers-reduced-motion: reduce) {
  .sh .split-word > .split-inner {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .real-grid > .real-item {
    transform: none !important;
    transition: border-color 0.4s, box-shadow 0.5s !important;
  }
  .real-grid > .real-item::after { opacity: 0 !important; }
}