/* ==========================================================================
   Tomek Training — Mouvement (ERA STUDIO)
   Signature : titres mot à mot · arches qui s'ouvrent · montagnes en profondeur.
   Toutes les animations sont conditionnées à html.tk-motion (JS chargé + pas de
   « réduire les animations »). Sans .tk-motion : rendu final immédiat.
   On n'anime que transform, opacity et clip-path (aucun décalage de mise en page).
   ========================================================================== */

:root{
  --tk-ease-out:cubic-bezier(.16,1,.3,1);
  --tk-dur-word:.85s;
  --tk-stagger:80ms;
}

/* ---------- 0. Filet de sécurité ---------- */
html:not(.tk-motion) .tk-reveal{opacity:1!important;transform:none!important}

/* ---------- 1. Titres découpés en mots (masque) ---------- */
.tk-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .08em;margin:-.14em -.04em -.08em}
.tk-w__i{display:inline-block}
/* Masque levé une fois le mot en place : l'ombre du titre n'est plus rognée */
html:not(.tk-motion) .tk-w,.tk-split.is-done .tk-w{overflow:visible}
.tk-motion .tk-split .tk-w__i{transform:translate3d(0,112%,0)}
.tk-motion .tk-split.is-in .tk-w__i{transform:none;transition:transform var(--tk-dur-word) var(--tk-ease-out);transition-delay:calc(var(--i,0) * 55ms + 80ms)}

/* ---------- 2. Hero : séquence d'ouverture (CSS pur, démarre au premier affichage) ---------- */
@keyframes tk-up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes tk-word{from{transform:translate3d(0,112%,0)}to{transform:none}}
@keyframes tk-slide-x{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes tk-kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.tk-motion .tk-hero .tk-split .tk-w__i{transform:none;animation:tk-word .9s var(--tk-ease-out) both;animation-delay:calc(var(--i,0) * 70ms + .18s)}
.tk-motion .tk-hero .tk-overline{animation:tk-up .7s var(--tk-ease-out) both .05s}
.tk-motion .tk-hero .tk-overline--barbell::before{animation:tk-slide-x .8s var(--tk-ease-out) both .12s}
.tk-motion .tk-hero .tk-lead{animation:tk-up .8s var(--tk-ease-out) both .7s}
.tk-motion .tk-hero .elementor-widget-button{animation:tk-up .8s var(--tk-ease-out) both .85s}
.tk-motion .tk-hero .tk-chip-glass{animation:tk-up .6s var(--tk-ease-out) both 1s}
.tk-motion .tk-hero .tk-chip-glass:nth-child(2){animation-delay:1.08s}
.tk-motion .tk-hero .tk-chip-glass:nth-child(3){animation-delay:1.16s}
.tk-motion .tk-hero__img img{animation:tk-kenburns 1.8s var(--tk-ease-out) both}

/* ---------- 3. En-têtes de section : surtitre → titre mot à mot → reste ---------- */
.tk-motion .tk-reveal:has(.tk-split){opacity:1;transform:none}
.tk-motion .tk-reveal:has(.tk-split) .tk-overline{opacity:0;transform:translate3d(0,10px,0);transition:opacity .6s var(--tk-ease-out),transform .6s var(--tk-ease-out)}
.tk-motion .tk-reveal:has(.tk-split) .tk-overline--barbell::before{transform:translate3d(-18px,0,0);transition:transform .9s var(--tk-ease-out) .05s}
.tk-motion .tk-reveal.is-in:has(.tk-split) .tk-overline,
.tk-motion .tk-reveal.is-in:has(.tk-split) .tk-overline--barbell::before{opacity:1;transform:none}
.tk-motion .tk-reveal:has(.tk-split) .elementor-widget:not(.tk-overline):not(.tk-h1):not(.tk-h2){opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s var(--tk-ease-out) .38s,transform .7s var(--tk-ease-out) .38s}
.tk-motion .tk-reveal.is-in:has(.tk-split) .elementor-widget:not(.tk-overline):not(.tk-h1):not(.tk-h2){opacity:1;transform:none}

/* ---------- 4. Cascades (cartes, listes, pastilles) ---------- */
.tk-motion .tk-stagger>*{opacity:0;transform:translate3d(0,22px,0)}
.tk-motion .tk-stagger.is-in>*{opacity:1;transform:none;transition:opacity .7s var(--tk-ease-out),transform .7s var(--tk-ease-out);transition-delay:calc(var(--i,0) * var(--tk-stagger))}

/* ---------- 5. Ateliers Hyrox : s'allument dans l'ordre ---------- */
@keyframes tk-pill-lit{0%{border-color:rgba(254,249,243,.24);background:transparent}35%{border-color:var(--tk-teal-300);background:rgba(79,188,196,.22)}100%{border-color:rgba(254,249,243,.24);background:transparent}}
.tk-motion .tk-anim-steps>li{opacity:.15;transform:translate3d(0,8px,0)}
.tk-motion .tk-anim-steps.is-in>li{opacity:1;transform:none;transition:opacity .5s var(--tk-ease-out),transform .5s var(--tk-ease-out);transition-delay:calc(var(--i,0) * 110ms);animation:tk-pill-lit 1.1s ease-out both;animation-delay:calc(var(--i,0) * 110ms)}

/* ---------- 6. Stories : barres de progression ---------- */
.tk-story__bars i{position:relative;overflow:hidden}
.tk-story__bars i.is-done{background:rgba(254,249,243,.35)}
.tk-story__bars i.is-done::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tk-creme-100);transform-origin:left center}
.tk-motion .tk-stories-rail .tk-story__bars i.is-done::after{transform:scaleX(0)}
.tk-motion .tk-stories-rail.is-played .tk-story__bars i.is-done::after{transform:scaleX(1);transition:transform .7s var(--tk-ease-out) var(--bd,0s)}

