/* =======================================================
   Savitri Systems — 3D Depth & Micro-interaction Layer
   -------------------------------------------------------
   This file is 100% ADDITIVE: it never overrides existing
   layout, colours, or spacing — it only layers extra motion
   and depth on top of the current design system.

   Performance rules followed throughout:
   - Only `transform` / `opacity` are animated (GPU compositing,
     no layout/paint cost).
   - Heavy interactive effects (tilt, magnetic buttons, cursor
     spotlight) are gated to fine-pointer/hover-capable devices
     via JS, so phones/tablets never pay for them.
   - Everything here is disabled under prefers-reduced-motion.
======================================================= */

/* ---------------- Hero: soft cursor spotlight ---------------- */
.hero-spotlight{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(560px circle at var(--spot-x,50%) var(--spot-y,30%),
                rgba(18,150,141,.22), transparent 62%);
    opacity:0;
    transition:opacity .6s ease;
}
.hero-section-dark.spotlight-active .hero-spotlight{ opacity:1; }

/* ---------------- Hero: slow ambient mesh drift ---------------- */
.hero-mesh-drift{
    position:absolute;
    inset:-15%;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(28% 32% at 22% 25%, rgba(18,150,141,.12), transparent 60%),
        radial-gradient(24% 26% at 78% 72%, rgba(245,166,35,.09), transparent 60%);
    animation:meshDrift 24s ease-in-out infinite;
    will-change:transform;
}
@keyframes meshDrift{
    0%, 100%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(1.5%, -2%, 0) scale(1.06); }
}

/* ---------------- Hero: floating rotating 3D badges ---------------- */
.hero-3d-shape{
    position:absolute;
    z-index:2;
    pointer-events:none;
    perspective:700px;
}
.hero-3d-shape .cube-face{
    width:54px; height:54px;
    display:flex; align-items:center; justify-content:center;
    border-radius:16px;
    background:linear-gradient(150deg, rgba(255,255,255,.18), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:#fff;
    font-size:1.25rem;
    box-shadow:0 18px 38px rgba(0,0,0,.35);
    transform-style:preserve-3d;
    animation:spin3d 10s linear infinite;
}
@keyframes spin3d{
    0%{   transform:rotateY(0deg)   rotateX(10deg); }
    100%{ transform:rotateY(360deg) rotateX(10deg); }
}
.hero-3d-shape.shape-a{ top:6%; right:4%; }
.hero-3d-shape.shape-a .cube-face{ animation-duration:12s; }
.hero-3d-shape.shape-b{ bottom:8%; left:-2%; }
.hero-3d-shape.shape-b .cube-face{
    animation-duration:9s;
    animation-direction:reverse;
    background:linear-gradient(150deg, rgba(245,166,35,.28), rgba(245,166,35,.05));
}
@media (max-width:991.98px){
    .hero-3d-shape{ display:none; } /* keep mobile lean */
}

/* ---------------- Button shine sweep ---------------- */
.btn-cta, .btn-primary{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.btn-cta::after, .btn-primary::after{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-18deg);
    transition:left .65s ease;
    pointer-events:none;
    z-index:1;
}
.btn-cta:hover::after, .btn-primary:hover::after{ left:130%; }

/* ---------------- Magnetic buttons (JS adds this class) ---------------- */
.btn-magnetic{ transition:transform .25s cubic-bezier(.22,1,.36,1); }

/* ---------------- Subtle 3D depth cue on glass cards ----------------
   Adds a soft inner highlight so tilted cards read as objects with
   real thickness rather than flat rotated rectangles. */
.product-card, .feature-box, #why-us .card, .solution-item,
.contact-info-card, .process-card{
    transform-style:preserve-3d;
}

/* ---------------- Counter number styling ---------------- */
.stat-chip h3.counting{ font-variant-numeric:tabular-nums; }

/* ---------------- Reduced motion / accessibility guard ---------------- */
@media (prefers-reduced-motion: reduce){
    .hero-3d-shape,
    .hero-3d-shape .cube-face,
    .hero-mesh-drift{ animation:none !important; }
    .hero-spotlight{ display:none !important; }
    .btn-cta::after, .btn-primary::after{ display:none !important; }
}