/* ════════════════════════════════════════════════════════
   CHAPAR v2.0 — ANIMATIONS CSS
   ════════════════════════════════════════════════════════ */

/* ── AOS override for RTL ────────────────────────────── */
[data-aos="fade-left"] {
  transform: translate3d(-40px, 0, 0);
}
[data-aos="fade-right"] {
  transform: translate3d(40px, 0, 0);
}
[data-aos].aos-animate {
  transform: translate3d(0, 0, 0);
}

/* ── Gradient background shift on scroll ─────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at var(--mx, 50%) var(--my, 30%),
      rgba(37, 99, 235, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.5s;
}

/* ── Neon glow pulse ─────────────────────────────────── */
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(37,99,235,0.3), 0 0 40px rgba(37,99,235,0.15); }
  50%      { box-shadow: 0 0 35px rgba(37,99,235,0.5), 0 0 70px rgba(37,99,235,0.2); }
}

/* ── Floating animation ──────────────────────────────── */
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* ── Shine sweep ─────────────────────────────────────── */
@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Fade in up (utility) ────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Counter number flip ─────────────────────────────── */
@keyframes num-flip {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll reveal utility ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ── Parallax container ──────────────────────────────── */
.parallax-slow  { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* ── Background color-shift on scroll ───────────────── */
.section-shift-1 { background-color: #030712; }
.section-shift-2 { background-color: #040a18; }
.section-shift-3 { background-color: #050c1a; }

/* ── Card shimmer effect ─────────────────────────────── */
.feat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.03) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
.feat-card:hover::after {
  opacity: 1;
  animation: shine 1.2s ease;
}

/* ── Hero canvas particles ───────────────────────────── */
@keyframes canvas-particle {
  0%   { opacity: 0; }
  20%  { opacity: 0.7; }
  80%  { opacity: 0.4; }
  100% { opacity: 0; }
}

/* ── Typed cursor blink ──────────────────────────────── */
.typed-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-inline-start: 2px;
  vertical-align: middle;
  animation: cursor-blink 0.9s ease-in-out infinite;
}
@keyframes cursor-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

/* ── Progress bar transition ─────────────────────────── */
#scroll-progress {
  transition: width 0.08s linear;
}

/* ── Phone frame glow pulse ──────────────────────────── */
.tg-frame {
  animation: phone-float 5s ease-in-out infinite, glow-pulse 4s ease-in-out infinite 1s;
}

/* ── Download card hover shine ───────────────────────── */
.dl-card--active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(37,99,235,0.08), transparent 60%);
  pointer-events: none;
}

/* ── Step number glow ────────────────────────────────── */
.step-num {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ── Orbit dots counter-rotate to stay upright ───────── */
.ss-orbit-1 .ss-orb-dot { animation: ring-spin 8s linear infinite reverse; }
.ss-orbit-2 .ss-orb-dot { animation: ring-spin 13s linear infinite; }
.ss-orbit-3 .ss-orb-dot { animation: ring-spin 19s linear infinite reverse; }
@keyframes ring-spin { from{transform:translateX(-50%) translateY(-50%) rotate(0)} to{transform:translateX(-50%) translateY(-50%) rotate(360deg)} }

/* ── Scroll snap sections (optional enhancement) ─────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}