/* ========================================
   3D UI layer — scenes, tilt targets, hero depth
   ======================================== */

:root {
    --scene-perspective: 1600px;
    --tilt-max: 11deg;
    --tilt-scale: 1.015;
}

/* ——— Hero: stacked depth & floating geo ——— */
.hero.hero-3d-scene {
    perspective: var(--scene-perspective);
    transform-style: preserve-3d;
}

.hero-slider {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.35s ease-out;
}

.hero-3d-shapes {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    overflow: hidden;
    perspective: 900px;
}

.hero-3d-shapes .shape {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    transform-style: preserve-3d;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-3d-shapes .shape-a {
    width: min(180px, 28vw);
    height: min(180px, 28vw);
    top: 18%;
    right: 8%;
    transform: rotateX(54deg) rotateZ(-22deg) translateZ(0);
    animation: shapeOrbitA 22s ease-in-out infinite;
}

.hero-3d-shapes .shape-b {
    width: min(120px, 22vw);
    height: min(120px, 22vw);
    bottom: 22%;
    left: 6%;
    transform: rotateX(48deg) rotateZ(18deg);
    animation: shapeOrbitB 18s ease-in-out infinite;
}

.hero-3d-shapes .shape-c {
    width: min(90px, 16vw);
    height: min(90px, 16vw);
    top: 42%;
    left: 18%;
    opacity: 0.65;
    transform: rotateX(60deg) rotateY(-15deg);
    animation: shapeOrbitC 26s ease-in-out infinite;
}

@keyframes shapeOrbitA {
    0%,
    100% {
        transform: rotateX(54deg) rotateZ(-22deg) translateY(0) translateZ(0);
    }
    50% {
        transform: rotateX(62deg) rotateZ(-18deg) translateY(-16px) translateZ(20px);
    }
}

@keyframes shapeOrbitB {
    0%,
    100% {
        transform: rotateX(48deg) rotateZ(18deg) translateZ(0);
    }
    50% {
        transform: rotateX(42deg) rotateZ(24deg) translateZ(28px) translateY(-10px);
    }
}

@keyframes shapeOrbitC {
    0%,
    100% {
        opacity: 0.5;
        transform: rotateX(60deg) rotateY(-15deg) scale(1);
    }
    50% {
        opacity: 0.85;
        transform: rotateX(52deg) rotateY(-8deg) scale(1.06);
    }
}

.hero-text-3d {
    transform-style: preserve-3d;
    animation: heroTextFloat 7s ease-in-out infinite;
}

@keyframes heroTextFloat {
    0%,
    100% {
        transform: translateZ(0) translateY(0);
    }
    50% {
        transform: translateZ(12px) translateY(-6px);
    }
}

.hero-stats.hero-stats-3d {
    transform: translateZ(24px);
    transform-style: preserve-3d;
}

/* ——— Cards: JS tilt uses inline transform; CSS supplies shadow states ——— */
.site-premium .service-card[data-tilt-ready],
.site-premium .expertise-card[data-tilt-ready],
.site-premium .expertise-item[data-tilt-ready],
.site-premium .feature-box[data-tilt-ready],
.site-premium .showcase-card[data-tilt-ready],
.site-premium .vehicle-type-card[data-tilt-ready],
.site-premium .industry-item[data-tilt-ready],
.site-premium .related-service-card[data-tilt-ready],
.site-premium .contact-info-card[data-tilt-ready] {
    transform-style: preserve-3d;
    transition:
        transform 0.08s linear,
        box-shadow 0.35s ease,
        border-color 0.25s ease;
    backface-visibility: hidden;
}

.site-premium .service-card[data-tilt-ready]:hover,
.site-premium .expertise-card[data-tilt-ready]:hover,
.site-premium .expertise-item[data-tilt-ready]:hover,
.site-premium .feature-box[data-tilt-ready]:hover,
.site-premium .contact-info-card[data-tilt-ready]:hover {
    border-color: rgba(243, 156, 18, 0.28);
}

.site-premium .related-service-card[data-tilt-ready] .card-image {
    transform-style: preserve-3d;
}

.site-premium .vehicle-types-grid,
.site-premium .industries-slider,
.site-premium .expertise-areas,
.site-premium .contact-info-cards {
    perspective: var(--scene-perspective);
}

/* Page header depth (inner pages) */
.site-premium .page-header .page-header-content {
    transform-style: preserve-3d;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce) {
    .hero-slider,
    .hero-text-3d,
    .hero-3d-shapes .shape {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-stats.hero-stats-3d {
        transform: none;
    }

    .hero-3d-shapes {
        display: none;
    }
}