/* Motion is opt-in through JS; the unenhanced document is fully visible. */
.chain-image{width:100%;height:100%;object-fit:contain}
.chain-sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;mask:url('/assets/chain.svg') center/contain no-repeat;mask-mode:luminance}
.chain-sheen::before{content:'';position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,transparent,#edf5fb42 44%,#fff9 50%,#edf5fb42 56%,transparent);opacity:0;transform:translateX(-180%) skewX(-22deg)}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 0;border:0;background:none;color:#aebbc5;font-size:10px}
.motion-toggle svg{width:13px;height:13px}
.motion-toggle:hover{color:#eef4f8}
.motion-toggle:disabled{color:#a0abb3;cursor:default}

@media(prefers-reduced-motion:no-preference){
  .motion-enabled .chain-art{animation:chain-float 12s ease-in-out infinite;animation-play-state:paused}
  .motion-enabled .chain-sheen::before{animation:chain-sheen 9s ease-in-out infinite;animation-play-state:paused}
  .motion-enabled .hero-visual.is-in-view .chain-art,
  .motion-enabled .hero-visual.is-in-view .chain-sheen::before{animation-play-state:running}
  .motion-enabled.page-hidden .chain-art,
  .motion-enabled.page-hidden .chain-sheen::before{animation-play-state:paused}

  .motion-enabled .project-card::after{content:'';position:absolute;inset:-10% -20%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#d9e7f109 47%,#d9e7f11a 50%,#d9e7f109 53%,transparent 65%);transform:translateX(-110%)}
  .motion-enabled .project-card:is(:hover,:focus-visible)::after{animation:card-sheen .85s cubic-bezier(.2,.7,.2,1) both}
  .motion-enabled .orbit{transition:transform .65s cubic-bezier(.2,.7,.2,1),border-color .65s}
  .motion-enabled .project-card:is(:hover,:focus-visible) .orbit-one{transform:rotate(57deg);border-color:#bccad831}
  .motion-enabled .project-card:is(:hover,:focus-visible) .orbit-two{transform:rotate(37deg);border-color:#bccad81c}
  .motion-enabled .project-card:is(:hover,:focus-visible) .project-icon{transform:translateY(-5px);color:#edf7ff}
  .motion-enabled .chain-node{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s,box-shadow .3s}
  .motion-enabled .chain-tab[aria-selected=true] .chain-node{transform:rotate(45deg) translate(-2px,-2px)}
  .motion-enabled .button svg,.motion-enabled .text-link svg,.motion-enabled .contact-email svg,.motion-enabled .next-project svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .motion-enabled :is(.button,.text-link,.contact-email,.next-project>a):hover svg{transform:translate(3px,-3px)}
  .motion-enabled .principle-number svg{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .motion-enabled .principles article:hover .principle-number svg{transform:rotate(90deg)}
  .motion-enabled .detail-symbol{animation:facet-arrive 1.1s cubic-bezier(.2,.7,.2,1) backwards}
}

@keyframes chain-float{
  0%,100%{transform:translate(-50%,0) rotate(calc(var(--chain-angle,0deg) - .8deg))}
  50%{transform:translate(-50%,-11px) rotate(calc(var(--chain-angle,0deg) + .8deg))}
}
@keyframes chain-sheen{
  0%,5%{transform:translateX(-180%) skewX(-22deg);opacity:0}
  9%{opacity:.8}
  29%,100%{transform:translateX(460%) skewX(-22deg);opacity:0}
}
@keyframes card-sheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes facet-arrive{from{opacity:0;transform:rotate(35deg) scale(.93)}to{opacity:1;transform:rotate(45deg) scale(1)}}

@media(max-width:600px){.chain-art{--chain-angle:13deg}.motion-enabled .chain-art{animation-duration:14s}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-paused{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){.chain-sheen{display:none}}