/* ===================================================================== ANIMATIONS ===================================================================== */ /* --------------------------------------------------------------- Apparition au défilement La classe .reveal est posée dans le HTML, .is-in est ajoutée par IntersectionObserver (js/main.js). --------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--delay, 0ms); } .reveal.is-in { opacity: 1; transform: none; } /* --------------------------------------------------------------- Arrivée de l'enveloppe --------------------------------------------------------------- */ @keyframes envelopeIn { from { opacity: 0; transform: translateY(34px) scale(.94); } to { opacity: 1; transform: none; } } /* « backwards » et non « both » : une fois l'arrivée terminée, la scène rend la main au transform de style.css (le recentrage du carton). */ .opening__stage { animation: envelopeIn 1.1s var(--ease) backwards; } /* Le sceau respire doucement pour inviter au clic */ @keyframes sealPulse { 0%, 100% { box-shadow: inset 0 -2px 6px rgba(var(--gold-shade-rgb), .45), inset 0 2px 5px rgba(255, 255, 255, .5), 0 8px 22px rgba(var(--gold-shade-rgb), .35), 0 0 0 0 rgba(var(--gold-rgb), .5); } 70% { box-shadow: inset 0 -2px 6px rgba(var(--gold-shade-rgb), .45), inset 0 2px 5px rgba(255, 255, 255, .5), 0 8px 22px rgba(var(--gold-shade-rgb), .35), 0 0 0 18px rgba(var(--gold-rgb), 0); } } .envelope__seal { animation: sealPulse 2.6s ease-out 1.4s infinite; } .opening.is-opening .envelope__seal { animation: none; } /* Disparition de l'ensemble une fois le carton sorti. On repart du décalage de recentrage (--stage-shift) pour éviter tout saut au moment où la scène s'efface. */ @keyframes stageOut { from { opacity: 1; transform: translateY(var(--stage-shift, 0%)) scale(1); } to { opacity: 0; transform: translateY(calc(var(--stage-shift, 0%) - 8%)) scale(1.14); } } .opening.is-gone .opening__stage { animation: stageOut .9s var(--ease) both; } /* Apparition douce de l'invite « Touchez pour continuer » */ @keyframes hintIn { from { opacity: 0; transform: translateY(6px); } to { opacity: .85; transform: none; } } /* --------------------------------------------------------------- Zoom lent sur la photo du hero (effet Ken Burns) --------------------------------------------------------------- */ @keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.12); } } .hero__bg { animation: kenBurns 26s ease-out both; } /* --------------------------------------------------------------- Indicateur de défilement --------------------------------------------------------------- */ @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; opacity: .3; } 45% { transform: scaleY(1); transform-origin: top; opacity: 1; } 55% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: .3; } } .hero__scroll b { animation: scrollLine 2.4s ease-in-out infinite; } /* --------------------------------------------------------------- Pétales flottants sur l'écran d'ouverture --------------------------------------------------------------- */ .opening__petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .opening__petals i { position: absolute; top: -8%; width: 12px; height: 12px; border-radius: 50% 0 50% 50%; background: linear-gradient(135deg, var(--gold-light), rgba(var(--gold-light-rgb), .25)); opacity: 0; animation: petalFall linear infinite; } @keyframes petalFall { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 10% { opacity: .85; } 90% { opacity: .55; } 100% { opacity: 0; transform: translateY(112vh) rotate(420deg); } } /* --------------------------------------------------------------- Barres du bouton musique --------------------------------------------------------------- */ @keyframes bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } .music.is-playing .music__bars i { height: 17px; animation: bar .95s ease-in-out infinite; } .music.is-playing .music__bars i:nth-child(2) { animation-delay: .18s; } .music.is-playing .music__bars i:nth-child(3) { animation-delay: .36s; } .music.is-playing .music__bars i:nth-child(4) { animation-delay: .54s; } /* Musique bloquée par le navigateur : on attire l'œil */ @keyframes nudge { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: 0 0 0 10px rgba(var(--gold-rgb), .22), var(--shadow-md); } } .music.is-blocked { animation: nudge 1.8s ease-in-out infinite; } /* --------------------------------------------------------------- Compte à rebours : battement à chaque seconde --------------------------------------------------------------- */ @keyframes tick { from { transform: translateY(-5px); opacity: .35; } to { transform: none; opacity: 1; } } .count__num.is-tick { animation: tick .45s var(--ease); } /* --------------------------------------------------------------- Quiz : la bonne réponse se signale --------------------------------------------------------------- */ @keyframes rightPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--sage-rgb), .55); } 100% { box-shadow: 0 0 0 14px rgba(var(--sage-rgb), 0); } } .quiz__answer.is-right { animation: rightPulse .9s ease-out; } @keyframes wrongShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .quiz__answer.is-wrong { animation: wrongShake .45s ease-in-out; } @keyframes scoreIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } .quiz__score { animation: scoreIn .7s var(--ease) both; } /* --------------------------------------------------------------- Carte agenda : légère bascule au survol --------------------------------------------------------------- */ .cal__card { transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .cal__card:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: var(--shadow-lg); } /* --------------------------------------------------------------- Pastilles du dress code : elles apparaissent l'une après l'autre --------------------------------------------------------------- */ @keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } } .reveal.is-in .dress__chip { animation: chipIn .7s var(--ease) both; } .reveal.is-in .dress__chip:nth-child(2) { animation-delay: .09s; } .reveal.is-in .dress__chip:nth-child(3) { animation-delay: .18s; } .reveal.is-in .dress__chip:nth-child(4) { animation-delay: .27s; } .reveal.is-in .dress__chip:nth-child(5) { animation-delay: .36s; } .reveal.is-in .dress__chip:nth-child(6) { animation-delay: .45s; } /* --------------------------------------------------------------- Visionneuse plein écran --------------------------------------------------------------- */ @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lbImg { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .lightbox:not([hidden]) { animation: lbIn .35s ease both; } .lightbox__fig img { animation: lbImg .45s var(--ease) both; } /* --------------------------------------------------------------- Confort de lecture : on respecte le réglage système « réduire les animations » --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .opening__petals { display: none; } }