/* Ouverture : les lettres du logo traversent les couleurs de la charte, puis l'aplat se soulève comme un tissu */
.stitch-intro{display:none;position:fixed;inset:0;z-index:200;background:var(--band,#A49BE8);color:var(--ink,#181714);border-bottom:2px dotted var(--ink,#181714);overflow:hidden;cursor:pointer}
html.intro-on .stitch-intro,.stitch-intro.live{display:block}
html.intro-on{overflow:hidden}
.st-note{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;padding:4vw}
.st-word{display:flex;align-items:center}
/* Palette de l'effet : les couleurs de la charte. À modifier ici. */
.stitch-intro{--sp-1:var(--pink,#FF3BA7);--sp-2:var(--yellow,#F1F54F);--sp-3:var(--green,#00683E);--sp-4:var(--cream,#F5F1E8);--sp-5:var(--dark,#181714)}
/* Les tracés du logo héritent de la couleur animée. */
.st-g{display:block;flex:none;translate:0 var(--dy,0px);rotate:var(--r,0deg);color:var(--sp-1);fill:currentColor;stroke:currentColor;overflow:visible;
  animation:st-in 360ms cubic-bezier(.2,.8,.3,1) calc(var(--i)*60ms) both,st-spectrum 1.8s step-end calc(var(--i)*-90ms) infinite}
@keyframes st-in{from{opacity:0;transform:translateY(.25em) scale(.92)}to{opacity:1;transform:none}}
@keyframes st-spectrum{
  0%,100%{color:var(--sp-1)}
  20%{color:var(--sp-2)}
  40%{color:var(--sp-3)}
  60%{color:var(--sp-4)}
  80%{color:var(--sp-5)}
}
@media(prefers-reduced-motion:reduce){
  .st-g{animation:none;color:var(--sp-5)}
}
.st-skip{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);translate:-50% 0;font:13px/1 Mono,monospace;opacity:0;animation:st-skip 600ms ease 1.2s forwards}
@keyframes st-skip{to{opacity:.6}}
@media(prefers-reduced-motion:no-preference){
  .stitch-intro.lift{animation:st-lift .95s cubic-bezier(.7,0,.2,1) forwards}
}
@keyframes st-lift{to{transform:translateY(calc(-100% - 4px))}}
/* le titre d'accueil attend la fin de l'ouverture */
html.intro-on .intro h1.word-reveal .intro-word{animation-play-state:paused}

.st-skip{border:0;background:transparent;cursor:pointer;z-index:1;color:var(--dark)}
.st-skip:focus-visible{animation:none;opacity:1}