/* Architectural motion: clipped typography, sliding glass panes, and a scroll aperture. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.hero-image img{animation:architectural-hero-image 1.8s var(--motion-ease) both;will-change:auto}
.hero .hero-line>span{transform-origin:0 100%;animation:architectural-title 1.25s var(--motion-ease) both}
.hero .hero-line:nth-child(1)>span{animation-delay:.08s}
.hero .hero-line:nth-child(2)>span{animation-delay:.22s}
.hero .hero-line:nth-child(3)>span{animation-delay:.36s}
.hero-description{animation:architectural-description 1s .55s var(--motion-ease) both}
.motion-ready .hero-image::before,.motion-ready .hero-image::after{content:'';position:absolute;top:0;bottom:0;width:50.1%;background:var(--ink);z-index:1;pointer-events:none;animation:architectural-aperture 1.45s var(--motion-ease) both}
.motion-ready .hero-image::before{left:0;--shutter-travel:-101%}
.motion-ready .hero-image::after{right:0;--shutter-travel:101%;animation-delay:.06s}
.motion-hero-complete .hero-image::before,.motion-hero-complete .hero-image::after{display:none}
.motion-hero-complete .hero-image img{animation:none;transform:scale(1.07)}
.motion-hero-complete .hero .hero-line>span,.motion-hero-complete .hero-description{animation:none;transform:none;clip-path:none;opacity:1}
@keyframes architectural-aperture{0%{transform:translateX(0)}100%{transform:translateX(var(--shutter-travel))}}
@keyframes architectural-hero-image{from{transform:scale(1.24)}to{transform:scale(1.07)}}
@keyframes architectural-title{from{transform:translateY(125%) rotate(5deg)}to{transform:translateY(0) rotate(0)}}
@keyframes architectural-description{from{opacity:0;transform:translateY(38px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.motion-heading .motion-word{display:inline-block;vertical-align:top;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;line-height:inherit}
.motion-heading motion-copy{display:block;line-height:inherit}
.motion-ready .motion-heading{opacity:1;transform:none;clip-path:none}
.motion-ready .motion-heading motion-copy{transform:translateY(120%) rotate(3deg);transform-origin:0 100%;transition:transform 1.12s var(--motion-ease) var(--word-delay,0ms),opacity .65s ease}
.motion-ready .motion-heading.is-visible motion-copy{transform:translateY(0) rotate(0)}
.motion-ready .word-reveal .word,.motion-ready .word-reveal .word.read{opacity:1;transform:none;transition:none}
.motion-ready .word-reveal .word motion-copy{opacity:.24}
.motion-ready .word-reveal .word.read motion-copy{opacity:1}
.motion-ready .motion-step{opacity:0;translate:0 52px;transition:opacity .8s var(--motion-ease) var(--motion-delay,0ms),translate 1.1s var(--motion-ease) var(--motion-delay,0ms),color .35s,padding .4s}
.motion-ready .motion-step.is-visible{opacity:1;translate:0 0}
.motion-ready .product-media.motion-photo{clip-path:inset(8% 49.5% 8% 49.5%);transition:clip-path 1.4s var(--motion-ease);border-radius:0}
.motion-ready .product-media.motion-photo.is-visible{clip-path:inset(0 0 0 0)}
.product-media img,.product-panel:hover .product-media img{translate:0 var(--photo-shift,0px);transform:scale(1.14);transition:filter .8s ease}
.product-media .product-image-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:1}
.product-crosshair,.media-caption{z-index:2}
.product-tab{position:relative}
.product-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .75s var(--motion-ease)}
.product-tab.is-active::after{transform:scaleX(1)}
.motion-ready .closing{border-radius:0}
.closing>img{translate:0 var(--photo-shift,0px);transform:scale(var(--closing-scale,1.12));filter:saturate(.7)}
.motion-ready .closing>img,.motion-ready .closing>.closing-shade{clip-path:inset(var(--closing-inset-y,13%) var(--closing-inset-x,23%));border-radius:0}
.faq-answer{animation:none}
.faq-list details.faq-is-closing summary>svg{transform:rotate(0)}
.faq-list summary{transition:color .3s ease}
.faq-list summary:hover{color:#70428c}
.mobile-menu{transform-origin:top}
.motion-paused,.motion-paused *,.motion-paused::before,.motion-paused::after,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
.calc-material-toggle button,.calc-sash-options button{transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
.calc-finish-options button{transition:transform .35s var(--motion-ease),border-color .35s ease}
.calc-finish-options button:hover{transform:translateY(-3px)}
.calc-finish-options button:active{transform:translateY(0)}
.calc-add>svg{transition:transform .45s var(--motion-ease)}
.calc-add:hover>svg{transform:rotate(90deg)}
.product-cta>svg,.closing-link>svg{transition:transform .5s var(--motion-ease)}
.product-cta:hover>svg{transform:translate(4px,-4px)}
@media(max-width:760px){.motion-ready .motion-step{translate:0 44px}.motion-ready .motion-step.is-visible{translate:0 0}.hero .hero-line>span{animation-duration:1.1s}.motion-ready .motion-heading motion-copy{transition-duration:1s,.65s}.motion-ready .product-media.motion-photo{transition-duration:1.25s}}
@media(prefers-reduced-motion:reduce){
 .motion-ready .hero-image::before,.motion-ready .hero-image::after{display:none}
 .hero-image img,.hero .hero-line>span,.hero-description{animation:none;transform:none;clip-path:none;opacity:1}
 .motion-ready .motion-heading,.motion-ready .motion-step,.motion-ready .product-media.motion-photo,.motion-ready .motion-heading motion-copy{opacity:1;transform:none;translate:none;clip-path:none;transition:none}
 .motion-ready .word-reveal .word motion-copy{opacity:1}
 .product-media img,.product-panel:hover .product-media img,.closing>img{translate:none;transform:none}
 .motion-ready .closing>img,.motion-ready .closing>.closing-shade{clip-path:none}
 .calc-finish-options button:hover,.calc-add:hover>svg{transform:none}
}
@media print{.motion-ready .motion-heading,.motion-ready .motion-step,.motion-ready .motion-photo,.motion-ready .motion-heading motion-copy,.motion-ready .closing>img,.motion-ready .closing>.closing-shade{opacity:1;transform:none;translate:none;clip-path:none}.motion-ready .hero-image::before,.motion-ready .hero-image::after{display:none}}