/* ==================================================================
   OPM Animations : les memes mouvements que VF Architectures v2.
   Entree de l'en-tete, lignes du hero, revelations au defilement,
   zoom lent au survol, fondu entre les pages, menu mobile.
   Tout depend de .opm-js, pose en tete de page par le plugin : sans
   script, rien n'est masque. Coupe pour prefers-reduced-motion.
   ================================================================== */
:root{--opm-ease:cubic-bezier(.22,1,.36,1);--opm-ease-soft:cubic-bezier(.25,.1,.25,1)}

@keyframes opm-rise{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes opm-fade{from{opacity:0}to{opacity:1}}
@keyframes opm-settle{from{scale:1.14}to{scale:1}}
@keyframes opm-curtain{from{opacity:0;clip-path:inset(9% 0 9% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes opm-hero-media{0%{opacity:0;scale:1.14}45%{opacity:1}100%{opacity:1;scale:1}}
@keyframes opm-header-in{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
@keyframes opm-panel-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes opm-rise-sm{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

@media (prefers-reduced-motion:no-preference){
  /* le contenu (tout ce qui suit l'en-tete, pied de page exclu) apparait en fondu */
  .opm-js header[style*="position:sticky"]~:not(footer):not(script):not(style){opacity:0}
  .opm-ready header[style*="position:sticky"]~:not(footer):not(script):not(style){opacity:1;transition:opacity 1s var(--opm-ease-soft)}
  .opm-js body{transition:opacity .45s var(--opm-ease-soft)}
  .opm-leaving body{opacity:0}

  .opm-js header[style*="position:sticky"]{animation:opm-header-in 1.3s var(--opm-ease) .2s both}
  .opm-nav-item:hover>.opm-nav-panel,.opm-nav-item:focus-within>.opm-nav-panel{animation:opm-panel-in .5s var(--opm-ease) both}

  #opm-mobile-menu.open{animation:opm-fade .5s var(--opm-ease-soft) both}
  #opm-mobile-menu.open>*{animation:opm-rise-sm .8s var(--opm-ease) both}
  #opm-mobile-menu.open>:nth-child(2){animation-delay:.05s}
  #opm-mobile-menu.open>:nth-child(3){animation-delay:.1s}
  #opm-mobile-menu.open>:nth-child(4){animation-delay:.15s}
  #opm-mobile-menu.open>:nth-child(5){animation-delay:.2s}
  #opm-mobile-menu.open>:nth-child(6){animation-delay:.25s}
  #opm-mobile-menu.open>:nth-child(7){animation-delay:.3s}
  #opm-mobile-menu.open>:nth-child(n+8){animation-delay:.35s}

  /* hero : l'image emerge et se pose, les lignes montent l'une apres l'autre */
  .opm-js .opm-hero__media{animation:opm-hero-media 3.4s var(--opm-ease) both}
  .opm-js .opm-hero__line{animation:opm-rise 1.5s var(--opm-ease) var(--opm-delay,0ms) both}

  /* revelations au defilement */
  .opm-js .opm-reveal{opacity:0}
  .opm-js .opm-reveal.is-in{animation:opm-rise 1.4s var(--opm-ease) var(--opm-delay,0ms) both}
  .opm-js .opm-reveal--fade.is-in{animation-name:opm-fade;animation-duration:1.6s}
  .opm-js .opm-reveal--curtain.is-in{animation:opm-curtain 1.8s var(--opm-ease) var(--opm-delay,0ms) both}
  .opm-js .opm-reveal.is-in .opm-reveal__img{animation:opm-settle 2.2s var(--opm-ease) var(--opm-delay,0ms) both}

  /* zoom lent et discret au survol des cartes illustrees */
  .opm-zoom .opm-zoom__img{transition:transform 1.8s var(--opm-ease)}
  .opm-zoom:hover .opm-zoom__img{transform:scale(1.05)}
}