.mv-depth__source-hidden { display: none !important; }
.mv-depth {
position: relative;
width: 100%;
height: 100%; min-height: clamp(30rem, 34vw, 34rem);
display: flex;
align-items: center;
justify-content: center;
perspective: var(--dc-perspective, 1400px);
perspective-origin: 50% 50%;
touch-action: pan-y;
outline: none;
user-select: none;
-webkit-user-select: none;
cursor: grab;
}
.mv-depth:active { cursor: grabbing; }
.mv-depth:focus-visible {
outline: 2px solid var(--mv-gold, #C6A97C);
outline-offset: 4px;
border-radius: 12px;
}
.mv-depth__stage {
position: absolute;
inset: 0;
transform-style: preserve-3d;
}
.mv-depth__card {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
overflow: hidden;
background: #0b0d12;
box-shadow:
0 30px 60px -20px rgba(0, 0, 0, 0.65),
0 8px 20px -10px rgba(0, 0, 0, 0.5);
will-change: transform, opacity, filter;
cursor: pointer;
transform: translate(-50%, -50%);
}
.mv-depth__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
-webkit-user-drag: none; clip-path: inset(4% round 18px);
transform: scale(1.09);
}
.mv-depth__tint {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
mix-blend-mode: multiply;
}  .mv-depth__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3000;
width: 56px;
height: 56px;
display: grid;
place-items: center; border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
padding: 0 !important;
color: rgba(240, 235, 226, 0.55) !important;
cursor: pointer;
transition: color 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-depth__arrow svg {
width: 30px;
height: 30px;
stroke-width: 1;
}
.mv-depth__arrow:hover,
.mv-depth__arrow:focus-visible {
color: var(--mv-gold, #C6A97C) !important;
background: transparent !important;
}
.mv-depth__arrow--prev { left: clamp(0.25rem, 1.5vw, 1rem); }
.mv-depth__arrow--next { right: clamp(0.25rem, 1.5vw, 1rem); }
.mv-depth__arrow--prev:hover { transform: translateY(-50%) translateX(-4px); }
.mv-depth__arrow--next:hover { transform: translateY(-50%) translateX(4px); } .mv-depth__card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 38%;
pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(8, 9, 11, 0.55));
} .mv-depth__dots {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 3000;
display: flex;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(14, 16, 22, 0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
} .mv-depth__dot {
width: 7px;
height: 7px;
padding: 0;
border: none;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.32);
cursor: pointer;
transition:
width 0.25s ease,
background 0.25s ease;
}
.mv-depth__dot.is-active {
width: 20px;
background: #fff;
}
@media (max-width: 768px) {
.mv-depth { min-height: min(64vw, 28rem); }
}
@media (max-width: 560px) { .mv-depth {
min-height: 62vw;
width: 100vw;
margin-inline: calc(50% - 50vw);
}
}
@media (prefers-reduced-motion: reduce) {
.mv-depth__card { will-change: auto; }
.mv-depth__arrow,
.mv-depth__dot { transition: none; }
}