/* ================================================
   animations.css — Scroll Reveal & Skeleton
   ================================================ */

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s !important; }
.reveal-delay-2 { transition-delay: .2s !important; }
.reveal-delay-3 { transition-delay: .3s !important; }
.reveal-delay-4 { transition-delay: .4s !important; }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-2) 50%, var(--bg-3) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.6s infinite; border-radius: var(--r-sm); }
@keyframes skeleton-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Pulse glow */
@keyframes glowPulse { 0%,100%{box-shadow:0 0 0 0 rgba(77,159,255,.3)} 50%{box-shadow:0 0 20px 6px rgba(77,159,255,.1)} }
.glow-pulse { animation: glowPulse 2.5s infinite; }

/* Float */
@keyframes floatAnim { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float-anim { animation: floatAnim 3s ease-in-out infinite; }

/* Spin */
@keyframes spin { to{transform:rotate(360deg)} }
.spin { animation: spin 1s linear infinite; }

/* Bounce */
@keyframes bounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} 70%{transform:translateY(-4px)} }
.bounce { animation: bounce .8s ease; }

/* Fade in */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.fade-in { animation: fadeIn .4s ease forwards; }

/* Slide in from right */
@keyframes slideInRight { from{transform:translateX(20px);opacity:0} to{transform:none;opacity:1} }
.slide-in-right { animation: slideInRight .35s ease forwards; }