/* =========================================================
   PERFORMANCE MOTION SYSTEM
   Distinct motion identities using mostly transform + opacity.
   Avoids animated blur/clip-path and repeated scroll-out work.
   ========================================================= */
:root{
  --page-ease:cubic-bezier(.2,.8,.2,1);
  --page-ease-in:cubic-bezier(.4,0,1,1);
}

.view.active{animation:none}

/* Page transitions: short, GPU-friendly. */
#about.active.page-motion-in{animation:aboutPageIn 360ms var(--page-ease) both}
#work.active.page-motion-in{animation:workPageIn 360ms var(--page-ease) both}
#stack.active.page-motion-in{animation:stackPageIn 340ms var(--page-ease) both}
#attestation.active.page-motion-in{animation:attestationPageIn 360ms var(--page-ease) both}
#collab.active.page-motion-in{animation:collabPageIn 360ms var(--page-ease) both}
#resources.active.page-motion-in{animation:resourcesPageIn 340ms var(--page-ease) both}

#about.active.page-motion-out{animation:aboutPageOut 190ms var(--page-ease-in) both}
#work.active.page-motion-out{animation:workPageOut 190ms var(--page-ease-in) both}
#stack.active.page-motion-out{animation:stackPageOut 180ms var(--page-ease-in) both}
#attestation.active.page-motion-out{animation:attestationPageOut 190ms var(--page-ease-in) both}
#collab.active.page-motion-out{animation:collabPageOut 190ms var(--page-ease-in) both}
#resources.active.page-motion-out{animation:resourcesPageOut 180ms var(--page-ease-in) both}

@keyframes aboutPageIn{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes aboutPageOut{to{opacity:0;transform:translate3d(16px,0,0)}}
@keyframes workPageIn{from{opacity:0;transform:translate3d(0,16px,0) scale(.99)}to{opacity:1;transform:none}}
@keyframes workPageOut{to{opacity:0;transform:translate3d(0,-12px,0) scale(.99)}}
@keyframes stackPageIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes stackPageOut{to{opacity:0;transform:translate3d(-12px,0,0)}}
@keyframes attestationPageIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.99)}to{opacity:1;transform:none}}
@keyframes attestationPageOut{to{opacity:0;transform:translate3d(0,12px,0) scale(.99)}}
@keyframes collabPageIn{from{opacity:0;transform:translate3d(16px,0,0)}to{opacity:1;transform:none}}
@keyframes collabPageOut{to{opacity:0;transform:translate3d(-16px,0,0)}}
@keyframes resourcesPageIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes resourcesPageOut{to{opacity:0;transform:translate3d(0,12px,0)}}

/* ABOUT — layered, but lightweight. */
.motion-ready #about .reveal{opacity:0;transform:translate3d(-18px,0,0);transition:opacity 320ms var(--page-ease),transform 380ms var(--page-ease)}
.motion-ready #about .reveal:nth-of-type(even){transform:translate3d(18px,0,0)}
.motion-ready #about .reveal.visible{opacity:1;transform:none}
.motion-ready #about .about-media li,.motion-ready #about .stat,.motion-ready #about .path-card,.motion-ready #about .certificate-card{opacity:0;transform:translate3d(0,14px,0);transition:opacity 260ms var(--page-ease),transform 320ms var(--page-ease);transition-delay:var(--motion-delay,0ms)}
.motion-ready #about .about-content.visible .about-media li,.motion-ready #about .about-stats.visible .stat,.motion-ready #about .about-journey.visible .path-card,.motion-ready #about .about-certificates.visible .certificate-card{opacity:1;transform:none}
.motion-ready #about .path-direction{opacity:0;transform:translate3d(14px,0,0);transition:opacity 280ms var(--page-ease) 90ms,transform 340ms var(--page-ease) 90ms}
.motion-ready #about .about-journey.visible .path-direction{opacity:1;transform:none}

