/* Motion layer. Everything here is progressive: without JS the site is the static version. */

/* page transitions (Chrome/Safari cross-document view transitions) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .45s ease both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
header.site{view-transition-name:site-header}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:40;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* header hides on scroll down, returns on scroll up */
header.site{transition:transform .35s ease}
header.site.hide{transform:translateY(-101%)}

/* hero */
.hero{overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-8% 0 -8% 0;z-index:-2;background-size:cover;background-position:center;
  transform:translate3d(0,var(--py,0),0) scale(1.08);animation:kb 24s ease-in-out infinite alternate;will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%)}
@keyframes kb{from{scale:1}to{scale:1.07}}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .w>span{display:inline-block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.25s + var(--i)*.09s)}
@keyframes rise{to{transform:none}}
.hero .eyebrow,.hero p,.hero .btn{opacity:0;animation:fadeup .9s ease forwards}
.hero .eyebrow{animation-delay:.1s}.hero p{animation-delay:.85s}.hero .btn{animation-delay:1.05s}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cue{position:absolute;right:var(--pad);bottom:8vh;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#fff;writing-mode:vertical-rl;opacity:.8;display:flex;align-items:center;gap:12px}
.cue::after{content:"";width:1px;height:56px;background:linear-gradient(#fff,transparent);animation:cue 2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper);white-space:nowrap}
.marquee .track{display:inline-flex;gap:0;animation:mq 38s linear infinite;padding:18px 0}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-size:clamp(26px,3.4vw,44px);padding:0 28px;display:inline-flex;align-items:center;gap:56px}
.marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal)}
@keyframes mq{to{transform:translateX(-50%)}}

/* reveal on scroll (classes added by JS only) */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.js .rv.in{opacity:1;transform:none}
.js .gallery figure.rv{transform:translateY(40px) scale(.985)}
.js .gallery figure.rv.in{transform:none}

/* cards: image parallax + cursor label */
.card .wrap{position:relative}
.card .wrap img,.wide img{transform:translate3d(0,var(--d,0),0) scale(1.14);will-change:transform}
.card:hover .wrap img{transform:translate3d(0,var(--d,0),0) scale(1.2)}
.card .wrap::after{content:"View";position:absolute;left:var(--mx,50%);top:var(--my,50%);translate:-50% -50%;scale:.4;opacity:0;
  background:#fff;color:var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:14px 18px;border-radius:99px;pointer-events:none;transition:opacity .25s,scale .25s}
@media(hover:hover){.card:hover .wrap::after{opacity:1;scale:1}}

/* animated gradient band */
.band{background-size:220% 100%;animation:gshift 16s ease-in-out infinite alternate}
@keyframes gshift{to{background-position:100% 0}}

/* rows: arrow slides */
.row span{transition:transform .3s}.row:hover span{transform:translateX(8px)}

/* project jump bar */
.jump{position:sticky;top:var(--hh,64px);z-index:15;display:flex;gap:8px;overflow-x:auto;padding:12px var(--pad);background:rgba(246,244,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:top .35s ease;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:99px;transition:.25s}
.jump a:hover{border-color:var(--teal)}
.jump a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ptext{top:calc(var(--hh,64px) + 72px)}
.project{scroll-margin-top:calc(var(--hh,64px) + 60px)}

/* gallery images open a lightbox */
.gallery img{cursor:zoom-in;transition:transform .6s ease,filter .4s}
.gallery figure{overflow:hidden}
@media(hover:hover){.gallery figure:hover img{transform:scale(1.035)}}

.lb{position:fixed;inset:0;z-index:100;background:rgba(10,12,14,.94);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(94vw,1800px);max-height:86vh;object-fit:contain;transform:scale(.97);transition:transform .35s ease,opacity .2s}
.lb.open img{transform:none}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:18px;opacity:.85}
.lb button:hover{opacity:1}
.lb .x{top:6px;right:10px}.lb .p{left:6px;top:50%;translate:0 -50%;font-size:30px}.lb .n{right:6px;top:50%;translate:0 -50%;font-size:30px}
.lb .c{position:absolute;bottom:14px;left:50%;translate:-50% 0;color:#fff;font-size:12px;letter-spacing:.2em;opacity:.7}
body.noscroll{overflow:hidden}

@media(max-width:860px){.cue{display:none}.ptext{top:auto}}
@media(prefers-reduced-motion:reduce){
  .hero-bg{animation:none;transform:scale(1.04)}
  .hero h1 .w>span,.hero .eyebrow,.hero p,.hero .btn{animation:none;opacity:1;transform:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .marquee .track,.band,.cue::after{animation:none}
  .card .wrap img,.wide img{transform:none!important}
  @view-transition{navigation:none}
}