/* Homepage artwork moves inside its original frames; typography and controls stay still. */
.cl-home .cl-live-photo{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size}
.cl-home .cl-live-photo::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:inherit;background-size:inherit;background-position:inherit;background-repeat:no-repeat;transform-origin:50% 55%;animation:cl-photo-camera 3s ease-in-out infinite;pointer-events:none}
.cl-home .cl-live-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 28%,#ffffff05 40%,#ffffff40 50%,#ffffff05 60%,transparent 72%);transform:translateX(-100%);animation:cl-photo-light 3s ease-in-out infinite}
.cl-home .cl-live-space::before{animation-name:cl-space-camera;transform-origin:60% 45%}
.cl-home .cl-live-space::after{background:linear-gradient(120deg,transparent 34%,#b2dcff35 49%,transparent 64%)}
.cl-home .cl-live-wall::before{animation-name:cl-wall-camera;transform-origin:20% 50%}
.cl-home .cl-live-wall::after{background:linear-gradient(100deg,transparent 20%,#b4dcff30 49%,transparent 77%)}
.cl-home .cl-live-package::before{animation-name:cl-package-camera;transform-origin:50% 65%}
.cl-home .cl-live-garden::before{animation-name:cl-garden-camera;transform-origin:58% 65%}
.cl-home .cl-live-garden::after{background:radial-gradient(ellipse at 70% 15%,#ffebbb66,transparent 65%);animation:cl-garden-sun 3s ease-in-out infinite;transform:none;mix-blend-mode:soft-light}
.cl-home .cl-live-flat::before{animation-name:cl-print-camera}
.cl-home .cl-live-commerce::before{transform-origin:50% 66%}
/* Static artwork must stay still; scene motion is supplied by real video. */
.cl-home .cl-live-photo:not(.cl-live-generate)::before,
.cl-home .cl-live-photo:not(.cl-live-generate)::after{content:none;animation:none;transform:none}
.cl-home .cl-live-video{background-image:none!important}
.cl-home .cl-live-video::before,.cl-home .cl-live-video::after{content:none!important}
.cl-live-video video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;pointer-events:none}
.cl-home .cl-art-flat.cl-live-video{background:#f8f7f1!important}
.cl-gallery .cl-art-flat.cl-live-video video{object-fit:contain}
.cl-showcase .cl-art-flat.cl-live-video video{object-position:left center}
.cl-home .cl-live-generate::after{background:#e9e6df;opacity:1;transform:none;animation:cl-generate-reveal 3s ease-in-out infinite}
.cl-home .cl-live-scene.cl-art,.cl-home .cl-comparison.cl-live-scene,.cl-home .cl-layer-art.cl-live-scene{background:radial-gradient(ellipse at 60% 45%,#f5f6fb,#e4e8ef)!important}
.cl-home .cl-comparison.cl-live-edit{background:#ddd4c7!important}
.cl-hero-poster .cl-poster-stack{left:12%;top:9%;width:76%;height:82%}
.cl-hero-poster .cl-poster-type b{font-size:10cqw}
.cl-hero-poster .cl-poster-type span{font-size:1.9cqw}
.cl-home .cl-comparison.cl-live-scene>*,.cl-home .cl-layer-art.cl-live-scene>*{display:block!important}
.cl-home .cl-live-export .cl-poster-stack{left:25%}
.cl-live-formats{position:absolute;right:5%;top:30%;display:flex;flex-direction:column;gap:5cqw}
.cl-live-formats span{display:block;padding:1cqw 2cqw;border:1px solid #ffffffaa;border-radius:3px;background:#ffffffb3;box-shadow:0 4px 14px #233d6110;color:#5b6b80;font:2.4cqw/1.3 Arial,sans-serif;letter-spacing:.08em;animation:cl-export-format 3s ease-in-out infinite}
.cl-live-formats span:nth-child(2){animation-delay:.12s}.cl-live-formats span:nth-child(3){animation-delay:.24s}
.cl-home .cl-live-workspace{position:relative;isolation:isolate;overflow:hidden}
.cl-home .cl-live-workspace::before{content:"";position:absolute;left:53%;right:2%;top:6%;bottom:7%;border-radius:6px;background:linear-gradient(110deg,transparent 20%,#fff7 50%,transparent 80%);animation:cl-workspace-result 3s ease-in-out infinite;pointer-events:none}
.cl-home .cl-live-workspace::after{content:"";position:absolute;left:56%;bottom:9%;width:30%;height:2px;border-radius:2px;background:#065dff77;transform-origin:left;animation:cl-workspace-progress 3s ease-in-out infinite;pointer-events:none}
@keyframes cl-photo-camera{0%,12%,100%{transform:scale(1.015) translateY(0)}48%,72%{transform:scale(1.075) translateY(-1%)}}
@keyframes cl-photo-light{0%,12%{opacity:0;transform:translateX(-100%)}25%{opacity:.6}65%{opacity:.6}85%,100%{opacity:0;transform:translateX(100%)}}
@keyframes cl-space-camera{0%,12%,100%{transform:scale(1.045) translateX(-1%)}48%,72%{transform:scale(1.085) translateX(1%)}}
@keyframes cl-wall-camera{0%,12%,100%{transform:scale(1.035) translateX(1%)}48%,72%{transform:scale(1.07) translateX(-1%)}}
@keyframes cl-package-camera{0%,12%,100%{transform:perspective(700px) scale(1.04) rotateY(-2deg)}48%,72%{transform:perspective(700px) scale(1.075) rotateY(2deg)}}
@keyframes cl-garden-camera{0%,12%,100%{transform:scale(1.025) translateY(0)}48%,72%{transform:scale(1.08) translateY(-1.2%)}}
@keyframes cl-garden-sun{0%,12%,100%{opacity:.08}48%,72%{opacity:.7}}
@keyframes cl-print-camera{0%,12%,100%{transform:perspective(700px) scale(1.045) rotateY(1.5deg)}48%,72%{transform:perspective(700px) scale(1.075) rotateY(-1.5deg)}}
@keyframes cl-generate-reveal{0%,10%,100%{clip-path:inset(0 0 0 0);opacity:.45}42%,76%{clip-path:inset(0 0 100% 0);opacity:.45}90%{clip-path:inset(0 0 100% 0);opacity:0}}
@keyframes cl-export-format{0%,22%,100%{opacity:0;transform:translateX(-8px)}44%,78%{opacity:1;transform:translateX(0)}}
@keyframes cl-workspace-result{0%,12%{opacity:0;transform:translateX(-100%)}35%{opacity:.65}75%,100%{opacity:0;transform:translateX(100%)}}
@keyframes cl-workspace-progress{0%,12%,100%{transform:scaleX(0);opacity:0}25%{opacity:.8}62%{transform:scaleX(1);opacity:.8}80%{transform:scaleX(1);opacity:0}}
/* Visibility control also applies to the three approved demonstrations. */
.cl-home.cl-motion-managed :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace){--cl-motion-state:paused}
.cl-home.cl-motion-managed :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace)[data-motion-active="true"]{--cl-motion-state:running}
.cl-home.cl-motion-managed :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace),
.cl-home.cl-motion-managed :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace) *,
.cl-home.cl-motion-managed :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace)::before,
.cl-home.cl-motion-managed :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace)::after{animation-play-state:var(--cl-motion-state)}
@media(prefers-reduced-motion:reduce){
 .cl-home :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace),.cl-home :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace) *,
 .cl-home :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace)::before,.cl-home :is(.cl-live-photo,.cl-live-scene,.cl-live-workspace)::after{animation:none!important}
 .cl-home .cl-live-photo::after,.cl-home .cl-live-workspace::before,.cl-home .cl-live-workspace::after{display:none}
 .cl-live-formats span{opacity:1;transform:none}
}

/* Native functional demonstrations share the existing three-second lifecycle. */
.cl-live-cutout{background:#e1d8c8;isolation:isolate}.cl-cutout-studio{position:absolute;inset:0;background:radial-gradient(ellipse at 28% 8%,#fffdf5 0,transparent 55%),linear-gradient(115deg,#a59278,#d6c7ad 36%,#f6eede 64%,#c8b797)}.cl-cutout-studio::before{content:"";position:absolute;right:-10%;top:0;width:45%;height:100%;background:linear-gradient(110deg,transparent,#fff9,transparent);transform:skewX(-18deg)}
.cl-cutout-checker{position:absolute;inset:0;background:repeating-conic-gradient(#e9e8e5 0 25%,#f8f7f4 0 50%) 50%/24px 24px;clip-path:inset(0 100% 0 0);animation:cl-remove-background 3s ease-in-out infinite}.cl-cutout-shadow{position:absolute;left:30%;top:83%;width:42%;height:7%;background:#77624855;border-radius:50%;filter:blur(10px);animation:cl-cutout-shadow 3s ease-in-out infinite}
.cl-cutout-bottle{position:absolute;left:38%;top:20%;width:24%;height:62%;filter:drop-shadow(3px 8px 7px #71644733)}.cl-bottle-cap{position:absolute;top:0;left:22%;width:56%;height:22%;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#77613d,#e8dab6 17%,#fcf6dc 24%,#a38c59 34%,#c4ad72 70%,#f8edbd 82%,#7a623e);box-shadow:inset 0 1px 1px #fff9;z-index:3}.cl-bottle-neck{position:absolute;top:20%;left:32%;width:36%;height:10%;background:linear-gradient(90deg,#b19a62,#f6e8be 40%,#c5b080);z-index:2}.cl-bottle-glass{position:absolute;inset:26% 0 0;border-radius:12% 12% 10% 10%;border:2px solid #e9dfbc;background:linear-gradient(90deg,#ac8a5066,#fff7cd99 13%,#d7bd7d80 27%,#ecdcadbb 66%,#fff6d3c9 86%,#a3824988);box-shadow:inset 0 0 0 3px #fff5,inset 0 -8px 5px #aa85414d,0 2px 2px #fff7}.cl-bottle-glass::before{content:"";position:absolute;inset:8% 8% 7%;border-radius:10%;background:linear-gradient(90deg,#c5a35466,#f8e4a133 35%,#bd913d44);border:1px solid #fff4}.cl-bottle-glass i{position:absolute;left:13%;top:8%;width:5%;height:79%;background:linear-gradient(#fff9,#fff2);border-radius:50%}.cl-bottle-glass>span,.cl-bottle-glass>b,.cl-bottle-glass>small{position:absolute;left:0;right:0;text-align:center;color:#594b34;font-family:Georgia,serif;font-weight:400}.cl-bottle-glass>span{top:30%;font-size:1.8cqw;letter-spacing:.18em}.cl-bottle-glass>b{top:43%;font-size:3cqw;letter-spacing:.07em}.cl-bottle-glass>small{top:67%;font-size:1.35cqw;line-height:1.8;letter-spacing:.08em}
.cl-cutout-scan{position:absolute;inset:0 auto 0 0;width:1px;background:#fff;box-shadow:0 0 8px #fff;animation:cl-demo-scan 3s ease-in-out infinite}.cl-demo-caption{position:absolute;z-index:4;bottom:5%;left:50%;transform:translateX(-50%);font-size:3cqw;line-height:1.5;padding:1.4% 4%;border-radius:99px;background:#fffdf2db;color:#555b60;white-space:nowrap;backdrop-filter:blur(8px)}
.cl-live-upscale{background:#f0f1ee}.cl-upscale-soft,.cl-upscale-sharp{position:absolute;inset:0;background:url('/assets/home-live/flat-clouds-live-poster.webp') center/cover no-repeat}.cl-upscale-soft{filter:blur(5px);transform:scale(1.04)}.cl-upscale-sharp{clip-path:inset(0 100% 0 0);animation:cl-remove-background 3s ease-in-out infinite}.cl-upscale-divider{position:absolute;top:0;bottom:0;left:0;width:1px;background:#fff;box-shadow:0 0 10px #fff;animation:cl-demo-scan 3s ease-in-out infinite}.cl-upscale-divider span{position:absolute;left:10px;top:22%;padding:4px 9px;color:#fff;font-size:2.4cqw;border-radius:5px;background:#1a283b80;white-space:nowrap}.cl-upscale-lens{position:absolute;right:10%;top:32%;width:30%;aspect-ratio:1;border-radius:50%;border:2px solid #fffd;background:url('/assets/home-live/flat-clouds-live-poster.webp') 85% 45%/300% auto;box-shadow:0 6px 22px #172b4940;animation:cl-detail-lens 3s ease-in-out infinite}
.cl-live-lineart{background:#eef0e9}.cl-line-drawing,.cl-line-render{position:absolute;inset:0;background:#eef0e9}.cl-live-lineart svg{display:block;width:100%;height:100%}.cl-line-render{clip-path:inset(0 0 0 0);animation:cl-render-to-line 3s ease-in-out infinite;background:radial-gradient(ellipse at 25% 15%,#fff8e9,#e4e6dc 80%)}.cl-line-drawing{background:#f6f7f3}.cl-line-drawing svg *{fill:none!important;stroke:#657b80!important;stroke-width:1.2!important}.cl-line-drawing svg g{stroke-width:1.2!important}.cl-line-scan{position:absolute;top:0;bottom:0;left:0;width:1px;background:#c1d1cd;animation:cl-demo-scan 3s ease-in-out infinite}
@keyframes cl-remove-background{0%,15%,100%{clip-path:inset(0 100% 0 0)}55%,80%{clip-path:inset(0 0 0 0)}}
@keyframes cl-render-to-line{0%,15%,100%{clip-path:inset(0 0 0 0)}55%,80%{clip-path:inset(0 0 0 100%)}}
@keyframes cl-demo-scan{0%,15%,100%{left:0;opacity:0}20%{opacity:1}55%{left:100%;opacity:1}60%,80%{left:100%;opacity:0}}
@keyframes cl-cutout-shadow{0%,15%,100%{opacity:1}55%,80%{opacity:0}}
@keyframes cl-detail-lens{0%,25%,100%{opacity:0;transform:scale(.92)}50%,80%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.cl-home .cl-live-cutout .cl-cutout-checker,.cl-home .cl-live-upscale .cl-upscale-sharp{clip-path:none}.cl-home .cl-live-lineart .cl-line-render{clip-path:inset(0 0 0 100%)}.cl-home :is(.cl-cutout-scan,.cl-upscale-divider,.cl-line-scan){display:none}.cl-home .cl-upscale-lens{opacity:1}}