/* ─── Scrolling Formulas Backdrop ────────────────────────────────────────── */

.formulas-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* No overall opacity — controlled per-layer for proper blending */
}

.formulas-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.formulas-layer img {
  width: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ─── Far plane: heavy blur, slow — feels distant ─────────────────────────
   This is the base layer. Fully visible so the near layer can blend over it. */
.formulas-layer--far {
  filter: blur(2.5px);
  animation: scrollFormulas 50s linear infinite;
  opacity: 0.55;
  z-index: 1;
}

/* ─── Near plane: minimal blur, faster — feels close ─────────────────────
   mix-blend-mode: screen = additive blend. Both layers' formulas show
   simultaneously: dark gaps in near layer reveal the far layer beneath. */
.formulas-layer--near {
  filter: blur(1.5px);
  animation: scrollFormulas 38s linear infinite;
  opacity: 0.50;
  z-index: 2;
  mix-blend-mode: screen;
}

/* Seamless loop:
   Each layer has 2 stacked copies → total height = 2× image height.
   translateY(-50%) shifts exactly one image height → seamless reset. */
@keyframes scrollFormulas {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  .formulas-layer {
    animation: none;
  }
}

/* Drop near layer on mobile for performance */
@media (max-width: 640px) {
  .formulas-layer--near {
    display: none;
  }
  .formulas-layer--far {
    opacity: 0.40;
  }
}