:root{
  --din-card-radius: clamp(18px, 2.4vw, 32px);
  --din-shadow: 0 18px 60px rgba(0,0,0,.22);
}

/* Similar to ReactBits: breathing room so first card reaches center naturally */
.din-scroll-stack-inner{
  padding: 20vh 0 55vh;
}

/* Cards stay in flow; we pin visually via JS transforms (like React code) */
.din-scroll-card{
  position: relative;
  width: 100%;
  margin: 0 0 110px;
  will-change: transform;
  transform-origin: top center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  pointer-events: auto;
}

/* Surface (what gets rounded + filtered + overlay) */
.din-scroll-card-surface{
  position: relative;
  width: 100%;
  border-radius: var(--din-card-radius);
  overflow: hidden;
  box-shadow: var(--din-shadow);
  will-change: transform, filter, opacity;
  transform: translateZ(0);
}

/* White overlay for "previous" cards. Strength controlled via CSS var --din-back (0..1) */
.din-scroll-card-surface::after{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255, var(--din-overlay, .40));
  opacity: var(--din-back, 0);
  pointer-events: none;
  transition: none;
}

/* Spacer for clean release */
.din-scroll-stack-end{
  height: 1px;
}