/* 3D depth effects — disable when user prefers reduced motion */

.site-3d {
    --perspective: 1200px;
    --tilt-strength: 10deg;
    --lift: 14px;
}

.site-3d .canvas-stage {
    transform-style: preserve-3d;
    transition: transform 0.35s ease-out;
}

.site-3d .canvas-hero-inner,
.site-3d .canvas-stage,
.site-3d .canvas-bento,
.site-3d .canvas-masonry,
.site-3d .canvas-benefits,
.site-3d .canvas-process {
    perspective: var(--perspective);
}

.site-3d .brand-mark {
    transform: translateZ(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.site-3d .brand:hover .brand-mark {
    transform: translateZ(12px) rotateY(-8deg) rotateX(6deg);
    box-shadow: 0 18px 30px rgba(15, 76, 129, 0.28);
}

.site-3d .btn {
    transform: translateZ(0);
    box-shadow: 0 4px 0 rgba(10, 53, 90, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-3d .btn-primary {
    box-shadow: 0 5px 0 #082d4d, 0 10px 24px rgba(15, 76, 129, 0.22);
}

.site-3d .btn:hover {
    transform: translateY(-2px) translateZ(8px);
}

.site-3d .btn:active {
    transform: translateY(2px) translateZ(0);
    box-shadow: 0 2px 0 rgba(10, 53, 90, 0.15);
}

.site-3d .card,
.site-3d .canvas-strip-item,
.site-3d .canvas-benefit-card,
.site-3d .canvas-process li,
.site-3d .canvas-faq-item,
.site-3d .gallery-item,
.site-3d .painting-card,
.site-3d .feature-card {
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    will-change: transform;
}

.site-3d .tilt-3d.is-tilting,
.site-3d .card:hover,
.site-3d .canvas-strip-item:hover,
.site-3d .canvas-benefit-card:hover,
.site-3d .gallery-item:hover,
.site-3d .painting-card:hover {
    box-shadow: 0 24px 48px rgba(15, 76, 129, 0.16);
}

.site-3d .canvas-artboard {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.site-3d .canvas-artboard-main {
    box-shadow:
        0 30px 60px rgba(12, 22, 40, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.site-3d .canvas-artboard-float {
    box-shadow: 0 20px 40px rgba(12, 22, 40, 0.14);
}

.site-3d .canvas-artboard-tools {
    animation: float-3d-a 7s ease-in-out infinite;
}

.site-3d .canvas-artboard-note {
    animation: float-3d-b 8s ease-in-out infinite;
}

.site-3d .canvas-orb-a {
    animation: drift-3d-a 12s ease-in-out infinite;
}

.site-3d .canvas-orb-b {
    animation: drift-3d-b 14s ease-in-out infinite;
}

.site-3d .canvas-stats div {
    transform: translateZ(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-3d .canvas-stats div:hover {
    transform: translateY(-4px) translateZ(16px);
    box-shadow: 0 16px 32px rgba(15, 76, 129, 0.12);
}

.site-3d .canvas-cta-band-inner {
    transform: translateZ(0);
    box-shadow:
        0 28px 60px rgba(12, 22, 40, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-3d .floating-action {
    transform: translateZ(0);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.site-3d .floating-action:hover {
    transform: translateY(-4px) translateZ(12px) scale(1.04);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

.site-3d .site-header.is-scrolled {
    box-shadow: 0 12px 32px rgba(15, 76, 129, 0.1);
}

@keyframes float-3d-a {
    0%, 100% { transform: translate3d(0, 0, 20px) rotateX(4deg) rotateY(-6deg); }
    50% { transform: translate3d(0, -10px, 32px) rotateX(-3deg) rotateY(4deg); }
}

@keyframes float-3d-b {
    0%, 100% { transform: translate3d(0, 0, 28px) rotateY(5deg); }
    50% { transform: translate3d(0, 8px, 16px) rotateY(-4deg); }
}

@keyframes drift-3d-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-12px, 18px, 0) scale(1.06); }
}

@keyframes drift-3d-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(16px, -12px, 0) scale(1.08); }
}

@media (max-width: 960px) {
    .site-3d .canvas-artboard-tools,
    .site-3d .canvas-artboard-note,
    .site-3d .canvas-orb-a,
    .site-3d .canvas-orb-b {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-3d .canvas-artboard-tools,
    .site-3d .canvas-artboard-note,
    .site-3d .canvas-orb-a,
    .site-3d .canvas-orb-b {
        animation: none;
    }

    .site-3d .btn,
    .site-3d .card,
    .site-3d .brand-mark,
    .site-3d .floating-action,
    .site-3d .canvas-stats div {
        transform: none !important;
        transition: none !important;
    }
}