/* ==========================================================================
   Strategic Workforce Partners — Site Animation Layer
   Single canonical source for load + scroll animations.
   Do not duplicate this logic elsewhere (Custom CSS boxes, other snippets).
   Edit THIS file only. Version: 1.0 — 2026-07-12
   ========================================================================== */

/* Default state (no-JS fallback): everything visible, no motion */
.swp-hero-in,
.swp-hero-in-right,
.swp-reveal {
  opacity: 1;
  transform: none;
}

/* Once JS confirms it's running, arm the hidden starting states */
html.swp-js .swp-hero-in {
  opacity: 0;
  transform: translateY(24px);
  animation: swpFadeUp 0.75s cubic-bezier(.16,.84,.44,1) forwards;
}
html.swp-js .swp-hero-in-right {
  opacity: 0;
  transform: translateY(20px) scale(.96);
  animation: swpFadeScale 0.85s cubic-bezier(.16,.84,.44,1) forwards;
}
html.swp-js .swp-hero-in.swp-d1 { animation-delay: .10s; }
html.swp-js .swp-hero-in.swp-d2 { animation-delay: .28s; }
html.swp-js .swp-hero-in.swp-d3 { animation-delay: .46s; }
html.swp-js .swp-hero-in.swp-d4 { animation-delay: .64s; }
html.swp-js .swp-hero-in-right.swp-d3 { animation-delay: .38s; }

@keyframes swpFadeUp {
  to { opacity: 1; transform: none; }
}
@keyframes swpFadeScale {
  to { opacity: 1; transform: none; }
}

/* Gentle ambient float on the hero illustration once it has landed */
html.swp-js .swp-hero-visual {
  animation: swpFloat 6s ease-in-out .9s infinite;
}
@keyframes swpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Scroll reveal (sections) ---- */
html.swp-js .swp-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
html.swp-js .swp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Card-level stagger inside a revealed section (delay set inline by JS per card) */
html.swp-js .swp-reveal .elementor-widget-icon-box,
html.swp-js .swp-reveal .elementor-widget-image-box {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
html.swp-js .swp-reveal.is-visible .elementor-widget-icon-box,
html.swp-js .swp-reveal.is-visible .elementor-widget-image-box {
  opacity: 1;
  transform: none;
}

/* ---- Universal hover polish (no JS required) ---- */
.elementor-widget-icon-box {
  transition: transform .3s ease, box-shadow .3s ease;
}
.elementor-widget-icon-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(15, 42, 71, .12);
}

.elementor-button {
  transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15, 42, 71, .18);
}

/* Respect reduced-motion preference: kill all motion, keep content visible */
@media (prefers-reduced-motion: reduce) {
  html.swp-js .swp-hero-in,
  html.swp-js .swp-hero-in-right,
  html.swp-js .swp-reveal,
  html.swp-js .swp-reveal .elementor-widget-icon-box,
  html.swp-js .swp-reveal .elementor-widget-image-box,
  html.swp-js .swp-hero-visual {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .elementor-widget-icon-box,
  .elementor-button {
    transition: none !important;
  }
}