/* =========================================================
   Expat Services CR - Motion system

   How to use, from Elementor:
   Select any section, container or widget, open the Advanced
   tab, and type one of these words in the "CSS Classes" field.

     esc-reveal          fades and slides up when it enters view
     esc-reveal-stagger  its direct children enter one after another
     esc-parallax        background drifts slowly while scrolling
     esc-zoom            image zooms gently on hover
     esc-count           number counts up when it becomes visible
     esc-no-motion       excludes this element from all animation

   Delete the word to turn the effect off. Nothing else to do.
   ========================================================= */

/* ---------- Reveal ---------- */
.esc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--esc-dur) var(--esc-ease),
              transform var(--esc-dur) var(--esc-ease);
  will-change: opacity, transform;
}

.esc-reveal.esc-in {
  opacity: 1;
  transform: none;
}

/* Directional variants */
.esc-reveal-left  { transform: translateX(-32px); }
.esc-reveal-right { transform: translateX(32px); }
.esc-reveal-left.esc-in,
.esc-reveal-right.esc-in { transform: none; }

/* ---------- Stagger ---------- */
/* Children enter in sequence. The delay is set per child by motion.js. */
.esc-reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--esc-dur) var(--esc-ease),
              transform var(--esc-dur) var(--esc-ease);
  transition-delay: var(--esc-delay, 0ms);
}

.esc-reveal-stagger.esc-in > * {
  opacity: 1;
  transform: none;
}

/* ---------- Hover zoom on images ---------- */
.esc-zoom,
.esc-zoom .elementor-widget-container,
.esc-zoom figure {
  overflow: hidden;
}

.esc-zoom img {
  transition: transform 0.7s var(--esc-ease);
  will-change: transform;
}

.esc-zoom:hover img {
  transform: scale(1.05);
}

/* ---------- Parallax ---------- */
/* motion.js writes --esc-shift. The element keeps its own background. */
.esc-parallax {
  background-position: center calc(50% + var(--esc-shift, 0px)) !important;
  will-change: background-position;
}

/* ---------- Sticky header ---------- */
.esc-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background-color 0.3s var(--esc-ease),
              box-shadow 0.3s var(--esc-ease),
              padding 0.3s var(--esc-ease);
}

.esc-header.esc-header-scrolled {
  background-color: var(--esc-white) !important;
  box-shadow: 0 2px 20px rgba(43, 47, 44, 0.08);
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ---------- Accessibility guardrail ---------- */
/* Anyone who asked their system to reduce motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .esc-reveal,
  .esc-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .esc-zoom img,
  .esc-header {
    transition: none !important;
  }
  .esc-zoom:hover img {
    transform: none !important;
  }
  .esc-parallax {
    background-position: center center !important;
  }
}

/* ---------- Mobile ---------- */
/* Parallax is dropped on small screens: it costs performance and reads badly. */
@media (max-width: 767px) {
  .esc-parallax {
    background-position: center center !important;
    background-attachment: scroll !important;
  }
  .esc-reveal,
  .esc-reveal-stagger > * {
    transform: translateY(16px);
  }
}

/* Opt out of everything */
.esc-no-motion,
.esc-no-motion * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}