/**
 * ZxAcc — 3D hover interactions for menu / cards / hero (additive only)
 * ------------------------------------------------------------------
 * Every rule here ADDS a hover/focus transform + shadow on top of the
 * hover states already defined in main.css / pro.css — nothing existing
 * is removed or restructured. Disabling this file (or its enqueue line
 * in functions.php) instantly reverts to the previous flat hover style
 * with zero side effects on layout or content.
 *
 * Desktop / mouse-only: gated behind (hover: hover) and (pointer: fine)
 * so touch devices never get a hover state that "sticks" after a tap.
 */

/* Perspective context so child rotateX/rotateY reads as real depth. */
.beiten-header .header-nav,
.mega-menu-wrap,
.features-grid,
.categories-grid,
.pricing-grid {
    perspective: 1200px;
}

@media (hover: hover) and (pointer: fine) {

    /* Top-level nav links + the mega-menu trigger button */
    .header-nav > ul > li > a,
    .mega-menu-trigger {
        transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
        transform-style: preserve-3d;
    }
    .header-nav > ul > li > a:hover,
    .mega-menu-trigger:hover {
        transform: translateY(-3px) rotateX(8deg);
    }

    /* Mega-menu category tabs: each keeps its own --c1/--c2 identity
       color (already set inline per category in header.php) for the
       hover glow, so VPN/Music/AI/etc. stay visually distinct. */
    .mega-col-item {
        transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1);
        transform-style: preserve-3d;
    }
    .mega-col-item:hover {
        transform: translateY(-2px) rotateY(-6deg);
        box-shadow: 0 12px 28px -10px var(--c1, var(--primary));
    }

    /* Feature / category / pricing / product cards: 3D lift on hover */
    .feature-card,
    .category-card,
    .pricing-card,
    .product-card {
        transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
        transform-style: preserve-3d;
    }
    .feature-card:hover,
    .category-card:hover,
    .pricing-card:hover {
        transform: translateY(-8px) rotateX(4deg) scale(1.015);
        box-shadow: var(--shadow-xl);
    }
}

/* Hero visual: depth container + smoothing for the mouse-reactive tilt
   applied by theme-3d-interactions.js. If that script doesn't run for
   any reason, these elements simply stay in their normal static
   position — there is no layout dependency on the script. */
.hero-visual {
    perspective: 1400px;
}
.hero-logo-display,
.hero-float-card {
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}