/* ═══════════════════════════════════════════════════════════
   DESERT CITY RP — animations.css
═══════════════════════════════════════════════════════════ */

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}
@keyframes spinRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0.6; }
  66%  { transform: translateY(-80px) translateX(-10px); opacity: 0.3; }
  100% { transform: translateY(-120px) translateX(5px); opacity: 0; }
}
@keyframes shardGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(228,208,126,0.05); }
  50%       { box-shadow: 0 0 40px rgba(228,208,126,0.12); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.shard:hover { animation: shardGlow 2s ease-in-out infinite; }
.hero-title-desert { display: inline-block; animation: floatY 4s ease-in-out 2s infinite; }

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Particles */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  animation: particleFloat var(--dur, 4s) var(--delay, 0s) ease-in infinite;
  opacity: 0;
}

/* Section entrance on nav click */
@keyframes sectionEntrance {
  from { opacity: 0.7; transform: translateY(var(--nav-dir, 40px)); }
  to   { opacity: 1;   transform: translateY(0); }
}