/*
 * Vedinterior – MOBILE 3D layer
 * Load AFTER artima-3d.css. Every rule below sits inside a media query,
 * so it only affects phones / tablets / touch screens. Desktop is untouched.
 *
 * What changes on touch screens:
 *  - no mouse tilt or glare (there is no cursor)  ->  cards tilt with SCROLL instead
 *  - shorter, lighter entrances (no sideways moves, so no horizontal scrollbar)
 *  - tap feedback (:active press) instead of hover
 *  - no hover lag / sticky-hover glitches
 *  - slider slides lean back in 3D when they are not the active one
 */

@media (max-width: 991.98px), (hover: none) {

    /* safety: a 3D transform must never create a sideways scrollbar */
    body {
        overflow-x: clip;
    }

    .a3d-progress {
        height: 2px;
    }

    /* ---------- 1. REVEAL: smaller, vertical-only entrances ---------- */
    html.js-3d [data-reveal-3d] {
        --a-y: 36px;
        --a-z: -60px;
        --a-rx: 10deg;
        transition-duration: 0.7s, 0.85s;
        will-change: auto;
    }

    html.js-3d [data-reveal-3d='title'],
    html.js-3d [data-reveal-3d='right'] {
        --a-x: 0px;
        --a-y: 26px;
        --a-z: -40px;
        --a-rx: 8deg;
        --a-ry: 0deg;
        transform-origin: 50% 100%;
    }

    html.js-3d [data-reveal-3d='text'] {
        --a-y: 20px;
        --a-z: -20px;
        --a-rx: 5deg;
    }

    html.js-3d [data-reveal-3d='flip'] {
        --a-y: 24px;
        --a-z: -40px;
        --a-rx: 0deg;
        --a-ry: -50deg;
    }

    html.js-3d [data-reveal-3d='pop'] {
        --a-y: 16px;
        --a-z: -120px;
        --a-rx: -18deg;
        --a-s: 0.85;
    }

    /* ---------- 2. HERO: scroll depth only (no mouse on touch) ---------- */
    .banner-3 .hero-gallery-background {
        transform: translate3d(0, var(--hero-y, 0px), 0) scale(1.1);
        transition: none;
        will-change: auto;
    }

    .banner-3__content {
        transform: translate3d(0, calc(var(--hero-p, 0) * -36px), 0);
        transition: none;
    }

    /* ---------- 3. SCROLL DEPTH for big images: gentler ---------- */
    .scroll-3d {
        transform: perspective(900px) rotateX(calc(var(--sp, 0) * 4deg)) scale(calc(1 - var(--ap, 0) * 0.03));
    }

    /* ---------- 4. CARDS tilt with scroll position (set by artima-3d-mobile.js) ----------
       --md = -1 (card above centre) .. 0 (centre of screen, flat) .. 1 (below centre) */
    .m-depth {
        transform: perspective(700px) rotateX(calc(var(--md, 0) * 5deg)) scale(calc(1 - var(--am, 0) * 0.03));
        transform-origin: 50% 50%;
        transition: transform 0.2s ease-out;
        will-change: transform;
    }

    .m-depth:active {
        transform: perspective(700px) rotateX(3deg) scale(0.97);
    }

    /* ---------- 5. SLIDERS: non-active slides lean back ---------- */
    .swiper-slide {
        transition: transform 0.5s var(--a3d-ease), opacity 0.5s ease;
    }
}

/* neighbouring slides on phones: a coverflow-style lean */
@media (max-width: 767.98px) {
    .our-featured-service__active .swiper-slide-next {
        transform: perspective(900px) rotateY(-9deg) scale(0.94);
        opacity: 0.85;
    }

    .our-featured-service__active .swiper-slide-prev {
        transform: perspective(900px) rotateY(9deg) scale(0.94);
        opacity: 0.85;
    }
}

/* ---------- 6. TOUCH-ONLY: tap feedback + remove sticky :hover ---------- */
@media (hover: none) {
    .rr-btn:hover,
    .rr-btn__header:hover {
        transform: none;
        box-shadow: none;
    }

    .rr-btn:active,
    .rr-btn__header:active {
        transform: translateY(2px) scale(0.98);
    }

    .our-featured-service__item {
        transition: transform 0.25s var(--a3d-ease);
    }

    .our-featured-service__item:active {
        transform: perspective(700px) rotateX(4deg) scale(0.97);
    }

    /* FAQ: tap should not leave the row "stuck" lifted */
    .rr__faq .accordion-item:hover {
        transform: none;
        box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
    }

    /* icons spin / flip once when they scroll into view (JS adds .m-inview) */
    .our-work-precess-2__item.m-inview .our-work-precess-2__icon {
        transform: perspective(500px) rotateY(360deg);
    }

    .experience__item-content.m-inview .experience__item-content-icon {
        transform: perspective(500px) rotateY(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .m-depth,
    .swiper-slide,
    .our-featured-service__item {
        transform: none !important;
        transition: none !important;
    }
}