/* ============================================================
   JESSPROD — immersive.css
   Couche additive : dynamisme + interactivité.
   Ne remplace rien de style.css — surcouche uniquement.
   Toutes les animations sont neutralisées si prefers-reduced-motion.
   ============================================================ */

:root {
  --im-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --im-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   1. BARRE DE PROGRESSION DE SCROLL
   ============================================================ */
.im-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  z-index: 10000;
  pointer-events: none;
}

/* ============================================================
   2. TRANSITION DE PAGE (voile qui balaye)
   ============================================================ */
.im-transition {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: var(--dark);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s var(--im-ease);
}
.im-transition.is-active { clip-path: inset(0 0 0 0); }
.im-transition.is-leaving { clip-path: inset(0 0 0 0); }
.im-transition .im-transition-logo {
  width: 74px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.im-transition.is-active .im-transition-logo,
.im-transition.is-leaving .im-transition-logo {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   3. RÉVÉLATION AU SCROLL (surcouche du .fade-in existant)
   ============================================================ */
.im-in {
  opacity: 0;
  transform: translateY(26px);
  clip-path: inset(0 0 14% 0);
  transition:
    opacity 0.85s var(--im-ease-out),
    transform 0.95s var(--im-ease-out),
    clip-path 0.95s var(--im-ease-out);
  transition-delay: calc(var(--im-i, 0) * 55ms);
  will-change: opacity, transform;
}
.im-in.im-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Les VIGNETTES du portfolio ne doivent JAMAIS sembler bouger ni se réorganiser
   à l'apparition : pas de translation, pas de découpe, pas de décalage entre elles.
   Simple fondu, chacune reste exactement à sa place (l'ordre est celui du HTML,
   la disposition est celle de la grille CSS d'origine). */
.gallery-grid .gallery-item.im-in,
.gallery-grid .gallery-item.fade-in,
.gallery-grid-balanced .gallery-item.im-in,
.gallery-grid-balanced .gallery-item.fade-in {
  transform: none !important;
  clip-path: none !important;
  transition: opacity 0.55s ease !important;
  transition-delay: 0s !important;
}

/* Variante titres / intitulés : petit flou qui se résout, plus « signature ». */
.im-in-head {
  transform: translateY(16px);
  filter: blur(9px);
  transition:
    opacity 0.7s ease,
    transform 0.95s var(--im-ease),
    filter 0.7s ease;
}
.im-in-head.im-visible { filter: blur(0); }

/* ============================================================
   4. TITRES CINÉTIQUES (mots qui montent derrière un masque)
   ============================================================ */
.im-split { display: inline-block; }
.im-split .im-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.06em;
  margin: -0.12em -0.06em;
}
.im-split .im-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--im-ease);
}
.im-split.im-revealed .im-word > span { transform: translateY(0); }
.im-split.im-revealed .im-word:nth-child(2) > span { transition-delay: 0.06s; }
.im-split.im-revealed .im-word:nth-child(3) > span { transition-delay: 0.12s; }
.im-split.im-revealed .im-word:nth-child(4) > span { transition-delay: 0.18s; }
.im-split.im-revealed .im-word:nth-child(5) > span { transition-delay: 0.24s; }
.im-split.im-revealed .im-word:nth-child(n+6) > span { transition-delay: 0.3s; }

/* ============================================================
   5. HERO
   ============================================================ */
.hero-video { will-change: transform; }

/* Voile lumineux animé sur le hero */
.hero .im-hero-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    120% 80% at var(--mx, 50%) var(--my, 20%),
    rgba(201, 162, 39, 0.14),
    transparent 60%
  );
  transition: background 0.3s ease;
  mix-blend-mode: screen;
}

