/* =========================================================
   Gifting Memories CRM — Shared 3D Animation Layer
   Applies to every page: 3D tilt cards, depth shadows,
   staggered 3D entrances, and the Three.js ambient background.
   Brand palette: #7c3aed / #db2777 (vibrant purple/pink), #172944 (ink)
========================================================= */

:root {
    --3d-brand-1: #7c3aed;
    --3d-brand-2: #db2777;
    --3d-brand-3: #6366f1;
    --3d-glow: rgba(124, 58, 237, 0.35);
    --3d-shadow-ambient: rgba(23, 41, 68, 0.18);
    --3d-shadow-key: rgba(23, 41, 68, 0.28);
    --3d-tilt-max: 10deg;
    --3d-duration: 220ms;
}

/* Ambient Three.js canvas: fixed, behind all content, non-interactive */
canvas.bg-3d-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}

/* Lift real page content above the canvas without touching each
   template's own layout classes */
body.crm-page > *:not(canvas.bg-3d-canvas),
body:not(.crm-page) > *:not(canvas.bg-3d-canvas) {
    position: relative;
    z-index: 1;
}

/* Give tiltable cards a 3D stage */
.tilt-3d {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform var(--3d-duration) cubic-bezier(.2, .8, .2, 1),
                box-shadow var(--3d-duration) ease;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
}

.tilt-3d:hover,
.tilt-3d.is-tilting {
    box-shadow:
        0 18px 34px -12px var(--3d-shadow-key),
        0 6px 14px -6px var(--3d-shadow-ambient),
        0 0 0 1px rgba(52, 114, 238, 0.06);
}

/* Inner content rides slightly above the card surface for parallax depth */
.tilt-3d .tilt-3d-layer {
    transform: translateZ(18px);
    transition: transform var(--3d-duration) ease;
}

/* Icons get an extra pop of depth + a subtle 3D spin on hover */
.tilt-3d .stat-icon,
.tilt-3d .card-header i,
.tilt-3d .card-header svg {
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
    transform-style: preserve-3d;
}

.tilt-3d:hover .stat-icon {
    transform: translateZ(26px) rotateY(18deg) rotateX(-8deg) scale(1.06);
}

/* Staggered 3D entrance — applied by JS via IntersectionObserver */
.reveal-3d {
    opacity: 0;
    transform: perspective(900px) translateY(28px) translateZ(-40px) rotateX(-8deg);
    transition: opacity 560ms cubic-bezier(.2, .8, .2, 1),
                transform 560ms cubic-bezier(.2, .8, .2, 1);
}

.reveal-3d.is-visible {
    opacity: 1;
    transform: perspective(900px) translateY(0) translateZ(0) rotateX(0deg);
}

/* Buttons: gentle 3D press feedback */
.btn,
button,
.crm-page button,
.crm-page .btn {
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.btn:active,
button:active {
    transform: translateY(1px) scale(0.98);
}

/* Respect user motion preferences everywhere */
@media (prefers-reduced-motion: reduce) {
    canvas.bg-3d-canvas { display: none; }

    .tilt-3d,
    .tilt-3d .tilt-3d-layer,
    .tilt-3d .stat-icon,
    .reveal-3d {
        transition: none !important;
        transform: none !important;
    }

    .reveal-3d {
        opacity: 1;
    }
}

/* Small screens: keep depth subtle, skip heavy tilt to protect touch scroll */
@media (max-width: 640px) {
    .tilt-3d:hover,
    .tilt-3d.is-tilting {
        transform: none;
    }
}