41 lines
834 B
CSS
41 lines
834 B
CSS
.product-transition {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2500;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-transition__wash {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgba(var(--theme-accent-rgb) / 0.16), transparent 32rem),
|
|
rgba(12, 12, 12, 0.78);
|
|
backdrop-filter: blur(14px) saturate(0.9);
|
|
-webkit-backdrop-filter: blur(14px) saturate(0.9);
|
|
}
|
|
|
|
.product-transition__image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
object-fit: contain;
|
|
transform-origin: 0 0;
|
|
will-change: transform, opacity;
|
|
filter: drop-shadow(0 34px 82px rgba(0, 0, 0, 0.42));
|
|
}
|
|
|
|
body.product-transition-active {
|
|
cursor: progress;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.product-transition {
|
|
display: none;
|
|
}
|
|
}
|