/* Motion changes presentation only; text, images and layout keep their composition. */
.motion-ready :is(#hero,#about,#work,#contact) [data-motion]{
  opacity:0;
  translate:0 var(--motion-distance,32px);
  transition:transform 350ms ease,border-color 250ms ease,color 220ms ease,background 220ms ease;
}
.motion-ready :is(#hero,#about,#work,#contact) [data-motion="fade"],
.motion-ready :is(#hero,#about,#work,#contact) [data-motion="portrait"]{translate:none}
.motion-ready :is(#hero,#about,#work,#contact) [data-motion="portrait"]{
  scale:1.035;
}
.motion-ready :is(#hero,#about,#work,#contact) [data-motion].motion-shown{
  opacity:1;translate:none;
  animation:wm-content-enter 850ms cubic-bezier(.22,1,.36,1) var(--motion-delay,0ms) both;
}
.motion-ready :is(#hero,#about,#work,#contact) [data-motion="fade"].motion-shown{animation-name:wm-fade-enter}
.motion-ready :is(#hero,#about,#work,#contact) [data-motion="portrait"].motion-shown{
  scale:1;
  animation:wm-portrait-enter 1400ms cubic-bezier(.22,1,.36,1) both;
}
.motion-ready :is(#hero,#about,#work,#contact) [data-motion-immediate],
.motion-ready :is(#hero,#about,#work,#contact) [data-motion-complete]{animation:none!important}
@keyframes wm-content-enter{
  from{opacity:0;translate:0 var(--motion-distance,32px)}
  to{opacity:1;translate:none}
}
@keyframes wm-fade-enter{from{opacity:0}to{opacity:1}}
@keyframes wm-portrait-enter{from{opacity:0;scale:1.035}to{opacity:1;scale:1}}

.site-scroll-progress{
  position:fixed;
  z-index:100;
  inset:0 0 auto;
  height:2px;
  background:#6f79ff;
  pointer-events:none;
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:left;
}
.is-gallery-open .site-scroll-progress{opacity:0}

.motion-ready #expertise .service-card .motion-satellites{
  transform-box:view-box;
  transform-origin:50% 52.3%;
  animation:service-orbit 22s linear infinite;
  animation-play-state:paused;
}
.motion-ready #expertise .service-card .mapping-scan{
  animation:service-scan 5s ease-in-out infinite;
  animation-play-state:paused;
}
.motion-ready #expertise .service-card .material-sphere{
  animation:service-material 6s ease-in-out infinite;
  animation-play-state:paused;
}
.motion-ready #expertise .service-card[data-motion-in-view] .motion-satellites,
.motion-ready #expertise .service-card[data-motion-in-view] .mapping-scan,
.motion-ready #expertise .service-card[data-motion-in-view] .material-sphere{animation-play-state:running}
.motion-ready .orange-marquee:not([data-motion-in-view]) .orange-marquee-track,
.motion-ready #about .about-sculpture-stage:not([data-motion-in-view]) img,
.motion-ready .contact-atmosphere:not([data-motion-in-view]) .contact-atmosphere-orbits{animation-play-state:paused}
.motion-paused *, .motion-paused *::before, .motion-paused *::after{animation-play-state:paused!important}

.motion-ready .topbar .nav a{position:relative}
.motion-ready .topbar .nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-5px;
  height:1px;
  background:currentColor;
  scale:0 1;
  transform-origin:left;
  transition:scale 240ms ease;
}
.motion-ready .topbar .nav a:focus-visible::after{scale:1 1}
.motion-ready #hero .hero-reel-art{transition:scale 300ms ease,border-color 300ms ease}
.motion-ready .project-gallery[open]{animation:wm-gallery-enter 280ms cubic-bezier(.22,1,.36,1)}
.motion-ready .project-gallery[open]::backdrop{animation:wm-backdrop-enter 240ms ease}
@keyframes wm-gallery-enter{from{opacity:0;translate:0 12px;scale:.99}to{opacity:1;translate:none;scale:1}}
@keyframes wm-backdrop-enter{from{opacity:0}to{opacity:1}}

@media(hover:hover) and (pointer:fine){
  .motion-ready .topbar .nav a:hover::after{scale:1 1}
  .motion-ready #hero .showreel:hover .hero-reel-art{scale:1.04;border-color:#8b93ff}
}
@media(max-width:700px){
  .motion-ready :is(#hero,#about,#work,#contact) [data-motion]{--motion-distance:18px}
  .motion-ready :is(#hero,#about,#work,#contact) [data-motion].motion-shown{animation-duration:650ms}
  .motion-ready :is(#hero,#about,#work,#contact) [data-motion="fade"],.motion-ready :is(#hero,#about,#work,#contact) [data-motion="portrait"],
  .motion-ready :is(#hero,#about,#work,#contact) [data-motion].motion-shown{translate:none}
  .motion-ready :is(#hero,#about,#work,#contact) [data-motion="portrait"]{scale:1}
  .motion-ready :is(#hero,#about,#work,#contact) [data-motion="portrait"].motion-shown{animation-name:wm-fade-enter;animation-duration:900ms}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready :is(#hero,#about,#work,#contact) [data-motion]{opacity:1!important;translate:none!important;scale:1!important;transition:none!important;animation:none!important}
  .motion-ready #expertise svg g,
  .motion-ready .orange-marquee-track,
  .motion-ready #about .about-sculpture img,
  .motion-ready .contact-atmosphere-orbits,
  .motion-ready .project-gallery,
  .motion-ready .project-gallery::backdrop{animation:none!important}
  .motion-ready .topbar .nav a::after{transition:none!important}
  .motion-ready #hero .hero-action,
  .motion-ready #hero .hero-action > span:last-child,
  .motion-ready #hero .hero-reel-art{transition:none!important;translate:none!important;scale:1!important}
}

/* Stable mobile contact glyphs, with reveal animation retained. */
@media (hover:none) and (pointer:coarse), (max-width:980px){
#contact .contact-mark,#contact .contact-mark:visited{color:#e3e3ec;-webkit-text-fill-color:currentColor}
#contact .contact-mark>svg{stroke:#e3e3ec;filter:none!important}
#contact .contact-mark .contact-instagram-dot{fill:#e3e3ec;stroke:none}
#contact .contact-behance-symbol{color:#e3e3ec;-webkit-text-fill-color:#e3e3ec;filter:none!important}
#contact .contact-title-accent{background:none!important;color:#827aff!important;-webkit-text-fill-color:currentColor!important}
}