/* =================================================================
   Mouvement — états pilotés par assets/js/mouvement.js
   Rien n'est masqué sans html.tc-mvt (posé par le script) : sans
   JavaScript ou en mouvement réduit, tout reste visible et immobile.
   ================================================================= */

:root { --m-sortie: cubic-bezier(.16, 1, .3, 1); --m-duree: 1000ms; --m-course: 52px; }

/* L'ancien « révéler une fois » est remplacé par le moteur réversible. */
html.tc-mvt [data-reveal].is-visible { animation: none; }

/* ---------- Titres : mots qui sortent d'un masque ---------- */
.m-masque { display: inline-block; margin: -.12em -.02em -.16em; overflow: hidden; padding: .12em .02em .16em; vertical-align: bottom; }
.m-mot { display: inline-block; }
html.tc-mvt [data-m="titre"] .m-mot { transition: transform var(--m-duree) var(--m-sortie), opacity var(--m-duree) var(--m-sortie); transition-delay: calc(var(--m-delai, 0ms) + var(--m-i, 0) * 55ms); }
html.tc-mvt [data-m="titre"][data-m-etat="bas"] .m-mot { opacity: 0; transform: translate3d(0, 108%, 0) rotate(4deg); }
html.tc-mvt [data-m="titre"][data-m-etat="haut"] .m-mot { opacity: 0; transform: translate3d(0, -108%, 0) rotate(-4deg); transition-delay: 0ms; }

/* ---------- Textes et blocs ---------- */
html.tc-mvt [data-m="texte"], html.tc-mvt [data-m="carte"] { transition: opacity var(--m-duree) var(--m-sortie), transform var(--m-duree) var(--m-sortie); transition-delay: var(--m-delai, 0ms); }
html.tc-mvt [data-m="texte"][data-m-etat="bas"] { opacity: 0; transform: translate3d(0, calc(var(--m-course) * .6), 0); }
html.tc-mvt [data-m="texte"][data-m-etat="haut"] { opacity: 0; transform: translate3d(0, calc(var(--m-course) * -.6), 0); transition-delay: 0ms; }
html.tc-mvt [data-m="carte"][data-m-etat="bas"] { opacity: 0; transform: translate3d(0, var(--m-course), 0) scale(.965); }
html.tc-mvt [data-m="carte"][data-m-etat="haut"] { opacity: 0; transform: translate3d(0, calc(var(--m-course) * -1), 0) scale(.965); transition-delay: 0ms; }

/* Les cartes gardent leur effet de survol une fois arrivées. */
html.tc-mvt .tc-family-card--visual[data-m-etat="vu"]:hover { transform: translateY(-4px); transition-delay: 0ms; }

/* ---------- Visuels : rideau posé sur l'image, pas sur le cadre observé ---------- */
html.tc-mvt [data-m="media"] { transition: opacity 900ms var(--m-sortie), transform 1300ms var(--m-sortie); transition-delay: var(--m-delai, 0ms); }
html.tc-mvt [data-m="media"] img { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--m-sortie), translate .1s linear, scale 1.2s var(--m-sortie); transition-delay: var(--m-delai, 0ms), 0ms, 0ms; }
html.tc-mvt [data-m="media"][data-m-etat="bas"] { opacity: .35; transform: translate3d(0, 26px, 0); }
html.tc-mvt [data-m="media"][data-m-etat="bas"] img { clip-path: inset(22% 0 0 0); }
html.tc-mvt [data-m="media"][data-m-etat="haut"] { opacity: .35; transform: translate3d(0, -26px, 0); transition-delay: 0ms; }
html.tc-mvt [data-m="media"][data-m-etat="haut"] img { clip-path: inset(0 0 22% 0); transition-delay: 0ms; }

/* ---------- Parallaxe : propriétés individuelles, « transform » reste libre ---------- */
.tc-px-cadre { overflow: hidden; }
html.tc-mvt [data-m-px] { scale: var(--tc-ps, 1.12); translate: 0 var(--tc-py, 0); will-change: translate; }
html.tc-mvt :is(.tc-family-card--visual, .tc-scene, .tc-process__visual, figure):hover [data-m-px] { --tc-ps: 1.18; }

/* ---------- Ouvertures ---------- */
[data-m-ouverture] { will-change: transform, opacity; }
html.tc-mvt [data-tc-parallax] { translate: var(--tc-mx, 0) var(--tc-my, 0); transition: translate .9s var(--m-sortie); }
html.tc-mvt .tc-hero__media { animation: tc-souffle 16s var(--m-sortie) both; }
@keyframes tc-souffle { from { scale: 1.12; } to { scale: 1; } }

/* Premier écran : les boutons et liens arrivent après le titre. */
html.tc-mvt :is(.tc-hero__content, .tc-experience__hero-copy, .tc-showroom-hero__copy, .tc-inspiration-hero__content) > :is(.tc-actions, .tc-button) { transition-delay: 450ms; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html.tc-mvt [data-m], html.tc-mvt [data-m] .m-mot, html.tc-mvt [data-m] img { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  html.tc-mvt [data-m-px] { scale: 1; translate: none; }
  html.tc-mvt .tc-hero__media, .tc-site .tc-logo-rail__track { animation: none !important; }
  .tc-site .tc-logo-rail { flex-wrap: wrap; }
}