/* ============================================
   ASK's Associates - Animations CSS
   Premium Law Firm Website
   ============================================ */

/* ---- Base Animation States ----
   Only hide elements when .js-ready is present on body
   (added by JS on DOMContentLoaded).
   Without it, everything is visible — no flash of invisible content.
   ---- */
.js-ready .animate-fadeup,
.js-ready .animate-left,
.js-ready .animate-right,
.js-ready .animate-scale,
.js-ready .animate-fade {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.85s;
  transition-property: opacity, transform;
  will-change: opacity, transform;
}

.js-ready .animate-fadeup { transform: translateY(40px); }
.js-ready .animate-left   { transform: translateX(-50px); }
.js-ready .animate-right  { transform: translateX(50px); }
.js-ready .animate-scale  { transform: scale(0.92); }
.js-ready .animate-fade   { transform: none; }

/* ---- Triggered (in-view) States ---- */
.animate-fadeup.in-view,
.animate-left.in-view,
.animate-right.in-view,
.animate-scale.in-view,
.animate-fade.in-view {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Stagger Delays ---- */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.42s; }
.delay-5 { transition-delay: 0.55s; }


/* ---- Keyframe Animations ---- */

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

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

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

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

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0.5); }
  50%       { box-shadow: 0 0 0 14px rgba(176, 141, 87, 0); }
}

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

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

@keyframes drawLine {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes drawLineV {
  from { height: 0; }
  to   { height: 100%; }
}

@keyframes revealRight {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@keyframes counterPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

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

/* ---- Utility Classes ---- */
.anim-float        { animation: float 3.5s ease-in-out infinite; }
.anim-pulse-gold   { animation: pulseGold 2.5s ease-in-out infinite; }

.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.img-reveal.in-view { clip-path: inset(0 0% 0 0); }

.hover-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.15);
}

.hover-scale { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.hover-scale:hover { transform: scale(1.03); }

.gold-underline { position: relative; display: inline-block; }
.gold-underline::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gold-underline:hover::after,
.gold-underline.active::after { width: 100%; }

.scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; }

.timeline-line-fill {
  width: 0;
  transition: width 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline-line-fill.in-view { width: 100%; }

.timeline-line-fill-v {
  height: 0;
  transition: height 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline-line-fill-v.in-view { height: 100%; }

.faq-icon { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.testimonial-slide-in {
  animation: testimonialIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.testimonial-slide-out {
  animation: testimonialOut 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-title-anim { animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.hero-sub-anim   { animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.hero-cta-anim   { animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-fadeup, .animate-left, .animate-right,
  .animate-scale, .animate-fade { opacity: 1; transform: none; }
  .img-reveal { clip-path: none; }
}