/* Motion layer: keyframes, reveals, hover helpers. Colours and surfaces live in the other files. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:300;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-deco),var(--rose));border-radius:0 4px 4px 0}
/* Only opacity animates on body: a transform animation here would trap position:fixed children (nav, cart) inside the page. */
body{animation:fadeIn .5s ease both}
main{animation:pageIn .65s var(--ease) both}
body.leaving{opacity:0;transition:opacity .22s ease}
.theme-anim *{transition:background-color .4s,color .4s,box-shadow .4s,border-color .4s!important}
.reveal{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .7s var(--ease),transform .8s var(--ease)}.reveal.visible{opacity:1;transform:none}
.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.reveal.visible.tilt{transition:transform .25s ease-out,opacity .7s,box-shadow .35s}
.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-8px)}
.hero-eyebrow,.hero-title,.hero-tagline,.hero-cta,.hero-badges,.page-hero>*{animation:fadeUp .85s var(--ease) both}
.hero-title{animation-delay:.1s}.hero-tagline{animation-delay:.2s}.hero-cta{animation-delay:.3s}.hero-badges{animation-delay:.42s}.page-hero>*:nth-child(2){animation-delay:.08s}.page-hero>*:nth-child(3){animation-delay:.16s}
.hero-photo{animation:photoIn 1.2s .15s var(--ease) both}.hero-photo img{animation:floatImg 7s ease-in-out infinite}
.category-bar{animation:fadeUp 1s .5s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOutX{to{opacity:0}}
@keyframes photoIn{from{opacity:0;transform:scale(.94) translateX(30px)}to{opacity:1;transform:none}}
@keyframes floatImg{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(6deg)}}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.55}100%{transform:translateY(-110vh) rotate(40deg);opacity:0}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes slide{to{background-position:200% 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes chipIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes artPop{0%{opacity:0;transform:translateY(34px) scale(.82)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cakeRise{from{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:none}}
@keyframes stepIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.builder-step{animation:stepIn .5s var(--ease) both}.builder-step.back{animation-name:stepBack}
.page-hero .script-word{font-size:1.15em}
.empty-state .big-icon{display:inline-block;animation:floaty 3s ease-in-out infinite}
.status-pill::before{animation:pulse 1.8s infinite}
@media(prefers-reduced-motion:reduce){body,main{animation:none}.reveal{opacity:1;transform:none}.hearts span{display:none}}