/* Titre hero : masque de révélation ligne par ligne */
.hero-title .title-line,
.hero-title .title-italic {
  display: block;
  overflow: hidden;
  padding: 0.14em 0.08em;
  margin: -0.14em -0.08em;
}
.hero-title .title-line > .im-inner,
.hero-title .title-italic > .im-inner {
  display: block;
  transform: translateY(105%);
  opacity: 0;
}
.hero-title.im-revealed .title-line > .im-inner,
.hero-title.im-revealed .title-italic > .im-inner {
  transform: translateY(0);
  opacity: 1;
  transition: transform 1s var(--im-ease), opacity 0.8s ease;
}
.hero-title.im-revealed .title-italic > .im-inner { transition-delay: 0.12s; }
.hero-title.im-revealed .title-line:last-child > .im-inner { transition-delay: 0.22s; }

/* ============================================================
   5b. VIDÉO DE FOND FIXE — le site défile par-dessus
   ============================================================ */
.im-hero-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center 35%;
  will-change: transform, opacity;
}
.im-hero-fixed .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-hero-fixed .hero-bg { position: absolute; inset: 0; }

/* Le hero devient une fenêtre transparente sur la vidéo fixe. */
body.im-fixed-hero .hero { background: transparent; }
body.im-fixed-hero .hero,
body.im-fixed-hero .hero-content { position: relative; z-index: 1; }

/* Tout ce qui suit le hero glisse PAR-DESSUS la vidéo : fond opaque obligatoire.
   On ne touche qu'à la couleur de fond → les dégradés décoratifs sont conservés. */
body.im-fixed-hero .work,
body.im-fixed-hero .about-cv,
body.im-fixed-hero .stats-bar,
body.im-fixed-hero .footer,
body.im-fixed-hero .services,
body.im-fixed-hero .formations,
body.im-fixed-hero .mandat,
body.im-fixed-hero .photo-page,
body.im-fixed-hero .video-page,
body.im-fixed-hero .legal-page,
body.im-fixed-hero .poster-page {
  position: relative;
  z-index: 1;
  background-color: var(--dark);
}
/* liseré doré en haut de la première section qui recouvre la vidéo / l'image */
body.im-fixed-hero .work::before,
body.im-fixed-hero .photo-page::before,
body.im-fixed-hero .video-page::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.5), transparent);
}

/* --- Pages galerie : l'image d'en-tête reste fixe, le contenu glisse dessus --- */
body.im-fixed-hero .gallery-hero {
  position: sticky;
  top: 0;
  z-index: 0;
}
body.im-fixed-hero .gallery-hero-content {
  transition: opacity 0.3s linear;
  will-change: opacity, transform;
}

/* ============================================================
   6. AIMANTS (boutons / logo qui suivent légèrement le curseur)
   ============================================================ */
.im-magnetic {
  transition: transform 0.35s var(--im-ease-out);
  will-change: transform;
}

/* ============================================================
   7. GALERIE — survol : zoom doux sur l'image, cadre stable
   ============================================================ */
.im-parallax-media {
  scale: 1.12;               /* marge pour le déplacement parallax */
  transition: scale 0.9s var(--im-ease-out);
  will-change: transform;
}

/* On neutralise le zoom du CADRE (style.css) : plus net, plus fluide sur l'image. */
.gallery-img { overflow: hidden; }
.gallery-img:hover,
.gallery-item:hover .gallery-img { transform: none; }

.gallery-img img,
.gallery-img .lightbox-media,
.media-card img,
.media-card .lightbox-media,
.masonry-item img {
  transition: scale 0.9s var(--im-ease-out);
  backface-visibility: hidden;
}
/* sans parallaxe (mobile / mouvement réduit) : léger zoom au survol */
.gallery-item:hover .gallery-img img:not(.im-parallax-media),
.gallery-item:hover .gallery-img .lightbox-media:not(.im-parallax-media),
.gallery-img:hover img:not(.im-parallax-media),
.masonry-item:hover img:not(.im-parallax-media) {
  scale: 1.05;
}
/* avec parallaxe : on part de 1.12, le survol pousse un peu plus loin */
.gallery-item:hover .im-parallax-media,
.masonry-item:hover .im-parallax-media {
  scale: 1.18;
}

