/* ═══════════════════════════════════════════════
   animations.css — Keyframes & Page Animations
   ═══════════════════════════════════════════════ */

/* ── AOS Overrides ── */
[data-aos] { will-change: transform, opacity; }

/* ── Page Load Fade-in ── */
body {
  animation: bodyFadeIn 0.5s ease forwards;
}
@keyframes bodyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Floating / Pulse effects ── */
@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(74,124,246,0.2); }
  50%       { box-shadow: 0 0 40px rgba(74,124,246,0.5); }
}

/* ── Slide-in from left ── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Slide-in from right ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Count-up effect wrapper ── */
.pv-count-up { display: inline-block; }

/* ── Hover lift utility ── */
.pv-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pv-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* ── Smooth scroll progress bar ── */
#progressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pv-blue), #6A9CF8);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(74,124,246,0.6);
}

/* ── Skeleton loading ── */
.pv-skeleton {
  background: linear-gradient(90deg, var(--pv-dark-3) 25%, var(--pv-dark-4) 50%, var(--pv-dark-3) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Particle dot decorations ── */
.pv-dot-decoration {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--pv-blue);
  border-radius: 50%;
  opacity: 0.4;
  animation: dotFloat 6s ease-in-out infinite;
}
@keyframes dotFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  50%       { transform: translateY(-20px) scale(1.5); opacity: 0.7; }
}