/* ---------- 7. Arches : la photo s'ouvre de bas en haut ---------- */
.tk-motion .tk-anim-arch{clip-path:inset(100% 0 0 0)}
.tk-motion .tk-anim-arch.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--tk-ease-out) var(--d,0s)}
.tk-motion .tk-anim-arch img{transform:scale(1.14)}
.tk-motion .tk-anim-arch.is-in img{transform:none;transition:transform 1.6s var(--tk-ease-out) var(--d,0s)}

/* ---------- 8. Montagnes : la couche arrière se décale au défilement ---------- */
/* La couche arrière dépasse de 48px de chaque côté, coupés par le bloc (aucun débordement de page).
   Amplitude max = 1,2 × 36px = 43px (desktop) / 1,2 × 18px = 22px (mobile) < 48px : jamais de vide aux bords. */
.tk-hero__ridge,.tk-ridge-top{overflow:hidden}
.tk-motion .tk-hero__ridge::before,
.tk-motion .tk-ridge-top::before{left:-48px;right:-48px;transform:translate3d(calc(var(--tk-par,0) * var(--tk-par-amp,-36px)),0,0)}
@media (max-width:767px){:root{--tk-par-amp:-18px}}

/* ---------- 9. Bandeau défilant (au rythme du défilement, jamais en boucle) ---------- */
.e-con.tk-band-sec{padding-block:clamp(36px,5vw,64px);overflow:hidden}
.tk-band{display:flex;flex-direction:column;gap:clamp(4px,1vw,10px);pointer-events:none;-webkit-user-select:none;user-select:none}
.tk-band__row{display:flex;align-items:center;gap:.32em;width:max-content;white-space:nowrap;font:900 clamp(46px,8.5vw,120px)/1 var(--tk-font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--tk-petrol-700);transform:translate3d(calc(-6% + var(--tk-par,0) * -9%),0,0)}
.tk-band__row--outline{color:transparent;-webkit-text-stroke:2px var(--tk-teal-500);transform:translate3d(calc(-22% + var(--tk-par,0) * 9%),0,0)}
.tk-band__row i{display:inline-block;flex:none;width:.42em;height:.52em;background:var(--tk-teal-500);-webkit-mask:url(../brand/kettlebell.svg) center/contain no-repeat;mask:url(../brand/kettlebell.svg) center/contain no-repeat}
.tk-band__row--outline i{background:var(--tk-petrol-700)}
@media (max-width:767px){.tk-band__row--outline{-webkit-text-stroke-width:1.5px}}

