/* Labs testsite — GAFT v2 (ts-life).
   One motion system: crisp reveal-once (opacity + rise, no blur), smooth
   scrolling (Lenis via life.js), instant-feel page transitions.
   Everything inert under prefers-reduced-motion. */
:root{--life-ease:cubic-bezier(.25,1,.5,1);--life-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---- 1) reveals: the live-site recipe (30px rise, .8s easeOutCubic)
   plus a pronounced blur-in. Real control is inline (life.js) so page
   bundles' !important rules can never fight it. ---- */
.staggered-lazy,.staggered-item{
  opacity:0;
  transform:translateY(30px);
}
.staggered-lazy.visible,.staggered-item.visible,
.staggered-lazy.rv-done,.staggered-item.rv-done{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.staggered-lazy.visible,.staggered-item.visible,
.staggered-lazy.rv-done,.staggered-item.rv-done{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* ---- 2) active tab breathes once on load ---- */
@keyframes ts-breathe{0%{background-color:rgba(0,0,0,0)}55%{background-color:rgba(0,0,0,.08)}100%{background-color:rgba(0,0,0,.03)}}
#mainNav .nav-links a.ts-active{animation:ts-breathe 1.1s var(--life-ease) .45s 1 backwards}

/* ---- 3) sidebar hover nudge ---- */
#mainNav .nav-links a{transition:background-color .24s var(--life-ease),color .24s var(--life-ease),transform .24s var(--life-ease)}
#mainNav .nav-links a:hover{transform:translateX(3px)}

/* ---- 4) photography breathes on hover; touch press ---- */
.image-wrapper img,.project-image img,.news-image-link img,.yuhmmy-showcase-image img{transition:transform .5s var(--life-ease)}
.image-wrapper:hover img,.project-image:hover img,.news-image-link:hover img,.yuhmmy-showcase-image:hover img{transform:scale(1.015)}
.ts-pressing{transform:scale(.985)!important}

/* ---- 5) CTA press-down ---- */
a.fi-cta:active,button:active,.btn-secondary:active,[class*="btn"]:active{transform:scale(.97);transition:transform .18s var(--life-spring)}

/* ---- 6) page-to-page: instant native navigation — the reveal cascade IS
   the page entrance. Cross-document view transitions freeze the rendering
   clock while entrance transitions run and cause the tap-vs-refresh jank. */

/* ---- 7) anchors glide, clear of the black band ---- */
html{scroll-behavior:smooth;scroll-padding-top:96px}

/* ---- 8) one tempo for existing hovers ---- */
main a,.governance-link,.social-link{transition:color .24s var(--life-ease),background-color .24s var(--life-ease),border-color .24s var(--life-ease),opacity .24s var(--life-ease)}

/* ---- 9) footer underlines slide in ---- */
.footer-links a{
  text-decoration:none!important;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--life-ease),color .24s var(--life-ease);
}
.footer-links a:hover{background-size:100% 1px}

/* ---- 10) gate choreography ---- */
.ts-gate-enter{animation:ts-gate-in .5s var(--life-ease) both}
@keyframes ts-gate-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ts-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}50%{transform:translateX(-3px)}}
.ts-shake{animation:ts-shake .45s var(--life-ease) both}

/* ---- 11) emblem rotates once on hover ---- */
.ts-logo{transform-style:preserve-3d;display:inline-block}
.ts-logo.ts-spin1{animation:ts-logo-spin 1.2s var(--life-ease)}
@keyframes ts-logo-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

/* ---- reduced motion: everything inert, content fully visible ---- */
@media (prefers-reduced-motion:reduce){
  .staggered-lazy,.staggered-item{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  #mainNav .nav-links a{transition:none!important}
  #mainNav .nav-links a:hover{transform:none!important}
  #mainNav .nav-links a.ts-active{animation:none!important}
  .image-wrapper:hover img,.project-image:hover img,.news-image-link:hover img,.yuhmmy-showcase-image:hover img{transform:none!important}
  a.fi-cta:active,button:active,[class*="btn"]:active{transform:none!important}
  html{scroll-behavior:auto}
  .ts-gate-enter,.ts-shake{animation:none!important}
  .ts-logo.ts-spin1{animation:none!important}
}

@media(max-width:600px){.ts-logo.ts-spin1{animation:none!important}}