/* ============================================================
   ACE FURNITURE REPAIR — ANIMATIONS
   ace-animations.css
   ============================================================ */

/* ── Fade In Up ── */
@keyframes ace-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ace-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes ace-scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes ace-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(201,168,76,0); }
}

@keyframes ace-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes ace-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

@keyframes ace-count-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero Entrance Animations ── */
.ace-anim-hero-label {
  animation: ace-fadeInUp 0.7s ease forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

.ace-anim-hero-title {
  animation: ace-fadeInUp 0.7s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.ace-anim-hero-sub {
  animation: ace-fadeInUp 0.7s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

.ace-anim-hero-cta {
  animation: ace-fadeInUp 0.7s ease forwards;
  animation-delay: 0.7s;
  opacity: 0;
}

.ace-anim-hero-img {
  animation: ace-scaleIn 0.9s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

/* ── Scroll-triggered ── */
.ace-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.ace-reveal.ace-revealed {
  opacity: 1;
  transform: translateY(0);
}

.ace-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.ace-reveal-left.ace-revealed {
  opacity: 1;
  transform: translateX(0);
}

.ace-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.ace-reveal-right.ace-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ── Staggered children ── */
.ace-stagger-children .ace-reveal:nth-child(1) { transition-delay: 0s; }
.ace-stagger-children .ace-reveal:nth-child(2) { transition-delay: 0.1s; }
.ace-stagger-children .ace-reveal:nth-child(3) { transition-delay: 0.2s; }
.ace-stagger-children .ace-reveal:nth-child(4) { transition-delay: 0.3s; }
.ace-stagger-children .ace-reveal:nth-child(5) { transition-delay: 0.4s; }
.ace-stagger-children .ace-reveal:nth-child(6) { transition-delay: 0.5s; }
.ace-stagger-children .ace-reveal:nth-child(7) { transition-delay: 0.6s; }
.ace-stagger-children .ace-reveal:nth-child(8) { transition-delay: 0.7s; }

/* ── Floating shapes ── */
.ace-shape-float {
  animation: ace-float 5s ease-in-out infinite;
}

.ace-shape-float-2 {
  animation: ace-float 7s ease-in-out infinite reverse;
  animation-delay: 1s;
}

.ace-shape-float-3 {
  animation: ace-float 6s ease-in-out infinite;
  animation-delay: 2s;
}

/* ── Shimmer loading effect ── */
.ace-shimmer-text {
  background: linear-gradient(
    90deg,
    var(--ace-walnut) 0%,
    var(--ace-gold) 50%,
    var(--ace-walnut) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ace-shimmer 4s linear infinite;
}

/* ── Hover lift ── */
.ace-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ace-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(59,35,20,0.16);
}

/* ── Pulse CTA ── */
.ace-pulse-gold {
  animation: ace-pulse-gold 2.5s ease-in-out infinite;
}

/* ── Image hover zoom ── */
.ace-img-zoom-wrap { overflow: hidden; }

.ace-img-zoom {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.ace-img-zoom-wrap:hover .ace-img-zoom { transform: scale(1.06); }

/* ── Gold underline on hover ── */
.ace-link-underline {
  position: relative;
  display: inline-block;
}

.ace-link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--ace-gold);
  transition: width 0.35s ease;
}

.ace-link-underline:hover::after { width: 100%; }

/* ── Spinner ── */
.ace-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ace-beige-dark);
  border-top-color: var(--ace-walnut);
  border-radius: 50%;
  animation: ace-spin-slow 0.8s linear infinite;
  display: inline-block;
}

/* ── Number counter ── */
.ace-counter { display: inline-block; }

/* ── Toast notification ── */
.ace-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--ace-walnut);
  color: var(--ace-white);
  padding: 16px 24px;
  border-radius: var(--ace-radius-sm);
  box-shadow: var(--ace-shadow-md);
  z-index: 10000;
  font-size: 0.9rem;
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  max-width: 320px;
  border-left: 4px solid var(--ace-gold);
}

.ace-toast.ace-toast-visible { transform: translateX(0); }

/* ── Decorative background shapes ── */
.ace-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ace-bg-shape-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
}

.ace-bg-shape-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(59,35,20,0.06) 0%, transparent 70%);
}

/* ── Hero abstract shapes ── */
.ace-hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.2);
  pointer-events: none;
}

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