[data-sig="juniper-outfit"]{height:210dvh;min-height:1400px;background:var(--surface)}
[data-sig="juniper-outfit"]{ .outfit-stage{height:calc(100dvh - 75px);position:sticky;top:75px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:5%;padding:36px var(--gutter);overflow:hidden} .outfit-copy{max-width:460px;z-index:2} h1{font-size:clamp(64px,7vw,96px)} .outfit-copy>p{max-width:31ch} .outfit-total{display:flex;justify-content:space-between;max-width:310px;padding:20px 0;margin:8px 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .outfit-total .price{font-size:25px} .outfit-fit{margin-top:24px} .styling-table{height:min(640px,75dvh);position:relative;background:#e9e4da;box-shadow:inset 0 0 90px #d9d2c155} .piece{position:absolute;margin:0;opacity:0;transform:translateY(-35px) rotate(-4deg)} .piece img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(4px 9px 8px #30291f25)} .piece figcaption{position:absolute;bottom:0;left:0;font-size:11px;background:var(--surface);padding:4px 8px;max-width:180px;display:flex;gap:10px;align-items:center} .piece figcaption .price{white-space:nowrap} .piece-0{left:2%;top:4%;width:43%;height:41%} .piece-1{left:29%;top:31%;width:44%;height:64%} .piece-2{right:0;top:2%;width:48%;height:46%} .piece-3{right:1%;bottom:3%;width:30%;height:31%} .piece-4{left:0;bottom:8%;width:28%;height:30%} .piece-5{left:3%;top:46%;width:19%;height:14%} @media(max-width:700px){&{height:170dvh;min-height:1150px} .outfit-stage{height:calc(100dvh - 72px);top:72px;grid-template-columns:1fr;align-content:start;gap:20px;padding:24px 20px 20px} h1{font-size:54px;margin-bottom:12px} .outfit-copy .small{margin-bottom:8px} .outfit-copy>p:not(.small){font-size:14px;max-width:32ch;margin-bottom:12px} .outfit-total{padding:8px 0;margin:0 0 12px;max-width:none;font-size:13px} .outfit-total .price{font-size:20px} .outfit-fit{display:none} .styling-table{height:37dvh;min-height:240px} .piece figcaption{font-size:8px;padding:3px;gap:4px;max-width:115px} .outfit-copy .button{padding:10px 18px;font-size:14px} } @media(prefers-reduced-motion:reduce){&{height:auto;min-height:0}.outfit-stage{position:relative;top:0}.piece{opacity:1;transform:none}}}

@property --outfit-progress{syntax:"<number>";inherits:true;initial-value:0}
[data-sig="juniper-outfit"] .piece{opacity:var(--settle,0);transform:translateY(calc(-35px * (1 - var(--settle,0)))) rotate(calc(-4deg * (1 - var(--settle,0))))}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){[data-sig="juniper-outfit"]{animation:outfit-progress linear both;animation-timeline:view();animation-range:contain 0% contain 100%}@keyframes outfit-progress{from{--outfit-progress:0}to{--outfit-progress:1}}}}
[data-sig="juniper-outfit"] .piece picture{display:block;width:100%;height:100%}