/* TyBoz — mode cinématique (theme/cinema.js). Tout est conditionné à la classe « cine » sur <html>,
   posée seulement si le visiteur n'a pas demandé à réduire les animations et hors éditeur visuel.
   Réglage : Administration → Réglages → TyBoz → « Mode cinématique ». */

/* ---------- Transitions entre les pages (navigateurs récents) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:cine-out .55s cubic-bezier(.7,0,.3,1) both}
  ::view-transition-new(root){animation:cine-in .8s cubic-bezier(.7,0,.2,1) both}
  ::view-transition-group(shot){animation-duration:.8s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
  ::view-transition-old(shot),::view-transition-new(shot){height:100%;object-fit:cover;object-position:top}
  .top{view-transition-name:cine-top}
  .project .shot-frame img[data-main]{view-transition-name:shot}
}
@keyframes cine-out{to{opacity:.35;transform:scale(.94);filter:blur(6px) brightness(.6)}}
@keyframes cine-in{from{clip-path:inset(100% 0 0 0);transform:translateY(8vh)}to{clip-path:inset(0);transform:none}}

/* ---------- Grain de pellicule, barre de progression, compteur ---------- */
.cine-grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cine-grain 1s steps(6) infinite}
@keyframes cine-grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-3%,8%)}80%{transform:translate(8%,2%)}100%{transform:translate(0,0)}}
.cine-bar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:95;transform-origin:0 50%;transform:scaleX(var(--cine-p,0));background:var(--grad);pointer-events:none;box-shadow:0 0 12px color-mix(in srgb,var(--plate) 70%,transparent)}
.cine-hud{position:fixed;right:.7rem;bottom:1.2rem;writing-mode:vertical-rl;transform:rotate(180deg);z-index:94;pointer-events:none;display:flex;align-items:center;gap:.9rem;
  font:500 .6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;opacity:.75}
.cine-rec{display:inline-flex;align-items:center;gap:.45rem}
.cine-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b3b;animation:cine-blink 1.2s steps(2) infinite}
@keyframes cine-blink{50%{opacity:0}}
@media (max-width:1100px),(pointer:coarse){.cine-hud{display:none}}

/* ---------- Curseur ---------- */
html.cine-cursor,html.cine-cursor a,html.cine-cursor button,html.cine-cursor label{cursor:none}
html.cine-cursor input,html.cine-cursor textarea,html.cine-cursor select{cursor:auto}
.cine-dot,.cine-ring{position:fixed;left:0;top:0;z-index:99;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cine-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.cine-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgb(255 255 255 / .7);display:grid;place-items:center;
  transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),margin .35s cubic-bezier(.2,.7,.2,1),background .35s,opacity .3s}
.cine-ring span{font:600 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
.cine-ring.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgb(255 255 255 / .12)}
.cine-ring.is-view{width:96px;height:96px;margin:-48px 0 0 -48px;mix-blend-mode:normal;border-color:transparent;
  background:color-mix(in srgb,var(--ink) 82%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cine-ring.is-view span{opacity:1;color:#fff}
.cine-dot.is-view{opacity:0}
.cine-ring.is-hidden,.cine-dot.is-hidden{opacity:0}

/* ---------- Titres : les mots montent de derrière un cache ---------- */
.cw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.cw-i{display:inline-block;transform:translateY(105%) rotate(4deg);transform-origin:0 100%;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 55ms + var(--d,0ms))}
.grad .cw-i,.hero-title em .cw-i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.is-split.is-in .cw-i{transform:none}

/* Blocs et photos affichés tout de suite (pas de fondu qui fait « site qui rame ») : seuls les titres s'animent */
.cine .will-reveal{opacity:1;transform:none;transition:none}

/* Cartes : inclinaison 3D au survol (les photos s'affichent tout de suite, sans effet de chargement) */
.cine .card-link{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s}
.cine .card-link.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);transition-duration:.15s}
.cine .card-link::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255 / .35),transparent 45%);mix-blend-mode:soft-light}
.cine .card-link.is-tilt::after{opacity:1}
.cine .card-link{position:relative}

