:root{--motion-ease:cubic-bezier(.16,1,.3,1);--motion-exit:cubic-bezier(.5,0,.7,.3)}

/* Content is readable before, during, and after progressive enhancement. */
.js .reveal,.js .reveal.visible,.js h2.reveal{opacity:1;visibility:visible;clip-path:none;transform:none;transition:none}
.hero-copy{animation:none}
.motion-heading{display:inline-block;vertical-align:top}
.motion-heading>span{display:inline-block}
.intro h2>em,.work h2>em{display:inline-block}
.intro,.work,.material,.artist-section,.closing{position:relative}
.motion-rule{position:absolute;top:0;left:6%;right:6%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--gold-text),transparent);transform:scaleX(0);transform-origin:left;opacity:.7}
.chapter-entered>.motion-rule{transform:scaleX(1);transition:transform 1.55s var(--motion-ease)}
.intro>.motion-rule{background:linear-gradient(90deg,transparent,#6b5b30,transparent)}

/* A small camera movement gives the portrait depth without moving the copy. */
.artist-portrait{isolation:isolate}
.artist-portrait img{transform:translate3d(0,var(--portrait-y,0px),0) scale(1.045);transform-origin:center;transition:transform .35s linear}
.gallery .image-wrap{isolation:isolate;transform-origin:center}
.gallery .image-wrap img{transform:perspective(1200px) rotateX(var(--photo-rx,0deg)) rotateY(var(--photo-ry,0deg)) scale(var(--photo-scale,1));transition:transform 1.1s var(--motion-ease);filter:none}
.gallery .image-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--photo-x,50%) var(--photo-y,50%),#fff2,transparent 62%);opacity:0;transition:opacity .6s ease}
.gallery .caption>span{transition:letter-spacing .6s var(--motion-ease),color .4s ease}
.gallery .view-icon{transition:transform .65s var(--motion-ease),background .3s,color .3s}
.gallery .art-card:focus-visible .view-icon{background:var(--accent);color:#000;transform:translate(3px,-3px)}
@media(hover:hover) and (pointer:fine){
 .gallery .art-card:hover .image-wrap img{transform:perspective(1200px) rotateX(var(--photo-rx,0deg)) rotateY(var(--photo-ry,0deg)) scale(1.045);filter:none}
 .gallery .art-card:hover .image-wrap:after{opacity:1}
 .gallery .art-card:hover .caption>span{letter-spacing:.16em;color:var(--gold-text)}
}

/* Fine interaction details repeat the same easing throughout navigation. */
.desktop-nav a,.instagram-contact span,footer>a:last-child{position:relative}
.desktop-nav a:after,.instagram-contact span:after,footer>a:last-child:after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--motion-ease)}
.desktop-nav a:hover:after,.desktop-nav a:focus-visible:after,.instagram-contact:hover span:after,.instagram-contact:focus-visible span:after,footer>a:last-child:hover:after,footer>a:last-child:focus-visible:after{transform:scaleX(1);transform-origin:left}
.instagram-contact .ui-icon{transition:transform .55s var(--motion-ease)}
.instagram-contact:hover .ui-icon{transform:translateY(-2px)}
.menu-lines i{transition:width .4s var(--motion-ease),transform .4s var(--motion-ease)}
.menu-toggle:hover .menu-lines i:last-child{width:100%}
.close-glyph{transition:transform .55s var(--motion-ease),border-color .3s}
.navigation-close:hover .close-glyph,#artwork-dialog .close:hover .close-glyph{transform:rotate(90deg);border-color:var(--gold-text)}
.notes .plus{transition:transform .55s var(--motion-ease)}
.progress{will-change:width}

/* The menu opens as one curtain, then its labels settle in sequence. */
#navigation-dialog{transform-origin:50% 0;isolation:isolate}
#navigation-dialog .mobile-nav a{transform:none;opacity:1;visibility:visible;transition:color .3s;position:relative}
#navigation-dialog .mobile-nav a:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-text);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--motion-ease)}
#navigation-dialog .mobile-nav a:hover:after,#navigation-dialog .mobile-nav a:focus-visible:after{transform:scaleX(1)}
.nav-text,.nav-arrow{transition:transform .65s var(--motion-ease),color .3s}
.mobile-nav a:hover .nav-text,.mobile-nav a:focus-visible .nav-text{transform:translateX(8px);color:var(--gold-text)}
.mobile-nav a:hover .nav-arrow,.mobile-nav a:focus-visible .nav-arrow{transform:translate(3px,-3px)}
#navigation-dialog::backdrop,#artwork-dialog::backdrop{animation:motion-backdrop-in .65s var(--motion-ease) both}
#navigation-dialog.is-closing::backdrop,#artwork-dialog.is-closing::backdrop{animation:motion-backdrop-out .36s ease both}
@keyframes motion-backdrop-in{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(22px)}}
@keyframes motion-backdrop-out{from{opacity:1}to{opacity:0}}

/* Image proportions stay fixed while the viewing surface settles into place. */
#artwork-dialog .modal-image{transform-origin:center;isolation:isolate}
#artwork-dialog .modal-content{transform-origin:50% 50%}
#artwork-dialog .modal-content .eyebrow{display:inline-block}
#artwork-dialog .modal-content p{position:relative}
#artwork-dialog .photo-loading{z-index:2;background:#000b;margin:0 20px;padding:12px}

@media(max-width:700px){
 .artist-portrait img{transform:translate3d(0,var(--portrait-y,0px),0) scale(1.03)}
 .gallery .image-wrap img,.gallery .art-card:hover .image-wrap img{transform:none}
 .gallery .image-wrap:after{display:none}
}
@media(prefers-reduced-motion:reduce){
 .motion-rule,.chapter-entered>.motion-rule{transform:scaleX(1);transition:none}
 .artist-portrait img,.gallery .image-wrap img,.gallery .art-card:hover .image-wrap img{transform:none!important}
 .motion-heading,.motion-heading>span{transform:none!important}
 #navigation-dialog::backdrop,#artwork-dialog::backdrop{animation:none!important}
}