/* ============================================================
   HalfPriceAutoRepair — ce-animations.css
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes ce-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ce-slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ce-slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ce-slideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ce-slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ce-scalePop {
  0%   { transform: scale(0.85); opacity: 0; }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes ce-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,32,.5); }
  50%       { box-shadow: 0 0 0 12px rgba(232,160,32,0); }
}

@keyframes ce-scrollBounce {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50%       { transform: translateY(8px) translateX(-50%); }
}

@keyframes ce-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes ce-rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ce-countUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ce-barGrow {
  from { width: 0; }
  to   { width: var(--ce-target-width, 100%); }
}

@keyframes ce-flashBorder {
  0%, 100% { border-color: var(--ce-amber); }
  50%       { border-color: var(--ce-amber-light); }
}

/* ── Entry Animations ─────────────────────────────────────────── */
.ce-anim-fade-in   { animation: ce-fadeIn  .6s ease both; }
.ce-anim-slide-up  { animation: ce-slideUp .65s cubic-bezier(.16,1,.3,1) both; }
.ce-anim-slide-left{ animation: ce-slideLeft .65s cubic-bezier(.16,1,.3,1) both; }
.ce-anim-slide-right{animation: ce-slideRight .65s cubic-bezier(.16,1,.3,1) both; }
.ce-anim-scale-pop { animation: ce-scalePop .5s cubic-bezier(.34,1.56,.64,1) both; }

/* Stagger delays */
.ce-delay-1 { animation-delay: .1s; }
.ce-delay-2 { animation-delay: .2s; }
.ce-delay-3 { animation-delay: .3s; }
.ce-delay-4 { animation-delay: .4s; }
.ce-delay-5 { animation-delay: .55s; }
.ce-delay-6 { animation-delay: .7s; }
.ce-delay-7 { animation-delay: .85s; }

/* ── Hero Entrance ────────────────────────────────────────────── */
.ce-hero-eyebrow { animation: ce-slideUp .6s ease .1s both; }
.ce-hero-content h1 { animation: ce-slideUp .65s ease .25s both; }
.ce-hero-desc       { animation: ce-slideUp .65s ease .4s both; }
.ce-hero-actions    { animation: ce-slideUp .65s ease .55s both; }
.ce-hero-trust      { animation: ce-slideUp .65s ease .7s both; }

/* ── Scroll Bounce (hero arrow) ──────────────────────────────── */
.ce-hero-scroll-indicator {
  animation: ce-scrollBounce 2.2s ease-in-out infinite;
}

/* ── Pulse (CTA buttons) ─────────────────────────────────────── */
.ce-btn--pulse { animation: ce-pulse 2s ease infinite; }

/* ── Shimmer Loading State ───────────────────────────────────── */
.ce-shimmer {
  background: linear-gradient(
    90deg,
    var(--ce-offwhite) 25%,
    var(--ce-silver)   50%,
    var(--ce-offwhite) 75%
  );
  background-size: 400% 100%;
  animation: ce-shimmer 1.6s ease infinite;
  border-radius: var(--ce-radius-md);
}

/* ── Number counter spin ─────────────────────────────────────── */
.ce-stat-number.ce-counting { animation: ce-countUp .4s ease; }

/* ── Progress bar fill ───────────────────────────────────────── */
.ce-progress-fill {
  animation: ce-barGrow .8s cubic-bezier(.16,1,.3,1) forwards;
}

/* ── Card hover depth ────────────────────────────────────────── */
.ce-service-card,
.ce-article-card,
.ce-team-card {
  transition:
    transform .28s cubic-bezier(0.4,0,0.2,1),
    box-shadow .28s cubic-bezier(0.4,0,0.2,1);
}

/* ── Nav link underline ──────────────────────────────────────── */
.ce-nav-links a::after {
  transition: transform .25s ease;
}

/* ── Accordion slide ─────────────────────────────────────────── */
.ce-faq-answer {
  transition:
    max-height .4s cubic-bezier(0.4,0,0.2,1),
    padding .35s ease,
    opacity .3s ease;
  opacity: 0;
}
.ce-faq-item.ce-open .ce-faq-answer { opacity: 1; }

/* ── Image gallery zoom ──────────────────────────────────────── */
.ce-gallery-item img {
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}

/* ── Testimonials carousel ───────────────────────────────────── */
.ce-testimonials-track {
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}

/* ── Before/after slider ─────────────────────────────────────── */
.ce-slider-after,
.ce-slider-handle { transition: none; }  /* real-time drag — no transition */

/* ── Cookie banner entry ─────────────────────────────────────── */
#ce-cookie-banner {
  animation: ce-slideUp .5s .8s cubic-bezier(.16,1,.3,1) both;
}

/* ── Page transitions ────────────────────────────────────────── */
.ce-page-enter {
  animation: ce-fadeIn .4s ease both;
}

/* ── Quiz option flash ───────────────────────────────────────── */
.ce-quiz-option.ce-flash-correct {
  animation: none;
  border-color: #2f9c6a;
  background: rgba(47,156,106,.08);
}
.ce-quiz-option.ce-flash-wrong {
  animation: ce-flashBorder .4s ease 2;
}

/* ── Loader spinner ──────────────────────────────────────────── */
.ce-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: var(--ce-white);
  border-radius: 50%;
  animation: ce-rotateSlow .7s linear infinite;
  vertical-align: middle;
}

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