:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--press-time:140ms;--feedback-time:200ms}
.hero-watch{border-radius:100px;padding:11px 20px;background:#1d142b;transition:background-color var(--feedback-time) ease,color var(--feedback-time) ease}
.hero-watch svg{transition:transform var(--feedback-time) var(--ease-out)}
.compare,.design-picker button,.film-caption button,.horizontal,.resource-rows a,.workflow>div>a,footer nav a{transition:transform var(--press-time) var(--ease-out),color var(--feedback-time) ease,background-color var(--feedback-time) ease}
.compare:active,.hero-watch:active,.design-picker button:active,.film-caption button:active,.horizontal:active,.resource-rows a:active{transform:scale(.97)}
.compare>span,.horizontal>span,.resource-rows a>span:last-child,.workflow a>span{display:inline-block;transition:transform var(--feedback-time) var(--ease-out)}
.design-picker{position:relative;display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,320px);gap:0;isolation:isolate}
.design-picker button{width:100%;padding:8px 14px;text-align:center;position:relative;z-index:1}
.design-picker.has-lens button[aria-pressed=true]{background:transparent;color:#b7adc5}
.design-lens{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);background:#d3bcff;color:#140c22;font-size:13px;text-align:center;pointer-events:none;z-index:2;transition:clip-path 250ms var(--ease-in-out);clip-path:inset(0 66.6667% 0 0 round 7px)}
.design-lens span{display:grid;place-items:center}
.featured{transition:border-color 250ms ease}
.film-card{transform-origin:50% 50%}
@media(hover:hover) and (pointer:fine){.hero-watch:hover{background:#30203f;color:#eee2ff}.hero-watch:hover svg{transform:translateX(3px)}.compare:hover{transform:translateY(-2px);background:#2d203c}.compare:hover>span,.horizontal:hover>span,.workflow a:hover>span{transform:translate(2px,-2px)}.resource-rows a:hover{background:#17101f}.resource-rows a:hover>span:last-child{transform:translate(4px,-4px)}.featured:hover{border-color:#80639f}.design-picker button:hover{background:#2b203a}.design-picker.has-lens button[aria-pressed=true]:hover{background:transparent}}
@media(prefers-reduced-motion:no-preference){.shop-hero h1{animation:hero-unveil 600ms var(--ease-out) both}.shop-hero p{animation:hero-copy 450ms 70ms var(--ease-out) both}.shop-hero .hero-watch{animation:hero-copy 450ms 140ms var(--ease-out) both}@keyframes hero-unveil{from{clip-path:inset(0 0 12% 0);transform:translateY(10px);opacity:.4}to{clip-path:inset(0);transform:translateY(0);opacity:1}}@keyframes hero-copy{from{opacity:.45}to{opacity:1}}}
@media(prefers-reduced-motion:reduce){.compare,.design-picker button,.film-caption button,.horizontal,.resource-rows a,.workflow>div>a,footer nav a{transition-property:color,background-color;transition-duration:100ms}.compare:active,.hero-watch:active,.design-picker button:active,.film-caption button:active,.horizontal:active,.resource-rows a:active,.compare:hover,.hero-watch:hover svg,.compare:hover>span,.horizontal:hover>span,.workflow a:hover>span,.resource-rows a:hover>span:last-child{transform:none}.design-lens{transition:none}}