/* Bouton lecture vidéo : apparition plus douce */
.play-btn { transition: opacity 0.45s var(--im-ease-out), transform 0.55s var(--im-ease-out); }

/* ------------------------------------------------------------
   Portfolio : le voile noir + le texte des vignettes n'apparaissent
   QU'AU SURVOL de l'image, ensemble, et ne disparaissent QUE lorsque
   la souris quitte l'image (pur :hover CSS, aucune temporisation).
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {

  /* on annule le "toujours visible" de style.css sur la grille portfolio */
  .gallery-grid .gallery-overlay,
  .gallery-grid-balanced .gallery-overlay {
    opacity: 0;
    transition: opacity 0.35s var(--im-ease-out);
  }
  .gallery-grid .gallery-item:hover .gallery-overlay,
  .gallery-grid .gallery-img:hover .gallery-overlay,
  .gallery-grid-balanced .gallery-item:hover .gallery-overlay,
  .gallery-grid-balanced .gallery-img:hover .gallery-overlay {
    opacity: 1;
  }

  /* même chose quand la grille passe en mode "focus" (filtre Photo / Vidéo) */
  .gallery-grid-balanced.focus-layout .gallery-overlay { opacity: 0 !important; }
  .gallery-grid-balanced.focus-layout .gallery-item:hover .gallery-overlay,
  .gallery-grid-balanced.focus-layout .gallery-img:hover .gallery-overlay { opacity: 1 !important; }

  /* Pages galerie mosaïque : le texte au survol des photos glisse doucement */
  .photo-hover-text h3,
  .photo-hover-text p {
    transform: translateY(8px);
    transition: transform 0.5s var(--im-ease-out), opacity 0.4s ease;
  }
  .masonry-item:hover .photo-hover-text h3,
  .masonry-item:hover .photo-hover-text p { transform: translateY(0); }
}

/* Libellé flottant type "Voir" */
.im-cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 9997;
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  background: var(--gold);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.3s ease, transform 0.35s var(--im-ease-out);
  white-space: nowrap;
}
.im-cursor-label.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   8. STATS — léger décalage parallax
   ============================================================ */
.stat-item { transition: transform 0.6s var(--im-ease-out); }

/* ============================================================
   9. NAV — soulignement qui se dessine
   ============================================================ */
.nav-links a:not(.nav-cta) {
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--im-ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.nav-active::after { transform: scaleX(1); }

/* ============================================================
   10. BOUTON — halo au survol
   ============================================================ */
.btn { position: relative; overflow: hidden; }
.btn .im-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: im-ripple 0.6s var(--im-ease-out) forwards;
}
@keyframes im-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ============================================================
   11. SCROLL-CUE hero : petit rebond
   ============================================================ */
.hero-scroll { transition: opacity 0.4s ease; }
.hero.im-scrolled .hero-scroll { opacity: 0; }

/* ============================================================
   MOBILE / TABLETTE — on allège
   ============================================================ */
@media (max-width: 1024px) {
  .im-cursor-label { display: none; }
  .im-parallax-media { scale: 1; }
}

/* ============================================================
   ACCESSIBILITÉ — mouvement réduit : on désactive tout
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .im-in,
  .im-in-head,
  .im-split .im-word > span,
  .hero-title .title-line > .im-inner,
  .hero-title .title-italic > .im-inner,
  .gallery-overlay > *,
  .photo-hover-text h3,
  .photo-hover-text p {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
  }
  .im-progress,
  .im-hero-sheen,
  .im-cursor-label { display: none !important; }
  .im-transition { transition: clip-path 0.2s linear; }
  .im-magnetic { transform: none !important; }
  .im-parallax-media { scale: 1; }
  body.im-fixed-hero .gallery-hero { position: relative; }
  /* le voile portfolio apparaît/disparaît sans fondu */
  .gallery-grid .gallery-overlay,
  .gallery-grid-balanced .gallery-overlay { transition: none !important; }
}