/*
 * Lightweight shared depth system for public pages.
 * Animation is limited to transform/opacity and enhanced pointer effects are
 * enabled by depth-effects.js only on capable desktop devices.
 */
:root {
    --depth-accent: 21, 101, 192;
    --depth-shadow: 0 18px 42px rgba(15, 23, 42, .12);
    --depth-shadow-hover: 0 28px 58px rgba(15, 23, 42, .18);
}

.depth-dokhtar {
    --depth-accent: 194, 24, 91;
}

.depth-pazhvak,
.depth-pazhvak-virtual {
    --depth-accent: 21, 101, 192;
}

.depth-site main {
    perspective: 1400px;
    perspective-origin: 50% 24%;
}

.ui-depth-card {
    --depth-rx: 0deg;
    --depth-ry: 0deg;
    --depth-lift: 0px;
    position: relative;
    isolation: isolate;
    transform:
        perspective(1100px)
        rotateX(var(--depth-rx))
        rotateY(var(--depth-ry))
        translate3d(0, var(--depth-lift), 0);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    box-shadow: var(--depth-shadow);
    transition:
        transform 190ms cubic-bezier(.2,.75,.2,1),
        box-shadow 190ms ease,
        border-color 190ms ease;
}

.ui-depth-card.depth-pointer-active {
    --depth-lift: -6px;
    box-shadow:
        var(--depth-shadow-hover),
        0 10px 28px rgba(var(--depth-accent), .12);
}

.ui-depth-card:focus-within {
    outline: 3px solid rgba(var(--depth-accent), .24);
    outline-offset: 4px;
}

.ui-depth-button {
    position: relative;
    transform: translate3d(0, 0, 0);
    box-shadow:
        0 8px 16px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .30);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.ui-depth-button:hover,
.ui-depth-button:focus-visible {
    transform: translate3d(0, -3px, 10px);
    box-shadow:
        0 13px 24px rgba(15, 23, 42, .16),
        inset 0 1px 0 rgba(255, 255, 255, .38);
    filter: saturate(1.04);
}

.ui-depth-button:active {
    transform: translate3d(0, 1px, 0) scale(.985);
    box-shadow:
        0 4px 9px rgba(15, 23, 42, .12),
        inset 0 2px 4px rgba(15, 23, 42, .10);
}

/* Shared modal depth: one short entrance animation, no continuous repaint. */
.ui-depth-modal {
    perspective: 1500px;
    perspective-origin: 50% 42%;
}

.ui-depth-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), transparent 38%),
        radial-gradient(circle at 50% 110%, rgba(var(--depth-accent), .18), transparent 48%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.ui-depth-modal.ui-depth-modal-open::before {
    opacity: 1;
}

.ui-depth-modal-card {
    position: relative;
    isolation: isolate;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow:
        0 42px 90px rgba(15, 23, 42, .30),
        0 14px 34px rgba(var(--depth-accent), .16),
        inset 0 1px 0 rgba(255, 255, 255, .82);
}

.ui-depth-modal.ui-depth-modal-open .ui-depth-modal-card {
    animation: depth-modal-enter 390ms cubic-bezier(.16, 1, .3, 1);
}

.ui-depth-modal-card > button:first-of-type,
.ui-depth-modal-card .feature-modal-close {
    transform: translateZ(34px);
    box-shadow:
        0 10px 22px rgba(15, 23, 42, .18),
        inset 0 1px 0 rgba(255,255,255,.42);
}

.ui-depth-modal-card img {
    transform: translateZ(16px) scale(1.01);
    transition: transform 260ms ease;
}

.ui-depth-modal-card .rounded-xl,
.ui-depth-modal-card .feature-modal-decoration {
    box-shadow:
        0 9px 20px rgba(15, 23, 42, .09),
        inset 0 1px 0 rgba(255,255,255,.50);
}

@keyframes depth-modal-enter {
    from {
        opacity: 0;
        transform:
            perspective(1100px)
            translate3d(0, 30px, -80px)
            rotateX(-8deg)
            rotateY(2deg)
            scale(.93);
    }
    62% {
        opacity: 1;
        transform:
            perspective(1100px)
            translate3d(0, -3px, 12px)
            rotateX(1deg)
            rotateY(-.5deg)
            scale(1.008);
    }
    to {
        opacity: 1;
        transform:
            perspective(1100px)
            translate3d(0, 0, 0)
            rotateX(0)
            rotateY(0)
            scale(1);
    }
}

.depth-site header nav {
    position: relative;
    z-index: 20;
    box-shadow:
        0 10px 26px rgba(15, 23, 42, .10),
        inset 0 -1px 0 rgba(255, 255, 255, .28);
}

.depth-site .site-nav-grid > div:first-child > div:first-child,
.depth-site .pv-brand-mark {
    box-shadow:
        0 10px 22px rgba(var(--depth-accent), .22),
        inset 5px 6px 10px rgba(255, 255, 255, .20),
        inset -5px -7px 12px rgba(15, 23, 42, .15);
    transform: translateZ(20px);
}

.depth-site input:not([type="hidden"]),
.depth-site textarea,
.depth-site select {
    box-shadow:
        inset 0 2px 5px rgba(15, 23, 42, .08),
        0 1px 0 rgba(255, 255, 255, .55);
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.depth-site input:not([type="hidden"]):focus,
.depth-site textarea:focus,
.depth-site select:focus {
    box-shadow:
        inset 0 1px 3px rgba(15, 23, 42, .06),
        0 0 0 3px rgba(var(--depth-accent), .14),
        0 7px 16px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

/* Skip rendering below-the-fold sections until they approach the viewport. */
@supports (content-visibility: auto) {
    .depth-site main > section:not(:first-child) {
        content-visibility: auto;
        contain-intrinsic-size: auto 620px;
    }
}

@media (max-width: 899px), (hover: none), (pointer: coarse) {
    .ui-depth-card {
        transform: none;
        box-shadow:
            0 14px 30px rgba(15, 23, 42, .12),
            inset 0 1px 0 rgba(255, 255, 255, .28);
        transition-duration: 140ms;
    }

    .ui-depth-card:active {
        transform: translateY(1px) scale(.992);
        box-shadow:
            0 8px 18px rgba(15, 23, 42, .12),
            inset 0 2px 5px rgba(15, 23, 42, .07);
    }

    .ui-depth-button:hover {
        transform: none;
    }

    .depth-site header nav {
        box-shadow: 0 7px 18px rgba(15, 23, 42, .09);
    }

    .ui-depth-modal-card {
        box-shadow:
            0 26px 58px rgba(15, 23, 42, .28),
            0 8px 20px rgba(var(--depth-accent), .12),
            inset 0 1px 0 rgba(255,255,255,.72);
    }
}

.depth-lite .ui-depth-card {
    transform: none;
    will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .ui-depth-card,
    .ui-depth-button,
    .ui-depth-modal-card,
    .depth-site input,
    .depth-site textarea,
    .depth-site select {
        animation: none !important;
        transition-duration: 1ms !important;
        transform: none !important;
    }

    .ui-depth-modal.ui-depth-modal-open .ui-depth-modal-card {
        animation: none !important;
    }
}