/* ═══════════════════════════════════════════
   AKOLADS — animations.css
   Keyframes · Glitch · Gradients · Effects
═══════════════════════════════════════════ */

/* ── Gradient shift ─────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Glitch effect ──────────────────────── */
.glitch {
  position: relative;
  display: inline-block;
  font-family: inherit;
  font-weight: inherit;
  /* Gradient text base */
  background: linear-gradient(135deg, #4555FE, #6B7BFF);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

/* Glitch pseudo-elements */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glitch::before {
  animation: glitchTop 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translateX(-3px);
  opacity: 0.8;
  /* Tint toward red for RGB split */
  background: linear-gradient(135deg, #a855f7, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
}

.glitch::after {
  animation: glitchBottom 4s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translateX(3px);
  opacity: 0.8;
  background: linear-gradient(135deg, #60a5fa, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes glitchTop {
  0%   { transform: translateX(0); opacity: 0; }
  2%   { transform: translateX(-4px); opacity: 0.85; }
  4%   { transform: translateX(4px);  opacity: 0.85; }
  6%   { transform: translateX(0);    opacity: 0; }
  /* Trigger again at 25% */
  25%  { transform: translateX(0); opacity: 0; }
  26%  { transform: translateX(-2px); opacity: 0.75; clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); }
  27%  { transform: translateX(2px);  opacity: 0; }
  /* Another hit at 50% */
  50%  { opacity: 0; }
  51%  { transform: translateX(-5px); opacity: 0.8; clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%); }
  52%  { transform: translateX(3px);  opacity: 0.6; }
  53%  { transform: translateX(0);    opacity: 0; }
  100% { opacity: 0; }
}

@keyframes glitchBottom {
  0%   { transform: translateX(0); opacity: 0; }
  2%   { transform: translateX(4px);  opacity: 0.85; }
  4%   { transform: translateX(-4px); opacity: 0.85; }
  6%   { transform: translateX(0);    opacity: 0; }
  25%  { opacity: 0; }
  26%  { transform: translateX(2px);  opacity: 0.75; clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
  27%  { transform: translateX(-2px); opacity: 0; }
  50%  { opacity: 0; }
  51%  { transform: translateX(5px);  opacity: 0.8; clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
  52%  { transform: translateX(-3px); opacity: 0.6; }
  53%  { transform: translateX(0);    opacity: 0; }
  100% { opacity: 0; }
}

/* ── Ambient glow float ─────────────────── */
@keyframes glowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 15px) scale(0.95); }
}

/* ── Pulse (badge dot) ──────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 6px var(--clr-violet); opacity: 1; }
  50%       { box-shadow: 0 0 14px var(--clr-violet); opacity: 0.6; }
}

/* ── Scroll bounce ──────────────────────── */
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── FAQ reveal ─────────────────────────── */
@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Spinner ────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Shimmer (skeleton loader feel) ────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.1)  50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ── Gradient border rotation ───────────── */
@keyframes rotateBorder {
  from { --border-angle: 0turn; }
  to   { --border-angle: 1turn; }
}

/* ── Number counter pop ─────────────────── */
@keyframes numPop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Card entrance ──────────────────────── */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Hero title character stagger ────────── */
@keyframes charReveal {
  from {
    opacity: 0;
    transform: translateY(1em) rotate(4deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
    filter: blur(0);
  }
}

/* ── Floating dots (decorative) ─────────── */
@keyframes floatDot {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ── Typewriter cursor blink ─────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ══════════════════════════════════════════
   HOVER SHINE EFFECT on cards
══════════════════════════════════════════ */
.card--service,
.why-card,
.testi-card {
  --shine-x: 50%;
  --shine-y: 50%;
}

.card--service:hover,
.why-card:hover,
.testi-card:hover {
  /* Subtle radial highlight tracking mouse via JS */
  background: radial-gradient(
    320px circle at var(--shine-x) var(--shine-y),
    rgba(69, 85, 254, 0.08) 0%,
    rgba(255,255,255,0.03) 40%,
    transparent 70%
  );
}

/* ══════════════════════════════════════════
   FOCUS STYLES (accessibility)
══════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid rgba(124,58,237,0.8);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-fade,
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
  }

  html { scroll-behavior: auto; }
}