/* Only the explicitly selected Canvas alternative loads this stylesheet. */
.intro-canvas-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Renderer ownership must switch in the same frame. The original transition:
   all would keep visibility:visible for400ms while Canvas already draws it.
   Retain the original duration/easing for the two actual hover effects. */
.intro-canvas-active .product-image img {
    transition-property: transform, filter;
}

/* Keep the real image's layout, alt text and the native anchor hit area. */
.intro-canvas-active .canvas-painted .product-image img {
    visibility: hidden;
    will-change: auto;
}

.intro-canvas-active .canvas-painted,
.intro-canvas-active .canvas-painted .product-image {
    will-change: auto;
}

/* Depth opacity already follows smoothstep in JS. Avoid a second .6s delay. */
.intro-canvas-motion .product-item {
    transition: z-index 0s linear;
}