/* Écran d'ouverture (splash.js) : masqué par défaut, affiché seulement quand <html> porte « splash-on ». Aucun style en ligne. */
.splash {
  display: none; position: fixed; inset: 0; z-index: 10000; place-items: center;
  background:
    radial-gradient(55% 45% at 50% 46%, rgba(231, 11, 34, .16), transparent 72%),
    radial-gradient(90% 70% at 50% 50%, #12161a 0%, #08090b 100%);
  overflow: hidden; cursor: pointer;
}
html.splash-on .splash { display: grid; animation: splash-bg 3s ease-out both; }
html.splash-on.splash-out .splash { opacity: 0; transition: opacity .5s ease-in; pointer-events: none; }
html.splash-on body { overflow: hidden; }

.splash-stage { display: grid; justify-items: center; gap: clamp(18px, 4vh, 34px); }
.splash-logo { position: relative; width: min(72vw, 760px); aspect-ratio: 1435 / 630; }
.splash-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Entrée : le logo se dévoile de gauche à droite derrière un bord de lumière diagonal (balayage), puis se pose. */
html.splash-on .splash-logo img {
  -webkit-mask-image: linear-gradient(105deg, #000 0, #000 34%, transparent 46%, transparent 100%);
  mask-image: linear-gradient(105deg, #000 0, #000 34%, transparent 46%, transparent 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: splash-reveal 1.35s cubic-bezier(.45, 0, .2, 1) .25s both, splash-settle 1s ease-out .25s both;
}
/* Le bord de lumière : une bande claire, découpée à la forme du logo, qui suit exactement la limite du dévoilement. */
.splash-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url("img/kartrac-logo-fullscreen.svg") center / contain no-repeat;
  mask: url("img/kartrac-logo-fullscreen.svg") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 0, transparent 33%, rgba(255, 255, 255, .95) 41%, rgba(255, 90, 105, .6) 45%, transparent 52%, transparent 100%) 100% 0 / 300% 100% no-repeat;
}
html.splash-on .splash-sheen { animation: splash-edge 1.35s cubic-bezier(.45, 0, .2, 1) .25s both; }

/* Filet rouge qui se déploie depuis le centre sous le logo. */
.splash-line { display: block; width: min(46vw, 420px); height: 2px; border-radius: 2px; transform-origin: center; background: linear-gradient(90deg, transparent, #e70b22 30%, #ff172e 50%, #e70b22 70%, transparent); opacity: 0; }
html.splash-on .splash-line { animation: splash-line 1s cubic-bezier(.22, 1, .36, 1) .75s both; }

@keyframes splash-bg { from { background-size: 140% 140%, 100% 100%; } to { background-size: 100% 100%, 100% 100%; } }
@keyframes splash-reveal { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes splash-settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes splash-edge { 0% { background-position: 100% 0; opacity: 1; } 88% { opacity: 1; } 100% { background-position: 0 0; opacity: 0; } }
@keyframes splash-line { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

/* « Réduire les animations » : le logo et le filet apparaissent tels quels, sans balayage ni mouvement. */
html.splash-still .splash, html.splash-still .splash-line { animation: none; opacity: 1; transform: none; }
html.splash-still .splash-logo img { animation: none; -webkit-mask-image: none; mask-image: none; }
html.splash-still .splash-sheen { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.splash-on .splash, html.splash-on .splash-line { animation: none; opacity: 1; transform: none; }
  html.splash-on .splash-logo img { animation: none; -webkit-mask-image: none; mask-image: none; }
  html.splash-on .splash-sheen { display: none; }
}