/* ==========================================================================
   KITE Nepal Technosis — Animation Stylesheet
   Scroll reveal, keyframes & micro-interactions (Pure CSS3)
   ========================================================================== */

/* ---------- Scroll reveal (toggled by animation.js via IntersectionObserver) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* Reveal directions */
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal="up"]    { transform: translateY(46px); }
[data-reveal="left"].revealed,
[data-reveal="right"].revealed,
[data-reveal="zoom"].revealed,
[data-reveal="up"].revealed { transform: none; }

/* Stagger helpers */
[data-delay="1"]{transition-delay:.08s} [data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s} [data-delay="4"]{transition-delay:.32s}
[data-delay="5"]{transition-delay:.40s} [data-delay="6"]{transition-delay:.48s}

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

@keyframes floatSlow { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-22px) rotate(4deg)} }
.animate-float-slow { animation: floatSlow 9s ease-in-out infinite; }

/* Gradient shimmer for headings */
@keyframes shimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.animate-gradient {
  background-size: 220% 220%;
  animation: shimmer 6s ease infinite;
}

/* Fade up entrance for hero content */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
.fade-up { animation: fadeUp .9s var(--ease) both; }
.fade-up.d1{animation-delay:.15s} .fade-up.d2{animation-delay:.3s} .fade-up.d3{animation-delay:.45s} .fade-up.d4{animation-delay:.6s}

/* Pulse ring for accents */
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)} 70%{box-shadow:0 0 0 18px rgba(37,99,235,0)} 100%{box-shadow:0 0 0 0 rgba(37,99,235,0)} }
.animate-pulse { animation: pulse 2.4s infinite; }

/* Underline sweep on hover */
.link-sweep { position: relative; }
.link-sweep::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: var(--brand-grad); transition: width .35s var(--ease); }
.link-sweep:hover::after { width: 100%; }

/* Card tilt shine */
.shine { position: relative; overflow: hidden; }
.shine::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.shine:hover::before { left: 140%; }

/* Blob morph background */
@keyframes blobMove { 0%,100%{border-radius:42% 58% 63% 37%/42% 44% 56% 58%} 50%{border-radius:58% 42% 37% 63%/56% 58% 42% 44%} }
.animate-blob { animation: blobMove 12s ease-in-out infinite; }

/* Count-up guard: keep numbers stable */
.stat .num { display: inline-block; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}