/* ========================================================= Animation d'entrée : le logo porte Jouée une seule fois par session, passable au clic, désactivée avec prefers-reduced-motion (voir js/intro.js). ========================================================= */ /* L'écran d'intro est masqué par défaut. Un script inline dans le ajoute la classe .intro-pending sur uniquement si l'animation doit être jouée, ce qui évite tout flash au retour sur l'accueil. */ #intro-screen { display: none; position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vh, 2.5rem); overflow: hidden; cursor: pointer; background: transparent; } .intro-pending #intro-screen { display: flex; } .intro-pending body { overflow: hidden; } /* Le fond ivoire est peint par une ombre portée géante autour de l'embrasure (.intro-doorway). L'embrasure elle même reste transparente : c'est par là qu'on aperçoit la page d'accueil quand le battant s'ouvre. */ .intro-logo { position: relative; font-size: clamp(4.5rem, 16vw, 11rem); opacity: 0; } .intro-logo .logo-word { position: relative; z-index: 2; } .intro-logo .logo-mark { perspective: 900px; perspective-origin: 20% 50%; } .intro-logo .logo-eave { z-index: 2; } .intro-doorway { position: absolute; left: 80%; top: 14%; width: 20%; height: 86%; z-index: 1; box-shadow: 0 0 0 300vmax var(--ivoire); } .intro-leaf { position: absolute; left: 80%; top: 14%; width: 20%; height: 86%; z-index: 3; background: var(--profondeur); transform-origin: left center; transform: rotateY(0deg); backface-visibility: visible; will-change: transform; } .intro-signature { position: relative; z-index: 2; margin: 0; font-size: clamp(0.85rem, 2vw, 1.15rem); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brun); text-align: center; opacity: 0; } .intro-skip { position: absolute; z-index: 2; bottom: clamp(1.5rem, 5vh, 3rem); left: 50%; transform: translateX(-50%); padding: 0.5rem 1rem; border: 0; background: transparent; font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--terre); cursor: pointer; opacity: 0; } /* ---------- Déroulé ---------- 0 à 300 ms : fondu du logo et de la signature 300 à 700 ms : pause de lecture 700 à 1200 ms : le battant pivote (porte vue de dessus) 1200 à 1600 ms : ouverture complète, la page apparaît dans l'embrasure 1600 à 2000 ms : dissolution de l'écran d'intro */ .is-playing .intro-logo { animation: introFadeIn 0.3s var(--ease) forwards; } .is-playing .intro-signature { animation: introFadeIn 0.3s var(--ease) 0.1s forwards; } .is-playing .intro-skip { animation: introFadeIn 0.4s var(--ease) 0.5s forwards; } .is-playing .intro-leaf { animation: introOpenDoor 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.7s forwards; } .is-playing .intro-logo .logo-word, .is-playing .intro-logo .logo-eave, .is-playing .intro-signature { animation-name: introFadeIn, introSoften; animation-duration: 0.3s, 0.5s; animation-delay: 0s, 0.9s; animation-fill-mode: forwards, forwards; animation-timing-function: var(--ease), var(--ease); } #intro-screen.is-playing { animation: introLeave 0.4s var(--ease) 1.6s forwards; } #intro-screen.is-skipped { animation: introLeave 0.25s var(--ease) forwards; } #intro-screen.is-done { display: none !important; } @keyframes introFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes introSoften { to { opacity: 0.55; } } @keyframes introOpenDoor { from { transform: rotateY(0deg); } to { transform: rotateY(-108deg); } } @keyframes introLeave { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.035); pointer-events: none; } } /* Réduction des animations : l'écran d'intro n'est jamais affiché. Le script inline vérifie aussi cette préférence, ceci est une sécurité. */ @media (prefers-reduced-motion: reduce) { #intro-screen, .intro-pending #intro-screen { display: none !important; } .intro-pending body { overflow: auto; } }