/* Batylo, couche d'animation commune (accueil et pages intérieures).
   Tout passe par transform, opacity et clip-path. Rien ne bouge si l'utilisateur a demandé moins d'animation. */
@property --btn-cut{syntax:'<length>';inherits:false;initial-value:14px}

/* transitions entre pages : la nouvelle page s'ouvre en coupe d'onglet */
@view-transition{navigation:auto}
.top{view-transition-name:top-bar}
::view-transition-old(root){animation:vt-out .35s var(--ease,ease) both}
::view-transition-new(root){animation:vt-in .6s var(--ease,ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{clip-path:polygon(0 0,0 0,0 0,0 0)}to{clip-path:polygon(0 0,200% 0,0 200%,0 0)}}

/* titres : les mots montent un par un */
.js [data-split] .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);transform-origin:0 100%;
  animation:word-in .8s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + var(--d,0ms))}
@keyframes word-in{to{opacity:1;transform:none}}

/* apparitions au défilement */
.js [data-in]{transition-property:opacity,transform,clip-path,translate;transition-duration:.8s,.8s,1s,.35s;transition-timing-function:var(--ease);
  transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s}
.js [data-in="up"]:not(.in){opacity:0;transform:translateY(34px)}
.js [data-in="left"]:not(.in){opacity:0;transform:translateX(-48px)}
.js [data-in="right"]:not(.in){opacity:0;transform:translateX(48px)}
.js [data-in="cut"]:not(.in){clip-path:polygon(0 0,0 0,0 0,0 0,0 0)}
.js [data-in="cut"].in{clip-path:polygon(0 0,calc(100% - var(--cut-lg)) 0,100% var(--cut-lg),100% 100%,0 100%)}
.js [data-in="bar"]{transform-origin:0 50%}
.js [data-in="bar"]:not(.in){transform:scaleX(0)}
.js [data-in="pop"]:not(.in){opacity:0;transform:scale(.6) rotate(-45deg)}

/* barres épaisses qui se tracent (jamais un filet) */
.bar{display:block;height:8px;background:var(--bg);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,0 100%)}

/* triangles d'onglet en coin, qui grandissent au survol */
.corner{position:relative}
.corner::after{content:"";position:absolute;top:0;right:0;width:var(--cut-lg);height:var(--cut-lg);background:var(--bg);
  clip-path:polygon(0 0,100% 0,100% 100%);transform:scale(.0001);transform-origin:100% 0;transition:transform .5s var(--ease)}
.corner.in::after,.corner:hover::after{transform:scale(1)}
.corner:hover::after{transform:scale(1.35)}

/* le bouton : son onglet s'ouvre au survol */
.btn{--btn-cut:var(--cut);clip-path:polygon(0 0,calc(100% - var(--btn-cut)) 0,100% var(--btn-cut),100% 100%,0 100%);transition:transform .25s var(--ease),background-color .25s,--btn-cut .3s var(--ease)}
.btn:hover{--btn-cut:22px}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

/* cartes qui se soulèvent */
.lift{transition:translate .35s var(--ease)}
.lift:hover{translate:0 -5px}

/* signal en direct */
.pulse{display:inline-block;width:12px;height:12px;background:var(--bg);clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%);animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{50%{transform:scale(.55) rotate(45deg);opacity:.5}}

/* images qui avancent quand on défile (navigateurs qui savent le faire) */
@supports (animation-timeline:view()){
  .js [data-drift]{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes drift{from{transform:scale(1.12) translateY(-4%)}to{transform:scale(1.12) translateY(4%)}}
}

/* barre de lecture */
.progress{position:fixed;left:0;top:0;width:100%;height:8px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .js [data-split] .w,.js [data-in],.js [data-in]:not(.in),.js [data-drift]{opacity:1;transform:none;clip-path:none;animation:none;transition:none}
  .js [data-in="cut"]:not(.in),.js [data-in="cut"].in{clip-path:polygon(0 0,calc(100% - var(--cut-lg)) 0,100% var(--cut-lg),100% 100%,0 100%)}
  .corner::after{transform:scale(1);transition:none}
  .pulse{animation:none}
  .lift,.lift:hover,.btn,.btn:hover{transition:none;transform:none;translate:none}
  .progress{display:none}
}