/* Darovsky Photo — motion layer shared by every page.
   Everything here only applies when html.js is set, so without JS the site is static and complete. */

:root { --ease-out: cubic-bezier(.2,.7,.2,1); --ease-io: cubic-bezier(.7,0,.2,1); }

/* text and blocks rise into place */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* contact channels slide in from the side */
.js [data-reveal="side"] { transform: translateX(40px); }

/* headings rise out of a mask, line by line */
.js .mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.js .mask > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.js .mask.in > span { transform: none; }

/* words light up as you read */
.facts-lead .w { transition: opacity .25s linear; }

/* about: photo opens like a curtain, then drifts with scroll */
.js .about .frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-io); }
.js .about .frame.in { clip-path: inset(0 0 0 0); }
.about .frame img { transform: translateY(var(--py, 0px)) scale(1.14); will-change: transform; }

/* home portfolio: tiles wipe open one after another */
.js .gallery .g-tile { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-io), opacity .2s ease; transition-delay: var(--d, 0s), 0s; }
.js .gallery .g-tile.in { clip-path: inset(0 0 0 0); }
.gallery .g-tile span.g-label { transition: transform .5s var(--ease-out); }
.gallery .g-tile:hover span.g-label { transform: translateX(6px); }

/* process: the rule above each step fills as you scroll through */
.step { position: relative; }
.step::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--rust); transform: scaleX(var(--f, 0)); transform-origin: left; }
.step .num { transition: color .4s ease, transform .5s var(--ease-out); transform-origin: left bottom; }
.js .step:not(.lit) .num { color: rgba(168,67,30,0.35); }
.js .step.lit .num { transform: scale(1.12); }

/* album covers on category pages rise up from below */
.js .gv-album { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-io), opacity .2s ease; transition-delay: var(--d, 0s), 0s; }
.js .gv-album.in { clip-path: inset(0 0 0 0); }
.gv-album b, .gv-album small { transition: transform .6s var(--ease-out); }
.gv-album:hover b { transform: translateY(-4px); }

/* photos inside an album: each frame develops as it enters the screen */
.js .gv-photo img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.22);
  transition: clip-path 1.1s var(--ease-io), transform 1.6s var(--ease-out), opacity .2s ease;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s;
}
.js .gv-photo.in img { clip-path: inset(0 0 0 0); transform: none; }
.js .gv-photo.in:hover img { transform: scale(1.04); transition-delay: 0s; }

/* lightbox opens softly */
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbRise { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lightbox.open { animation: lbFade .35s ease both; }
.lightbox.open .lb-frame { animation: lbRise .5s var(--ease-out) both; }
.lb-frame.has-photo img.swap { animation: lbRise .45s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .about .frame, .js .gallery .g-tile, .js .gv-album, .js .gv-photo img, .js .mask > span {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
  .about .frame img { transform: none; }
  .step::before { transform: scaleX(1); }
  .js .step:not(.lit) .num { color: var(--rust); }
  .facts-lead .w { opacity: 1 !important; }
  .lightbox.open, .lightbox.open .lb-frame, .lb-frame.has-photo img.swap { animation: none; }
}