/* WORK — copy and preview meet in the middle. */
.motion-ready #work .section-heading{opacity:0;transform:translate3d(0,-14px,0);transition:opacity 300ms var(--page-ease),transform 360ms var(--page-ease)}
.motion-ready #work .section-heading.visible{opacity:1;transform:none}
.motion-ready #work .project{opacity:1;transform:none;transition:none}
.motion-ready #work .project-info{opacity:0;transform:translate3d(-24px,0,0);transition:opacity 320ms var(--page-ease),transform 400ms var(--page-ease)}
.motion-ready #work .project-preview{opacity:0;transform:translate3d(24px,0,0) scale(.99);transition:opacity 320ms var(--page-ease) 40ms,transform 400ms var(--page-ease) 40ms}
.motion-ready #work .project.visible .project-info,.motion-ready #work .project.visible .project-preview{opacity:1;transform:none}
.motion-ready #work .work-note{opacity:0;transform:translate3d(14px,0,0);transition:opacity 280ms var(--page-ease),transform 340ms var(--page-ease)}
.motion-ready #work .work-note.visible{opacity:1;transform:none}

/* STACK — quick system scan without clipping. */
.motion-ready #stack .section-heading{opacity:0;transform:translate3d(0,12px,0);transition:opacity 260ms var(--page-ease),transform 320ms var(--page-ease)}
.motion-ready #stack .section-heading.visible{opacity:1;transform:none}
.motion-ready #stack .tech-cat{opacity:0;transform:translate3d(-16px,0,0);transition:opacity 260ms var(--page-ease),transform 320ms var(--page-ease);transition-delay:var(--motion-delay,0ms)}
.motion-ready #stack .tech-cat:nth-child(even){transform:translate3d(16px,0,0)}
.motion-ready #stack .tech-cat.visible{opacity:1;transform:none}
.motion-ready #stack .tech-cat li{opacity:0;transform:translate3d(0,6px,0);transition:opacity 180ms var(--page-ease),transform 220ms var(--page-ease);transition-delay:var(--motion-delay,70ms)}
.motion-ready #stack .tech-cat.visible li{opacity:1;transform:none}
.motion-ready #stack .tech-name::before{content:'> ';color:var(--sage);opacity:0;transition:opacity 140ms linear;transition-delay:var(--motion-delay,90ms)}
.motion-ready #stack .tech-cat.visible .tech-name::before{opacity:1}

/* ATTESTATION — gentle staggered cards. */
.motion-ready #attestation .section-heading{opacity:0;transform:translate3d(0,14px,0);transition:opacity 300ms var(--page-ease),transform 360ms var(--page-ease)}
.motion-ready #attestation .section-heading.visible{opacity:1;transform:none}
.motion-ready #attestation .testimonial{opacity:0;transform:translate3d(0,18px,0);transition:opacity 300ms var(--page-ease),transform 360ms var(--page-ease);transition-delay:var(--motion-delay,0ms)}
.motion-ready #attestation .testimonial:nth-child(3n+1){transform:translate3d(-12px,16px,0)}
.motion-ready #attestation .testimonial:nth-child(3n+3){transform:translate3d(12px,16px,0)}
.motion-ready #attestation .testimonial.visible{opacity:1;transform:none}
.motion-ready #attestation .testimonial-quote-mark{display:inline-block;opacity:0;transform:scale(.8);transition:opacity 180ms linear,transform 220ms var(--page-ease);transition-delay:var(--motion-delay,70ms)}
.motion-ready #attestation .testimonial.visible .testimonial-quote-mark{opacity:1;transform:none}

/* COLLAB — alternating conversation rhythm. */
.motion-ready #collab .section-heading{opacity:0;transform:translate3d(18px,0,0);transition:opacity 300ms var(--page-ease),transform 360ms var(--page-ease)}
.motion-ready #collab .section-heading.visible{opacity:1;transform:none}
.motion-ready #collab .collab-section{opacity:0;transition:opacity 300ms var(--page-ease),transform 360ms var(--page-ease)}
.motion-ready #collab .collab-section:nth-of-type(odd){transform:translate3d(-20px,0,0)}
.motion-ready #collab .collab-section:nth-of-type(even){transform:translate3d(20px,0,0)}
.motion-ready #collab .collab-section.visible{opacity:1;transform:none}
.motion-ready #collab .collab-item,.motion-ready #collab .collab-list li{opacity:0;transform:translate3d(0,8px,0);transition:opacity 220ms var(--page-ease),transform 260ms var(--page-ease);transition-delay:var(--motion-delay,70ms)}
.motion-ready #collab .collab-section.visible .collab-item,.motion-ready #collab .collab-section.visible .collab-list li{opacity:1;transform:none}

