/* ══════════════════════════════════════════════════
   ApeClaw motion primitives
   ══════════════════════════════════════════════════ */

/* Section reveal — slides up and fades in */
@keyframes acRevealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Counter number "pop" on arrival */
@keyframes acCounterPop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Horizontal divider sweep */
@keyframes acLineSweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Progress bar shimmer sweep */
@keyframes acShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Scale in from center */
@keyframes acScaleIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Gentle bounce for scroll hints */
@keyframes acBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* CTA glow pulse */
@keyframes acGlowPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(207,255,4,0.10); }
  50%      { box-shadow: 0 0 24px rgba(207,255,4,0.20), 0 0 48px rgba(207,255,4,0.06); }
}

/* Magnetic tilt for cards */
@keyframes acTiltReset {
  to { transform: perspective(600px) rotateX(0) rotateY(0) scale(1); }
}

/* Particle float */
@keyframes acFloat {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.7; }
  25%      { transform: translateY(-8px) translateX(3px); opacity: 1; }
  75%      { transform: translateY(4px) translateX(-2px); opacity: 0.5; }
}

/* Gradient border spin */
@keyframes acBorderSpin {
  to { --ac-border-angle: 360deg; }
}

/* Typing cursor blink */
@keyframes acCursorBlink {
  0%, 49% { border-color: currentColor; }
  50%, 100% { border-color: transparent; }
}

/* Ripple expand */
@keyframes acRipple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(4); opacity: 0; }
}

/* ── States ─────────────────────────────── */

.ac-observe {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ac-observe.ac-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide in from left variant */
.ac-observe.ac-from-left {
  transform: translateX(-40px);
}
.ac-observe.ac-from-left.ac-visible {
  transform: translateX(0);
}

/* Slide in from right variant */
.ac-observe.ac-from-right {
  transform: translateX(40px);
}
.ac-observe.ac-from-right.ac-visible {
  transform: translateX(0);
}

/* Scale-up variant */
.ac-observe.ac-scale {
  transform: scale(0.9);
}
.ac-observe.ac-scale.ac-visible {
  transform: scale(1);
}

/* Stagger children inside a revealed container */
.ac-stagger > .ac-observe {
  transition-delay: calc(var(--ac-i, 0) * 80ms);
}

/* Faster stagger for grids */
.ac-stagger-fast > .ac-observe {
  transition-delay: calc(var(--ac-i, 0) * 45ms);
}

/* Counter pop class */
.ac-counter-pop {
  animation: acCounterPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Section divider line that sweeps in */
.ac-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207,255,4,0.25), transparent);
  transform: scaleX(0);
  opacity: 1 !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ac-visible > .ac-divider,
.ac-divider.ac-visible {
  transform: scaleX(1);
}

/* Progress bar shimmer overlay */
.ac-shimmer {
  position: relative;
  overflow: hidden;
}
.ac-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: acShimmer 2s ease-in-out infinite;
}

/* Stat shimmer bar */
.ac-stat-shimmer {
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(207,255,4,0.0) 0%,
    rgba(207,255,4,0.25) 50%,
    rgba(207,255,4,0.0) 100%
  );
  background-size: 200% 100%;
  animation: acShimmer 1.8s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s;
}
.ac-stat-shimmer.ac-active {
  opacity: 1;
}

/* Scroll hint bounce */
.ac-bounce {
  animation: acBounce 2s ease-in-out infinite;
}

/* CTA glow pulse */
.ac-glow-pulse {
  animation: acGlowPulse 3s ease-in-out infinite;
}

/* ── Magnetic tilt on hover ────────────── */
.ac-tilt {
  transition: transform 0.4s cubic-bezier(0.22, 0.68, 0, 1.2);
  will-change: transform;
}
.ac-tilt:hover {
  transform: perspective(600px) rotateX(var(--ac-ry, 0deg)) rotateY(var(--ac-rx, 0deg));
}

/* ── Interactive ripple on click ─────── */
.ac-ripple {
  position: relative;
  overflow: hidden;
}
.ac-ripple .ac-ripple-circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(207,255,4,0.15);
  pointer-events: none;
  animation: acRipple 0.6s ease-out forwards;
}

/* ── Skeleton loading placeholder ──── */
.ac-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}
.ac-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: acShimmer 1.5s ease-in-out infinite;
}

/* ── Focus ring ────────────────────────── */
.ac-focus-ring:focus-visible {
  outline: 2px solid rgba(207,255,4,0.6);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(207,255,4,0.08);
}

/* ── Tooltip ───────────────────────────── */
[data-ac-tip] {
  position: relative;
}
[data-ac-tip]::after {
  content: attr(data-ac-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  background: rgba(9,13,18,0.95);
  border: 1px solid rgba(207,255,4,0.2);
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[data-ac-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Reduced motion ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ac-observe { transition-duration: 0.01ms !important; }
  .ac-counter-pop { animation-duration: 0.01ms !important; }
  .ac-shimmer::after { animation: none !important; }
  .ac-stat-shimmer { animation: none !important; }
  .ac-bounce { animation: none !important; }
  .ac-glow-pulse { animation: none !important; }
  .ac-divider { transition-duration: 0.01ms !important; }
  .ac-skeleton::after { animation: none !important; }
  .ac-tilt { transition: none !important; }
  .ac-tilt:hover { transform: none !important; }
}