/* Scroll-triggered entrance animations (see scroll-reveal.js) */
.scroll-reveal {
  opacity: 0;
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, margin;
}

.scroll-reveal--in {
  opacity: 1;
  margin: 0;
}

/* Margin-based motion keeps elements inside document flow (no footer overlap). */
.scroll-reveal--up:not(.scroll-reveal--in) {
  margin-top: 28px;
  margin-bottom: -28px;
}

.scroll-reveal--down:not(.scroll-reveal--in) {
  margin-top: -20px;
  margin-bottom: 20px;
}

.scroll-reveal--left:not(.scroll-reveal--in) {
  margin-left: -32px;
  margin-right: 32px;
}

.scroll-reveal--right:not(.scroll-reveal--in) {
  margin-left: 32px;
  margin-right: -32px;
}

.scroll-reveal--scale:not(.scroll-reveal--in) {
  margin-top: 18px;
  margin-bottom: -18px;
}

.scroll-reveal--delay-1 { transition-delay: 0.06s; }
.scroll-reveal--delay-2 { transition-delay: 0.12s; }
.scroll-reveal--delay-3 { transition-delay: 0.18s; }
.scroll-reveal--delay-4 { transition-delay: 0.24s; }
.scroll-reveal--delay-5 { transition-delay: 0.3s; }

/* Bridge trading-tools page classes to the same reveal state */
.tools-animate.scroll-reveal--in,
.tools-animate.tools-in-view {
  opacity: 1;
  margin: 0;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .tools-animate {
    opacity: 1;
    margin: 0;
    transform: none;
    transition: none;
  }
}