/* =========================================================
   Kova — écran d'accueil animé (styles)
   ========================================================= */

#splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#0d0d0f;
  transition:opacity .7s ease, visibility .7s ease;
}
#splash.gone{opacity:0; visibility:hidden; pointer-events:none}

#splash .sp-logo{
  width:112px; height:112px; border-radius:28px; object-fit:cover; display:block;
  opacity:0;
  animation:sp-in .8s cubic-bezier(.22,1,.36,1) forwards,
            sp-pulse 1.6s ease-in-out .9s infinite;
}
#splash .sp-name{
  position:absolute; top:calc(50% + 74px); left:0; right:0;
  text-align:center;
  font:800 17px Manrope,-apple-system,sans-serif; letter-spacing:.34em; color:#fff;
  opacity:0; animation:sp-fade .9s ease .5s forwards;
}

@keyframes sp-in{
  from{opacity:0; transform:scale(.85)}
  to{opacity:1; transform:scale(1)}
}
@keyframes sp-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.18)}
  50%{box-shadow:0 0 0 18px rgba(255,255,255,0)}
}
@keyframes sp-fade{from{opacity:0} to{opacity:1}}

@media(max-width:640px){
  #splash .sp-logo{width:88px; height:88px; border-radius:22px}
  #splash .sp-name{top:calc(50% + 60px); font-size:15px; letter-spacing:.28em}
}

/* Le site ne doit pas défiler pendant l'écran */
body.splash-on{overflow:hidden}

/* Ceux qui ont désactivé les animations ne voient pas l'écran du tout */
@media(prefers-reduced-motion:reduce){
  #splash{display:none !important}
  body.splash-on{overflow:auto}
}