/* Tangible surfaces: artwork moves; reading and native scrolling stay steady. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:90;pointer-events:none;contain:strict}
.reading-progress>span{display:block;width:100%;height:100%;background:var(--brand-coral);transform:scaleX(0);transform-origin:left}
.motion-enabled .header{transition:box-shadow 220ms var(--ease),border-color 220ms var(--ease)}
.motion-enabled .header.is-scrolled{box-shadow:0 14px 24px -22px #061725aa}
.motion-enabled .header.is-scrolled::before{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--line);pointer-events:none}
.motion-enabled .nav a[aria-current=location]::after{transform:scaleX(1)}
.motion-enabled :is(a,button,summary,.rating-star-label){-webkit-tap-highlight-color:transparent}
.motion-enabled :is(button,summary,.button,.vault-button,.nav a,.collection-jump,.glimpse-button,.video-open){touch-action:manipulation}
.motion-enabled :is(button,a,summary,.rating-star-label){transition-property:background-color,color,border-color,box-shadow,transform,scale;transition-duration:180ms;transition-timing-function:var(--ease)}
.motion-enabled .is-pressing{scale:.975;transition-duration:90ms!important}
.motion-enabled :is(.vault-door,.video-open).is-pressing{scale:.992}
.motion-enabled .rating-star-label.is-pressing{scale:.9}
.motion-enabled :is(a,button,summary):focus-visible{outline-offset:5px}

.motion-enabled :is(.project-visual,.workshop-art,.video-open)[data-motion-surface]{position:relative;isolation:isolate;transform:perspective(1100px) translateY(var(--surface-lift,0px)) rotateX(var(--surface-rx,0deg)) rotateY(var(--surface-ry,0deg));transition:box-shadow 240ms var(--ease),scale 180ms var(--ease)}
[data-motion-surface].is-surface-hover{will-change:transform}
.surface-sheen{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#eae6de26 48%,transparent 76%);opacity:0;transform:translateX(var(--surface-light,0%));transition:opacity 220ms var(--ease)}
.is-surface-hover>.surface-sheen{opacity:1}
.motion-enabled [data-motion-drift]{translate:0 var(--drift-y,0px)}
.motion-enabled .art-frame[data-motion-drift]{scale:var(--drift-scale,1)}
.motion-enabled .project-visual:focus-within{--surface-lift:0px}
.touch-echo{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid var(--brand-coral);border-radius:50%;pointer-events:none;z-index:100;box-sizing:border-box}

.motion-enabled dialog[open]{animation:panel-arrive 280ms var(--ease) both}
.motion-enabled dialog[open]::backdrop{animation:backdrop-arrive 180ms ease-out both}
@keyframes panel-arrive{from{opacity:.4;translate:0 12px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
  .motion-enabled .nav.open{animation:menu-arrive 200ms var(--ease) both}
  .reading-progress{height:2px}
}
@keyframes menu-arrive{from{opacity:.6;translate:0 -7px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){
  .motion-enabled :is(.button,.vault-button,.rating-submit,.glimpse-button):hover{box-shadow:0 9px 18px -13px #06172599}
  .motion-enabled :is(.project,.workshop-card):hover .project-word{translate:0 -3px}
  .motion-enabled .project-word{transition:translate 300ms var(--ease)}
}
@media(prefers-reduced-motion:reduce){
  .motion-enabled [data-motion-drift]{translate:none!important;scale:1!important}
  .motion-enabled [data-motion-surface]{transform:none!important;will-change:auto!important}
  .surface-sheen,.touch-echo{display:none!important}
  .motion-enabled .is-pressing{scale:1!important;outline:2px solid var(--focus);outline-offset:3px}
  .motion-enabled .header,.motion-enabled :is(a,button,summary,.rating-star-label){transition:none!important}
  .motion-enabled dialog[open],.motion-enabled dialog[open]::backdrop,.motion-enabled .nav.open{animation:none!important}
  .motion-enabled .project-word{translate:none!important}
}
