/* BendScroll 2.4: scroll folds and boundary rebound, without pointer tilt. */
:root {
  --bend-zone: 240px;
  --top-fold: 0;
  --bottom-fold: 0;
}

.bend-stage {
  overflow-x: clip;
  perspective: var(--bend-perspective, 700px);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

#bend-page {
  min-height: 100vh;
  width: 100%;
}

.bend-surface {
  --bend-tumble: 0deg;
  --bend-origin: 50% 50%;
  backface-visibility: hidden;
  position: relative;
  transform: rotateX(var(--bend-tumble));
  transform-origin: var(--bend-origin);
  transform-style: preserve-3d;
  will-change: transform;
}

.bend-piece {
  --piece-angle: 0deg;
  --piece-z: 0px;
  --piece-origin: 50% 50%;
  backface-visibility: hidden;
  transform: translateZ(var(--piece-z)) rotateX(var(--piece-angle));
  transform-origin: var(--piece-origin);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Viewport edge shading uses pseudo-elements; JS inserts no extra elements. */
body.bend-active::before,
body.bend-active::after {
  content: "";
  height: min(var(--bend-zone), 34vh);
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 25;
}

body.bend-active::before {
  background:
    radial-gradient(ellipse 90% 32% at 50% 0%, rgb(255 255 255 / 0.16), transparent 72%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.12), transparent 48%);
  opacity: calc(var(--top-fold) * 0.48);
  top: 0;
  transform: scaleY(calc(0.5 + var(--top-fold) * 0.5));
  transform-origin: top;
}

body.bend-active::after {
  background:
    radial-gradient(ellipse 90% 32% at 50% 100%, rgb(255 255 255 / 0.15), transparent 72%),
    linear-gradient(to top, rgb(0 0 0 / 0.12), transparent 48%);
  bottom: 0;
  opacity: calc(var(--bottom-fold) * 0.48);
  transform: scaleY(calc(0.5 + var(--bottom-fold) * 0.5));
  transform-origin: bottom;
}

@media (prefers-reduced-motion: reduce), (max-width: 767.98px) {
  .bend-stage { perspective: none; }
  .bend-surface,
  .bend-piece { transform: none !important; }
  body.bend-active::before,
  body.bend-active::after { display: none; }
}