/* Local preview motion: transform/opacity only; no layout shifts. */
@keyframes pj-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pj-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes pj-menu{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
 .hero-copy>.eyebrow,.hero-copy>.hero-title,.hero-copy>p,.hero-copy>.cta-row,.hero-copy>.benefits{animation:pj-enter .65s cubic-bezier(.22,1,.36,1) both}
 .hero-copy>.hero-title{animation-delay:.08s}.hero-copy>p{animation-delay:.16s}.hero-copy>.cta-row{animation-delay:.24s}.hero-copy>.benefits{animation-delay:.32s}
 .hero-art .floating{animation:pj-float 5s ease-in-out 1s 3}.hero-art .floating.bottom{animation-delay:2s;animation-duration:6s}
 .pj-reveal{animation:pj-enter .65s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--reveal-delay,0ms)}
 .dropdown:not([hidden]),.mega-menu:not([hidden]),.search-panel:not([hidden]){animation:pj-menu .2s ease-out}
 details[open]>p{animation:pj-enter .25s ease-out}
 .primary,.collection-card,.product-photo,.card-bottom>a,.filter-chips button{transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease}
 .primary:active{transform:translateY(0) scale(.98)}
 @media(hover:hover){.collection-card:hover,.product-photo:hover{transform:translateY(-4px);box-shadow:0 12px 28px #244b6012}.card-bottom>a:hover{transform:rotate(-35deg);background:#e5f0f1}.filter-chips button:hover{transform:translateY(-2px)}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Hero: a gentle entrance followed by a short floating sequence. */
@keyframes pj-hero-product{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes pj-hero-art-in{from{opacity:0;translate:18px 10px}to{opacity:1;translate:0 0}}
@keyframes pj-star{0%,100%{scale:1;rotate:0deg;opacity:.75}50%{scale:1.15;rotate:12deg;opacity:1}}
@keyframes pj-shape{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-4deg) scale(1.025)}}
@media(prefers-reduced-motion:no-preference){
 .hero-art{animation:pj-hero-art-in .9s cubic-bezier(.22,1,.36,1) both}
 .hero-product{animation:pj-hero-product 6s ease-in-out .9s 3;will-change:transform}
 .hero-art .spark{animation:pj-star 4s ease-in-out 4}
 .hero-art .s2{animation-delay:.8s}.hero-art .s3{animation-delay:1.5s}
 .hero-art .photo-shape{animation:pj-shape 8s ease-in-out 2}
}