/* Animations au scroll — actives seulement quand <html> porte la classe .anim
   (ajoutée en tête de page, retirée si l'utilisateur préfère réduire les animations). */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* Défilement fluide (Lenis, ordinateur uniquement) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* Icône flèche (évite l'emoji ↗ sur iPhone) */
.i-ar{display:inline-block;width:.72em;height:.72em;vertical-align:-.02em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Zoom des images : échelle d'apparition × échelle au survol */
.zoom img{transform:scale(calc(var(--rs,1) * var(--hs,1)));transition:transform 1.6s var(--ease)}
.zoom:hover,.work:hover .zoom{--hs:1.035}

/* Bloc qui monte en fondu */
.anim [data-reveal="up"]{opacity:0;transform:translate3d(0,56px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.anim [data-reveal="up"].in{opacity:1;transform:none}

/* Image qui se dévoile de bas en haut en dézoomant */
.anim [data-reveal="img"]{clip-path:inset(22% 0 0 0 round var(--radius,14px));transition:clip-path 1.4s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.anim [data-reveal="img"].in{clip-path:inset(0 0 0 0 round var(--radius,14px))}
.anim [data-reveal="img"]:not(.in) img{--rs:1.22}
.anim [data-reveal="img"] img{transition-delay:calc(var(--i,0) * 90ms)}

/* Carte (photo + texte) qui monte en fondu ; la photo se pose avec un très léger dézoom */
.anim [data-reveal="card"]{opacity:0;transform:translate3d(0,40px,0);transition:opacity 1.2s ease,transform 1.4s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
.anim [data-reveal="card"].in{opacity:1;transform:none}
.anim [data-reveal="card"]:not(.in) img{--rs:1.06}
.anim [data-reveal="card"] img{transition-duration:2s;transition-delay:calc(var(--i,0) * 120ms)}

/* Titres : chaque mot sort d'un masque */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w > span{display:inline-block}
.anim [data-reveal="words"] .w > span{transform:translate3d(0,112%,0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.anim [data-reveal="words"].in .w > span{transform:none}

/* Grand texte : lettre par lettre, comme la référence */
.cw{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.anim [data-reveal="chars"] .c{opacity:0;transform:translate3d(0,.3em,0);transition:opacity .6s ease,transform .8s var(--ease);transition-delay:calc(var(--i,0) * 16ms)}
.anim [data-reveal="chars"].in .c{opacity:1;transform:none}

/* Filets qui se tracent */
.anim [data-reveal="line"]{border-top-color:transparent!important;position:relative}
.anim [data-reveal="line"]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.anim [data-reveal="line"].in::before{transform:none}

/* Entrée du hero au chargement */
.anim .hero-top{animation:m-down 1.1s var(--ease) .25s both}
.anim .kicker{animation:m-up 1.1s var(--ease) .45s both}
@keyframes m-down{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}}
@keyframes m-up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* Menu mobile */
.menu{position:fixed;inset:0;z-index:60;background:#111112;color:#FFFFFF;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad,16px) calc(env(safe-area-inset-bottom,0px) + 24px);opacity:0;transition:opacity .35s ease}
.menu.open{opacity:1}
.menu-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.menu-top .brand{font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.menu-links{display:grid;gap:6px}
.menu-links a{font-size:clamp(34px,10vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.08;opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 55ms + 80ms)}
.menu.open .menu-links a{opacity:1;transform:none}
.menu-foot{display:flex;gap:24px;font-size:14px;color:#A0A0A6}
.menu-foot a{color:#FFFFFF}

@media (max-width:760px){
  .anim [data-reveal="up"],.anim [data-reveal="card"]{transform:translate3d(0,28px,0)}
}
/* Téléphone : le fondu du titre suit le défilement côté navigateur (pas de JavaScript, donc pas de saccade) */
@media (hover:none),(pointer:coarse){
  @supports (animation-timeline: scroll()){
    .anim .hero-title{animation:m-hero-out linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  }
}
@keyframes m-hero-out{to{opacity:0;transform:translate3d(0,-40px,0)}}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-links a{transition:none;opacity:1;transform:none}
}