/* =====================================================================
   Shuvino 3D layer — ADDITIVE depth & tilt. Purely visual, guarded by
   prefers-reduced-motion + hover capability. Does NOT touch .sh-card
   (already tilted by the FX layer) or change any layout / interaction.
   ===================================================================== */

/* Elements the JS tilts (dashboard KPI cards + anything opt-in) */
.sh-kpi, [data-tilt3d] { transform-style: preserve-3d; will-change: transform; }
.sh-kpi { transition: transform .35s var(--sh-ease, cubic-bezier(.22,1,.36,1)), box-shadow .35s ease; }
.sh-kpi.is-tilt3d { box-shadow: var(--sh-shadow-lg, 0 18px 48px rgba(18,59,147,.16)); }

/* Soft moving highlight for a tilted surface */
.sh-tilt3d__glow {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s ease; z-index: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .38), transparent 60%);
}
.sh-kpi.is-tilt3d .sh-tilt3d__glow { opacity: 1; }
/* keep KPI content above the glow */
.sh-kpi > *:not(.sh-tilt3d__glow) { position: relative; z-index: 1; }

/* CSS-only 3D depth lift (no JS) for category tiles + the ID card */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .sh-cat, .sh-idcard {
        transition: transform .4s var(--sh-ease, cubic-bezier(.22,1,.36,1)), box-shadow .4s ease;
    }
    .sh-cat:hover {
        transform: perspective(700px) rotateX(5deg) translateY(-6px) scale(1.02);
        box-shadow: var(--sh-shadow-lg, 0 18px 48px rgba(18,59,147,.16));
    }
    .sh-idcard:hover {
        transform: perspective(900px) rotateX(2deg) translateY(-3px);
        box-shadow: var(--sh-shadow, 0 8px 24px rgba(18,59,147,.12));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-kpi, .sh-cat, .sh-idcard { transition: none !important; transform: none !important; }
}

/* =====================================================================
   Scroll-driven 3D — themed to e-commerce + Group Buy. The JS updates
   transforms live as you scroll, so depth/tilt "changes" with scroll.
   ===================================================================== */

/* Standalone banners tilt in 3D based on their viewport position */
[data-scroll3d] { transform-style: preserve-3d; will-change: transform; transition: transform .1s linear; }

/* Floating commerce icons behind the Group Buy showcase (parallax in 3D).
   Sit in the section's side gutters + top band so they stay visible and are
   not hidden behind the opaque cards. */
.sh-gb3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; perspective: 900px; }
.sh-gb3d__i {
    position: absolute; font-size: clamp(32px, 4.6vw, 64px); line-height: 1;
    opacity: .5; filter: drop-shadow(0 6px 14px rgba(15, 167, 160, .18)); will-change: transform;
    transition: transform .12s linear;
}
.sh-gb3d__i:nth-child(odd) { opacity: .42; }
/* keep the live cards + text above the decorative scene */
.sh-gblive .sh-container { position: relative; z-index: 2; }

@media (max-width: 1180px) {
    /* no reliable side gutters — pull icons to the extreme edges, fainter */
    .sh-gb3d__i { opacity: .3; font-size: clamp(26px, 5vw, 40px); }
}
@media (max-width: 760px) {
    .sh-gb3d__i { opacity: .22; }
    .sh-gb3d__i:nth-child(n+4) { display: none; }  /* lighten on mobile */
}
@media (prefers-reduced-motion: reduce) {
    [data-scroll3d] { transform: none !important; }
    .sh-gb3d { display: none; }
}