body,body *{transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease,text-shadow .4s ease} .fade-in{opacity:0;animation:fadeIn .4s ease-out forwards} .fade-out{opacity:1;animation:fadeOut .3s ease-in forwards} @keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-4px)} } .slide-up { animation:slideUp .45s ease-out both;} .slide-down { animation:slideDown .45s ease-out both;} .zoom-in { animation:zoomIn .35s ease-out both;} .zoom-out { animation:zoomOut .35s ease-in both;} @keyframes slideUp { from { opacity:0;transform:translateY(12px);} to { opacity:1;transform:none;} } @keyframes slideDown { from { opacity:0;transform:translateY(-12px);} to { opacity:1;transform:none;} } @keyframes zoomIn { from { opacity:0;transform:scale(0.96);} to { opacity:1;transform:scale(1);} } @keyframes zoomOut { from { opacity:1;transform:scale(1);} to { opacity:0;transform:scale(0.96);} } .hover-lift{transition:transform .25s ease,box-shadow .25s ease} .hover-lift:hover{transform:translateY(-3px);box-shadow:0 4px 12px #00000026} .glow{animation:candleGlow 2.4s ease-in-out infinite alternate} @keyframes candleGlow { 0%,100%{filter:drop-shadow(0 0 2px #f0d27844)} 50%{filter:drop-shadow(0 0 6px #f0d27888)} } .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease} .reveal.visible{opacity:1;transform:translateY(0)} body.night .glow{animation:candleFlicker 3s ease-in-out infinite alternate}