/*
 * Resources Glossary page — scroll entrance animations.
 *
 * Webflow sets inline `opacity:0` on `.image---glossary-deco-1`. Without
 * Interactions JS the left decorative icon stays invisible on desktop.
 *
 * `GlossaryReveal` adds `.glossary-reveal-armed` then `.is-in-view` on
 * `.wf-body` when `.glossary---section` scrolls into view. Without the
 * armed class, deco-1 stays visible so a missed JS bind never hides it.
 *
 * Loaded only on `/resources/glossary`.
 */

@media (prefers-reduced-motion: no-preference) {
  .wf-body.glossary-reveal-armed .image---glossary-deco-1 {
    animation: ads-fade-in 900ms ease-in-out both;
    animation-delay: 0ms;
    animation-play-state: paused;
  }

  .wf-body.glossary-reveal-armed.is-in-view .image---glossary-deco-1 {
    animation-play-state: running;
  }

  .wf-body.glossary-reveal-armed.is-in-view .image---glossary-deco-2 {
    animation: ads-swoop-right-fade 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 180ms;
  }
}

/* Visible before JS arms; forced visible after reveal. */
.wf-body:not(.glossary-reveal-armed) .image---glossary-deco-1,
.wf-body.glossary-reveal-armed.is-in-view .image---glossary-deco-1 {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .wf-body.glossary-reveal-armed .image---glossary-deco-1,
  .wf-body.glossary-reveal-armed .image---glossary-deco-2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}