/* ════════════════════════════════════════════════════════════════════════════
 * Mashhor Hub — Homepage 3D experience layer (additive, library-free)
 * • Cursor-tracking tilt + light glare on cards (desktop / fine-pointer only)
 * • Depth parallax on the premium hero
 * • 3D scroll-reveal entrances
 * Content is VISIBLE by default — every effect is opt-in via JS classes, so the
 * page degrades perfectly if JS is blocked, on touch devices, or with
 * prefers-reduced-motion.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 3D scroll-reveal (animation only fires once JS adds .in-view) ──────────── */
@keyframes mh3d-reveal {
  from { opacity: 0; transform: perspective(1100px) translateY(44px) translateZ(-60px) rotateX(7deg); }
  to   { opacity: 1; transform: none; }
}
.reveal-3d.in-view { animation: mh3d-reveal .75s cubic-bezier(.2, .8, .2, 1) both; }

/* ── Tilt cards ─────────────────────────────────────────────────────────────── */
.tilt-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
  will-change: transform;
}
.tilt-3d.tilt-active { transition: transform .08s linear; }
/* Soft moving glare highlight */
.tilt-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 46%);
  opacity: 0;
  transition: opacity .35s ease;
}
.tilt-3d.tilt-active::after { opacity: 1; }
.tilt-3d.tilt-active { box-shadow: 0 30px 65px rgba(0, 0, 0, .42), 0 0 0 1px rgba(244, 205, 85, .18); }

/* ── Real depth: lift a card's heading / number / visual toward the viewer ──── */
.tilt-3d h3,
.tilt-3d .stat-number,
.tilt-3d .service-visual,
.tilt-3d .service-icon { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.tilt-3d.tilt-active h3 { transform: translateZ(30px); }
.tilt-3d.tilt-active .stat-number { transform: translateZ(40px); }
.tilt-3d.tilt-active .service-visual,
.tilt-3d.tilt-active .service-icon { transform: translateZ(46px); }

/* ── Hero parallax layers ──────────────────────────────────────────────────── */
.mh3d-parallax { transition: transform .25s ease-out; will-change: transform; }

/* ── Magnetic CTA buttons (gently pull toward the cursor) ───────────────────── */
.mh3d-magnetic { transition: transform .25s cubic-bezier(.2, .8, .2, 1); will-change: transform; }

/* ── Graceful degradation ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-3d.in-view { animation: none; }
  .tilt-3d, .mh3d-parallax { transition: none; }
  .tilt-3d::after { display: none; }
}
@media (hover: none), (pointer: coarse) {
  /* Touch devices: no cursor glare; keep a gentle press feedback only. */
  .tilt-3d::after { display: none; }
}