/* ---------- Hero : ouverture en format cinéma ---------- */
.cine .blk-hero .hero{--mx:70%;--my:30%}
.cine .blk-hero .hero::before{transform:scale(calc(1 + var(--hp,0) * .25));transition:none}
.cine .blk-hero .hero>.hero-light{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),color-mix(in srgb,var(--plate) 18%,transparent),transparent 60%)}
.cine-lb{position:absolute;left:0;right:0;height:calc(var(--lbh,100%) / 2);background:#000;z-index:5;pointer-events:none;transition:transform 1.5s cubic-bezier(.77,0,.18,1)}
.cine-lb.t{top:0;transform-origin:top}.cine-lb.b{top:calc(var(--lbh,100%) / 2);transform-origin:bottom}
.hero.is-open .cine-lb{transform:scaleY(.14)}
.hero.is-live .cine-lb{transform:scaleY(0);transition-duration:1.6s}
.cine .blk-hero .hero-inner{transform:translate3d(0,calc(var(--hp,0) * -90px),0);opacity:calc(1 - var(--hp,0) * 1.3)}
.cine .blk-hero .hero-eyebrow,.cine .blk-hero .hero-text,.cine .blk-hero .hero-inner>.btn{opacity:0;transform:translateY(24px);
  transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.cine .blk-hero .is-open .hero-eyebrow{opacity:1;transform:none;transition-delay:.7s}
.cine .blk-hero .is-open .hero-text{opacity:1;transform:none;transition-delay:1.35s}
.cine .blk-hero .is-open .hero-inner>.btn{opacity:1;transform:none;transition-delay:1.55s}
.cine .blk-hero .is-open .hero-inner>.btn~.btn{transition-delay:1.65s}
.cine .blk-hero .hero-title .cw-i{--d:900ms}
.cine .blk-hero .hero-deco{perspective:1000px}
.cine .blk-hero .code-win{opacity:0;transform:translate3d(80px,40px,0) rotateY(-28deg) rotateX(10deg);
  transition:opacity 1.4s ease 1.1s,transform 1.8s cubic-bezier(.16,1,.3,1) 1.1s}
.cine .blk-hero .is-open .code-win{opacity:1;transform:translate3d(var(--cx,0px),calc(var(--cy,0px) + var(--hp,0) * -160px),0) rotateY(var(--ty,0deg)) rotateX(var(--tx,0deg))}
.cine .blk-hero .is-open.is-live .code-win{transition:opacity 1.4s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.cine .code-win pre .cl{display:block;clip-path:inset(0 100% 0 0);transition:clip-path .7s steps(18) calc(1.9s + var(--i) * .22s)}
.cine .is-open .code-win pre .cl{clip-path:inset(0)}
.cine .code-win pre::after{content:"▋";color:var(--plate);animation:cine-blink 1s steps(2) infinite}

/* ---------- Portfolio en travelling horizontal (bureau) ---------- */
.cine-track{padding-block:0!important}
.cine-track>.wrap{position:sticky;top:var(--cine-top,72px);height:calc(100vh - var(--cine-top,72px));display:flex;flex-direction:column;justify-content:center;max-width:none;padding-inline:0;overflow:hidden}
.cine-track .h-row{width:min(var(--wrap),100% - 3rem);margin-inline:auto;position:relative;z-index:2}
.cine-track .grid-projects{display:flex;gap:2.2rem;width:max-content;padding-inline:max(1.5rem,calc((100vw - var(--wrap)) / 2));will-change:transform;position:relative;z-index:2}
.cine-track .grid-projects .card{width:clamp(320px,min(30vw,(100vh - 520px) * 1.5),460px);flex:none}
.cine-track .card-img img{transform:scale(1.18) translateX(var(--px,0px))!important;transition:none!important}
.cine-track-word{position:absolute;left:0;bottom:4vh;z-index:1;white-space:nowrap;pointer-events:none;
  font:700 clamp(7rem,18vw,17rem)/.8 var(--head);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ink) 20%,transparent);will-change:transform}
.cine-track-count{font:500 .8125rem/1 var(--mono);letter-spacing:.1em;color:var(--muted);margin-left:auto;margin-right:1.5rem;align-self:flex-end;padding-bottom:.4rem}
.cine-track-count b{color:var(--ink);font-weight:600}

/* ---------- Chiffres ---------- */
.cine .blk-stats{overflow:hidden}
.cine .blk-stats::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--plate) 14%,transparent) 50%,transparent 70%);transform:translateX(-100%)}
.cine .blk-stats.is-in::after{animation:cine-sweep 2.4s cubic-bezier(.7,0,.2,1) .3s}
@keyframes cine-sweep{to{transform:translateX(100%)}}
.cine .stats li{opacity:0;transform:translateY(30px) scale(.9);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 120ms)}
.cine .blk-stats.is-in .stats li{opacity:1;transform:none}

/* ---------- Projet à la une et captures : zoom de caméra ---------- */
.cine [data-cine-zoom]{clip-path:inset(calc(var(--z,1) * 9%) calc(var(--z,1) * 12%) round 18px);transform:scale(calc(1 - var(--z,1) * .06));will-change:clip-path,transform}
.cine [data-cine-zoom] img{transform:scale(calc(1.08 + var(--z,1) * .25)) translateY(calc(var(--zy,0) * 1px));transition:none}
.cine .skill{transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s}
.cine .skill:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--red) 35%,var(--line))}

/* ---------- Boutons aimantés ---------- */
.cine .btn.is-mag{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .2s}

/* ---------- Pied de page : le rideau tombe ---------- */
.cine .foot{position:relative}
.cine .foot-inner{transform:translateY(calc((1 - var(--fp,1)) * 80px));opacity:calc(.2 + var(--fp,1) * .8)}

@media (max-width:1023px){.cine-track-word,.cine-track-count{display:none}}