/* Reveal-on-scroll utility — premium expo-out
   Hidden state is ONLY applied when html.sj-reveals-armed is set by JS, AND
   the document is visible. This guarantees content is always visible when:
   - JS fails or is slow
   - The page loads in a hidden tab / iframe (transitions are paused there)
   - The user has reduced-motion preference */
html.sj-reveals-armed [data-sj-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--sj-ease), transform 560ms var(--sj-ease);
  will-change: opacity, transform;
}
html.sj-reveals-armed [data-sj-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
html.sj-reveals-armed [data-sj-reveal][data-sj-delay="1"] { transition-delay: 80ms; }
html.sj-reveals-armed [data-sj-reveal][data-sj-delay="2"] { transition-delay: 160ms; }
html.sj-reveals-armed [data-sj-reveal][data-sj-delay="3"] { transition-delay: 240ms; }
html.sj-reveals-armed [data-sj-reveal][data-sj-delay="4"] { transition-delay: 320ms; }

/* ── Elementor editor: our reveal observer can't track widgets that Elementor
   re-renders on edit, so reveal elements would stay stuck at opacity:0 inside
   the builder. Force them visible in the editor preview only. The published
   front end is unaffected and animates normally. ── */
body.elementor-editor-active [data-sj-reveal],
.elementor-edit-area [data-sj-reveal],
.elementor-editor-active [data-sj-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@keyframes sj-fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sj-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}