/* Motion experiment layered over the live homepage snapshot. */
:root{--motion-ease:cubic-bezier(.45,0,.25,1)}
html{scroll-behavior:auto}
.reference-hero,.product-image,.pattern-photo,.gift-photo{overflow:hidden}
body.motion-on a,body.motion-on button{transition:color 500ms var(--motion-ease),background-color 500ms var(--motion-ease),border-color 500ms var(--motion-ease),opacity 500ms var(--motion-ease)}
body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.motion-off .product-image:hover img{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}body.motion-on .product-image:hover img{transform:none!important}}

/* Keep images in place. */
body.motion-on .product-card:hover{transform:none!important;box-shadow:none!important}
body.motion-on .button:hover,body.motion-on .btn:hover{transform:none!important}

/* Preserve the layout during interaction. */
.product-image img,.product-image:hover img,.product-card,.product-card:hover{transform:none!important;transition:none!important}
.editorial-header :is(.nav-item > a,.shop-toggle,.header-btn,.menu-button):is(:hover,:focus-visible){text-decoration:none!important}
.motion-label{position:relative;display:inline-block}
.motion-label::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;opacity:0;transform:scaleX(.3);transform-origin:center;pointer-events:none}
body.motion-on .motion-label::after{transition:transform 650ms var(--motion-ease),opacity 650ms var(--motion-ease)}
:is(a,button,summary):is(:hover,:focus-visible,[aria-expanded="true"]) .motion-label::after{opacity:.55;transform:scaleX(1)}
body.motion-on .lomo-shop-menu a{transition:background-color 480ms var(--motion-ease),color 480ms var(--motion-ease)}
.lomo-shop-menu a:is(:hover,:focus-visible){background:#f4f1ea!important;color:#172b3e!important}
body.motion-on .text-link span:not(.motion-label),body.motion-on .button span:not(.motion-label){display:inline-block;transition:transform 550ms var(--motion-ease)}
body.motion-on .text-link:is(:hover,:focus-visible) span,body.motion-on .button:is(:hover,:focus-visible) span:not(.motion-label){transform:translate(2px,-2px)}
body.motion-on .story summary{transition:color 480ms var(--motion-ease)}
.story summary:is(:hover,:focus-visible){color:#806b48}
body.motion-on .story summary span:not(.motion-label){display:inline-block;transition:transform 480ms var(--motion-ease)}
.story details[open] summary span:not(.motion-label){transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){body.motion-on .text-link:is(:hover,:focus-visible) span,body.motion-on .button:is(:hover,:focus-visible) span{transform:none}}

/* Tonal changes rather than dark color inversions. */
body.motion-on :is(.reference-hero-content a,.button,.btn-outline-dark){transition:background-color 850ms var(--motion-ease),border-color 850ms var(--motion-ease),color 850ms var(--motion-ease),box-shadow 1000ms var(--motion-ease)!important}
.reference-hero-content a:is(:hover,:focus-visible){background:#f2eee6!important;color:#263440!important;opacity:1!important;box-shadow:0 4px 16px rgba(32,39,44,.07)}
.btn-outline-dark:is(:hover,:focus-visible){background:#f2efe9!important;color:#263440!important;border-color:#a39a8b!important;box-shadow:none!important}
.gift-copy .button:is(:hover,:focus-visible){background:#31415a!important;color:#fff!important;border-color:#31415a!important}
body.motion-on :is(.reference-hero,.pattern-photo,.gift-photo,.product-image){position:relative}
body.motion-on :is(.reference-hero,.pattern-photo,.gift-photo,.product-image)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 -24px 55px rgba(43,34,24,.12);opacity:0;transition:opacity 1500ms var(--motion-ease)}
@media(hover:hover){body.motion-on :is(.reference-hero,.pattern-photo,.gift-photo,.product-image):hover::before{opacity:1}}
body.motion-on .product-image:focus-visible::before{opacity:1}

/* One shared underline for text controls, including nested product names. */
.motion-text-control,.motion-text-control:is(:hover,:focus-visible),.motion-text-control strong{text-decoration:none!important}
a.motion-text-control:not(.button):not(.btn):not(.reference-hero-content a){border-bottom:0!important}
.motion-text-control .motion-label{margin:0;transform:none!important}

/* Deep cobalt on the wordmark, without changing its typography. */
.wordmark:is(:hover,:focus-visible),.wordmark:is(:hover,:focus-visible) span{color:#12346b!important}
body.motion-on .wordmark,body.motion-on .wordmark span{transition:color 850ms var(--motion-ease)}

/* Keep editorial copy and photography together on wide screens. */
@media(min-width:768px){
 #collection,#craft{max-width:1280px;margin-inline:auto;column-gap:clamp(32px,4vw,64px)}
 #collection.collection{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
 #craft{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
 #collection .collection-title p,#craft .gift-copy p{max-width:36ch}
 #collection .collection-title,#craft .gift-copy{min-width:0}
 #collection h2,#craft h2{font-size:clamp(36px,4.1vw,58px)}
 #craft .gift-photo{height:clamp(400px,38vw,500px)}
}

/* The alternate product photograph fades over the primary image. */
.product-image{position:relative}
.product-card .product-image img.product-image-secondary{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:contain;background:#fff;mix-blend-mode:normal;opacity:0;pointer-events:none;z-index:2;transition:opacity 850ms var(--motion-ease)!important}
@media(hover:hover) and (pointer:fine){.product-card:hover .product-image.has-secondary img.product-image-secondary{opacity:1}}
.product-image.has-secondary:focus-visible img.product-image-secondary{opacity:1}
body.motion-off .product-card .product-image img.product-image-secondary{transition:none!important}
@media(prefers-reduced-motion:reduce){.product-card .product-image img.product-image-secondary{transition:none!important}}