/* Veilborn — profondità visiva (specular + tilt + WebGL relief) */

.vb-depth-surface {
    --vb-light-x: 58%;
    --vb-light-y: 28%;
    --vb-tilt-x: 0deg;
    --vb-tilt-y: 0deg;
    --vb-light-angle: 135;
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(var(--vb-tilt-x)) rotateY(var(--vb-tilt-y));
    transition: transform 0.12s ease-out;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .vb-depth-surface {
        transform: none;
        transition: none;
    }
}

.vb-depth-surface--gl {
    background-image: none !important;
}

.vb-home-hero.vb-depth-surface--gl,
.vb-page-banner.vb-depth-surface--gl {
    transform-style: preserve-3d;
}

.vb-depth-surface--gl.vb-depth-gl-active {
    background-color: var(--vb-void, #05040a);
}

.vb-depth-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
}

.vb-depth-surface--gl > :not(.vb-depth-canvas) {
    position: relative;
    z-index: 1;
}

.vb-depth-surface--css::before,
.vb-depth-frame.vb-depth-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at var(--vb-light-x) var(--vb-light-y),
            rgba(255, 248, 240, 0.42) 0%,
            rgba(196, 160, 255, 0.14) 22%,
            transparent 52%
        );
    mix-blend-mode: soft-light;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.vb-depth-surface--css::after,
.vb-depth-frame.vb-depth-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            calc(var(--vb-light-angle) * 1deg),
            rgba(255, 255, 255, 0.1) 0%,
            transparent 38%,
            rgba(0, 0, 0, 0.22) 100%
        );
    mix-blend-mode: overlay;
    box-shadow:
        inset 0 2px 24px rgba(255, 255, 255, 0.04),
        inset 0 -28px 48px rgba(0, 0, 0, 0.35);
}

.vb-depth-surface--css:hover::before,
.vb-depth-frame.vb-depth-surface:hover::before {
    opacity: 1;
}

.vb-depth-frame {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    line-height: 0;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(167, 139, 250, 0.12);
}

.vb-depth-frame img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.02);
    transition: transform 0.25s ease;
}

.vb-depth-frame:hover img {
    transform: scale(1.05);
}

/* Header / auth: niente zoom depth sul logo */
.vb-brand .vb-depth-frame:hover img,
.vb-auth-aside .vb-depth-frame:hover img {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .vb-depth-frame:hover img {
        transform: none;
    }
}

.vb-feature-card__media.vb-depth-surface,
.vb-essence-loop__media.vb-depth-surface,
.vb-join-cta__media.vb-depth-surface,
.vb-guest-gate__thumb.vb-depth-surface,
.vb-shop-card__thumb.vb-depth-surface {
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(167, 139, 250, 0.15),
        0 16px 48px rgba(0, 0, 0, 0.4);
}

.vb-feature-card__media.vb-depth-surface::after {
    background:
        linear-gradient(
            calc(var(--vb-light-angle) * 1deg),
            rgba(255, 255, 255, 0.08) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.3) 100%
        ),
        linear-gradient(180deg, transparent 35%, rgba(5, 4, 10, 0.88) 100%);
}

.vb-auth-logo,
img.vb-page-head-icon {
    filter: drop-shadow(0 8px 24px rgba(124, 58, 237, 0.35));
}