/* ==========================================================================
   Bunsh International — Splash screen (motion design)
   Durée totale ≈ 7,5 s (max 15 s) · affiché une fois par session
   Séquence : fond + anneaux → logo révélé par balayage lumineux → point rouge
   pulsé → reflet → baseline → rideau qui s'ouvre vers la page d'accueil
   ========================================================================== */
#splash { display: none; }

html.splash-on { overflow: hidden; }
html.splash-on #splash {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; overflow: hidden;
    font-family: var(--font-head, 'Inter', system-ui, sans-serif);
    --sp-ease: cubic-bezier(.22, .8, .24, 1);
}
/* La page d'accueil attend la fin du splash pour lancer ses animations d'entrée */
html.splash-on body { animation: none !important; }
html.splash-on .hero .container > * { animation-play-state: paused !important; }
html.splash-on.splash-release .hero .container > * { animation-play-state: running !important; }

/* Filet de sécurité : si le JavaScript est bloqué, le splash se retire seul après 14 s */
html.splash-on #splash { animation: spFailsafe .01s linear 14s forwards; }
@keyframes spFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- Panneaux (fond) : s'ouvrent en deux à la fin ---------- */
#splash .sp-panel {
    position: absolute; left: 0; width: 100%; height: 50.2%; background: #050b33; z-index: 1;
    transition: transform 1.15s cubic-bezier(.76, 0, .24, 1) .15s;
}
#splash .sp-panel.top { top: 0; background: linear-gradient(180deg, #050b33 0%, #07124a 100%); }
#splash .sp-panel.bottom { bottom: 0; background: linear-gradient(0deg, #050b33 0%, #07124a 100%); }
#splash.leave .sp-panel.top { transform: translateY(-101%); }
#splash.leave .sp-panel.bottom { transform: translateY(101%); }

/* ---------- Décor : orbes, grille, particules ---------- */
#splash .sp-fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; transition: opacity .6s ease; }
#splash.leave .sp-fx { opacity: 0; }
#splash .sp-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0; animation: spOrb 7s ease-in-out infinite alternate, spFadeIn 1.6s ease .1s forwards; }
#splash .sp-orb.o1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -12vmax; background: radial-gradient(circle, rgba(47, 91, 255, .75), transparent 65%); }
#splash .sp-orb.o2 { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -14vmax; background: radial-gradient(circle, rgba(239, 59, 36, .45), transparent 65%); animation-delay: 0s, .4s; animation-direction: alternate-reverse, normal; }
@keyframes spOrb { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 4vmax) scale(1.18); } }
@keyframes spFadeIn { to { opacity: 1; } }
#splash .sp-grid {
    position: absolute; top: -10%; right: -10%; bottom: -10%; left: -10%; opacity: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.4px); background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
    animation: spFadeIn 1.4s ease .3s forwards, spGrid 14s linear infinite;
}
@keyframes spGrid { to { background-position: 34px 34px; } }
#splash .sp-part { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; animation: spPart 5.2s ease-in-out infinite; }
@keyframes spPart { 0% { opacity: 0; transform: translateY(30px) scale(.4); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateY(-120px) scale(1.2); } }

/* ---------- Anneaux concentriques ---------- */
#splash .sp-rings { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; transition: opacity .5s ease; }
#splash.leave .sp-rings { opacity: 0; }
#splash .sp-rings i {
    grid-area: 1 / 1; width: min(46vmin, 380px); height: min(46vmin, 380px); border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .35); opacity: 0; transform: scale(.2);
    animation: spRing 3.6s var(--sp-ease) infinite;
}
#splash .sp-rings i:nth-child(1) { animation-delay: .2s; }
#splash .sp-rings i:nth-child(2) { animation-delay: 1.2s; border-color: rgba(47, 91, 255, .7); }
#splash .sp-rings i:nth-child(3) { animation-delay: 2.2s; border-color: rgba(239, 59, 36, .55); }
@keyframes spRing { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: .9; } 100% { opacity: 0; transform: scale(3.1); } }

/* ---------- Scène centrale ---------- */
#splash .sp-stage {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(1.2rem, 3.4vmin, 2rem); padding: 0 6vw;
    transition: transform .9s cubic-bezier(.76, 0, .24, 1), opacity .7s ease;
}
#splash.leave .sp-stage { transform: scale(1.35); opacity: 0; }

