/* The Cozee design wall (/gallery/). Ported from the approved test page; the site's own header, buttons and footer styles come from site.css. */
.gallery-page{--pop:cubic-bezier(.34,1.56,.64,1);overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;height:100vh;height:100dvh}
.gallery-page main{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.gallery-page .site-head{flex:none}
:where(.gallery-page) button{font:inherit;cursor:pointer}
.dwall,.dwall *,#lb,#lb *,#moreDlg,#moreDlg *{box-sizing:border-box}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wlist{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0}

/* the wall fills the page below the header */
.dwall{position:relative;flex:1 1 0;min-height:0;overflow:hidden;touch-action:none;cursor:grab;background:var(--mist);user-select:none;-webkit-user-select:none}
.dwall.dragging{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;transition:opacity .18s}
.world.away{opacity:0}
.wtile{-webkit-touch-callout:none;position:absolute;border:0;padding:0;border-radius:14px;overflow:hidden;background:var(--c);
  transition:transform .35s var(--pop),box-shadow .35s var(--ease);box-shadow:0 2px 8px rgba(43,25,61,.08)}
.wtile img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;transform:scale(1.08);transition:transform .7s var(--ease)}
.wtile img.wl{transform:none}
.wtile.big{border-radius:20px}
.wtile:focus-visible{outline:4px solid var(--primary);outline-offset:3px;z-index:3;box-shadow:0 0 0 7px #fff,0 18px 40px rgba(43,25,61,.3)}
@media (hover:hover){.wtile:hover{transform:scale(1.07);z-index:3;box-shadow:0 18px 40px rgba(43,25,61,.3)}}
.wtile:active{transform:scale(.96)}
.controls{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;z-index:5}
.controls button{height:48px;min-width:48px;border-radius:999px;border:0;background:#fff;color:var(--primary);font-size:22px;box-shadow:0 6px 18px rgba(43,25,61,.18)}
.controls .pill{font-size:15px;font-weight:600;padding:0 18px;display:inline-flex;gap:8px;align-items:center}
.controls .surprise{background:var(--primary);color:#fff}
.controls .surprise span{font-size:20px;display:inline-block;transition:transform .5s var(--pop)}
.controls .surprise:hover span{transform:rotate(-20deg) scale(1.15)}
.hint{position:absolute;left:50%;top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 60px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);
  text-align:center;text-wrap:balance;background:rgba(43,25,61,.82);color:#fff;font-size:14px;line-height:1.35;padding:8px 16px;border-radius:18px;pointer-events:none;transition:opacity .5s;z-index:5}
.hint:empty{display:none}
.more-btn{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:5;height:48px;padding:0 18px;border-radius:999px;border:0;background:#fff;color:var(--primary);font-size:15px;font-weight:600;box-shadow:0 6px 18px rgba(43,25,61,.18)}

/* the popups */
#lb,#moreDlg{border:0;padding:0;border-radius:28px;width:min(92vw,560px);max-height:94vh;background:#fff;box-shadow:0 30px 80px rgba(43,25,61,.35);overflow:hidden}
#lb[open],#moreDlg[open]{animation:lb .35s var(--pop)}
@keyframes lb{from{transform:scale(.9);opacity:0}}
#lb::backdrop,#moreDlg::backdrop{background:rgba(43,25,61,.55);backdrop-filter:blur(3px)}
.lb-stage{position:relative;aspect-ratio:1;background:var(--c)}
.lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.lb-stage img.before{opacity:0}
.lb-stage.show-before img.before{opacity:1}
.lb-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:18px;color:var(--primary);z-index:2}
.lb-toggle{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;background:rgba(255,255,255,.94);border-radius:999px;padding:4px;z-index:2;box-shadow:0 4px 14px rgba(43,25,61,.18)}
.lb-toggle button{border:0;background:none;padding:7px 16px;border-radius:999px;color:var(--primary);font-weight:600;font-size:14px;white-space:nowrap}
.lb-toggle button[aria-pressed=true]{background:var(--primary);color:#fff}
.lb-cap{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:14px 18px 18px}
.lb-cap>div{flex:1 1 200px;min-width:0}
.lb-cap h2{font-family:var(--display);font-weight:600;font-size:19px;margin:0;line-height:1.25;color:var(--ink-2)}
.lb-cap .next{margin-left:auto;flex:0 0 auto;border:0;background:var(--mist);color:var(--primary);font-weight:600;font-size:14px;border-radius:999px;padding:10px 14px}
#lb{width:min(92vw,560px,calc(94dvh - 130px));max-height:94dvh}
#moreDlg{width:min(94vw,1000px);max-height:86vh;overflow:auto}
#moreDlg .site-foot{margin:0}
#moreClose{position:sticky;top:12px;float:right;margin:12px 12px 0 0;width:42px;height:42px;border-radius:50%;border:0;background:var(--mist);color:var(--primary);font-size:18px;z-index:2}

@media (max-width:640px){
  .controls{right:max(12px,env(safe-area-inset-right));gap:6px}
  .controls .zoom{display:none}
  .lb-cap h2{font-size:17px}
  .lb-cap .next{flex:1 1 100%;margin:8px 0 0}
}
@media (max-height:480px){.lb-toggle{width:max-content;max-width:calc(100% - 16px)}.lb-toggle button{padding:6px 8px;font-size:13px;white-space:normal;line-height:1.15}.lb-cap{padding:8px 18px 10px}.lb-cap h2{font-size:16px}} /* short screens: the popup is narrow, so the toggle must be too */
@media (prefers-reduced-motion:reduce){.gallery-page *{transition:none!important;animation:none!important}.wtile img{transform:none}}