/* RESOURCES — compact directory cascade. */
.motion-ready #resources .section-heading{opacity:0;transform:translate3d(0,-12px,0);transition:opacity 280ms var(--page-ease),transform 340ms var(--page-ease)}
.motion-ready #resources .section-heading.visible{opacity:1;transform:none}
.motion-ready #resources .resources-filter{opacity:0;transform:translate3d(-16px,0,0);transition:opacity 280ms var(--page-ease),transform 340ms var(--page-ease)}
.motion-ready #resources .resources-filter.visible{opacity:1;transform:none}
.motion-ready #resources .res-tab{opacity:0;transform:translate3d(0,-6px,0);transition:opacity 180ms var(--page-ease),transform 220ms var(--page-ease);transition-delay:var(--motion-delay,50ms)}
.motion-ready #resources .resources-filter.visible .res-tab{opacity:1;transform:none}
.motion-ready #resources .resources-list{opacity:1;transform:none;transition:none}
.motion-ready #resources .resource{opacity:0;transform:translate3d(-14px,0,0);transition:opacity 240ms var(--page-ease),transform 300ms var(--page-ease);transition-delay:var(--motion-delay,0ms)}
.motion-ready #resources .resources-list.visible .resource:not([hidden]){opacity:1;transform:none}
.motion-ready #resources .res-more{transition:transform 180ms var(--page-ease),border-color 180ms,color 180ms,background 180ms}
.motion-ready #resources .res-more:hover{transform:translate3d(0,-2px,0)}

@media (hover:hover) and (pointer:fine){
  .motion-ready #about .about-journey.visible .path-card:hover{transform:translate3d(0,-3px,0)}
  .motion-ready #stack .tech-cat.visible li:hover{transform:translate3d(0,-2px,0);color:var(--sage)}
  .motion-ready #collab .collab-section.visible .collab-item:hover{transform:translate3d(-2px,-2px,0)}
  .motion-ready #resources .resources-list.visible .resource:not([hidden]):hover{transform:translate3d(-2px,-2px,0)}
}

@media(max-width:760px){
  .motion-ready #about .reveal,.motion-ready #about .reveal:nth-of-type(even),
  .motion-ready #collab .section-heading,.motion-ready #collab .collab-section:nth-of-type(odd),.motion-ready #collab .collab-section:nth-of-type(even),
  .motion-ready #resources .resources-filter,.motion-ready #resources .resource,
  .motion-ready #work .project-info,.motion-ready #work .project-preview{
    transform:translate3d(0,14px,0);
  }
  .motion-ready #about .reveal.visible,.motion-ready #collab .section-heading.visible,.motion-ready #collab .collab-section.visible,
  .motion-ready #resources .resources-filter.visible,.motion-ready #resources .resources-list.visible .resource:not([hidden]),
  .motion-ready #work .project.visible .project-info,.motion-ready #work .project.visible .project-preview{transform:none}
}

/* HOME performance overrides. Keep unique choreography, remove expensive paint effects. */
.system-panel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#home .name-line,#home .capability{will-change:auto!important}

#home.home-motion-in .home-location,#home.home-motion-in .quiet-link,#home.home-motion-in .intro,
#home.home-motion-in .name-line-a,#home.home-motion-in .name-line-b,#home.home-motion-in .home-role,
#home.home-motion-in .home-description,#home.home-motion-in .hero-actions .primary-link,
#home.home-motion-in .hero-actions .secondary-link,#home.home-motion-in .system-panel,
#home.home-motion-in .hero-visual .sculpture,#home.home-motion-in .hero-visual .hoodie-toggle,
#home.home-motion-in .hero-visual .hoodie-picker,#home.home-motion-in .capability{animation-duration:420ms!important}

#home.home-motion-out .home-location,#home.home-motion-out .quiet-link,#home.home-motion-out .intro,
#home.home-motion-out .name-line-a,#home.home-motion-out .name-line-b,#home.home-motion-out .home-role,
#home.home-motion-out .home-description,#home.home-motion-out .hero-actions .primary-link,
#home.home-motion-out .hero-actions .secondary-link,#home.home-motion-out .system-panel,
#home.home-motion-out .hero-visual .sculpture,#home.home-motion-out .hero-visual .hoodie-toggle,
#home.home-motion-out .hero-visual .hoodie-picker,#home.home-motion-out .capability{animation-duration:190ms!important}

