/* Keep scroll-linked movement on the animation frame, without a second tween. */
/* The head bootstrap sets this only when JS runs; content has a timed fallback. */
html[data-page-state="preparing"] body,
html[data-page-state="leaving"] body { visibility:hidden; }
.gallery-scroll { position:relative; overflow-x:hidden; }
html[data-motion="on"] body { overflow-x: clip; }
.gallery-tile,
.gallery-tile .tile-visual img { transition: none; }

/* Hover uses individual transform properties, independent of scroll transforms. */
html[data-motion="on"] .cover img,
html[data-motion="on"] .photobutton img,
html[data-motion="on"] .gallery-tile .tile-visual img {
  translate: var(--pointer-x, 0px) var(--pointer-y, 0px);
  rotate: var(--pointer-rotate, 0deg);
  scale: 1;
  transition: translate .55s cubic-bezier(.16,1,.3,1), rotate .65s cubic-bezier(.16,1,.3,1), scale .7s cubic-bezier(.16,1,.3,1) !important;
  will-change: transform, translate, scale;
}
html[data-motion="on"] .motion-hover .cover img,
html[data-motion="on"] .motion-hover.photobutton img,
html[data-motion="on"] .motion-hover .tile-visual img { scale: 1.055; }
html[data-motion="on"] .entry.fadein { animation: none !important; }
html[data-motion="on"] .entry .view { transition: translate .4s cubic-bezier(.16,1,.3,1) !important; }
html[data-motion="on"] .entry:hover .view { translate: -5px -5px; }
html[data-motion="on"] .entry-arrow { transition: transform .4s cubic-bezier(.16,1,.3,1) !important; }
html[data-motion="on"] .all-button,
html[data-motion="on"] .light-nav-button,
html[data-motion="on"] .film button { transition: background-color .25s, color .25s, border-color .25s, opacity .25s !important; }
html[data-motion="on"] .all-button:hover { background: #111; color: #fff; border-color: #111; }
html[data-motion="on"] .close-gallery svg { transition: transform .45s cubic-bezier(.16,1,.3,1) !important; }
html[data-motion="on"] .tile-visual::after { transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1) !important; }
html[data-motion="on"] .project-return { transition: translate .35s, opacity .35s !important; }
html[data-motion="on"] .project-return:hover { translate: 5px 0; opacity: .65; }

/* Opening reveals live on inner wrappers; scroll motion owns the outer tile. */
.masonry-column > .gallery-tile:first-child .tile-visual,
.masonry-column > .gallery-tile:first-child .tile-info{transition:none!important}
html[data-motion="on"] .entry.motion-hover .cover img{scale:1.09}
html[data-motion="on"] .entry:hover .entry-arrow{transform:translateX(14px)}
html[data-motion="on"] .all-button:hover{translate:0 -4px}