/* ============================================================
   Aure-lab — couche de mouvement
   Tout en CSS natif : animations pilotées par le défilement et
   transitions de vue. Aucune bibliothèque, aucun script, ~4 Ko.
   Sur un navigateur non compatible, la page reste simplement fixe.
   ============================================================ */

/* ------------------------------------------------------------
   1. Transition entre les pages (« une seule surface continue »)
   ------------------------------------------------------------ */
@view-transition{navigation:auto}

::view-transition-old(root){animation:vtOut .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .42s cubic-bezier(0,0,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}

/* la barre de navigation ne bouge pas d'une page à l'autre */
.nav-w{view-transition-name:navbar}
::view-transition-group(navbar){animation-duration:.42s}

/* ------------------------------------------------------------
   2. Entrée du héros au chargement
   ------------------------------------------------------------ */
.hero-tx > *{animation:riseIn .9s cubic-bezier(.16,1,.3,1) both}
.hero-tx > :nth-child(1){animation-delay:.06s}
.hero-tx > :nth-child(2){animation-delay:.14s}
.hero-tx > :nth-child(3){animation-delay:.24s}
.hero-tx > :nth-child(4){animation-delay:.34s}
@keyframes riseIn{from{opacity:0;transform:translateY(20px)}}

.hero-art .art-img,.hero-art .art-fb{animation:artIn 1.5s cubic-bezier(.16,1,.3,1) both}
@keyframes artIn{from{opacity:0;transform:scale(1.09)}}

.marg span,.proof > *{animation:fadeIn 1s ease-out .5s both}
@keyframes fadeIn{from{opacity:0}}

/* ------------------------------------------------------------
   3. Animations pilotées par le défilement
   ------------------------------------------------------------ */
@supports (animation-timeline:view()){

  /* parallaxe du héros : l'image monte moins vite que la page */
  .hero-art .art-img,.hero-art .art-fb{
    inset:-7%;
    animation:artIn 1.5s cubic-bezier(.16,1,.3,1) both,
              parallax linear both;
    animation-timeline:auto,scroll(root);
    animation-range:normal,0 100vh;
  }
  @keyframes parallax{to{transform:translateY(7%)}}

  /* parallaxe et léger zoom sur le bandeau photographique */
  .band-img{
    animation:bandPar linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
    scale:1.12;
  }
  @keyframes bandPar{from{translate:0 -5%}to{translate:0 5%}}

  /* révélation des blocs : remplace l'IntersectionObserver */
  .rv{
    opacity:1;transform:none;transition:none;
    animation:blockIn linear both;
    animation-timeline:view();
    animation-range:entry 8% cover 26%;
  }
  @keyframes blockIn{from{opacity:0;transform:translateY(26px)}}


}

/* ------------------------------------------------------------
   4. Bandeau défilant : ce que nous automatisons
   ------------------------------------------------------------ */
.tick{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 0;overflow:hidden;display:flex;gap:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tick-run{
  display:flex;align-items:center;gap:0;flex-shrink:0;
  animation:tickRun 38s linear infinite;
}
.tick:hover .tick-run{animation-play-state:paused}
.tick-run span{
  font-family:var(--fd);font-size:clamp(21px,2.3vw,30px);letter-spacing:-.015em;
  color:var(--t2);white-space:nowrap;padding:0 clamp(20px,2.4vw,36px);
  display:inline-flex;align-items:center;gap:clamp(20px,2.4vw,36px);
}
.tick-run span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);flex-shrink:0}
@keyframes tickRun{to{transform:translateX(-100%)}}

/* ------------------------------------------------------------
   5. Micro-interactions
   ------------------------------------------------------------ */
.nav-l a,.f-col a{background-image:linear-gradient(var(--acc),var(--acc));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .32s cubic-bezier(.22,.61,.36,1),color .2s}
.nav-l a:hover,.f-col a:hover{background-size:100% 1px}

.door{transition:background .35s var(--e),padding-left .35s var(--e)}
.door:hover{background:rgba(184,92,62,.045)}

.offer{transition:border-color .4s var(--e)}
.offer:hover{border-color:var(--acc)}

/* ------------------------------------------------------------
   6. Respect des préférences système
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero-tx > *,.hero-art .art-img,.hero-art .art-fb,.marg span,.proof > *,
  .rv,.band-img,.tick-run{
    animation:none!important;opacity:1!important;transform:none!important;
    clip-path:none!important;translate:none!important;
  }
  .hero-art .art-img,.hero-art .art-fb{inset:0}
}