/* FILE: /css/animations.css */

/* === REVEAL ON SCROLL === */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--ease-slow), transform var(--ease-slow); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity var(--ease-slow), transform var(--ease-slow); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity var(--ease-slow), transform var(--ease-slow); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity var(--ease-slow), transform var(--ease-slow); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* STAGGER DELAYS */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }
[data-delay="7"] { transition-delay: 0.7s; }

/* === SKELETON LOADING === */
.skeleton { background: linear-gradient(90deg, var(--grey-200) 25%, var(--grey-300) 50%, var(--grey-200) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === SPIN === */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 20px; height: 20px; border: 2px solid var(--grey-300); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* === FADE IN === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.4s ease forwards; }

/* === FLOAT (decorative) === */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* === GOLD PULSE (for badges/urgency) === */
@keyframes goldPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,169,110,0.4); } 50% { box-shadow: 0 0 0 6px rgba(201,169,110,0); } }
.pulse-gold { animation: goldPulse 2s infinite; }

/* === NAVBAR SCROLL CLASS === */
.navbar.scrolled { background: rgba(13,13,13,0.97) !important; border-bottom: 1px solid var(--black-border); }

/* === MOBILE MENU TRANSITIONS === */
.mobile-menu { transition: opacity var(--ease-fast), visibility var(--ease-fast); }
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu:not(.open) { opacity: 0; visibility: hidden; }

/* === SHAKE (for invalid inputs) === */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.shake { animation: shake 0.5s ease; }