/* ══════════════════════════════════════════════════════════ MINDSET PSY — SPLASH SCREEN CSS → Ajouter dans le (avant style.css) ou en fichier séparé ══════════════════════════════════════════════════════════ */ /* -- Overlay plein écran -- */ #splash-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(160deg, #0a2e38 0%, #0d4f5c 35%, #11697a 65%, #0a2e38 100%); overflow: hidden; } /* -- Halos lumineux décoratifs -- */ #splash-overlay::before, #splash-overlay::after { content: ''; position: absolute; border-radius: 50%; opacity: 0; animation: splashGlow 2.5s ease-out forwards; pointer-events: none; } #splash-overlay::before { width: 420px; height: 420px; top: -100px; right: -100px; background: radial-gradient(circle, rgba(246, 129, 129, 0.12) 0%, transparent 70%); animation-delay: 0.3s; } #splash-overlay::after { width: 500px; height: 500px; bottom: -140px; left: -120px; background: radial-gradient(circle, rgba(91, 155, 213, 0.15) 0%, transparent 70%); animation-delay: 0.5s; } /* -- Conteneur logo -- */ .splash-logo-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; opacity: 0; transform: scale(0.82); animation: splashLogoIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; } /* -- Logo -- */ .splash-logo-wrap img { width: clamp(110px, 22vw, 200px); height: auto; filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.35)); } /* -- Barre de progression -- */ .splash-progress { width: clamp(90px, 18vw, 160px); height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; opacity: 0; animation: splashFadeIn 0.4s ease 1s forwards; } .splash-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--color-coral, #F68181), #f4a261); border-radius: 3px; animation: splashLoading 2s cubic-bezier(0.4, 0, 0.2, 1) 1.1s forwards; } /* -- Tagline -- */ .splash-tagline { font-family: var(--font-body, 'Work Sans', sans-serif); font-size: clamp(0.65rem, 1.4vw, 0.8rem); font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); opacity: 0; animation: splashFadeIn 0.5s ease 1.2s forwards; } /* ══════════════════════════════════════════════════════════ SORTIE — Effet rideau double (split haut/bas) ══════════════════════════════════════════════════════════ */ /* Quand la classe splash-exit est ajoutée, on masque l'overlay original et on laisse les deux rideaux agir */ #splash-overlay.splash-exit { animation: splashFadeContent 0.4s ease forwards; } /* Les deux moitiés du rideau */ .splash-curtain { position: fixed; left: 0; width: 100%; height: 50vh; z-index: 99998; background: linear-gradient(160deg, #0a2e38 0%, #0d4f5c 35%, #11697a 65%, #0a2e38 100%); } .splash-curtain--top { top: 0; animation: splashCurtainUp 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards; } .splash-curtain--bottom { bottom: 0; animation: splashCurtainDown 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards; } /* ── SKIP : déjà vu dans la session ── */ #splash-overlay.splash-skip { display: none !important; } /* ══════════════════════════════════════════════════════════ KEYFRAMES ══════════════════════════════════════════════════════════ */ /* Entrée logo */ @keyframes splashLogoIn { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } } /* Fondu simple */ @keyframes splashFadeIn { to { opacity: 1; } } /* Barre de chargement (plus longue) */ @keyframes splashLoading { 0% { width: 0%; } 40% { width: 55%; } 75% { width: 85%; } 100% { width: 100%; } } /* Lueurs */ @keyframes splashGlow { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } /* Le contenu du splash (logo etc.) disparaît en fondu + zoom */ @keyframes splashFadeContent { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } /* Rideau haut → glisse vers le haut */ @keyframes splashCurtainUp { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } /* Rideau bas → glisse vers le bas */ @keyframes splashCurtainDown { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ══════════════════════════════════════════════════════════ RÉVÉLATION DU CONTENU PRINCIPAL ══════════════════════════════════════════════════════════ */ .splash-hidden { opacity: 0; transform: translateY(25px); } .splash-reveal { animation: splashPageReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes splashPageReveal { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } .splash-skip-page { opacity: 1 !important; transform: none !important; }