/* ═══════════════════════════════════════════════════════════════════════════
   FONDATIONE CARAVELLI — COUCHE « 4D » D'INSPIRATION RESN
   fc-resn-4d.css
   ─────────────────────────────────────────────────────────────────────────
   Compagnon de fc-resn-4d.js (implémentation originale, aucun asset Resn).

   Rôles :
     1. Poser le canvas de transition WebGL (.fc-r4d-canvas) : plein écran,
        fixed, pointer-events:none, z-index JUSTE SOUS le voile palette
        (2147482999 < 2147483000) pour que .fc-voile-palette garde le
        dernier mot sur la couverture finale — coexistence garantie.
     2. Dérive « 4D » des héros : les variables --fc-r4d-x / --fc-r4d-y /
        --fc-r4d-prof (alimentées par le JS : curseur amorti + profondeur
        de défilement) déplacent doucement les médias des scènes de héros.
     3. Repli total : .fc-r4d-statique (mouvement réduit / appareil faible)
        et @media (prefers-reduced-motion) neutralisent tout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Canvas de transition plein écran ─────────────────────────────────── */
.fc-r4d-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;         /* jamais d'interception d'interaction   */
  z-index: 2147482999;          /* sous .fc-voile-palette (2147483000)   */
  opacity: 1;
  contain: strict;              /* isole le compositing du reste du site */
}

/* ── 2. Dérive organique des héros ─────────────────────────────────────────
   Variables pilotées par fc-resn-4d.js :
     --fc-r4d-x    : attraction horizontale du curseur (±7 px, amortie)
     --fc-r4d-y    : attraction verticale du curseur (±5 px, amortie)
     --fc-r4d-prof : profondeur liée au défilement (±24 px)
   Le léger agrandissement évite tout bord blanc pendant la dérive.
   La courbe cubic-bezier « luxueuse » lisse aussi les retours au repos.   */
html.fc-r4d-actif [data-fc-hero="true"] > img,
html.fc-r4d-actif [data-fc-hero="true"] > video,
html.fc-r4d-actif [data-fc-hero="true"] > picture > img,
html.fc-r4d-actif .fc-heros__scene > img,
html.fc-r4d-actif .fc-heros__scene > video,
html.fc-r4d-actif .fc-seuil__scene > img,
html.fc-r4d-actif .fc-seuil__scene > picture > img {
  transform:
    translate3d(
      var(--fc-r4d-x, 0px),
      calc(var(--fc-r4d-y, 0px) + var(--fc-r4d-prof, 0px)),
      0
    )
    scale(1.035);
  transition: transform .12s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}

/* Micro-dérive des architectures décoratives des héros (contre-parallaxe
   très faible : les plans ne bougent pas à la même vitesse — la « 4D »).  */
html.fc-r4d-actif .fc-heros__architecture {
  transform:
    translate3d(
      calc(var(--fc-r4d-x, 0px) * -.4),
      calc(var(--fc-r4d-y, 0px) * -.4),
      0
    );
  transition: transform .18s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}

/* ── 3. Repli total ──────────────────────────────────────────────────────── */

/* Appareil faible ou préférence mouvement détectée par le JS. */
html.fc-r4d-statique .fc-r4d-canvas { display: none; }
html.fc-r4d-statique [data-fc-hero="true"] > img,
html.fc-r4d-statique [data-fc-hero="true"] > video,
html.fc-r4d-statique [data-fc-hero="true"] > picture > img,
html.fc-r4d-statique .fc-heros__scene > img,
html.fc-r4d-statique .fc-heros__scene > video,
html.fc-r4d-statique .fc-seuil__scene > img,
html.fc-r4d-statique .fc-seuil__scene > picture > img,
html.fc-r4d-statique .fc-heros__architecture {
  transform: none;
  transition: none;
  will-change: auto;
}

/* Ceinture + bretelles : même sans JS, la préférence système prime. */
@media (prefers-reduced-motion: reduce) {
  .fc-r4d-canvas { display: none !important; }
  html.fc-r4d-actif [data-fc-hero="true"] > img,
  html.fc-r4d-actif [data-fc-hero="true"] > video,
  html.fc-r4d-actif [data-fc-hero="true"] > picture > img,
  html.fc-r4d-actif .fc-heros__scene > img,
  html.fc-r4d-actif .fc-heros__scene > video,
  html.fc-r4d-actif .fc-seuil__scene > img,
  html.fc-r4d-actif .fc-seuil__scene > picture > img,
  html.fc-r4d-actif .fc-heros__architecture {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Impression : aucune couche effet. */
@media print {
  .fc-r4d-canvas { display: none !important; }
}