/* ---------- 10. Micro-interactions ---------- */
.tk-arrow{display:inline-block;transition:transform var(--tk-dur-fast) var(--tk-ease)}
a:hover .tk-arrow,a:focus-visible .tk-arrow{transform:translate3d(4px,0,0)}
.tk-motion .tk-btn .elementor-button:active,.tk-motion a.tk-btn:active,.tk-motion button.tk-btn:active{transform:scale(.98)}
.tk-proof__num,.tk-rating__score{font-variant-numeric:tabular-nums}

/* Header : masqué quand on descend, réaffiché quand on remonte */
.tk-header.is-hidden{transform:translate3d(0,-100%,0)}
.tk-motion .tk-header{transition:background var(--tk-dur),box-shadow var(--tk-dur),transform .4s var(--tk-ease-out)}

/* Formulaire : les étapes glissent dans le sens de la navigation */
@keyframes tk-step-next{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}
@keyframes tk-step-back{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
.tk-motion .tk-essai[data-dir="next"] .tk-essai__step.is-active{animation:tk-step-next .45s var(--tk-ease-out) both}
.tk-motion .tk-essai[data-dir="back"] .tk-essai__step.is-active{animation:tk-step-back .45s var(--tk-ease-out) both}
.tk-motion .tk-essai__done:not([hidden]){animation:tk-up .6s var(--tk-ease-out) both}
.tk-motion .tk-essai .tk-progress i{transition:background .5s var(--tk-ease-out)}

/* ---------- 11. Ouverture du site : « l'arche s'ouvre » (première visite de la session) ---------- */
.tk-intro{display:none}
html.tk-intro-on:not(.tk-intro-done){overflow:hidden}
html.tk-intro-on:not(.tk-intro-done) .tk-intro{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0A2034;cursor:pointer}
html.tk-intro-on:not(.tk-intro-done) .tk-intro.is-opening{background:transparent}
.tk-intro__veil{position:absolute;inset:0;width:100%;height:100%;fill:#0A2034}
.tk-intro__logo{position:relative;z-index:1;width:min(64vw,300px);transition:opacity .32s ease,transform .6s cubic-bezier(.7,0,.2,1)}
.tk-intro.is-opening .tk-intro__logo{opacity:0;transform:scale(1.08)}
.tk-intro svg{display:block;width:100%;height:auto;overflow:visible}
.tk-intro .tk-lg-p,.tk-intro .tk-lg-word{fill:var(--tk-creme-100)}
.tk-intro .tk-lg-t,.tk-intro .tk-lg-training{fill:var(--tk-teal-300)}
.tk-intro g{transform-box:fill-box;transform-origin:50% 100%}
@keyframes tk-in-rise{from{opacity:0;transform:translate3d(0,22%,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes tk-in-fade{from{opacity:0}to{opacity:1}}
@keyframes tk-in-letter{from{opacity:0;transform:translate3d(0,40%,0)}to{opacity:1;transform:none}}
@keyframes tk-in-drop{0%{opacity:0;transform:translate3d(0,-160%,0)}50%{opacity:1;transform:translate3d(0,6%,0)}72%{opacity:1;transform:translate3d(0,-5%,0)}100%{opacity:1;transform:none}}
.tk-intro .tk-lg-p{animation:tk-in-rise .7s cubic-bezier(.16,1,.3,1) both .05s}
.tk-intro .tk-lg-t{animation:tk-in-fade .6s ease both .3s}
.tk-intro .tk-lg-l{animation:tk-in-letter .5s cubic-bezier(.16,1,.3,1) both}
.tk-intro .tk-lg-wt{animation-delay:.45s}
.tk-intro .tk-lg-wm{animation-delay:.57s}
.tk-intro .tk-lg-we{animation-delay:.63s}
.tk-intro .tk-lg-wk{animation-delay:.69s}
.tk-intro .tk-lg-wo{animation:tk-in-drop .65s cubic-bezier(.3,0,.2,1) both .52s}
.tk-intro .tk-lg-training{animation:tk-in-fade .4s ease both .9s}
/* Le hero attend que l'arche s'ouvre pour lancer sa propre séquence */
html.tk-intro-on:not(.tk-intro-done) .tk-hero *{animation-play-state:paused!important}