/* Product story: focused contrast, one purposeful gesture at a time. */
.motion-story{--story-ink:#0a0a0a;--story-paper:#f8f8f4;--story-blue:#214cff;position:relative;height:220svh;background:var(--story-ink);color:var(--story-paper);isolation:isolate}
.motion-sticky{--progress:0;position:sticky;top:90px;height:calc(100svh - 90px);min-height:600px;max-height:900px;overflow:hidden;isolation:isolate;background:linear-gradient(112deg,#0a0a0a 0%,#191c22 48%,#101319 100%)}
.motion-sticky::before{content:"";position:absolute;inset:0 0 0 42%;z-index:0;background:linear-gradient(116deg,#214cff 0%,#2349cf 48%,#26327a 100%);clip-path:polygon(23% 0,100% 0,100% 100%,0 100%);opacity:.96}
.motion-sticky::after{content:"";position:absolute;z-index:0;left:42%;right:0;bottom:15%;height:1px;background:linear-gradient(90deg,transparent,#ffffff80 28%,#ffffff18 100%);transform:rotate(-9deg);transform-origin:left}
.motion-content{position:absolute;z-index:3;left:10%;top:13%;bottom:14%;width:min(38%,500px);display:grid}
.motion-chapter{grid-area:1/1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;opacity:0;visibility:hidden;transform:translate3d(0,14px,0);transition:opacity .32s ease,transform .48s cubic-bezier(.2,.7,.25,1),visibility .32s}
.motion-chapter.is-active{opacity:1;visibility:visible;transform:translate3d(0,0,0)}
.motion-chapter>span{display:flex;gap:9px;align-items:center;margin-bottom:24px;color:#c6d1ff;font-size:10px;line-height:1.4;font-weight:800;letter-spacing:1.25px}
.motion-chapter>span i{color:#8992b5;font-style:normal}
.motion-chapter h2{max-width:560px;color:#fff;font-size:clamp(48px,6.7vw,94px);line-height:.88;letter-spacing:-.025em}
.motion-chapter h2 em{color:#d9ff3f;font-style:normal;-webkit-text-stroke:0}
.motion-chapter p{max-width:330px;margin-top:22px;color:#e2e5ee;font-size:14px;line-height:1.7}
.motion-link{display:inline-flex;min-height:46px;align-items:center;gap:18px;margin-top:24px;padding:8px 0;border-bottom:1px solid #d9ff3f;color:#d9ff3f;text-align:left;font:800 11px var(--body);transition:gap .2s ease,color .2s ease}
.motion-link span{font-size:18px;transition:transform .2s ease}
.motion-link:hover{gap:23px;color:#fff}
.motion-link:hover span{transform:translate(3px,-3px)}
.motion-kicker{position:absolute;z-index:2;top:34px;left:10%;display:flex;align-items:center;gap:10px;color:#e3e6ef;font-size:9px;font-weight:800;letter-spacing:1.2px}
.motion-kicker::before{content:"";width:22px;height:2px;background:#d9ff3f}
.motion-side-label{position:absolute;z-index:2;left:3.4%;bottom:18%;writing-mode:vertical-rl;transform:rotate(180deg);color:#aeb4c4;font-size:8px;font-weight:700;letter-spacing:1.5px}
.motion-word{position:absolute;z-index:1;right:4%;top:6%;color:#ffffff18;font:800 clamp(64px,10vw,150px)/.8 var(--display);letter-spacing:-.04em;pointer-events:none}
.motion-track{position:absolute;z-index:1;left:48%;right:-10%;bottom:13%;height:28%;border-top:1px solid #ffffff70;border-radius:50%;transform:rotate(-10deg) skewX(-18deg);opacity:.55}
.motion-track::after{content:"";position:absolute;left:8%;right:9%;top:12px;border-top:1px solid #ffffff27}
.journey-shoe.catalog-shot{position:absolute;z-index:2;top:19%;right:1%;width:min(50vw,900px);height:auto;max-width:none;object-fit:contain;object-position:center;border:0;border-radius:0;background:transparent;box-shadow:none;filter:none;pointer-events:none;transform:translate3d(var(--shoe-x,0vw),var(--shoe-y,0vh),0) rotate(var(--shoe-r,-9deg)) scale(var(--shoe-scale,1));transform-origin:50% 56%;will-change:transform,opacity;transition:opacity .24s ease,filter .3s ease}
.journey-shoe.catalog-shot.is-changing{animation:shoe-cut-in .46s cubic-bezier(.2,.72,.24,1) both,shoe-hover 5.2s ease-in-out .46s infinite}
@keyframes shoe-cut-in{from{opacity:.25;clip-path:inset(0 35% 0 0);transform:translate3d(calc(var(--shoe-x,0vw) + 2vw),var(--shoe-y,0vh),0) rotate(calc(var(--shoe-r,-9deg) - 3deg)) scale(1)}to{opacity:1;clip-path:inset(0);transform:translate3d(var(--shoe-x,0vw),var(--shoe-y,0vh),0) rotate(var(--shoe-r,-9deg)) scale(1)}}
@keyframes shoe-hover{0%,100%{translate:0 0}50%{translate:0 -6px}}
.journey-shoe.catalog-shot{animation:shoe-hover 5.2s ease-in-out infinite}
.motion-product-label{position:absolute;z-index:3;right:6%;bottom:9%;display:grid;gap:5px;text-align:right;pointer-events:none}
.motion-product-label span{color:#e5e9fa;font-size:8px;font-weight:700;letter-spacing:1px}
.motion-product-label strong{color:#fff;font:700 22px var(--display);letter-spacing:.7px}
.motion-controls{position:absolute;z-index:5;left:10%;right:6%;bottom:27px;display:flex;align-items:center;gap:20px}
.motion-steps{display:flex;align-items:center;gap:7px}
.motion-step{display:grid;place-items:center;min-width:42px;min-height:42px;padding:0 8px;border:1px solid #ffffff55;border-radius:50%;color:#d3d7e1;font:700 10px var(--body);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.motion-step:hover{transform:translateY(-2px);border-color:#fff}
.motion-step[aria-pressed=true]{background:#d9ff3f;border-color:#d9ff3f;color:#0a0a0a}
.motion-progress{position:relative;flex:1;height:2px;background:#ffffff55}
.motion-progress-fill{display:block;width:100%;height:100%;background:#d9ff3f;transform:scaleX(var(--progress));transform-origin:left center;will-change:transform}
.motion-count{min-width:48px;color:#d9ff3f;font-size:9px;font-weight:800;letter-spacing:1px;text-align:right}
.motion-jump{display:inline-flex;min-height:42px;align-items:center;gap:8px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.7px}
.motion-jump span{color:#d9ff3f;font-size:16px;transition:transform .2s ease}
.motion-jump:hover span{transform:translateY(3px)}
.hero-shoe{animation:hero-float 6.5s ease-in-out infinite}
@keyframes hero-float{0%,100%{transform:translate3d(0,0,0) rotate(-11deg)}50%{transform:translate3d(0,-9px,0) rotate(-9deg)}}
.orbit,.orbit-two{animation:none!important;opacity:.32}
.orbit-two{transform:rotate(32deg)}
.ticker-track{animation-duration:55s}
@media(max-width:1100px) and (min-width:761px){.motion-content{left:8%;width:34%}.motion-chapter h2{font-size:clamp(46px,6.2vw,68px)}.journey-shoe.catalog-shot{top:24%;right:1%;width:min(56vw,620px)}.motion-sticky::before{left:38%}.motion-product-label{right:5%;bottom:11%}.motion-track{left:42%}}
@media(max-width:760px){
 .announcement{height:28px}
 .header{height:102px;align-items:flex-start;padding-top:13px;position:sticky}
 .header nav{position:absolute;left:5%;right:5%;bottom:0;height:35px;display:flex;justify-content:flex-start;gap:clamp(14px,6vw,26px);overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-size:10px}
 .header nav::-webkit-scrollbar{display:none}
 .header nav a{flex:none;min-height:34px;padding:7px 0 10px}
 .header-actions{margin-left:auto}
 .header .wordmark{margin-top:3px}
 html{scroll-padding-top:108px}
 .motion-story{height:auto;padding:0 0 24px}
 .motion-sticky{position:relative;top:auto;height:calc(100svh - 114px);min-height:650px;max-height:780px;margin:0 12px}
 .motion-sticky::before{inset:39% 0 0 0;clip-path:polygon(0 13%,100% 0,100% 100%,0 100%)}
 .motion-sticky::after{left:0;bottom:34%;transform:rotate(-7deg)}
 .motion-kicker{top:23px;left:7%;font-size:8px}
 .motion-word{top:39%;right:2%;font-size:clamp(58px,18vw,105px)}
 .motion-side-label{display:none}
 .motion-content{left:7%;right:7%;top:72px;bottom:auto;width:auto;height:40%;display:grid}
 .motion-chapter{align-self:start}
 .motion-chapter>span{margin-bottom:14px;font-size:8px}
 .motion-chapter h2{font-size:clamp(46px,11.2vw,76px);line-height:.9}
 .motion-chapter p{max-width:280px;margin-top:11px;font-size:13px;line-height:1.55}
 .motion-link{min-height:42px;margin-top:9px;font-size:10px}
 .journey-shoe.catalog-shot{top:41%;right:-13%;width:112%;max-height:39%;object-fit:contain}
 .motion-track{left:4%;right:-13%;bottom:24%;height:21%}
 .motion-product-label{right:6%;bottom:18%;gap:4px}
 .motion-product-label span{font-size:7px}
 .motion-product-label strong{font-size:19px}
 .motion-controls{left:5%;right:5%;bottom:12px;gap:9px;flex-wrap:wrap}
 .motion-step{min-width:38px;min-height:38px}
 .motion-steps{gap:5px}
 .motion-progress{min-width:25px}
 .motion-count{min-width:38px;font-size:8px}
 .motion-jump{min-height:38px;padding:0 3px;font-size:8px}
 .motion-story .motion-chapter:nth-child(2) h2{font-size:clamp(42px,10.6vw,68px)}
 .product-info h3{font-size:14px}
 .price-row strong{font-size:13px}
 .price-row>span{font-size:11px}
 .price-row s{font-size:10px}
 .tabs button{font-size:11px}
 .faq summary{font-size:14px}
 .faq details p,.steps p{font-size:14px}
 footer{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}
@media(max-width:390px){
 .header{padding-left:4%;padding-right:4%;gap:8px}
 .wordmark{font-size:29px}
 .wordmark i{font-size:29px}
 .header-actions .icon-button{width:36px}
 .cart-toggle{padding-left:7px;gap:5px}
 .cart-toggle b{width:21px;height:21px}
 .motion-sticky{margin:0 8px;min-height:620px}
 .motion-step{min-width:35px;min-height:35px}
 .motion-controls{gap:6px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .motion-story{height:auto}
 .motion-sticky{position:relative;top:auto;height:min(760px,calc(100svh - 110px));min-height:620px}
 .journey-shoe.catalog-shot,.motion-chapter,.motion-link,.motion-step,.motion-jump{transition:none!important;animation:none!important}
 .journey-shoe.catalog-shot{transform:rotate(-8deg)}
 .ticker-track,.hero-shoe,.shoe-shadow,.orbit,.orbit-two{animation:none!important}
 .motion-allowed .motion-story{height:220svh}
 .motion-allowed .motion-sticky{position:sticky;top:90px;height:calc(100svh - 90px);min-height:600px}
 .motion-allowed .journey-shoe.catalog-shot,.motion-allowed .motion-chapter{animation:initial!important;transition:opacity .32s ease,transform .48s cubic-bezier(.2,.7,.25,1),visibility .32s}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
 .motion-allowed .motion-story{height:auto}
 .motion-allowed .motion-sticky{position:relative;top:auto;height:min(760px,calc(100svh - 110px));min-height:620px}
}
@media(prefers-reduced-motion:reduce){
 .motion-allowed .journey-shoe.catalog-shot{animation:shoe-hover 5.2s ease-in-out infinite!important;transform:translate3d(var(--shoe-x,0vw),var(--shoe-y,0vh),0) rotate(var(--shoe-r,-9deg)) scale(var(--shoe-scale,1))!important}
 .motion-allowed .journey-shoe.catalog-shot.is-changing{animation:shoe-cut-in .46s cubic-bezier(.2,.72,.24,1) both,shoe-hover 5.2s ease-in-out .46s infinite!important}
}
.motion-local-toggle{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #ffffff70;border-radius:50%;background:#ffffff12;color:#fff;font-size:14px;font-weight:800;transition:background .2s ease,transform .2s ease}
.motion-local-toggle:hover{transform:scale(1.04);background:#ffffff26}
.motion-local-toggle:focus-visible,.motion-step:focus-visible,.motion-jump:focus-visible{outline:3px solid #d9ff3f;outline-offset:3px}
@media(max-width:760px){.motion-controls{flex-wrap:nowrap}.motion-jump{display:none}.motion-local-toggle{flex-basis:38px;width:38px;height:38px}.motion-progress{min-width:22px}}

/* Touch targets stay comfortable at every breakpoint; pause remains available beside the story. */
.product-card .favorite{width:44px;height:44px}
.product-card .quick-add{width:44px;height:44px}
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important;transition:none!important}
@media(max-width:760px){
 .header{height:110px}
 .header nav{height:44px}
 .header nav a{min-height:44px;padding:12px 0}
 html{scroll-padding-top:116px}
 .motion-step{min-width:44px;min-height:44px}
 .motion-local-toggle{flex-basis:44px;width:44px;height:44px}
 .header-actions .icon-button{width:44px;height:44px}
}
@media(max-width:390px){
 .header-actions .icon-button{width:44px}
 .motion-step{min-width:44px;min-height:44px}
}

.motion-product-label{left:8%;right:auto;text-align:left}
.motion-side-label{display:none}
@media(max-width:760px){.motion-product-label{left:7%;right:auto;bottom:18%;text-align:left}}

/* Clear legacy absolute-position rules so the controls form one predictable row. */
.motion-progress{position:relative;inset:auto;width:auto;z-index:auto}
.motion-count{position:static;right:auto;bottom:auto}
.motion-jump{position:static;left:auto;bottom:auto;z-index:auto;flex:0 0 auto}

/* Scroll-driven 3D product story: a steady shoe size with gentle lateral travel and rotation. */
.motion-story{height:285svh;perspective:1800px;perspective-origin:50% 50%}
.motion-sticky{perspective:1600px;perspective-origin:60% 50%;transform-style:preserve-3d}
.motion-sticky::before{transform:translate3d(0,0,0) rotateY(calc(var(--panel-y,0deg)*.35)) scale(1.34);transform-origin:58% 50%;transition:filter .4s ease}
.motion-sticky::after{transform:rotate(-9deg)}
.motion-word{transform:translate3d(calc(var(--progress)*-2.5%),0,0);transform-origin:right top;will-change:transform}
.motion-track{transform:translate3d(0,0,0) rotate(-10deg) skewX(-12deg);transform-style:preserve-3d}
.motion-content{transform:translate3d(0,0,0);transform-style:preserve-3d}
.motion-product-label{transform:translate3d(0,0,0)}
.motion-controls{transform:translate3d(0,0,0)}
.journey-shoe.catalog-shot{transform:translate3d(var(--shoe-x,0vw),var(--shoe-y,0vh),0) rotateX(var(--shoe-rx,0deg)) rotateY(var(--shoe-ry,0deg)) rotateZ(var(--shoe-r,-9deg)) scale(1);transform-style:preserve-3d;backface-visibility:visible;filter:none;transition:filter .45s ease,opacity .24s ease}
.journey-shoe.catalog-shot.is-changing{animation:shoe-cut-in .46s cubic-bezier(.2,.72,.24,1) both,shoe-hover 5.2s ease-in-out .46s infinite}
.motion-sticky[style*="--progress: 0."]::before{filter:saturate(1.08)}
@media(max-width:760px){
 .motion-story,.motion-allowed .motion-story{height:260svh!important}
 .motion-sticky,.motion-allowed .motion-sticky{position:sticky;top:110px;height:calc(100svh - 110px);min-height:560px;max-height:none;margin:0 12px;perspective:1400px;perspective-origin:62% 50%}
 .motion-sticky::before{transform:translate3d(0,0,0) rotateY(calc(var(--panel-y,0deg)*.25)) scale(1.28)}
 .motion-sticky::after{transform:rotate(-7deg)}
 .motion-word{transform:translate3d(calc(var(--progress)*-1.5%),0,0)}
 .motion-track{transform:translate3d(0,0,0) rotate(-10deg) skewX(-12deg)}
 .motion-content,.motion-product-label,.motion-controls{transform:translate3d(0,0,0)}
 .journey-shoe.catalog-shot{top:43%;right:-18%;width:120%;max-height:37%;object-fit:contain;filter:none}
}
@media(max-width:390px){.motion-sticky,.motion-allowed .motion-sticky{margin:0 8px;min-height:560px}.motion-content{left:6%;right:6%;width:auto}.motion-controls{left:4%;right:4%;gap:7px}}
@media(prefers-reduced-motion:reduce){
 .motion-allowed .motion-story{height:285svh!important}
 .motion-allowed .motion-sticky{position:sticky;top:90px;height:calc(100svh - 90px);min-height:560px}
 .motion-allowed .journey-shoe.catalog-shot{animation:shoe-hover 5.2s ease-in-out infinite!important;transform:translate3d(var(--shoe-x,0vw),var(--shoe-y,0vh),0) rotateX(var(--shoe-rx,0deg)) rotateY(var(--shoe-ry,0deg)) rotateZ(var(--shoe-r,-9deg)) scale(1)!important}
 .motion-allowed .journey-shoe.catalog-shot.is-changing{animation:shoe-cut-in .46s cubic-bezier(.2,.72,.24,1) both,shoe-hover 5.2s ease-in-out .46s infinite!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
 .motion-allowed .motion-story{height:260svh!important}
 .motion-allowed .motion-sticky{top:110px;height:calc(100svh - 110px);min-height:560px}
}

/* Respect the operating system's reduced-motion preference with a single static story scene. */
@media(prefers-reduced-motion:reduce){
 .motion-story{height:auto!important}
 .motion-sticky{position:relative!important;top:auto!important;height:min(760px,calc(100svh - 90px))!important;min-height:600px!important;max-height:none!important}
 .journey-shoe.catalog-shot,.motion-chapter,.motion-link,.motion-step,.motion-jump,.motion-progress-fill,.hero-shoe,.ticker-track,.orbit,.shoe-shadow{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .journey-shoe.catalog-shot{transform:rotate(-8deg)!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
 .motion-sticky{height:min(760px,calc(100svh - 110px))!important;min-height:560px!important}
}

/* Reveal the scroll story clearly on entry; keep the scroll itself in control. */
@media(prefers-reduced-motion:no-preference){
 .motion-story.is-entered .motion-sticky::before{animation:story-panel-in .9s cubic-bezier(.2,.75,.25,1) both}
 .motion-story.is-entered .motion-kicker{animation:story-rise-in .6s .08s cubic-bezier(.2,.75,.25,1) both}
 .motion-story.is-entered .motion-chapter.is-active{animation:story-rise-in .72s .16s cubic-bezier(.2,.75,.25,1) both}
 .motion-story.is-entered .journey-shoe.catalog-shot:not(.is-changing){animation:shoe-hover 5.2s ease-in-out infinite,motion-shoe-in .95s .08s cubic-bezier(.2,.72,.24,1) both}
 .motion-story.is-entered .motion-product-label{animation:story-rise-in .65s .32s cubic-bezier(.2,.75,.25,1) both}
 .motion-story.is-entered .motion-controls{animation:story-rise-in .6s .4s cubic-bezier(.2,.75,.25,1) both}
 .motion-story.is-in-view .motion-jump span{animation:story-cue 1.35s ease-in-out infinite}
}
@keyframes story-rise-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes story-panel-in{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);opacity:.35}to{clip-path:polygon(23% 0,100% 0,100% 100%,0 100%);opacity:.96}}
@keyframes motion-shoe-in{from{opacity:.18;filter:blur(8px)}to{opacity:1;filter:none}}
@keyframes story-cue{0%,100%{translate:0 0}50%{translate:0 4px}}
@media(prefers-reduced-motion:no-preference) and (max-width:760px){
 @keyframes story-panel-in{from{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);opacity:.35}to{clip-path:polygon(0 13%,100% 0,100% 100%,0 100%);opacity:.96}}
}

/* Keep this requested scroll story active even when the OS reduces other page motion. */
@media(prefers-reduced-motion:reduce){
 html #en-movimiento.motion-story{height:285svh!important}
 html #en-movimiento .motion-sticky{position:sticky!important;top:90px!important;height:calc(100svh - 90px)!important;min-height:560px!important;max-height:none!important}
 html #en-movimiento .motion-chapter{display:flex;transition:opacity .32s ease,transform .48s cubic-bezier(.2,.7,.25,1),visibility .32s!important}
 html #en-movimiento .journey-shoe.catalog-shot{animation:shoe-hover 5.2s ease-in-out infinite!important;transform:translate3d(var(--shoe-x,0vw),var(--shoe-y,0vh),0) rotateX(var(--shoe-rx,0deg)) rotateY(var(--shoe-ry,0deg)) rotateZ(var(--shoe-r,-9deg)) scale(1)!important}
 html #en-movimiento .journey-shoe.catalog-shot.is-changing{animation:shoe-cut-in .46s cubic-bezier(.2,.72,.24,1) both,shoe-hover 5.2s ease-in-out .46s infinite!important}
 html #en-movimiento .motion-progress-fill{transform:scaleX(var(--progress))!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
 html #en-movimiento.motion-story{height:260svh!important}
 html #en-movimiento .motion-sticky{top:110px!important;height:calc(100svh - 110px)!important;min-height:560px!important}
}