/* Comapa · motion. Content is always visible without JS; motion only runs when JS adds .motion to <html>.
   Everything turns off under prefers-reduced-motion. */

/* Two speed curves for the whole site:
   arrive = fast start, soft landing (fades, rises, hovers) · move = smooth in and out (wipes, slides, things that travel) */
:root{--ease-arrive:cubic-bezier(.2,.7,.2,1);--ease-move:cubic-bezier(.45,.05,.2,1)}

/* 1 · page-to-page: cross-document view transitions (Chrome / Edge / Safari 18+; others just load normally) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease-move) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-arrive) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--ease-arrive)}
.nav{view-transition-name:nav}

/* 2 · hero on load: photo settles, title rises line by line */
.motion .hero-photo{clip-path:inset(0 0 100% 0);transform:scale(1.06);transition:clip-path 1.1s var(--ease-move),transform 1.6s var(--ease-arrive)}
.motion.in .hero-photo{clip-path:inset(0 0 0 0);transform:none}
.motion .hero-text > *{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s var(--ease-arrive)}
.motion.in .hero-text > *{opacity:1;transform:none}
.motion.in .hero-text > :nth-child(1){transition-delay:.45s}
.motion.in .hero-text > :nth-child(2){transition-delay:.6s}
.motion .page-head .display,.motion .d-head .display{opacity:0;transform:translateY(40px);transition:opacity .9s .15s,transform 1s .15s var(--ease-arrive)}
.motion.in .page-head .display,.motion.in .d-head .display{opacity:1;transform:none}

/* 3 · scroll reveals: blocks fade up once as they enter */
.motion [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .8s,transform .9s var(--ease-arrive);transition-delay:calc(var(--i,0) * 70ms)}
.motion [data-reveal].is-in{opacity:1;transform:none}
.motion [data-reveal="slide"]{transform:translateY(96px);transition:opacity 1.3s var(--ease-move),transform 1.4s var(--ease-move)}
.srows{overflow-x:clip}
/* photos unveil with a wipe */
.motion [data-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-move);transition-delay:calc(var(--i,0) * 90ms)}
.motion [data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0)}
/* lines draw in */
.motion [data-reveal="line"]{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-move)}
.motion [data-reveal="line"].is-in{transform:none}

/* 5 · hovers: photos breathe, buttons answer */
.fotos a img,.about img,.d-hero img{transition:transform .9s var(--ease-arrive)}
.about:hover img{transform:scale(1.02)}
.pill span[aria-hidden]{display:inline-block;transition:transform .3s var(--ease-arrive)}
.pill:hover span[aria-hidden]{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .motion *,.motion *::before,.motion *::after{transition:none!important;animation:none!important}
  .motion [data-reveal],.motion .hero-photo,.motion .hero-text > *,
  .motion .page-head .display,.motion .d-head .display{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* map card: quick crossfade when switching projects (0.15s out + 0.15s in) */
.mcard > *{transition:opacity .15s var(--ease-move)}
.mcard.swap > *{opacity:0}
/* full-screen photo viewer (project pages) */
.zoomable{cursor:zoom-in}
.modal-fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(56px,7vh,88px) clamp(16px,4vw,64px) clamp(24px,4vh,48px);border:0;background:#060F1F;color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.modal-fullscreen[open]{display:flex;animation:mf-in .3s var(--ease-arrive)}
.modal-fullscreen::backdrop{background:transparent}
.modal-fullscreen img{max-width:100%;max-height:calc(100dvh - 180px);object-fit:contain;animation:mf-img .45s var(--ease-arrive)}
.modal-fullscreen .mf-cap{color:rgba(255,255,255,.72)}
.mf-close{position:absolute;top:clamp(12px,2.5vh,24px);right:clamp(12px,2.5vw,32px);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s}
.mf-close:hover,.mf-close:focus-visible{background:#fff;color:#060F1F}
@keyframes mf-in{from{opacity:0}}
@keyframes mf-img{from{opacity:0;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.mcard > *{transition:none}.modal-fullscreen[open],.modal-fullscreen img{animation:none}}
/* photo viewer arrows + step animation */
.mf-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(6,15,31,.5);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;transition:background-color .2s,color .2s}
.mf-nav[hidden]{display:none}
.mf-nav:hover,.mf-nav:focus-visible{background:#fff;color:#060F1F}
.mf-prev{left:clamp(8px,2vw,32px)}
.mf-next{right:clamp(8px,2vw,32px)}
.modal-fullscreen img{max-width:calc(100% - 160px);transition:opacity .16s var(--ease-move),transform .16s var(--ease-move)}
.modal-fullscreen img.out{opacity:0;transform:translateX(var(--dx,0))}
.modal-fullscreen img.step{animation:mf-step .4s var(--ease-arrive)}
@keyframes mf-step{from{opacity:0;transform:translateX(var(--dx,0))}}
@media (max-width:700px){.modal-fullscreen img{max-width:100%}.mf-nav{top:auto;bottom:clamp(16px,4vh,32px);transform:none;width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.modal-fullscreen img{transition:none}.modal-fullscreen img.step{animation:none}}
.modal-fullscreen img{padding:0;border:0;outline:0;background:none}