/* A single photographic scroll; the two side panels share the middle's edges. */
.focus-scroll{height:190svh}
.focus-stage{perspective:1600px}
.focus-frames{--panel-width:27vw;--panel-height:43svh;--fold-angle:0deg;--strip-tilt:0deg;--crease-opacity:0;--side-opacity:1;--curl-opacity:0;position:absolute;left:50%;top:58%;width:var(--panel-width);height:var(--panel-height);transform:translate(-50%,-50%) rotateX(var(--strip-tilt));transform-style:preserve-3d;z-index:3}
.focus-frames .focus-frame,.focus-frames .focus-frame:first-child,.focus-frames .focus-frame:last-child{left:0;top:0;width:100%;max-width:none;height:100%;max-height:none;position:absolute;margin:0;padding:8px 8px 29px;background:#f3f1e9;border:0;border-radius:0;box-shadow:none;will-change:auto;transform:translateX(-100%);transform-origin:100% 50%;z-index:1;backface-visibility:hidden}
.focus-frames .focus-frame-center{transform:none;z-index:3;box-shadow:0 24px 40px #0004,0 0 1px #f3f1e9}
.focus-frames .focus-frame:last-child,.focus-frames .focus-panel-right{transform:translateX(100%);transform-origin:0 50%}
.focus-frames .focus-frame span{font-size:9px;bottom:10px;left:10px;white-space:nowrap;letter-spacing:.045em}
.focus-frames .focus-frame img{pointer-events:none;user-select:none}
.focus-frames .focus-frame:focus-visible{outline:2px solid #ddf4a1;outline-offset:-3px;z-index:6}
.is-scroll-ready .focus-frames .focus-panel-left{transform:translateX(-100%) rotateY(var(--fold-angle));opacity:var(--side-opacity);pointer-events:none}
.is-scroll-ready .focus-frames .focus-panel-right{transform:translateX(100%) rotateY(calc(-1 * var(--fold-angle)));opacity:var(--side-opacity);pointer-events:none}
.is-scroll-opening .focus-frames .focus-panel-left,.is-scroll-opening .focus-frames .focus-panel-right{pointer-events:auto}
.is-scroll-ready .focus-panel-left::after,.is-scroll-ready .focus-panel-right::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--crease-opacity);background:linear-gradient(90deg,transparent 43%,#15191280 83%,#10150ce0);mix-blend-mode:multiply}
.is-scroll-ready .focus-panel-right::after{background:linear-gradient(90deg,#10150ce0,#15191280 17%,transparent 57%)}
.focus-paper-curl{position:absolute;top:0;height:100%;width:var(--curl-width);opacity:var(--curl-opacity);pointer-events:none;z-index:5;border-radius:50%;box-shadow:1px 0 4px #0006;background:linear-gradient(90deg,#918f80 0%,#e3e0d1 28%,#fffdf4 51%,#cac7b7 72%,#767769 100%);transform:translateZ(16px)}
.focus-paper-curl-left{right:calc(50% + var(--curl-distance) / 2 - var(--curl-width) / 2)}
.focus-paper-curl-right{left:calc(50% + var(--curl-distance) / 2 - var(--curl-width) / 2)}
.is-scroll-ready .focus-frames{will-change:width,height,transform}
.is-scroll-ready .focus-frame{will-change:transform,opacity}
.focus-title{top:13%;font-size:clamp(50px,7.2vw,108px);z-index:1}
.focus-note{bottom:8%;right:6%;font-size:clamp(23px,2.4vw,35px)}
.focus-bottom{bottom:5%}
@media(max-width:700px){
  .focus-scroll{height:185svh}
  .focus-stage{perspective:850px}
  .focus-title{top:13%;font-size:clamp(48px,14vw,76px)}
  .focus-frames{top:57%;--panel-width:28.5vw;--panel-height:43vw}
  .focus-frames .focus-frame,.focus-frames .focus-frame:first-child,.focus-frames .focus-frame:last-child{padding:5px 5px 23px}
  .focus-frames .focus-frame span{bottom:8px;left:6px;font-size:clamp(5px,1.5vw,8px);letter-spacing:0}
  .focus-note{bottom:11%;font-size:27px}
  .focus-bottom{bottom:5%}
}
@media(prefers-reduced-motion:reduce){
  .focus-scroll{height:100svh;min-height:640px;max-height:none}
  .focus-stage{position:relative;height:100%;min-height:640px}
  .focus-frames,.is-scroll-ready .focus-frames{--fold-angle:0deg;--strip-tilt:0deg;--side-opacity:1;--crease-opacity:0;--curl-opacity:0;will-change:auto}
  .is-scroll-ready .focus-frame{will-change:auto}
  .is-scroll-ready .focus-frames .focus-panel-left,.is-scroll-ready .focus-frames .focus-panel-right{pointer-events:auto}
  .focus-note{opacity:1}
  .focus-paper-curl{display:none}
}