/**
 * PCTechComVn — Animations Library
 * Child Theme CSS Module
 * Version: 1.0.0 (Sprint 0)
 *
 * Tất cả @keyframes của website được khai báo ở đây.
 * Các component chỉ cần reference animation-name, không tự định nghĩa lại.
 */

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-rotate {
  opacity: 0;
  transform: perspective(600px) rotateY(-15deg) translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-rotate.visible {
  opacity: 1;
  transform: perspective(600px) rotateY(0) translateX(0);
}

/* Stagger delay cho nhóm phần tử */
.stagger > * { transition-delay: calc(var(--i, 0) * 0.1s); }

/* ── Ticker / Marquee ── */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Button Shimmer ── */
@keyframes shimmer {
  0%       { left: -100%; }
  50%, 100% { left: 150%; }
}

/* ── Pulse Dot (Live indicator) ── */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ── FAB Phone Bounce ── */
@keyframes fabBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── FAB Ring ── */
@keyframes fabRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Badge Pulse ── */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--orange-glow); }
  50%      { box-shadow: 0 0 20px 4px var(--orange-glow); }
}

/* ── Pulsing Badge ── */
@keyframes pulseBadge {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 135, 10, 0.5); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(232, 135, 10, 0); }
}

/* ── Floating Shape ── */
@keyframes shapeFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(15px, -20px) scale(1.05); }
}

/* ── Card Float (Hero float cards) ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Glow Rotate (Gradient border) ── */
@keyframes glowRotate {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ── Band Shine (Highlight bands) ── */
@keyframes bandShine {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ── Counter (JS-driven, class added by counter.js) ── */
.count-up {
  display: inline-block;
  transition: none; /* JS handles the counting, no CSS transition needed */
}

/* ── Ken Burns (Hero background image) ── */
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -1%); }
}

/* ── Reviews Marquee ── */
@keyframes reviewsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Brands Marquee ── */
@keyframes brandsTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Icon Bounce (Service cards) ── */
@keyframes iconBounce {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Card Icon Hover Bounce ── */
@keyframes cardIconBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px) scale(1.12); }
}

/* ── Map Pin Pulse ── */
@keyframes mapPinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 135, 10, 0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(232, 135, 10, 0); }
}

/* ── Pricing Featured Pulse ── */
@keyframes pricingPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(232, 135, 10, 0.2); }
  50%      { box-shadow: 0 12px 40px rgba(232, 135, 10, 0.35); }
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-track,
  .partners-track,
  .brands-track,
  .reviews-track {
    animation: none !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-rotate {
    opacity: 1 !important;
    transform: none !important;
  }
}