/* ---------------------------------------------------------
   Animations — scroll reveal, mobile nav, decorative motion
   All effects are gated by prefers-reduced-motion at the
   bottom of this file.
--------------------------------------------------------- */

/* ---- Scroll reveal (paired with js/animations.js) ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group .reveal,
.reveal-group > *,
.reveal-group > .e-con-inner > * {
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

/* ---- Mobile nav panel ---- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: var(--color-surface);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 30, 0.4);
  z-index: calc(var(--z-mobile-nav) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}

.mobile-nav__backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

body.nav-open {
  overflow: hidden;
}

/* ---- FAQ answer reveal handled via inline max-height in JS ---- */

/* ---- Elementor Editor Active Overrides ---- */
.elementor-editor-active .reveal,
.elementor-editor-active .reveal-group > *,
.elementor-editor-active .reveal-group > .e-con-inner > *,
.elementor-editor-active .counter-item,
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal-group > *,
body.elementor-editor-active .reveal-group > .e-con-inner > *,
body.elementor-editor-active .counter-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mobile-nav,
  .mobile-nav__backdrop {
    transition: none;
  }
}