@keyframes homeIntroIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes homeNameLeftIn{from{opacity:0;transform:translate3d(-28px,10px,0)}to{opacity:1;transform:none}}
@keyframes homeNameRightIn{from{opacity:0;transform:translate3d(28px,10px,0)}to{opacity:1;transform:none}}
@keyframes homeRoleIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes homeDescriptionIn{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes homePanelIn{from{opacity:0;transform:translate3d(0,-12px,0) scaleY(.96)}to{opacity:1;transform:none}}
@keyframes homeCharacterIn{0%{opacity:0;transform:translate3d(0,24px,0) scale(.94)}75%{opacity:1;transform:translate3d(0,-2px,0) scale(1.005)}100%{opacity:1;transform:none}}
@keyframes homeControlIn{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
@keyframes homeCapabilityIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

@keyframes homeMetaOut{to{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes homeTalkOut{to{opacity:0;transform:translate3d(8px,0,0)}}
@keyframes homeIntroOut{to{opacity:0;transform:translate3d(-10px,0,0)}}
@keyframes homeNameLeftOut{to{opacity:0;transform:translate3d(-28px,0,0)}}
@keyframes homeNameRightOut{to{opacity:0;transform:translate3d(28px,0,0)}}
@keyframes homeRoleOut{to{opacity:0;transform:translate3d(0,10px,0)}}
@keyframes homeDescriptionOut{to{opacity:0;transform:translate3d(-12px,0,0)}}
@keyframes homePanelOut{to{opacity:0;transform:translate3d(0,-10px,0) scaleY(.97)}}
@keyframes homeCharacterOut{to{opacity:0;transform:translate3d(0,18px,0) scale(.96)}}
@keyframes homeControlOut{to{opacity:0;transform:translate3d(0,5px,0)}}
@keyframes homeCapabilityOut{to{opacity:0;transform:translate3d(0,10px,0)}}

.motion-ready #home .home-scroll-motion{opacity:0;transition:opacity 300ms var(--page-ease),transform 360ms var(--page-ease)}
.motion-ready #home .home-motion-work{transform:translate3d(-20px,0,0)}
.motion-ready #home .home-motion-current{transform:translate3d(0,18px,0) scale(.995)}
.motion-ready #home .home-motion-github{transform:translate3d(20px,0,0)}
.motion-ready #home .home-motion-resources{transform:translate3d(0,16px,0) scale(.99)}
.motion-ready #home .home-scroll-motion.visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .view.active.page-motion-in,.view.active.page-motion-out{animation:none!important;opacity:1!important;transform:none!important}
  .motion-ready #about .reveal,.motion-ready #about .about-media li,.motion-ready #about .stat,.motion-ready #about .path-card,.motion-ready #about .path-direction,.motion-ready #about .certificate-card,
  .motion-ready #work .section-heading,.motion-ready #work .project-info,.motion-ready #work .project-preview,.motion-ready #work .work-note,
  .motion-ready #stack .section-heading,.motion-ready #stack .tech-cat,.motion-ready #stack .tech-cat li,.motion-ready #stack .tech-name::before,
  .motion-ready #attestation .section-heading,.motion-ready #attestation .testimonial,.motion-ready #attestation .testimonial-quote-mark,
  .motion-ready #collab .section-heading,.motion-ready #collab .collab-section,.motion-ready #collab .collab-item,.motion-ready #collab .collab-list li,
  .motion-ready #resources .section-heading,.motion-ready #resources .resources-filter,.motion-ready #resources .res-tab,.motion-ready #resources .resource,
  .motion-ready #home .home-scroll-motion,.motion-ready #home .home-scroll-motion.visible{
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important;
  }
}

@media(max-width:760px){
  @keyframes homeNameMobileIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
  @keyframes homeNameMobileOut{to{opacity:0;transform:translate3d(0,-12px,0)}}
}

.motion-ready #home .home-motion-attestation{transform:translate3d(-14px,14px,0) scale(.995)}
.motion-ready #home .home-motion-attestation.visible{transform:none}