/*!
 * fold-wall — structural styles only.
 *
 * This file carries the geometry and nothing else: no typography, no colour
 * scheme, no captions. Style your own overlay on top; the wall does not care
 * what you put over it.
 *
 * The two sizes below are the only knobs that matter — fold-wall.js measures
 * the rendered panel width and derives the drum radius from it, which is what
 * keeps the seams closed at every viewport. Change --panel-w/--panel-h freely;
 * never set a radius yourself.
 *
 * MIT licensed.
 */

.fold-wall{
  --panel-w:clamp(170px,24vw,350px);
  --panel-h:clamp(236px,33vw,495px);
  position:relative;
  height:clamp(440px,58vw,760px);
  overflow:hidden;
  background:transparent;
  cursor:grab;
  touch-action:pan-y;          /* horizontal drag is ours, vertical scroll is the page's */
  user-select:none;
  -webkit-user-select:none
}
.fold-wall:active{cursor:grabbing}
.fold-wall:focus-visible{outline:2px solid currentColor;outline-offset:-8px}

/* Perspective lives on the host element, not the scene, so the script can
   flatten it toward orthographic at speed without touching layout. */
.fold-wall__scene{position:absolute;inset:0;perspective:var(--fold-perspective,1500px);perspective-origin:50% 50%}
.fold-wall__drum{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(var(--fold-pull,-420px)) rotateZ(var(--fold-tilt,0deg))}

.fold-wall__panel{
  position:absolute;left:0;top:0;
  width:var(--panel-w);height:var(--panel-h);
  margin-left:calc(var(--panel-w) / -2);margin-top:calc(var(--panel-h) / -2);
  overflow:hidden;background:#d9d8d4;
  backface-visibility:hidden;
  transform:rotateY(var(--a)) translateZ(var(--r));
  filter:brightness(var(--shade,1));
  will-change:transform,filter
}
.fold-wall__panel img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

@media(max-width:700px){
  .fold-wall{height:clamp(360px,86vw,520px);--panel-w:clamp(118px,32vw,180px);--panel-h:clamp(164px,45vw,252px)}
}

/* The wall itself stays — it is the content. Only the idle drift and the speed
   tilt are dropped, which the script handles; nothing moves unless dragged. */
@media(prefers-reduced-motion:reduce){
  .fold-wall__panel{will-change:auto}
}