#splash .sp-logo-wrap { position: relative; width: min(74vw, 520px); height: calc(min(74vw, 520px) * 289 / 754); }
#splash .sp-glow {
    position: absolute; top: -30%; right: -12%; bottom: -30%; left: -12%; border-radius: 50%; opacity: 0;
    background: radial-gradient(closest-side, rgba(47, 91, 255, .55), transparent 72%);
    animation: spFadeIn 1.8s ease 1.2s forwards, spBreath 3.2s ease-in-out 3s infinite;
}
@keyframes spBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Le logo se révèle de gauche à droite (clip-path) avec flou → net */
#splash .sp-reveal {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);
    animation: spWipe 1.9s cubic-bezier(.65, 0, .25, 1) .8s forwards;
}
@keyframes spWipe { to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
#splash .sp-logo {
    width: 100%; height: 100%; display: block; object-fit: contain;
    animation: spLogoIn 2.2s var(--sp-ease) .8s both, spFloat 4s ease-in-out 3.2s infinite;
}
@keyframes spLogoIn { from { transform: scale(1.18) translateX(-3%); filter: blur(14px) brightness(1.6); } to { transform: none; filter: blur(0) brightness(1); } }
@keyframes spFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Ligne lumineuse qui accompagne le balayage */
#splash .sp-scan {
    position: absolute; top: -14%; bottom: -14%; left: 0; width: 3px; border-radius: 3px; opacity: 0;
    background: linear-gradient(180deg, transparent, #fff 20%, #8fb0ff 50%, #fff 80%, transparent);
    box-shadow: 0 0 22px 6px rgba(120, 160, 255, .85);
    animation: spScan 1.9s cubic-bezier(.65, 0, .25, 1) .8s forwards;
}
@keyframes spScan { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Reflet diagonal qui traverse le logo une fois révélé */
#splash .sp-shine {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: url("../img/logo/logo-white.png"); mask-image: url("../img/logo/logo-white.png");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
#splash .sp-shine::before {
    content: ''; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -50%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(143, 176, 255, .95), rgba(255, 255, 255, 1), rgba(143, 176, 255, .95), transparent);
    animation: spShine 1.3s cubic-bezier(.45, 0, .25, 1) 3s forwards;
}
@keyframes spShine { to { left: 130%; } }

/* Point rouge du logo : impulsions (position mesurée sur logo-white.png) */
#splash .sp-dot { position: absolute; left: 93.4%; top: 82.9%; width: 8%; height: 0; padding-bottom: 8%; transform: translate(-50%, -50%); }
#splash .sp-dot::before, #splash .sp-dot::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px solid #ef3b24; opacity: 0;
    animation: spDot 2s ease-out infinite;
}
#splash .sp-dot::before { animation-delay: 2.5s; }
#splash .sp-dot::after { animation-delay: 3.2s; }
@keyframes spDot { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

/* Baseline */
#splash .sp-tag {
    color: rgba(255, 255, 255, .85); font-weight: 600; font-size: clamp(.68rem, 1.9vw, .9rem); text-transform: uppercase; text-align: center;
    letter-spacing: .7em; opacity: 0; transform: translateY(14px);
    animation: spTag 1.7s var(--sp-ease) 2.7s forwards;
}
@keyframes spTag { to { opacity: 1; transform: none; letter-spacing: .3em; } }

/* Barre de progression */
#splash .sp-bar { width: min(56vw, 300px); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; opacity: 0; animation: spFadeIn .5s ease 1.2s forwards; }
#splash .sp-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #2f5bff, #8fb0ff 55%, #ef3b24); animation: spBar 5s cubic-bezier(.5, 0, .2, 1) 1.2s forwards; }
@keyframes spBar { to { width: 100%; } }

/* Bouton Passer */
#splash .sp-skip {
    position: absolute; z-index: 6; right: clamp(16px, 4vw, 36px); bottom: max(clamp(16px, 4vw, 32px), env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
    padding: .55rem 1.2rem; font-family: inherit; font-weight: 600; font-size: .82rem; line-height: 1; letter-spacing: .06em; cursor: pointer; opacity: 0;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: spFadeIn .6s ease 1s forwards; transition: background .25s, transform .25s;
}
#splash .sp-skip:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
#splash.leave .sp-skip { opacity: 0 !important; animation: none; pointer-events: none; }

/* Accessibilité : mouvement réduit => simple fondu court */
@media (prefers-reduced-motion: reduce) {
    #splash .sp-orb, #splash .sp-grid, #splash .sp-part, #splash .sp-rings i, #splash .sp-scan, #splash .sp-shine, #splash .sp-dot { display: none; }
    #splash .sp-reveal { -webkit-clip-path: none; clip-path: none; animation: none; }
    #splash .sp-logo { animation: none; }
    #splash .sp-tag { animation: none; opacity: 1; letter-spacing: .3em; transform: none; }
}