/* =========================================================
   ANIMATION D'ARRIVÉE « COTES » — Atelier 27 (4 s)
   Deux lignes de cote (bleue / rouge) se tracent, les coins du logo s'enclenchent, ATELIER·27 puis
   MEILLEUR OUVRIER DE FRANCE se dévoilent, le fond s'efface vers la droite et le logo vole se poser
   sur celui de la topbar (en passant du noir au blanc, la topbar étant noire).
   Styles du logo : skin-signature.css (.a27-logo). Pilotage et règles de lecture : intro.js
   ========================================================= */

/* L'intro n'existe que si le script du <head> a posé html.a27-intro-on (1re visite de la session) */
#a27-intro{display:none}
html.a27-intro-on #a27-intro{
  --s:2.4; --dx:0px; --dy:-40vh; --ts:1;
  --a27-ink:#121316; --a27-grey:#55585e; --a27-bg:#ffffff;
  --a27-land-name:#fff; --a27-land-sub:#a9acb2;
  --a27-whip:cubic-bezier(.7,0,.2,1); --a27-snap:cubic-bezier(.16,1,.3,1);
  display:block;position:fixed;inset:0;z-index:10000;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:a27-end 0s 4.2s forwards /* sécurité si intro.js ne tourne pas */
}
@keyframes a27-end{to{visibility:hidden}}
html.a27-intro-on #a27-intro.is-leaving{animation:a27-leave .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes a27-leave{to{opacity:0;visibility:hidden}}
html.a27-lock{overflow:hidden}

.a27-intro-bg{position:absolute;inset:0;background:var(--a27-bg);animation:a27-wipe .6s var(--a27-whip) 2.6s both}
@keyframes a27-wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

/* Lignes de cote */
.a27-cote{position:absolute;top:50%;height:2px;margin-top:-1px;animation:a27-grow .6s var(--a27-whip) .1s both,a27-shrink .3s var(--a27-whip) 2.35s forwards}
.a27-cote-l{left:24px;right:calc(50% + 105px * var(--s) + 6px);background:#1f4fd1;transform-origin:left}
.a27-cote-r{right:24px;left:calc(50% + 105px * var(--s) + 6px);background:#d7262e;transform-origin:right}
@keyframes a27-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes a27-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}

.a27-tick{position:absolute;top:50%;width:2px;height:16px;margin-top:-8px;animation:a27-in .1s linear .1s both,a27-out .15s linear 2.35s forwards}
.a27-tick-l{left:24px;background:#1f4fd1}
.a27-tick-r{right:24px;background:#d7262e}

.a27-label{position:absolute;bottom:calc(50% + 12px);font-family:var(--font-logo);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--a27-ink);white-space:nowrap;animation:a27-rise .35s var(--a27-snap) .6s both,a27-out .2s linear 2.3s forwards}
.a27-label-l{left:24px}
.a27-label-r{right:24px}
.a27-label sup{font-size:.65em}
@keyframes a27-in{from{opacity:0}to{opacity:1}}
@keyframes a27-out{from{opacity:1}to{opacity:0}}
@keyframes a27-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Logo central (10px = 210px de large) qui vole vers la topbar */
#a27-intro .a27-intro-logo{position:absolute;left:50%;top:50%;font-size:10px;color:var(--a27-ink);transform:translate(-50%,-50%) scale(var(--s));animation:a27-fly .7s var(--a27-whip) 2.6s forwards}
@keyframes a27-fly{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(var(--ts))}}
#a27-intro .a27-intro-logo .a27-sub{color:var(--a27-grey)}
/* Pendant le vol, le logo prend les couleurs de celui de la topbar (fond noir) */
#a27-intro .a27-intro-logo .a27-name{animation:a27-reveal .45s var(--a27-whip) .9s both,a27-land-name .5s ease 2.75s forwards}
#a27-intro .a27-intro-logo .a27-sub{animation:a27-reveal .45s var(--a27-whip) 1.3s both,a27-land-sub .5s ease 2.75s forwards}
@keyframes a27-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes a27-land-name{to{color:var(--a27-land-name)}}
@keyframes a27-land-sub{to{color:var(--a27-land-sub)}}
#a27-intro .a27-intro-logo .a27-tl{animation:a27-snap-l .4s var(--a27-snap) .65s both}
#a27-intro .a27-intro-logo .a27-tr{animation:a27-snap-r .4s var(--a27-snap) .69s both}
#a27-intro .a27-intro-logo .a27-bl{animation:a27-snap-l .4s var(--a27-snap) .73s both}
#a27-intro .a27-intro-logo .a27-br{animation:a27-snap-r .4s var(--a27-snap) .77s both}
@keyframes a27-snap-l{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes a27-snap-r{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* Pendant l'intro : le logo de la topbar est masqué (celui de l'intro vient prendre sa place) */
html.a27-playing:not(.a27-landed) .a-top .a27-logo{visibility:hidden}

/* Apparition du contenu à l'atterrissage du logo (class="a27-reveal", décalage : style="--a27-delay:.1s") */
.a27-reveal{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--a27-delay,0s)}
html.a27-playing:not(.a27-landed) .a27-reveal{opacity:0;transform:translateY(24px);transition:none}

@media (max-width:700px){.a27-label{display:none}}
@media (prefers-reduced-motion:reduce){#a27-intro{display:none!important}}