/* ================================================================
   ANIMATIONS
   ================================================================ */

/* ── REVEAL ON SCROLL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(.94); }
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { transform: none; opacity: 1; }

/* Stagger delays */
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .18s; }
.d3 { transition-delay: .26s; }
.d4 { transition-delay: .34s; }
.d5 { transition-delay: .42s; }

/* ── PAGE TRANSITION ─────────────────────────────────────────── */
.page-enter { animation: pageEnter .4s ease both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── SKELETON LOADER ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .float, .hero-bg { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .hero-bg { transform: none !important; }
}