/* ==========================================================================
   Effets de profondeur légers — Vitrine Artisan
   Fichier séparé et facultatif : rien n'est mélangé à style.css, pour
   pouvoir retirer le fichier sans rien casser.

   3 effets, tous en CSS/JS natif (aucune librairie 3D) :
   1. Parallax léger sur l'image de tête (page d'accueil)
   2. Apparition « en relief » des sections et cartes au défilement
   3. Léger effet 3D (tilt) au survol des images et cartes

   Tout est désactivé si le visiteur a demandé « Réduire les animations »
   (prefers-reduced-motion) : dans ce cas les éléments restent simplement
   visibles, sans mouvement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Parallax de l'image de tête
   -------------------------------------------------------------------------- */
.hero--fullscreen {
  background-position: center 50%;
  transition: background-position 0.05s linear;
}
.hero__inner {
  transition: transform 0.05s linear;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   2. Apparition en relief au défilement
   La classe .v_artisan-reveal n'est ajoutée qu'en JavaScript (voir effets-relief.js) :
   sans JavaScript, le contenu reste visible normalement (rien de caché).
   -------------------------------------------------------------------------- */
.v_artisan-reveal {
  opacity: 0;
  transform: perspective(1000px) translateY(30px) rotateX(6deg);
  transform-origin: 50% 100%;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
.v_artisan-reveal.is-in-view {
  opacity: 1;
  transform: perspective(1000px) translateY(0) rotateX(0deg);
}
/* Cartes d'une même grille : légère cascade au lieu d'un bloc uniforme */
.v_artisan-reveal.v_artisan-reveal--cascade {
  transition-delay: var(--v_artisan-reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   3. Tilt 3D léger au survol (images, cartes du portfolio, dernières
   réalisations, carrousel). La classe .v_artisan-tilt et les variables --v_artisan-rx /
   --v_artisan-ry / --v_artisan-scale sont posées en JavaScript ; ici on ne fait que
   décrire la transformation et l'adoucir.
   -------------------------------------------------------------------------- */
.v_artisan-tilt {
  transform: perspective(800px)
    rotateX(var(--v_artisan-rx, 0deg))
    rotateY(var(--v_artisan-ry, 0deg))
    scale3d(var(--v_artisan-scale, 1), var(--v_artisan-scale, 1), 1);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: transform;
}
.v_artisan-tilt.is-tilting { transition: transform 0.08s linear; }

/* Une ombre douce qui s'accentue avec le relief : renforce l'impression de
   profondeur sans jamais casser la grille (portée sur l'élément, pas sur son
   parent, pour ne pas déplacer les voisins). */
.portfolio-grid__item.v_artisan-tilt,
.dernieres-item.v_artisan-tilt {
  box-shadow: 0 0 0 rgba(17, 17, 17, 0);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.5s ease;
}
.portfolio-grid__item.v_artisan-tilt.is-tilting,
.dernieres-item.v_artisan-tilt.is-tilting {
  box-shadow: 0 22px 34px -18px rgba(17, 17, 17, 0.38);
}

/* --------------------------------------------------------------------------
   4. Profondeur du carrousel « savoir-faire » : la vignette active respire
   légèrement (échelle) pour éviter l'aspect « image plate qui apparaît ».
   -------------------------------------------------------------------------- */
.savoir-faire-carousel__slide {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
  transform: perspective(1000px) scale(0.97);
}
.savoir-faire-carousel__slide.is-active {
  transform: perspective(1000px) scale(1);
}

/* --------------------------------------------------------------------------
   Accessibilité : « Réduire les animations » — tout redevient statique et
   visible, aucune transformation ni transition.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero--fullscreen,
  .hero__inner,
  .v_artisan-reveal,
  .v_artisan-tilt,
  .savoir-faire-carousel__slide {
    transition: none !important;
    transform: none !important;
  }
  .v_artisan-reveal { opacity: 1 !important; }
}