/* Motion study: a quiet gallery of framed, matte photographic prints. */
.home-page.page-density #top .home-gallery-shell{height:clamp(15.4rem,28vw,25.9rem);isolation:isolate}
.home-page.page-density #top .home-gallery-3d{perspective:1600px;perspective-origin:50% 47%;cursor:grab;mask-image:none;-webkit-mask-image:none}
/* Flatten each complete frame before stacking: neighbouring rotated planes
   must not intersect and slice through each other's rounded wooden edges. */
.home-page #top .home-gallery-scene{transform-style:flat;perspective:1600px;perspective-origin:50% 47%;transition:none;will-change:transform}
.home-page.page-density #top .home-gallery-card{
  width:clamp(16.8rem,38.5vw,36.4rem);
  --frame-inset:clamp(.42rem,.6vw,.66rem);
  --frame-radius:12px;
  --frame-highlight:.22;
  --frame-shadow:.32;
  --print-light:.016;
  --light-angle:118deg;
  background:linear-gradient(var(--light-angle),rgba(247,221,177,var(--frame-highlight)),transparent 32%,rgba(33,18,9,var(--frame-shadow))) ,#795038 url('assets/home-gallery/wood-frame-grain.webp') center/cover no-repeat;
  box-shadow:inset 1px 1px 1px rgba(255,230,196,var(--frame-highlight)),inset -1px -2px 2px rgba(25,13,7,var(--frame-shadow)),inset 0 0 0 1px #4d301c;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  outline-offset:5px;
}
.home-page.page-density #top .home-gallery-card::before{border:1px solid #321e1366;box-shadow:inset 1px 2px 3px #21150c3b,0 0 0 1px #d4b08724;pointer-events:none}
.home-page.page-density #top .home-gallery-card::after{background:linear-gradient(var(--light-angle),rgba(255,247,229,var(--print-light)),transparent 56%),linear-gradient(0deg,#17130e60,transparent 28%);pointer-events:none}
.home-page.page-density #top .home-gallery-card img{filter:saturate(.92) contrast(1.01);user-select:none;-webkit-user-drag:none;pointer-events:none}
.home-page.page-density #top .home-gallery-card span{left:1.3rem;right:1.3rem;bottom:1.15rem;font-size:clamp(.5rem,.65vw,.64rem);letter-spacing:.13em;opacity:.85}
.home-page #top .home-gallery-3d.is-dragging{cursor:grabbing}
.home-page #top .home-gallery-3d.is-dragging a{cursor:grabbing}
.home-page #top .home-gallery-arrow{display:grid;place-items:center;width:2.8rem;height:2.8rem;top:50%;border:1px solid #8e7d6540;border-radius:50%;background:#eee6d9b8;backdrop-filter:blur(8px);color:#4d4235;opacity:.7;transition:opacity .3s,background .3s,transform .3s;transform:translateY(-50%)}
.home-page #top .home-gallery-arrow-prev{left:clamp(.65rem,2vw,2rem)}
.home-page #top .home-gallery-arrow-next{right:clamp(.65rem,2vw,2rem)}
.home-gallery-arrow svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.home-page #top .home-gallery-shell:hover .home-gallery-arrow,.home-page #top .home-gallery-arrow:focus-visible{opacity:1}
.home-page #top .home-gallery-arrow:hover{background:#fcf6e9;transform:translateY(-50%) scale(1.06)}
.gallery-motion-toggle{position:absolute;z-index:10;right:clamp(.8rem,2vw,2rem);bottom:.75rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;border:1px solid #8e7d6540;border-radius:50%;color:#625442;background:#eee6d98c;cursor:pointer;opacity:.65;transition:opacity .2s}
.gallery-motion-toggle:hover,.gallery-motion-toggle:focus-visible{opacity:1}
.gallery-motion-toggle svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;grid-area:1/1}
.gallery-motion-toggle .gallery-play-icon{display:none}
.gallery-motion-toggle.is-paused .gallery-play-icon{display:block}
.gallery-motion-toggle.is-paused .gallery-pause-icon{display:none}
.gallery-motion-toggle[hidden]{display:none}
.home-page #top button:focus-visible,.home-page #top .home-gallery-card:focus-visible{outline:2px solid #805c40;outline-offset:4px}
@media(max-width:760px){
  .home-page.page-density #top .home-gallery-shell{height:clamp(11.55rem,45.5vw,18.9rem)}
  .home-page.page-density #top .home-gallery-card{width:54.6vw;--frame-inset:.4rem;--frame-radius:10px}
  .home-page.page-density #top .home-gallery-card span{left:1rem;bottom:.85rem;font-size:.48rem}
  .home-page #top .home-gallery-arrow{width:2.25rem;height:2.25rem;background:#eee6d9cc;opacity:.9}
  .home-page #top .home-gallery-arrow-prev{left:.3rem}
  .home-page #top .home-gallery-arrow-next{right:.3rem}
  .gallery-motion-toggle{bottom:.25rem;width:1.65rem;height:1.65rem}
}
@media(prefers-reduced-motion:reduce){.home-page #top .home-gallery-arrow,.gallery-motion-toggle{transition:none}}
/* Keep the expensive texture, shadows and mask static; animate only the
   composited transforms and the opacity of this small frame-light layer. */
.home-page.page-density #top .home-gallery-card{filter:none;contain:layout paint style;transform-style:flat}
.home-page.page-density #top .home-gallery-card .gallery-frame-light{
  position:absolute;z-index:4;inset:0;padding:var(--frame-inset);border-radius:inherit;
  background:linear-gradient(118deg,#fff1cf 0%,transparent 38%,#170b03 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.18;will-change:opacity;pointer-events:none;
}

/* Static edge veils avoid masking/recompositing the entire moving scene. */
.home-page.page-density #top .home-gallery-shell::before,
.home-page.page-density #top .home-gallery-shell::after{content:"";position:absolute;top:0;bottom:0;width:4%;z-index:8;pointer-events:none}
.home-page.page-density #top .home-gallery-shell::before{left:0;background:linear-gradient(90deg,#e7e1d6,transparent)}
.home-page.page-density #top .home-gallery-shell::after{right:0;background:linear-gradient(270deg,#e7e1d6,transparent)}