/* ============================================================
   Wolentra — Animations Stylesheet
   wl-animations.css
   ============================================================ */

/* ---- Keyframe Definitions ---- */
@keyframes wl-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wl-fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wl-fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wl-fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wl-fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wl-scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wl-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes wl-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(184,115,51,0.35); }
  100% { box-shadow: 0 0 0 14px rgba(184,115,51,0); }
}
@keyframes wl-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes wl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes wl-float {
  0%, 100% { transform: translateY(0px) rotate(-3deg); }
  50%       { transform: translateY(-10px) rotate(-3deg); }
}
@keyframes wl-draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes wl-count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Hero Entrance Animations ---- */
.wl-hero-eyebrow   { animation: wl-fadeInDown 0.7s ease 0.2s both; }
.wl-hero-headline  { animation: wl-fadeInUp 0.8s ease 0.4s both; }
.wl-hero-subtext   { animation: wl-fadeInUp 0.8s ease 0.6s both; }
.wl-hero-cta-row   { animation: wl-fadeInUp 0.8s ease 0.8s both; }
.wl-hero-trust-row { animation: wl-fadeInUp 0.8s ease 1s both; }
.wl-hero-scroll-indicator { animation: wl-fadeIn 1s ease 1.4s both; }

/* ---- Scroll-Triggered Reveal Classes ---- */
/* These classes are added via JS when elements enter viewport */
.wl-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wl-reveal.wl-revealed {
  opacity: 1;
  transform: translateY(0);
}
.wl-reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wl-reveal-left.wl-revealed {
  opacity: 1;
  transform: translateX(0);
}
.wl-reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wl-reveal-right.wl-revealed {
  opacity: 1;
  transform: translateX(0);
}
.wl-reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wl-reveal-scale.wl-revealed {
  opacity: 1;
  transform: scale(1);
}

/* ---- Stagger Delays ---- */
.wl-stagger-1 { transition-delay: 0.1s !important; }
.wl-stagger-2 { transition-delay: 0.2s !important; }
.wl-stagger-3 { transition-delay: 0.3s !important; }
.wl-stagger-4 { transition-delay: 0.4s !important; }
.wl-stagger-5 { transition-delay: 0.5s !important; }
.wl-stagger-6 { transition-delay: 0.6s !important; }

/* ---- Service Card Hover Animations ---- */
.wl-service-card-premium .wl-service-card-icon {
  transition: transform 0.35s ease, background 0.35s ease;
}
.wl-service-card-premium:hover .wl-service-card-icon {
  transform: scale(1.12) rotate(-4deg);
  background: rgba(184,115,51,0.18);
}

/* ---- Process Step Animations ---- */
.wl-process-step-num {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wl-process-step-card:hover .wl-process-step-num {
  transform: scale(1.08);
  animation: wl-pulse-ring 1.2s ease infinite;
}

/* ---- Floating Decoration ---- */
.wl-float-decoration {
  animation: wl-float 5s ease-in-out infinite;
}

/* ---- Loading Shimmer (skeleton screens) ---- */
.wl-skeleton {
  background: linear-gradient(90deg,
    rgba(44,26,14,0.06) 25%,
    rgba(44,26,14,0.12) 50%,
    rgba(44,26,14,0.06) 75%);
  background-size: 600px 100%;
  animation: wl-shimmer 1.5s infinite linear;
  border-radius: 4px;
}

/* ---- Stat Counter Entrance ---- */
.wl-stat-block {
  transition: transform 0.3s ease;
}
.wl-stat-block:hover {
  transform: translateY(-2px);
}
.wl-stat-figure {
  animation: wl-count-up 0.6s ease both;
}

/* ---- Team Card Photo Overlay ---- */
.wl-team-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(44,26,14,0.5) 0%,
    transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.wl-team-profile-card:hover .wl-team-photo-wrap::after {
  opacity: 1;
}

/* ---- FAQ Chevron Spin ---- */
.wl-faq-item .wl-faq-chevron {
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
              color 0.2s ease;
}

/* ---- Nav Link Underline Animation ---- */
.wl-nav-links a {
  position: relative;
}
.wl-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0.85rem; right: 0.85rem;
  height: 2px;
  background: var(--wl-copper);
  border-radius: var(--wl-radius-pill);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.wl-nav-links a:hover::after,
.wl-nav-links a.wl-nav-active::after {
  transform: scaleX(1);
}

/* ---- Button Press Effect ---- */
.wl-btn-primary:active,
.wl-btn-dark:active,
.wl-btn-outline-dark:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* ---- Image Hover Zoom (generic) ---- */
.wl-img-zoom-wrap {
  overflow: hidden;
  border-radius: var(--wl-radius-lg);
}
.wl-img-zoom-wrap img {
  transition: transform 0.5s ease;
}
.wl-img-zoom-wrap:hover img {
  transform: scale(1.05);
}

/* ---- Cookie Banner Slide ---- */
.wl-cookie-consent-bar {
  animation: none;
}

/* ---- Accessibility: Respect prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .wl-hero-bg-layer { transform: none !important; }
  .wl-reveal,
  .wl-reveal-left,
  .wl-reveal-right,
  .wl-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}