/* Mouvement commun à toutes les pages (s'ajoute aux maquettes sans changer la mise en page).
   Propriétés indépendantes translate / scale / clip-path : elles ne remplacent jamais un transform des maquettes.
   Tout est coupé si le visiteur a demandé moins d'animations dans son système. */

/* Survol et focus : couleurs adoucies partout */
a,button,.sia-btn,input,select,textarea{transition:color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease}

.bko-unified-nav{transition:background-color .35s,box-shadow .35s}
.bko-unified-nav.is-scrolled{background:#0d0c0af7;box-shadow:0 10px 30px -12px #000c}

@media(prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}

/* Passage d'une page à l'autre en fondu (navigateurs récents, ignoré ailleurs) ; la barre reste fixe */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
.bko-unified-nav{view-transition-name:sia-nav}

/* En-tête de page : les éléments montent l'un après l'autre au chargement */
@keyframes sia-rise{from{opacity:0;translate:0 18px}}
@keyframes sia-unveil{from{clip-path:inset(0 0 100% 0)}}
@keyframes sia-fade{from{opacity:0}}
:is(.hero:not(:has(.heroText)),body.sia-home>header)>*,.hero .heroText>*{animation:sia-rise .9s cubic-bezier(.2,.7,.2,1) backwards}
:is(.hero:not(:has(.heroText)),body.sia-home>header)>:nth-child(2),.hero .heroText>:nth-child(2){animation-delay:.12s}
:is(.hero:not(:has(.heroText)),body.sia-home>header)>:nth-child(3),.hero .heroText>:nth-child(3){animation-delay:.24s}
:is(.hero:not(:has(.heroText)),body.sia-home>header)>:nth-child(4),.hero .heroText>:nth-child(4){animation-delay:.36s}
:is(.hero:not(:has(.heroText)),body.sia-home>header)>:nth-child(5),.hero .heroText>:nth-child(5){animation-delay:.48s}
:is(.hero:not(:has(.heroText)),body.sia-home>header)>:nth-child(n+6),.hero .heroText>:nth-child(n+6){animation-delay:.6s}
/* Image d'en-tête : dévoilée de haut en bas, comme un rideau qu'on lève */
.hero img{animation:sia-unveil 1.1s cubic-bezier(.65,0,.25,1) .15s backwards}
.hero>img,.hero>:has(>img){animation-name:sia-fade}
.hero>:has(>img)>img{animation:sia-unveil 1.1s cubic-bezier(.65,0,.25,1) .2s backwards}
/* Filets dorés : ils se tracent depuis le centre */
@keyframes sia-draw{from{scale:0 1}}
:is(.hero,body.sia-home>header) :is(.goldline,.line,.rule){animation:sia-draw 1.1s cubic-bezier(.2,.7,.2,1) .45s backwards}

/* Apparition au défilement (classes posées par motion.js, seulement sous la ligne de flottaison) */
.sia-rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),scale 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--sia-d,0s)}
.sia-rv:not(.is-in){opacity:0;translate:0 26px}
.sia-rv.sia-rv--line:not(.is-in){opacity:1;translate:none;scale:0 1}

/* Œuvres : léger rapprochement au survol, dans leur cadre */
.sia-zoom{transition:scale 1.1s cubic-bezier(.2,.7,.2,1)}
.sia-zoomhost:hover .sia-zoom{scale:1.045}
}

/* Cadres qui doivent contenir le rapprochement */
body.sia-collections .card .photo,body.sia-contact .sia-press__ph{overflow:hidden}

/* Accueil (structure hm-) : même entrée que les autres en-têtes */
@media(prefers-reduced-motion:no-preference){
.hm-hero__txt>*{animation:sia-rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hm-hero__txt>:nth-child(2){animation-delay:.12s}
.hm-hero__txt>:nth-child(3){animation-delay:.24s}
.hm-hero__txt>:nth-child(4){animation-delay:.36s}
.hm-hero__img{animation:sia-fade 1s ease .1s backwards}
.hm-hero__img img{animation:sia-unveil 1.1s cubic-bezier(.65,0,.25,1) .25s backwards}
}