/* ============================================================
   Eric's Fix It All Service — animations.css
   GSAP animation states and motion-related CSS
   ============================================================ */

/* ---------- Initial hidden states (set before GSAP animates them in) ---------- */

.hero-badge-row,
.hero-headline,
.hero-sub,
.hero-cta-row,
.trust-badges,
.hero-photo {
  opacity: 0;
}

/* After JS runs, these get GSAP-controlled. Before JS, prevent flash. */
.service-card,
.why-card,
.step-card,
.testimonial-card,
.about-photo-wrap,
.about-content {
  /* Start visible in case JS fails — GSAP will override */
  opacity: 1;
}

/* Class applied by GSAP when animations are ready to run */
.gsap-ready .service-card,
.gsap-ready .why-card,
.gsap-ready .step-card,
.gsap-ready .testimonial-card,
.gsap-ready .about-photo-wrap,
.gsap-ready .about-content {
  opacity: 0;
  transform: translateY(30px);
}

/* ---------- Counter digits ---------- */
.why-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* ---------- Service cards hover glow ---------- */
.service-card {
  will-change: transform;
}

/* ---------- Navigation active state ---------- */
.nav-links a.active {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

/* ---------- Page-load flash prevention ---------- */
body:not(.js-loaded) .hero-badge-row,
body:not(.js-loaded) .hero-headline,
body:not(.js-loaded) .hero-sub,
body:not(.js-loaded) .hero-cta-row,
body:not(.js-loaded) .trust-badges,
body:not(.js-loaded) .hero-photo {
  opacity: 0;
}

/* Scroll-reveal: used by JS to trigger opacity after ScrollTrigger fires */
.reveal-hidden {
  opacity: 0;
  transform: translateY(24px);
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Progress line (scroll indicator) ---------- */
.scroll-progress {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--orange);
  z-index: 1001;
  transform-origin: left;
  transition: width 0.1s linear;
}

/* ---------- Why counter glow ---------- */
.why-counter.counting {
  color: #ffae5a;
  text-shadow: 0 0 24px rgba(240,124,26,0.4);
}

/* ---------- Step cards animation class ---------- */
.step-card {
  will-change: transform, opacity;
}

/* ---------- Scroll video fade states ---------- */
.scroll-video-section .scroll-cta-inner > * {
  will-change: opacity, transform;
}

/* ---------- About section ---------- */
.about-photo-wrap {
  will-change: transform, opacity;
}

/* ---------- Contact card ripple ---------- */
.contact-card {
  position: relative;
  overflow: hidden;
}
.contact-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  border-radius: inherit;
  transition: background 0.2s ease;
}
.contact-card:active::after {
  background: rgba(255,255,255,0.04);
}

/* ---------- GSAP will-change hints ---------- */
.hero-headline,
.hero-sub,
.hero-photo {
  will-change: opacity, transform;
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   Force all content visible immediately; GSAP will-change
   hints disabled; counters skip to final value via JS.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Override initial hidden states so content never stays invisible */
  .hero-badge-row,
  .hero-headline,
  .hero-sub,
  .hero-cta-row,
  .trust-badges,
  .hero-photo {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Override GSAP-ready hidden states */
  .gsap-ready .service-card,
  .gsap-ready .why-card,
  .gsap-ready .step-card,
  .gsap-ready .testimonial-card,
  .gsap-ready .about-photo-wrap,
  .gsap-ready .about-content {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable will-change to avoid compositing cost when animations don't run */
  .hero-headline,
  .hero-sub,
  .hero-photo,
  .service-card,
  .step-card,
  .about-photo-wrap,
  .scroll-video-section .scroll-cta-inner > * {
    will-change: auto !important;
  }
}