/* TESTER · The Wall: Polaroids taped to a dark wall, their bottoms lifting in the wind; tap one to bring it close */
.wl{position:relative;min-height:100vh;min-height:100svh;background:#231f1e;color:#f2efe6;overflow:hidden;padding:calc(var(--hh,53px) + 56px) 0 64px}
.wl::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.wl-head{position:absolute;left:16px;right:16px;top:calc(var(--hh,53px) + 14px);display:flex;justify-content:space-between;border-top:1px solid rgba(242,239,230,.7);padding-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;z-index:3}
.wl-head b{font-weight:400}

/* the wall bleeds off both sides, like a photo of a bigger wall */
.wl-grid{position:relative;z-index:1;list-style:none;margin:18px 0 0;padding:0;width:112vw;margin-left:-6vw;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3.4vw,34px) clamp(10px,2.4vw,26px)}
@media (min-width:700px){.wl-grid{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1100px){.wl-grid{width:104vw;margin-left:-2vw;grid-template-columns:repeat(8,1fr)}}
.wl-slot{position:relative;perspective:520px;will-change:transform}
.wl-slot.is-held{z-index:999!important}
.wl-slot.tidy{transition:transform .65s cubic-bezier(.2,.8,.2,1)}

/* the shadow on the wall grows and slides down as the bottom lifts off */
.wl-sh{position:absolute;inset:4% 3% 0;background:rgba(0,0,0,.55);filter:blur(5px);border-radius:2px;
  transform:translateY(calc(var(--l,0) * 7px + 3px)) scaleY(calc(1 - var(--l,0) * .05));opacity:calc(.55 + var(--l,0) * .35);will-change:transform}

.wl-pol{position:relative;display:block;width:100%;appearance:none;border:0;padding:6.5% 6.5% 22%;margin:0;background:#f4f2ec;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;transform-origin:50% 0;will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;
  transform:rotateX(calc(var(--l,0) * -11deg)) rotateZ(calc(var(--s,0) * 1.4deg)) skewX(calc(var(--s,0) * .6deg));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);background-image:linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(0,0,0,calc(var(--l,0) * .14)))}
.wl-pol:focus-visible{outline:2px solid var(--red,#fe4102);outline-offset:3px}
.wl-ph{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bg,#1b1817)}
.wl-ph{position:relative;background:radial-gradient(ellipse at 40% 35%,#36302d 0%,#1d1918 70%,#151211 100%)}
.wl-ph img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;filter:sepia(.14) contrast(1.04) saturate(.94)}
.wl-ph.is-blank::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(242,239,230,.32);font-size:clamp(18px,3vw,28px);font-weight:300}
.wl-pol.drop .wl-ph{outline:2px solid #fe4102;outline-offset:-2px}
/* picked up: off the wall, a bit bigger, the shadow falls further away */
.wl-slot.is-held .wl-pol{transform:translateY(-4px) scale(1.05);cursor:grabbing;transition:transform .14s ease-out;background-image:none}
.wl-slot.is-held .wl-sh{transform:translate(5px,16px) scale(1.03);opacity:.85;filter:blur(11px);transition:transform .14s ease-out,filter .14s}
.wl-tidy{appearance:none;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;cursor:pointer;border-bottom:1px solid currentColor}
.wl-tape{position:absolute;left:50%;top:-9%;width:24%;height:13%;background:#fe4102;opacity:.92;transform:translateX(-50%) rotate(var(--tr,0deg));z-index:2;
  clip-path:polygon(0 6%,8% 0,22% 5%,40% 0,58% 6%,76% 0,92% 4%,100% 0,100% 94%,90% 100%,70% 95%,50% 100%,30% 94%,12% 100%,0 95%)}
.wl-slot.is-out .wl-pol,.wl-slot.is-out .wl-sh{visibility:hidden}
.wl-cap{margin:28px 16px 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;text-align:center;position:relative;z-index:1}

/* zoom: the Polaroid comes off the wall to the middle of the screen */
.wl-zoom{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;touch-action:none;cursor:zoom-out;-webkit-tap-highlight-color:transparent}
.wl-veil{position:absolute;inset:0;background:rgba(14,12,12,.86);opacity:0;transition:opacity .4s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wl-zoom.on .wl-veil{opacity:1}
.wl-big{position:relative;width:min(84vw,calc((100svh - 190px) * .82),560px);transform-origin:50% 50%;will-change:transform}
.wl-big .wl-pol{cursor:zoom-out;transform:none;box-shadow:0 30px 60px rgba(0,0,0,.5);background-image:none}
.wl-zbtns{position:relative;display:flex;gap:10px}
.wl-zbtns button,.wl-x{appearance:none;border:1px solid rgba(242,239,230,.6);background:none;color:#f2efe6;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;cursor:pointer;opacity:0;transition:opacity .3s}
.wl-zoom.on .wl-zbtns button{opacity:1}
.wl-zcap{position:relative;color:#f2efe6;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center;opacity:0;transition:opacity .3s ease .15s;padding:0 20px}
.wl-zoom.on .wl-zcap{opacity:.85}
.wl-zcap b{display:block;font-weight:400;font-size:13px;letter-spacing:.08em;margin-bottom:4px;opacity:1}
.wl-x{position:absolute;top:calc(var(--hh,53px) + 14px + env(safe-area-inset-top,0px));right:16px}
.wl-zoom.on .wl-x{opacity:1}