/* ==========================================================================
   MeshTack public site — 3D layer (2026-11-06).
   Loaded after public.css on every page that sets ViewData["PublicCss"].
   Pure progressive enhancement: public-3d.js adds `mt3d` to <html> only when
   it runs and motion is allowed, and every rule below hangs off that class,
   so with no JS or with reduced motion the pages look exactly as before.
   ========================================================================== */

/* ── Hero scene: the canvas globe sits behind the hero copy ─────────────── */
.mt3d-scene {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.2s ease;
}
.mt3d-scene.is-on { opacity: 1; }
.mt3d .mt-hero__grid, .mt3d .hero-grid, .mt3d .mt-hero > .mt-container { position: relative; z-index: 1; }

/* Hero stage (the glass panel on home, the invoice→phone visual on /connector):
   held at an angle in perspective, its rows floating at different depths. */
.mt3d .mt3d-stage-wrap { perspective: 1200px; }
.mt3d .mt3d-stage {
    transform-style: preserve-3d; will-change: transform;
    transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 8deg));
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.mt3d .mt-panel.mt3d-stage { backdrop-filter: none; background: rgba(20,28,80,.55); }
.mt3d .mt-panel.mt3d-stage .mt-panel__row {
    transform: translateZ(calc(18px + var(--i, 0) * 14px));
    background: rgba(255,255,255,.09);
    box-shadow: 0 18px 30px -18px rgba(0,0,0,.65);
    animation: mt3d-bob 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -1.4s);
}
.mt3d .mt-panel.mt3d-stage .mt-panel__head { transform: translateZ(10px); }
@keyframes mt3d-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}
/* A soft shadow on the "floor" under the stage sells the depth. */
.mt3d .mt3d-stage-wrap { position: relative; }
.mt3d .mt3d-stage-wrap::after {
    content: ""; position: absolute; left: 12%; right: 12%; bottom: -34px; height: 40px; z-index: -1;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
    filter: blur(6px); pointer-events: none;
}

/* Headline: a faint extruded edge on the white hero title. */
.mt3d .mt-hero h1 { text-shadow: 0 1px 0 rgba(124,58,237,.35), 0 2px 0 rgba(79,70,229,.25), 0 12px 28px rgba(0,0,0,.35); }
.mt3d .mt-hero h1 .mt-grad-text { text-shadow: none; filter: drop-shadow(0 6px 14px rgba(0,209,249,.25)); }

/* ── Tilt cards ─────────────────────────────────────────────────────────── */
.mt3d .mt3d-tilt { position: relative; transform-style: preserve-3d; }
.mt3d .mt3d-tilt.is-tilting { transition: transform .12s ease-out, box-shadow .2s ease !important; transition-delay: 0s !important; }
.mt3d .mt3d-tilt > .mt-ico,
.mt3d .mt3d-tilt > .feat-badge,
.mt3d .mt3d-tilt > .erp-logo,
.mt3d .mt3d-tilt > .sol-card__top { transform: translateZ(34px); transition: transform .3s ease; }
.mt3d .mt3d-tilt > h3,
.mt3d .mt3d-tilt > .feat-title,
.mt3d .mt3d-tilt > .erp-name,
.mt3d .mt3d-tilt > .mt-price__amount { transform: translateZ(22px); }
.mt3d .mt3d-glare {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    opacity: 0; transition: opacity .25s ease;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
    mix-blend-mode: soft-light;
}
.mt3d .mt3d-tilt.is-tilting .mt3d-glare { opacity: 1; }
.mt3d .mt-step .mt3d-glare, .mt3d .mt-cta .mt3d-glare { background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 45%); mix-blend-mode: normal; }

/* Layered depth on resting cards: two stacked shadows read as thickness. */
.mt3d .mt-card, .mt3d .feat-card, .mt3d .erp-card {
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 rgba(16,24,64,.04), 0 10px 24px -12px rgba(16,24,64,.18), 0 30px 60px -40px rgba(16,24,64,.35);
}
.mt3d .mt-card:hover, .mt3d .feat-card:hover, .mt3d .erp-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 28px 50px -24px var(--theme, rgba(16,24,64,.45)); }
.mt3d .mt-price--featured { box-shadow: 0 40px 80px -36px rgba(79,70,229,.55); }

/* ── Scroll reveal: grids rise out of the page in perspective ───────────── */
.mt3d .mt3d-rise-group { perspective: 1400px; }
.mt3d .mt3d-rise {
    opacity: 0; transform: translate3d(0, 46px, -80px) rotateX(22deg);
    transform-origin: 50% 100%;
    transition: opacity .7s ease, transform .9s cubic-bezier(.16,.84,.3,1);
}
.mt3d .mt3d-rise.is-in { opacity: 1; transform: none; }

/* Section headings slide forward from depth. */
.mt3d .mt3d-head { opacity: 0; transform: translate3d(0, 24px, -40px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,.84,.3,1); }
.mt3d .mt3d-head.is-in { opacity: 1; transform: none; }

/* ── Buttons: a pressed-key feel ────────────────────────────────────────── */
.mt3d .mt-btn--primary { box-shadow: 0 4px 0 #3a2fb8, 0 16px 30px -12px rgba(79,70,229,.65); }
.mt3d .mt-btn--primary:hover { box-shadow: 0 6px 0 #3a2fb8, 0 22px 36px -12px rgba(79,70,229,.7); }
.mt3d .mt-btn--primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a2fb8, 0 8px 16px -10px rgba(79,70,229,.6); }
.mt3d .mt-btn--wa { box-shadow: 0 4px 0 #0e8f5a, 0 16px 30px -12px rgba(37,211,102,.6); }
.mt3d .mt-btn--wa:active { transform: translateY(3px); box-shadow: 0 1px 0 #0e8f5a; }

/* ── Strip under the hero: tiles lift on hover ──────────────────────────── */
.mt3d .mt-strip__inner { perspective: 900px; }
.mt3d .mt-strip__item { transition: transform .35s cubic-bezier(.2,.7,.3,1), background .35s ease; }
.mt3d .mt-strip__item:hover { transform: translateZ(28px) rotateX(8deg); background: var(--mt-bg-alt); }

/* Floating WhatsApp button: a little lift so it reads as above the page. */
.mt3d .mt-wa-float { box-shadow: 0 4px 0 #0e8f5a, 0 18px 34px rgba(37,211,102,.45); }

/* Phones and small screens: keep the scene, drop the pointer-driven parts. */
@media (max-width: 980px) {
    .mt3d .mt3d-stage { --ry: 0deg; --rx: 10deg; }
}
@media (hover: none) {
    .mt3d .mt3d-glare { display: none; }
}

/* Printing (or a reader view that never scrolls): nothing stays hidden. */
@media print {
    .mt3d .mt3d-rise, .mt3d .mt3d-head { opacity: 1 !important; transform: none !important; }
    .mt3d-scene { display: none; }
}