/* ===== Full 3D pass: every motion is depth-based (rotateX/Y, translateZ) ===== */
html{perspective:none}
body{background:radial-gradient(ellipse at 7% 12%,#e6cfe9b3,transparent 34%),radial-gradient(ellipse at 90% 44%,#f6d6df99,transparent 45%),radial-gradient(ellipse at 20% 95%,#d7c4e6b3,transparent 40%),#eee7f5;background-attachment:fixed}
.catalogue{background:transparent!important;position:relative;z-index:1;overflow:visible;overflow-x:clip}
.catalogue>*{transform-style:preserve-3d}
@keyframes demo-pulse{0%,100%{transform:perspective(300px) rotateY(-18deg) translateZ(0) scale3d(1,1,1)}50%{transform:perspective(300px) rotateY(18deg) translateZ(14px) scale3d(1.08,1.08,1.08)}}
@keyframes flo-drift{0%,100%{transform:perspective(400px) translate3d(0,0,0) rotateX(-12deg) rotateY(-30deg)}50%{transform:perspective(400px) translate3d(0,0,60px) rotateX(14deg) rotateY(40deg)}}
@keyframes flo-spin{0%,100%{transform:perspective(400px) rotateY(0) translateZ(0)}50%{transform:perspective(400px) rotateY(180deg) translateZ(50px)}}
@keyframes envelope-float{0%,100%{transform:perspective(600px) rotateY(-18deg) rotateX(10deg) translateZ(0)}50%{transform:perspective(600px) rotateY(18deg) rotateX(-8deg) translateZ(30px)}}
@keyframes letter-float{0%,100%{transform:perspective(700px) rotateX(5deg) rotateY(-8deg) translateZ(0)}50%{transform:perspective(700px) rotateX(-4deg) rotateY(8deg) translateZ(34px)}}
@keyframes heart-turn{0%,100%{transform:rotateY(-40deg) rotateX(12deg) translateZ(0)}50%{transform:rotateY(45deg) rotateX(-12deg) translateZ(40px)}}
@keyframes star-turn{0%{transform:perspective(300px) rotateY(0) rotateX(15deg)}100%{transform:perspective(300px) rotateY(360deg) rotateX(15deg)}}
@keyframes title-sheen{0%,100%{background-position:115% 0;transform:perspective(900px) rotateX(8deg) rotateY(-9deg) translateZ(0)}50%{background-position:-15% 0;transform:perspective(900px) rotateX(-6deg) rotateY(9deg) translateZ(30px)}}
@keyframes cap3d{0%,100%{transform:perspective(700px) rotateX(0) rotateY(-4deg) translateZ(0)}50%{transform:perspective(700px) rotateX(3deg) rotateY(4deg) translateZ(12px)}}
.welcome h1{animation:title-sheen 7s ease-in-out infinite;transform-style:preserve-3d;will-change:transform}
.welcome-script,.tagline,.small-line{animation:cap3d 6s ease-in-out infinite;will-change:transform}
.pass-pill{animation:cap3d 7s ease-in-out infinite}
.catalogue h2,.catalogue h3,.sentiment,.telegram,.custom-note,.catalogue-note,.why-list li{transform-origin:center;animation:cap3d 8s ease-in-out infinite}
.catalogue h2:nth-of-type(even),.why-list li:nth-child(even){animation-delay:-3s}
.reveal{opacity:0;transform:perspective(1000px) translate3d(0,0,-260px) rotateX(55deg) rotateY(-24deg);transform-origin:50% 100%;transition:opacity .7s ease,transform 1s cubic-bezier(.19,.9,.25,1.1)}
.reveal.in{opacity:1;transform:perspective(1000px) rotateX(var(--srx,0deg)) rotateY(var(--sry,0deg)) translateZ(var(--srz,0px))}
.order-button{transition:transform .25s,box-shadow .25s}
.order-button:hover,.order-button:active{transform:perspective(500px) translateZ(26px) rotateX(-10deg) rotateY(6deg)}
.demo-grid{perspective:1100px;transform-style:preserve-3d}
.design{transform-style:preserve-3d}
.design-image{transform-style:preserve-3d;will-change:transform}
.design-image .play-badge{transform:translateZ(40px)}
.design-image::before,.design-image::after{transform:translateZ(1px)}
.flo{filter:drop-shadow(0 10px 12px #7a4a7055)}
.flo-one,.flo-two,.flo-three{will-change:transform}
.star{animation:star-turn 6s linear infinite}
@media(max-width:600px){.reveal{transform:perspective(800px) translate3d(0,0,-160px) rotateX(40deg) rotateY(-14deg)}}
@media(prefers-reduced-motion:reduce){.welcome h1,.welcome-script,.tagline,.small-line,.pass-pill,.catalogue h2,.catalogue h3,.star{animation:none!important}.emo-layer{display:none}}
.sculpt,.star,.hero-depth{display:none!important}
.emo-layer{position:fixed;left:0;right:0;top:0;height:140vh;z-index:0;pointer-events:none;perspective:700px;will-change:transform;overflow:hidden}
.emo{position:absolute;display:block;opacity:.85;transform-style:preserve-3d;animation-duration:var(--d);animation-delay:var(--dl);animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform}
.emo img{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 8px #7a4a7040)}
@keyframes emo-drift{0%,100%{transform:translate3d(0,0,var(--z)) rotateX(-18deg) rotateY(-35deg)}50%{transform:translate3d(10px,-34px,calc(var(--z) + 60px)) rotateX(16deg) rotateY(35deg)}}
@keyframes emo-spin{0%{transform:translate3d(0,0,var(--z)) rotateY(0) rotateX(12deg)}50%{transform:translate3d(-8px,-26px,calc(var(--z) + 50px)) rotateY(180deg) rotateX(-12deg)}100%{transform:translate3d(0,0,var(--z)) rotateY(360deg) rotateX(12deg)}}

/* Keep landing demo cards stationary: no reveal, scroll tilt, hover tilt, or card text motion. */
.demo { opacity:1!important; transform:none!important; transition:none!important; animation:none!important; }
.demo .design-image,.demo .design-image:hover,.demo .design-image:focus-visible { transform:none!important; transition:none!important; }
.demo .design-image::after { display:none!important; }
.demo .demo-cap,.demo .pass-pill { animation:none!important; }
.demo .play-badge,.demo .design-image:hover .play-badge { transform:translateX(-50%)!important; transition:none!important; }