/* ==========================================================================
   Depth layers (desktop). Pictures that used to be flat in the page art are
   separate layers here, so each one can move at its own speed. site.js moves
   them (scroll + pointer) only when motion is allowed; otherwise every layer
   simply sits exactly where the design puts it.
   Numbers inside calc(N * var(--a)) are design pixels, like everywhere else.
   ========================================================================== */
.ab .lyr{pointer-events:none}
.ab .lyr>img{display:block;width:100%;height:100%;max-width:none}
.ab .pf{overflow:hidden}
.ab .pf>img.pf-in{position:absolute;display:block;max-width:none;pointer-events:none}
.ab .pf>a.pf-in{z-index:1}

@media (min-width:761px){
  .ab.plx{overflow:hidden}                         /* layers may drift past the artboard edge */
  .motion .ab [data-sy],.motion .ab [data-sx],.motion .ab [data-m],.motion .ab [data-tilt],
  .motion .ab [data-of],.motion .ab .pf-in{will-change:transform}
  /* the far-back picture is a little larger than the screen so it can drift */
  .motion .page-bg{inset:-4% 0}
}

/* ------------------------------------------------------------ Contents */
@media (min-width:761px){
  .ab.contents.plx{background:#050505}
}
.contents .cx-bg{left:calc(-210 * var(--a));top:calc(-441 * var(--a));width:calc(6420 * var(--a));height:calc(4260 * var(--a))}
.contents .cx-bg>img{object-fit:cover}
.contents .cx-light{inset:0;pointer-events:none;
  background:radial-gradient(circle calc(1500 * var(--a)) at var(--lx,32%) var(--ly,38%),rgba(255,236,226,.075),rgba(255,236,226,0) 70%)}
.contents .cx-circle{left:calc(3269 * var(--a));top:calc(-240 * var(--a));width:calc(3856 * var(--a));height:calc(3856 * var(--a))}
.contents .cx-circle>img{border-radius:50%}
.contents .cx-title{left:calc(25 * var(--a));top:0;width:calc(2980 * var(--a));height:calc(1300 * var(--a))}
.contents .cx-plus{left:calc(894 * var(--a));top:calc(2062 * var(--a));width:calc(103 * var(--a));height:calc(805 * var(--a))}

/* entrance + slow spin (motion only; the layer itself is moved by site.js) */
@keyframes cx-fade{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
@keyframes cx-circle-in{from{opacity:0;translate:14% 4%;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes cx-title-in{from{opacity:0;translate:-5% 0}to{opacity:1;translate:0 0}}
@keyframes cx-spin{to{transform:rotate(360deg)}}
.motion .contents .cx-bg>img{animation:cx-fade 1.8s cubic-bezier(.2,.7,.1,1) both}
.motion .contents .cx-circle>img{animation:cx-circle-in 1.6s cubic-bezier(.2,.7,.1,1) .15s both,cx-spin 160s linear infinite}
.motion .contents .cx-title>img{animation:cx-title-in 1.3s cubic-bezier(.2,.7,.1,1) .35s both}
.motion .contents .cx-plus>img{animation:cx-fade 1.1s ease .6s both}

/* ------------------------------------------------------------ Services: layers slide into place on load
   (the page fits on one screen, so this replaces scroll movement there) */
@keyframes svc-bld-in{from{opacity:0;translate:5% 12%}to{opacity:1;translate:0 0}}
@keyframes svc-frame-in{from{opacity:0;translate:18% 0}to{opacity:1;translate:0 0}}
@keyframes svc-note-in{from{opacity:0;translate:10% 0}to{opacity:1;translate:0 0}}
.motion .services .svc-b>img{animation:svc-bld-in 1.7s cubic-bezier(.2,.7,.1,1) .1s both}
.motion .services .svc-f>img{animation:svc-frame-in 1.5s cubic-bezier(.2,.7,.1,1) .45s both}
.motion .services .svc-n>img{animation:svc-note-in 1.3s cubic-bezier(.2,.7,.1,1) .8s both}

/* ------------------------------------------------------------ Web: video laptop with its player and ribbon
   (one group, so the player stays on the laptop screen on every screen size) */
.ab .vgroup>.vg-lap{display:block;width:100%;height:100%;pointer-events:none}
.ab .vgroup>.yt-embed,.ab .vgroup>.yt-fallback,.ab .vgroup>.ribbon{position:absolute;margin:0}
.ab .vgroup>.ribbon{height:auto;z-index:2;pointer-events:none}
.ab .vgroup>.vlabel{position:absolute;margin:0;height:auto;max-width:none;z-index:2;pointer-events:none}
.ab .vgroup .yt-fallback img{display:none}          /* the laptop picture already shows the video's first frame */
@media (max-width:760px){
  .ab .vgroup{position:relative!important;width:calc(100% + 20px)!important;height:auto!important;aspect-ratio:1558/991;margin:8px -10px 30px!important}
  .ab .vgroup>.yt-embed,.ab .vgroup>.yt-fallback{position:absolute!important;left:13.736%!important;top:7.972%!important;
    width:82.413%!important;height:72.654%!important;margin:0!important;aspect-ratio:auto!important}
  .ab .vgroup>.ribbon{position:absolute!important;display:block!important;left:72.914%!important;top:6.559%!important;width:21.694%!important}
  .ab .vgroup>.vlabel{position:absolute!important;display:block!important;left:16.291%!important;top:79.238%!important;width:77.94%!important;margin:0!important}
}

/* ------------------------------------------------------------ About: the arched portrait */
.about .pf.arch{border-radius:50% 50% 0 0 / 42.5% 42.5% 0 0}

/* ------------------------------------------------------------ Film: Lincoln Center card */
.film .linc-card{background:#fff}

/* ------------------------------------------------------------ Contact: form panel over the photo */
@media (min-width:761px){
  .contact .cpanel{left:calc(2682 * var(--a));top:calc(1589 * var(--a));width:calc(1528 * var(--a));height:calc(1090 * var(--a));
    background:rgba(0,0,0,.26);box-shadow:0 0 calc(70 * var(--a)) rgba(0,0,0,.08);pointer-events:none}
  .contact .f{background:rgba(200,200,200,.07);box-shadow:inset 0 0 0 calc(6 * var(--a)) rgba(190,190,190,.82)}
  .contact .f:focus{background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 calc(6 * var(--a)) rgba(255,255,255,.95),0 0 0 calc(3 * var(--a)) rgba(255,255,255,.95),0 0 calc(30 * var(--a)) rgba(255,255,255,.45)}
}

/* ------------------------------------------------------------ Phones: framed photos are a little larger than their
   frame so site.js can slide them; the Contents circle rolls in and turns slowly */
@media (max-width:760px){
  .motion .page-bg{inset:-4% 0}
  .motion .rw-box.pf-m{overflow:hidden}
  .motion .rw-box.pf-m>img{scale:1.12;will-change:transform}
  .motion .ab.contents .m-ctitle{animation:cx-title-in 1.3s cubic-bezier(.2,.7,.1,1) .2s both}
  .motion .ab.contents .m-circle img{animation:cx-circle-in 1.6s cubic-bezier(.2,.7,.1,1) .1s both,cx-spin 160s linear infinite}
}

@media (prefers-reduced-motion:reduce){
  .contents .lyr>img,.services .lyr>img,.contents .m-ctitle,.contents .m-circle img{animation:none!important}
  .rw-box.pf-m>img{scale:none!important;translate:none!important}
  .page-bg{inset:0!important;translate:none!important}
}