/* =========================================================
   SPLASH « COURONNEMENT » (chargé en dernier)
   faisceau → impact → la mascotte surgit → éclat de couronne → plongée dans l'écran
   ========================================================= */
#splash.sx{background:radial-gradient(120% 80% at 50% 40%,#171005 0%,#07070a 62%);overflow:hidden;cursor:pointer}
#splash.sx>.sx-old{display:none}
.sx-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

/* faisceau qui tombe du ciel jusqu'au centre de la scène */
.sx-beam{position:absolute;left:50%;top:0;width:90px;height:40%;margin-left:-45px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,#ffd65a00 0%,#ffd65a99 55%,#fff 100%);filter:blur(5px);
  transform:scaleY(0);transform-origin:top;opacity:0;mix-blend-mode:screen}
.sx-beam:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:#fff;filter:blur(1px)}
#splash.s1 .sx-beam{animation:sxBeam .42s cubic-bezier(.6,0,.9,.4) forwards}
#splash.s2 .sx-beam{animation:sxBeamOut .5s ease-out forwards}
@keyframes sxBeam{0%{transform:scaleY(0);opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes sxBeamOut{0%{transform:scaleY(1) scaleX(1);opacity:1}100%{transform:scaleY(1) scaleX(4);opacity:0}}

/* éclair de l'impact, puis éclair bleu de la plongée */
.sx-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 40%,#fff 0,#ffe7a0aa 18%,#f5b40033 40%,transparent 65%)}
#splash.s2 .sx-flash{animation:sxFlash .8s ease-out}
@keyframes sxFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
#splash.warp .sx-flash{background:radial-gradient(circle at 50% 42%,#fff 0,#62d0ff 22%,#2aabee66 45%,transparent 75%);animation:sxWarpFlash .6s ease-in forwards}
@keyframes sxWarpFlash{0%{opacity:0}70%{opacity:1}100%{opacity:1}}

/* scène de la mascotte */
.sx-stage{position:absolute;left:50%;top:41%;width:min(88vw,390px);aspect-ratio:1;margin-left:calc(min(88vw,390px) / -2);transform:translateY(-50%);z-index:2;transform-origin:34% 50%}
.sx-mascot{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block;background:transparent;
  -webkit-mask:radial-gradient(closest-side,#000 66%,transparent 100%);mask:radial-gradient(closest-side,#000 66%,transparent 100%);
  opacity:0;transform:translateY(46px) scale(.84)}
#splash.s2 .sx-mascot{animation:sxRise 1.15s cubic-bezier(.2,1.25,.3,1) forwards}
@keyframes sxRise{0%{opacity:0;filter:brightness(0) blur(10px);transform:translateY(46px) scale(.84)}30%{opacity:1;filter:brightness(2.4) blur(2px)}100%{opacity:1;filter:none;transform:none}}
.sx-halo{position:absolute;inset:6%;z-index:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#f5b40055 0%,#f5b40018 45%,transparent 70%)}
#splash.s2 .sx-halo{animation:sxHalo 2.4s .3s ease-in-out infinite alternate both}
@keyframes sxHalo{0%{opacity:.5;transform:scale(.92)}100%{opacity:1;transform:scale(1.08)}}
.sx-rays{position:absolute;inset:-18%;z-index:0;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,#ffd65a26 0 5deg,transparent 5deg 16deg,#2aabee18 16deg 19deg,transparent 19deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 66%);mask:radial-gradient(circle,#000 20%,transparent 66%);
  transition:opacity 1s .4s;animation:rot 30s linear infinite}
#splash.s2 .sx-rays{opacity:1}

/* ondes de choc de l'impact */
.sx-ring{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;margin:-28% 0 0 -28%;z-index:3;border-radius:50%;
  border:3px solid #ffd65a;box-shadow:0 0 22px #f5b400,inset 0 0 22px #f5b40088;opacity:0;pointer-events:none}
.sx-ring.r2{border-color:#62d0ff;box-shadow:0 0 22px #2aabee,inset 0 0 22px #2aabee88}
#splash.s2 .sx-ring{animation:sxRing 1s cubic-bezier(.1,.7,.2,1) forwards}
#splash.s2 .sx-ring.r2{animation-delay:.14s}
@keyframes sxRing{0%{transform:scale(.15);opacity:1}100%{transform:scale(2.6);opacity:0}}

/* éclat sur la pointe de la couronne */
.sx-glint{position:absolute;left:69%;top:9%;width:70px;height:70px;margin:-35px;z-index:3;pointer-events:none;opacity:0}
.sx-glint:before,.sx-glint:after{content:"";position:absolute;left:50%;top:50%;width:100%;height:4px;margin:-2px 0 0 -50%;border-radius:4px;
  background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 12px #ffd65a}
.sx-glint:after{transform:rotate(90deg)}
#splash.s3 .sx-glint{animation:sxGlint 1s cubic-bezier(.2,.9,.3,1)}
@keyframes sxGlint{0%{opacity:0;transform:scale(0) rotate(-60deg)}35%{opacity:1;transform:scale(1.25) rotate(0)}100%{opacity:0;transform:scale(.3) rotate(45deg)}}

/* titre, accroche, barre de chargement */
.sx-txt{position:absolute;left:0;right:0;top:calc(41% + min(44vw,195px));z-index:3;text-align:center;padding:0 16px}
.sx-title{font-family:"Russo One",sans-serif;font-weight:400;font-size:clamp(26px,8vw,36px);letter-spacing:2px;line-height:1.1;perspective:400px}
.sx-title span{display:inline-block;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;
  filter:drop-shadow(0 0 14px #f5b40066)}
#splash.s3 .sx-title span{animation:sxChar .7s calc(var(--i) * 45ms) cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes sxChar{0%{opacity:0;transform:translateY(-60px) rotateX(90deg) scale(1.6)}100%{opacity:1;transform:none}}
.sx-tag{margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:3px;color:var(--mute);opacity:0}
#splash.s3 .sx-tag{animation:in .6s .55s both;opacity:1}
.sx-bar{position:relative;width:180px;height:3px;margin:16px auto 0;border-radius:9px;background:#ffffff14;opacity:0;transition:opacity .4s}
#splash.s2 .sx-bar{opacity:1}
.sx-bar i{display:block;height:100%;width:var(--p,0%);border-radius:9px;background:var(--goldgrad);box-shadow:0 0 12px var(--gold)}
.sx-bar b{position:absolute;right:0;top:8px;font-family:"Russo One",sans-serif;font-weight:400;font-size:12px;color:var(--gold2)}
.sx-skip{position:absolute;left:0;right:0;bottom:calc(22px + var(--safe-b));z-index:3;text-align:center;font-size:12px;color:#ffffff55;opacity:0;transition:opacity .5s}
#splash.s3 .sx-skip{opacity:1}

/* sortie : la caméra plonge dans l'écran du laptop */
#splash.warp .sx-stage{transition:transform .65s cubic-bezier(.75,0,.35,1);transform:translateY(-50%) scale(7)}
#splash.warp .sx-txt,#splash.warp .sx-skip,#splash.warp .sx-fx{opacity:0;transition:opacity .25s}
#splash.sx.off{opacity:0;visibility:hidden;clip-path:none;transform:none;filter:none;transition:opacity .45s,visibility 0s .45s}

/* sans animations : simple fondu */
@media (prefers-reduced-motion:reduce){
  #splash.sx .sx-mascot{opacity:1;transform:none;animation:none!important}
  .sx-beam,.sx-ring,.sx-glint,.sx-rays,.sx-fx{display:none}
  #splash.sx .sx-title span{opacity:1;animation:none!important}
}

/* le toast caché dépassait de 0,4 px en haut (point vert) : invisible tant qu'il n'est pas affiché */
.toast:not(.on){opacity:0;transition:transform .4s cubic-bezier(.2,1.4,.4,1),opacity .2s .2s}