/* ============================================================================ CoCoach — écran d'ouverture L'animation est portée par le CSS seul : même si le JS ne se charge pas, le splash se termine et se rend invisible. Le JS ne fait que retirer le nœud du DOM et prévenir l'app. Chemins d'images : redéfinis --cc-img-* si tes assets ne sont pas dans ../logo/ par rapport à cette feuille (voir README). Durées : les six variables --cc-t-* en tête de bloc suffisent à tout régler. ========================================================================== */ /* Intégration Cocoach : le splash ne joue qu'une fois par session d'app — la classe est posée sur par la garde synchrone du quand sessionStorage porte déjà ccSplashSeen (retour sur la page). */ .cc-splash-seen .cc-splash { display: none; } .cc-splash { /* — identité — */ --cc-paper: #fbf6ec; --cc-brand: #bb3f01; --cc-laser: #f2153b; /* — images — */ --cc-img-left: url("/logo/face-left.webp"); --cc-img-right: url("/logo/face-right.webp"); --cc-img-mark: url("/logo/wordmark.svg"); /* — géométrie — */ --cc-face-w: clamp(190px, 52vw, 320px); --cc-part: 0.44; /* écartement de chaque moitié, en fraction de la largeur */ --cc-mark-w: 0.82; /* largeur du mot, en fraction de la largeur du visage */ /* — minutage (total ≈ 1,8 s) — */ --cc-t-in: 360ms; /* apparition du visage */ --cc-t-cut: 440ms; /* départ du trait laser */ --cc-t-split: 560ms; /* départ de l'écartement */ --cc-t-open: 640ms; /* durée de l'écartement */ --cc-t-hold: 1520ms; /* départ du fondu de sortie */ --cc-t-out: 320ms; /* durée du fondu de sortie */ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--cc-paper); animation: cc-splash-out var(--cc-t-out) ease-in var(--cc-t-hold) both; } /* Le fondu de sortie coupe aussi les interactions : l'app dessous redevient cliquable même si le nœud n'est jamais retiré. */ @keyframes cc-splash-out { to { opacity: 0; visibility: hidden; } } .cc-splash__stage { position: relative; width: var(--cc-face-w); aspect-ratio: 1792 / 2343; animation: cc-face-in var(--cc-t-in) cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes cc-face-in { from { opacity: 0; transform: scale(0.94); } } /* --- les deux moitiés ------------------------------------------------------ Chaque fichier est sur canevas plein : superposées sans décalage, elles reforment le sticker. L'animation n'a donc qu'à les translater. */ .cc-splash__half { position: absolute; inset: 0; z-index: 2; background-repeat: no-repeat; background-size: 100% 100%; will-change: transform; } .cc-splash__half--left { background-image: var(--cc-img-left); animation: cc-part-left var(--cc-t-open) cubic-bezier(0.22, 0.9, 0.24, 1) var(--cc-t-split) both; } .cc-splash__half--right { background-image: var(--cc-img-right); animation: cc-part-right var(--cc-t-open) cubic-bezier(0.22, 0.9, 0.24, 1) var(--cc-t-split) both; } @keyframes cc-part-left { to { transform: translateX(calc(var(--cc-face-w) * var(--cc-part) * -1)) rotate(-2.2deg); } } @keyframes cc-part-right { to { transform: translateX(calc(var(--cc-face-w) * var(--cc-part))) rotate(2.2deg); } } /* --- le trait de coupe ----------------------------------------------------- Ce sont ses propres lasers qui le tranchent : le trait descend l'axe de coupe juste avant que les moitiés ne s'écartent. */ .cc-splash__beam { position: absolute; z-index: 3; top: -4%; left: 50%; width: 2px; height: 108%; border-radius: 2px; background: linear-gradient( to bottom, transparent, var(--cc-laser) 12%, #fff 50%, var(--cc-laser) 88%, transparent ); box-shadow: 0 0 10px 2px rgb(242 21 59 / 0.55); transform-origin: top center; animation: cc-cut calc(var(--cc-t-split) - var(--cc-t-cut) + 260ms) ease-out var(--cc-t-cut) both; } @keyframes cc-cut { 0% { transform: translateX(-50%) scaleY(0); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateX(-50%) scaleY(1); opacity: 1; } 100% { transform: translateX(-50%) scaleY(1); opacity: 0; } } /* --- le mot-symbole -------------------------------------------------------- Posé derrière le visage, découvert par un clip-path synchronisé sur l'écartement : il naît exactement dans l'ouverture. */ .cc-splash__mark { position: absolute; z-index: 1; top: 50%; left: 50%; width: calc(var(--cc-face-w) * var(--cc-mark-w)); aspect-ratio: 1708 / 303; transform: translate(-50%, -50%); background-color: var(--cc-brand); -webkit-mask: var(--cc-img-mark) center / contain no-repeat; mask: var(--cc-img-mark) center / contain no-repeat; animation: cc-reveal var(--cc-t-open) cubic-bezier(0.22, 0.9, 0.24, 1) calc(var(--cc-t-split) + 60ms) both; } @keyframes cc-reveal { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } } /* Texte pour les lecteurs d'écran (le reste est purement décoratif). */ .cc-splash__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================================ Variante statique — le visage entier, CoCoach dessous.
========================================================================== */ .cc-splash--static .cc-splash__half, .cc-splash--static .cc-splash__beam { animation: none; } .cc-splash--static .cc-splash__beam { display: none; } .cc-splash--static .cc-splash__mark { top: calc(100% + 7%); z-index: 1; transform: translate(-50%, 0); clip-path: none; animation: cc-mark-rise 420ms cubic-bezier(0.2, 0.8, 0.3, 1) 220ms both; } @keyframes cc-mark-rise { from { opacity: 0; transform: translate(-50%, 10px); } } /* Le mot passe sous le visage : il faut de la place en bas de la scène. */ .cc-splash--static .cc-splash__stage { margin-bottom: calc(var(--cc-face-w) * 0.22); } /* ============================================================================ Mouvement réduit — on garde la composition statique et un simple fondu. Le fondu de sortie reste actif, sinon l'écran ne partirait jamais. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .cc-splash__half, .cc-splash__beam, .cc-splash__stage { animation: none !important; } .cc-splash__beam { display: none; } .cc-splash__mark { top: calc(100% + 7%); transform: translate(-50%, 0); clip-path: none; animation: none !important; } .cc-splash__stage { margin-bottom: calc(var(--cc-face-w) * 0.22); } .cc-splash { animation-duration: 200ms; animation-delay: 900ms; } }