/* ============================================
   Mass PC Repair — Animations
   ce-animations.css
   ============================================ */

/* === Keyframes === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
  40%            { transform: scale(1); opacity: 1; }
}
@keyframes slideDown {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 600px; opacity: 1; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,93,38,.4); }
  50%       { box-shadow: 0 0 0 10px rgba(232,93,38,0); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes waveY {
  0%, 100% { transform: translateY(0px); }
  33%       { transform: translateY(-6px); }
  66%       { transform: translateY(4px); }
}

/* === Scroll Reveal Base === */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .55s cubic-bezier(.4,0,.2,1),
              transform .55s cubic-bezier(.4,0,.2,1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .1s; }
.stagger > *:nth-child(3) { transition-delay: .2s; }
.stagger > *:nth-child(4) { transition-delay: .3s; }
.stagger > *:nth-child(5) { transition-delay: .4s; }
.stagger > *:nth-child(6) { transition-delay: .5s; }

/* === Hero Entrance === */
.hero-animate-1 { animation: fadeInLeft .8s .1s both cubic-bezier(.4,0,.2,1); }
.hero-animate-2 { animation: fadeInLeft .8s .25s both cubic-bezier(.4,0,.2,1); }
.hero-animate-3 { animation: fadeInLeft .8s .4s both cubic-bezier(.4,0,.2,1); }
.hero-animate-4 { animation: fadeInLeft .8s .55s both cubic-bezier(.4,0,.2,1); }
.hero-animate-5 { animation: fadeInLeft .8s .7s both cubic-bezier(.4,0,.2,1); }
.hero-img-anim  { animation: fadeInRight .9s .3s both cubic-bezier(.4,0,.2,1); }

/* === Floating Icon === */
.float-anim   { animation: float 4s ease-in-out infinite; }
.float-anim-2 { animation: float 5s .5s ease-in-out infinite; }
.float-anim-3 { animation: float 3.5s 1s ease-in-out infinite; }

/* === Pulse CTA === */
.pulse-anim { animation: borderPulse 2s ease-in-out infinite; }

/* === Loading Dots === */
.loading-dots { display: inline-flex; gap: 4px; align-items: center; }
.loading-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }

/* === Skeleton Shimmer === */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* === Service Icon Hover === */
.service-icon-wrap {
  position: relative;
  display: inline-flex;
}
.service-icon-wrap::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  opacity: 0;
  transition: opacity .3s;
  z-index: -1;
  filter: blur(8px);
}
.service-icon-wrap:hover::after { opacity: .3; }

/* === Counter Number Animation === */
.counter-val { animation: countUp .5s ease both; }

/* === Gradient Text === */
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-warm {
  background: linear-gradient(135deg, #f59e0b 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Hover Lift === */
.hover-lift {
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* === Badge Spin === */
.icon-spin-hover:hover i { animation: spin .6s linear; }

/* === Progress Bar Animation === */
.progress-bar-anim {
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.progress-bar-anim.animated { width: var(--target-width, 70%); }

/* === Check animation on scroll === */
.check-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(22,163,74,.12);
  color: #16a34a;
  font-size: .7rem;
  flex-shrink: 0;
}

/* === Subtle background dot pattern === */
.dot-bg {
  background-image: radial-gradient(circle, rgba(26,58,92,.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* === Gradient border card === */
.gradient-border {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  z-index: 1;
}
.gradient-border::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: calc(var(--radius-lg) + 1.5px);
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.gradient-border:hover::before { opacity: 1; }

/* === Wave divider animation === */
.wave-animate path { animation: waveY 6s ease-in-out infinite; }

/* === Notification Badge bounce === */
@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  25%       { transform: scale(1.2); }
  75%       { transform: scale(.95); }
}
.badge-bounce { animation: badgeBounce .5s ease; }

/* === Transition Helpers === */
.transition-fast { transition: all .15s ease; }
.transition-mid  { transition: all .28s cubic-bezier(.4,0,.2,1); }
.transition-slow { transition: all .5s cubic-bezier(.4,0,.2,1); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}