/* Motion is an enhancement; the complete composition remains visible without JS. */
.name-text{display:inline-block;transform-origin:50% 100%}
.motion-enabled .name-line{perspective:900px}
.motion-enabled .hero-photo img{transition:none}
.motion-enabled .hero-photo:hover img{transform:none}
.motion-enabled .section-title{transform-origin:0 100%}
.motion-enabled .section-label{position:relative;border-top-color:transparent}
.motion-enabled .section-label::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:var(--line);transform:scaleX(var(--rule-progress,1));transform-origin:left;pointer-events:none}
.motion-enabled .project:hover .project-art{transform:none}
.motion-enabled .project-art{transition:none}
.project-art{transform-origin:50% 60%}
.project-meta strong{display:inline-block;transition:letter-spacing .45s}
.project:hover .project-meta strong{letter-spacing:.035em}
.project:focus-visible{outline-offset:10px}
.footer-end{flex-wrap:wrap}
#motion-toggle{min-height:44px;padding:4px 0;font:inherit;border-bottom:1px solid var(--line);white-space:nowrap}
#motion-toggle:not([hidden]){display:inline-flex;align-items:center}
#motion-toggle:disabled{cursor:default;opacity:.65}

.kinetic{height:auto;background:var(--black);color:var(--paper);position:relative;isolation:isolate}
.kinetic-stage{position:relative;overflow:hidden;min-height:720px;display:flex;flex-direction:column;justify-content:center;padding:110px var(--pad)}
.kinetic-top,.kinetic-bottom{position:absolute;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:24px;z-index:2;font-size:9px;letter-spacing:.07em}
.kinetic-top{top:32px}.kinetic-bottom{bottom:30px;border-top:1px solid color-mix(in srgb,var(--paper) 25%,transparent);padding-top:18px}
.kinetic-type{position:relative;z-index:1;width:100%;pointer-events:none}
.kinetic-line{font:300 clamp(100px,min(15vw,23svh),245px)/.8 var(--serif);letter-spacing:-.055em;width:max-content;max-width:100%;padding:.035em 0}
.kinetic-line:nth-child(1){color:var(--pink);margin-left:3%}
.kinetic-line:nth-child(2){color:var(--sage);margin:10px auto}
.kinetic-line:nth-child(3){color:var(--paper);margin-left:auto;margin-right:3%}
.kinetic-orbit{position:absolute;left:31%;top:50%;width:38vw;max-width:610px;aspect-ratio:1;transform:translateY(-50%);color:var(--taupe);opacity:.55;pointer-events:none}
.kinetic-orbit i{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%}
.kinetic-orbit i:nth-child(2){transform:rotate(-35deg) scaleX(.42)}
.kinetic-orbit i:nth-child(3){transform:rotate(35deg) scaleX(.42)}
.kinetic-orbit span{position:absolute;left:50%;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.motion-cursor{display:none;position:fixed;left:0;top:0;width:104px;height:104px;z-index:90;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.motion-cursor-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;background:var(--pink);color:var(--black);border-radius:50%;font:9px/1 Arial,sans-serif;letter-spacing:.06em}
.motion-cursor svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  .motion-enabled .kinetic{height:175svh;min-height:1180px}
  .motion-enabled .kinetic-stage{height:100svh;min-height:640px;position:sticky;top:0}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.motion-enabled .motion-cursor{display:block}}
@media(max-width:760px){
  .kinetic-stage{min-height:520px;padding:100px var(--pad)}
  .kinetic-line{font-size:21vw;line-height:.9}
  .kinetic-line:nth-child(1){margin-left:0}
  .kinetic-line:nth-child(2){margin:17px auto}
  .kinetic-line:nth-child(3){margin-right:0}
  .kinetic-orbit{width:70vw;max-width:none;left:15%;opacity:.4}
  .kinetic-top,.kinetic-bottom{font-size:8px;gap:20px}
  .kinetic-top{top:27px}.kinetic-bottom{bottom:26px}
}
@media(prefers-reduced-motion:reduce){
  .name-text{transform:none!important;opacity:1!important;clip-path:none!important}
  .motion-cursor{display:none!important}
}