/* Layered photo motion: the label copy and controls stay on a stable plane. */
.product-image { perspective: 1100px; isolation: isolate; overflow: hidden; }
.product-object { position: relative; z-index: 1; width: 100%; max-width: 240px; height: 240px; transform-style: preserve-3d; mix-blend-mode: multiply; transform: translate3d(var(--depth-pan-x,0px),var(--depth-lift,0px),var(--depth-z,0px)) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg)); transition: transform .4s cubic-bezier(.2,.65,.2,1); }
.product-card:hover .product-image img,.product-object img { transform: none; }
.product-object:after { content: ''; pointer-events: none; position: absolute; inset: 7% 15% 9%; border-radius: 15% 15% 22% 22%; background: linear-gradient(112deg,transparent 20%,#ffffffb3 45%,transparent 68%); opacity: var(--depth-glint,0); transform: translateX(var(--depth-glint-x,0px)); mix-blend-mode: screen; transition: opacity .35s,transform .4s; }
.product-shadow { pointer-events: none; position: absolute; z-index: 0; bottom: 24px; left: 50%; width: 150px; height: 18px; border-radius: 50%; background: radial-gradient(ellipse,#2d3f7559,transparent 70%); filter: blur(5px); opacity: var(--depth-shadow-opacity,0); transform: translateX(calc(-50% + var(--depth-shadow-x,0px))) scale(var(--depth-shadow-scale,1)); transition: transform .4s,opacity .4s; }
.depth-active .product-object { will-change: transform; }
.palette-card .benefit-art { perspective: 1000px; }
.palette-card .benefit-art img,.palette-card:hover .benefit-art img { transform: scale(var(--depth-scale,1)) translate3d(var(--depth-pan-x,0px),var(--depth-pan-y,0px),0) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg)); transition: transform .45s cubic-bezier(.2,.65,.2,1); }
.palette-card.depth-active .benefit-art img { will-change: transform; }
.palette-card .benefit-art:after { background: linear-gradient(0deg,#fff,transparent 38%),radial-gradient(ellipse at var(--depth-light-x,50%) var(--depth-light-y,45%),#ffffff30,transparent 60%); }
.room-camera { position: absolute; inset: 0; overflow: hidden; }
.room-camera svg { display: block; width: 100%!important; height: 100%!important; min-height: 0!important; max-width: none; transform: scale(1.025); transform-origin: 50% 58%; }
#room-wall { transition: fill .85s cubic-bezier(.2,.65,.2,1); }
.motion-paused .product-object,.motion-paused .product-object:after,.motion-paused .product-shadow,.motion-paused .palette-card .benefit-art img,.motion-paused #room-wall { transition: none!important; }
.motion-paused .product-object,.motion-paused .palette-card:hover .benefit-art img,.motion-paused .palette-card .benefit-art img { transform: none!important; }
.motion-paused .product-object:after,.motion-paused .product-shadow { opacity: 0!important; }
@media (min-width:761px) and (max-width:1100px) { .product-object { height: 190px; } }
@media(max-width:760px) { .product-object { width: 220px; height: 220px; } }
@media(prefers-reduced-motion:reduce) {
  .product-object,.product-shadow,.product-object:after,.palette-card .benefit-art img,#room-wall { transition: none!important; }
  .product-object,.palette-card:hover .benefit-art img,.palette-card .benefit-art img { transform: none!important; }
  .product-object:after,.product-shadow { opacity: 0!important; }
  .room-camera svg { transform: none; }
}