/* Motion follows one ease and a restrained 180–750ms rhythm. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
header{transition:box-shadow 350ms ease,background-color 350ms ease}
header.is-scrolled{box-shadow:0 5px 24px #132b3d0b;background-color:#f7f5effa}
.reveal-ready{opacity:0;transform:translateY(22px);transition:opacity 750ms var(--motion-ease),transform 750ms var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.reveal-ready.is-visible{opacity:1;transform:translateY(0)}
.hero-photo{transform-origin:70% 55%;backface-visibility:hidden}
.button{position:relative;overflow:hidden;transition:background-color 250ms ease,box-shadow 300ms ease,transform 350ms var(--motion-ease)}
.button:hover{transform:translateY(-2px);box-shadow:0 7px 20px #172d4012}
.button>span{transition:transform 400ms var(--motion-ease)}
.button:hover>span{transform:translate(3px,-3px)}
.button:active{transform:translateY(0);box-shadow:none;transition-duration:100ms}
.circle-arrow{transition:background-color 300ms ease,color 300ms ease,transform 450ms var(--motion-ease)}
.category:hover .circle-arrow{transform:rotate(7deg)}
.category-image .packshot,.product-art .packshot{transition:transform 800ms var(--motion-ease)}
.category:hover .packshot{transform:translateX(-50%) scale(1.045)}
.product-art:hover .packshot{transform:scale(1.045)}
.add{transition:border-color 300ms ease,color 250ms ease}
.add>span{transition:transform 350ms var(--motion-ease)}
.add:hover>span{transform:rotate(90deg)}
.add:active>span{transform:rotate(90deg) scale(.85)}
.filters button{transition:color 250ms ease}
.filters button:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left center;transition:transform 350ms var(--motion-ease)}
.filters button.active:after{transform:scaleX(1)}
.text-link{transition:border-color 250ms ease,color 250ms ease}
.text-link:hover{border-color:var(--navy);color:#496577}
.note-art{transition:transform 600ms var(--motion-ease)!important}
.note-card b{transition:transform 350ms var(--motion-ease)}
.note-card:hover b{transform:translate(3px,-3px)}
.close{transition:transform 300ms var(--motion-ease),opacity 200ms ease}
.close:hover{transform:rotate(90deg);opacity:.6}
.toast{transition:opacity 250ms ease,transform 450ms var(--motion-ease);box-shadow:0 8px 30px #142d4320}
dialog[open]::backdrop{animation:backdrop-enter 350ms ease both}
dialog.is-closing::backdrop{animation:backdrop-exit 260ms ease both}
@keyframes backdrop-enter{from{background-color:#0c1e3000;backdrop-filter:blur(0)}to{background-color:#0c1e30a6;backdrop-filter:blur(5px)}}
@keyframes backdrop-exit{from{background-color:#0c1e30a6;backdrop-filter:blur(5px)}to{background-color:#0c1e3000;backdrop-filter:blur(0)}}
@media(hover:none){.button:hover{transform:none;box-shadow:none}.button:hover>span,.add:hover>span,.note-card:hover b{transform:none}.product-art:hover .packshot{transform:none}.category:hover .packshot{transform:translateX(-50%)}.category:hover .circle-arrow{transform:none}}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1!important;transform:none!important;transition:none!important}.hero-photo{transform:none!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}