/* ============================================================
   animations.css — Scroll Reveal & Hover Animations
   浙江网邦科技有限公司 Corporate Website
   ============================================================ */

/* ── Scroll Reveal Base ─────────────────────────────────────── */

/**
 * .reveal — Applied to elements that should animate into view.
 * Initial state: hidden (opacity 0, shifted down 24px).
 * The .is-visible class is added by JS (IntersectionObserver).
 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Reveal Variants ────────────────────────────────────────── */

/* Slide in from left */
.reveal--left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from right */
.reveal--right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade only (no movement) */
.reveal--fade {
  opacity: 0;
  transform: none;
  transition: opacity 0.6s ease;
}

.reveal--fade.is-visible {
  opacity: 1;
}

/* Scale up */
.reveal--scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Reveal Group (staggered children) ─────────────────────── */

/**
 * .reveal-group — Parent wrapper.
 * Direct children get staggered animation delays.
 * The JS observer adds .is-visible to the group wrapper,
 * which cascades to children via CSS sibling/child selectors.
 */
.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-group.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for up to 12 children */
.reveal-group.is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal-group.is-visible > *:nth-child(2)  { transition-delay: 0.08s; }
.reveal-group.is-visible > *:nth-child(3)  { transition-delay: 0.16s; }
.reveal-group.is-visible > *:nth-child(4)  { transition-delay: 0.24s; }
.reveal-group.is-visible > *:nth-child(5)  { transition-delay: 0.32s; }
.reveal-group.is-visible > *:nth-child(6)  { transition-delay: 0.40s; }
.reveal-group.is-visible > *:nth-child(7)  { transition-delay: 0.48s; }
.reveal-group.is-visible > *:nth-child(8)  { transition-delay: 0.56s; }
.reveal-group.is-visible > *:nth-child(9)  { transition-delay: 0.64s; }
.reveal-group.is-visible > *:nth-child(10) { transition-delay: 0.72s; }
.reveal-group.is-visible > *:nth-child(11) { transition-delay: 0.80s; }
.reveal-group.is-visible > *:nth-child(12) { transition-delay: 0.88s; }

/* ── Number Counter ─────────────────────────────────────────── */

/**
 * [data-count] — Elements whose text content is animated from 0.
 * The JS handles the numeric animation; CSS only provides the
 * visual styling cues.
 */
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

[data-count].is-counting {
  color: inherit;
}

/* ── Hover Animations ───────────────────────────────────────── */

/* Float on hover (cards, icons) */
.hover-float {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-float:hover {
  transform: translateY(-6px);
}

/* Pulse icon */
@keyframes pulse-icon {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}

.hover-pulse:hover .hover-pulse__icon {
  animation: pulse-icon 0.5s ease;
}

/* Shimmer effect for buttons / badges */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.btn--shimmer {
  position: relative;
  overflow: hidden;
}

.btn--shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.25) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

/* ── Page Transition ────────────────────────────────────────── */
@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: page-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(37,99,235,.2);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ── Reduced Motion ─────────────────────────────────────────── */
/**
 * Respect user's preference for reduced motion.
 * All reveal / counter animations are disabled.
 */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--fade,
  .reveal--scale,
  .reveal-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-group.is-visible > *,
  .reveal.is-visible,
  .reveal--left.is-visible,
  .reveal--right.is-visible,
  .reveal--fade.is-visible,
  .reveal--scale.is-visible {
    transition: none;
  }

  .btn--shimmer::after {
    animation: none;
  }

  .spinner {
    animation: spin 1.4s linear infinite;
  }

  .hover-float:hover {
    transform: none;
  }
}