/* ============================================================
   DEVIKA — animations.css
   Keyframes + scroll-reveal utility classes
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(8deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(18px) translateX(10px); }
}
@keyframes floatC {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-12deg); }
}
@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.02); }
}
@keyframes floatCard1 {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(-4deg); }
}
@keyframes floatCard2 {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}
@keyframes floatCard3 {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-12px) rotate(-7deg); }
}
@keyframes floatCard4 {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.6); }
}
@keyframes gridShift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 64px 64px, 64px 64px; }
}
@keyframes dashMove {
  to { stroke-dashoffset: -1000; }
}

/* Floating particles */
.particle {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0.5;
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 0.6; }
  85% { opacity: 0.6; }
  100% { transform: translateY(-160px) scale(0.4); opacity: 0; }
}

/* ---------- Scroll reveal base ---------- */
.reveal {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: 0.9s;
  transition-timing-function: var(--ease-out);
  will-change: opacity, transform;
}
.reveal.fade-up { transform: translateY(40px); }
.reveal.fade-left { transform: translateX(-50px); }
.reveal.fade-right { transform: translateX(50px); }
.reveal.scale { transform: scale(0.92); }
.reveal.blur { filter: blur(14px); transform: translateY(30px); }

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger delays */
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }
.d6 { transition-delay: 0.48s; }

/* ---------- Image reveal clip ---------- */
.img-reveal { overflow: hidden; }
.img-reveal img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
}
.img-reveal.in img { clip-path: inset(0 0 0 0); }

/* ---------- Marquee (subtle) ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 40px; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Animated underline link ---------- */
.link-underline {
  position: relative;
  font-weight: 600;
  color: var(--accent);
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px;
  width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Hover arrow nudge ---------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; color: var(--accent);
}
.arrow-link i { transition: transform 0.4s var(--ease-out); }
.arrow-link:hover i { transform: translateX(6px); }

/* ---------- Nav link slide ---------- */
.nav-anim a { transition: transform 0.4s var(--ease-out); }

/* ---------- Progress bar (scroll) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  z-index: 1040; transition: width 0.1s linear;
}

/* ---------- Service number hover ---------- */
.svc-num-anim {
  display: inline-block;
  transition: transform 0.5s var(--ease-out), color 0.5s;
}
.card-x:hover .svc-num-anim { transform: translateY(-4px); }

/* ---------- Blob pulse ---------- */
@keyframes blobPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.blob.pulse { animation: blobPulse 12s var(--ease-smooth) infinite; }

/* ---------- Magnetic hint ---------- */
.magnetic { will-change: transform; transition: transform 0.2s var(--ease-out); }