/* ===========================================
   TM ScrollFade v1.0.1
   GPU-optimierte Scroll-Einblendungen
   -------------------------------------------
   Autor: Andre Schebaum / 2025-10-29
   =========================================== */

/* === Basis === */
.scroll-fade{
  --reveal: 0;
  /* optional: --distance global hier definieren */
  transform: translateY(calc((1 - var(--reveal)) * var(--distance, 24px))) translateZ(0);
  opacity: var(--reveal);
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: paint;
}

/* Box-Shadow erst wenn fast sichtbar */
.scroll-fade[data-shadow="true"] {
  box-shadow: none;
}
.scroll-fade[data-shadow="true"][style*="--reveal: 0.8"],
.scroll-fade[data-shadow="true"][style*="--reveal: 0.9"],
.scroll-fade[data-shadow="true"][style*="--reveal: 1"] {
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
  .scroll-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}
.no-js .scroll-fade {
  opacity: 1 !important;
  transform: none !important;
}

/* === Varianten === */
.scroll-fade-left {
  transform: translateX(calc((1 - var(--reveal)) * -40px)) translateZ(0);
}
.scroll-fade-right {
  transform: translateX(calc((1 - var(--reveal)) * 40px)) translateZ(0);
}
.scroll-fade-scale {
  transform: translateY(calc((1 - var(--reveal)) * 24px))
             scale(calc(0.95 + var(--reveal) * 0.05))
             translateZ(0);
}

.scroll-fade-badged {
 transform: translateX(calc((1 - var(--reveal)) * var(--distance, -54px))) translateZ(0);
}