/* Separate layers: outer casting scroll/pointer, inner drift, image entrance. */
.motion-toggle{display:inline-grid;place-items:center;width:44px;height:44px;flex:0 0 44px;padding:0;background:transparent;border:1px solid var(--field);border-radius:0;color:var(--muted)}
.motion-toggle[hidden]{display:none}.motion-toggle:hover{color:var(--ink);border-color:var(--ink)}.motion-toggle:disabled{cursor:default;opacity:.6}
.motion-toggle svg{width:16px;height:16px}.motion-toggle .play-icon{display:none}.motion-toggle[aria-pressed=true] .play-icon{display:block}.motion-toggle[aria-pressed=true] .pause-icon{display:none}
.reading-progress{height:2px;background:var(--accent);position:fixed;top:0;left:0;right:0;z-index:30;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero-drift{width:100%}.hero-drift img{display:block}
.motion-on .hero-figure{transform:translate3d(var(--pointer-x,0px),calc(var(--hero-scroll,0px) + var(--pointer-y,0px)),0)}
.motion-on .hero-drift{animation:metal-drift 7s 1.1s ease-in-out infinite}
.motion-on.hero-away .hero-drift,.motion-on.page-hidden .hero-drift{animation-play-state:paused}
.motion-on:not(.hero-entered) .hero-title>span{animation:metal-enter 1000ms cubic-bezier(.2,.7,.2,1) both}
.motion-on:not(.hero-entered) .hero-title>span:nth-child(2){animation-delay:70ms}.motion-on:not(.hero-entered) .hero-title>span:nth-child(3){animation-delay:140ms}
.motion-on:not(.hero-entered) .hero-drift img{animation:metal-arrive 1100ms 80ms cubic-bezier(.16,.7,.22,1) both}
.motion-on .scroll-reveal{transition:opacity 600ms cubic-bezier(.2,.65,.2,1),transform 600ms cubic-bezier(.2,.65,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion-on .scroll-reveal.is-pending{opacity:0;transform:translate3d(0,20px,0)}
.motion-on .scroll-reveal:focus-within{opacity:1;transform:none;transition:none}
.mkw-parallax-photo>a{display:block;overflow:hidden}
.motion-on .mkw-parallax-photo .mkw-photo-pan{transform:translate3d(0,var(--process-shift,0px),0) scale(1.06)}
.mkw-offer-tabs button,.mkv-text-link,.mkw-menu-toggle{transition:color 200ms ease,border-color 200ms ease}
.mkv-text-link [aria-hidden],.mkv-button [aria-hidden]{display:inline-block;transition:transform 200ms ease}
@media(hover:hover) and (pointer:fine){.motion-on :is(.mkv-text-link,.mkv-button):hover [aria-hidden]{transform:translate(2px,-2px)}}
@keyframes metal-enter{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes metal-arrive{from{opacity:0;transform:translate3d(18px,16px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes metal-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes metal-drift-mobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
html.motion-off{scroll-behavior:auto}.motion-off .scroll-reveal{opacity:1;transform:none}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}
.page-hidden *{animation-play-state:paused!important}
@media(max-width:650px){.motion-on .hero-drift{animation-name:metal-drift-mobile}.motion-on .scroll-reveal.is-pending{transform:translate3d(0,16px,0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-figure,.hero-drift,.mkw-parallax-photo img,.scroll-reveal,.hero-title>span{transform:none!important;opacity:1!important}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.reading-progress,.motion-toggle{display:none}.scroll-reveal,.hero-title>span{opacity:1!important;transform:none!important}.hero-figure,.hero-drift,.mkw-parallax-photo img{transform:none!important;animation:none!important}}

/* Photo frame: entrance on figure, parallax on pan, hover on image. */
.motion-on:not(.photos-entered) .mkw-photo-hero{animation:metal-enter 800ms cubic-bezier(.2,.65,.2,1) both}
.motion-on:not(.photos-entered) .mkw-site:not(.mkv-family-home) .mkv-hero-copy{animation:metal-enter 700ms cubic-bezier(.2,.65,.2,1) both}
.motion-on .mkw-photo.scroll-reveal{transition:opacity var(--mk-photo-enter) ease,transform var(--mk-photo-enter) cubic-bezier(.2,.65,.2,1),border-color var(--mk-photo-duration),box-shadow var(--mk-photo-duration)}
.motion-on .mkw-photo.scroll-reveal.is-pending{transform:translate3d(0,24px,0)}
.motion-on .mkw-photo img{transition:transform var(--mk-photo-duration) ease}
@media(hover:hover) and (pointer:fine){.motion-on .mkw-photo a:hover img,.motion-on .mkw-photo a:focus-visible img{transform:scale(1.025)}}
.motion-off .mkw-photo-pan{transform:none}
@media(max-width:650px){.motion-on .mkw-parallax-photo .mkw-photo-pan{transform:none}}
@media(prefers-reduced-motion:reduce){.mkw-photo-pan,.mkw-photo img{transform:none!important}}