/* ==========================================================================
   MAK FX — 3D & Depth Utility Classes (site-wide)
   --------------------------------------------------------------------------
   Add any of these as a CSS class on any element (Bricks: Style → CSS classes).
   Tuned for dark backgrounds; works on light backgrounds too with reduced
   highlight contrast.
   ========================================================================== */

:root {
    --mak-fx-accent: #C4A46B;
}

/* ── Surfaces ────────────────────────────────────────────────────────────── */

.mak-fx-emboss {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.18),
        inset -1px -1px 0 rgba(0, 0, 0, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.30);
}

.mak-fx-emboss-deep {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.22),
        inset -2px -2px 0 rgba(0, 0, 0, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.12);
}

.mak-fx-engrave {
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.45),
        inset -1px -1px 0 rgba(255, 255, 255, 0.10);
}

.mak-fx-card-3d {
    box-shadow:
        0 1px 1px   rgba(0, 0, 0, 0.18),
        0 2px 2px   rgba(0, 0, 0, 0.18),
        0 4px 4px   rgba(0, 0, 0, 0.16),
        0 8px 8px   rgba(0, 0, 0, 0.14),
        0 16px 16px rgba(0, 0, 0, 0.12),
        0 32px 32px rgba(0, 0, 0, 0.10);
}

.mak-fx-glass {
    background: rgba(245, 240, 234, 0.06);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(245, 240, 234, 0.14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.mak-fx-glass-gold {
    background: linear-gradient(135deg,
        rgba(196, 164, 107, 0.12) 0%,
        rgba(196, 164, 107, 0.04) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(196, 164, 107, 0.35);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(196, 164, 107, 0.30);
}

.mak-fx-glow-accent {
    box-shadow:
        0 0 0 1px rgba(196, 164, 107, 0.28),
        0 0 40px  rgba(196, 164, 107, 0.35),
        0 0 90px  rgba(196, 164, 107, 0.18);
}

/* ── Borders ─────────────────────────────────────────────────────────────── */

.mak-fx-border-bevel {
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-top-color: rgba(255, 255, 255, 0.35);
    border-left-color: rgba(255, 255, 255, 0.30);
    border-right-color: rgba(0, 0, 0, 0.40);
    border-bottom-color: rgba(0, 0, 0, 0.45);
}

.mak-fx-border-inset {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top-color: rgba(0, 0, 0, 0.45);
    border-left-color: rgba(0, 0, 0, 0.40);
    border-right-color: rgba(255, 255, 255, 0.20);
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.mak-fx-border-double-emboss {
    border: 1px solid rgba(196, 164, 107, 0.45);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(196, 164, 107, 0.15);
}

/* ── Type effects ────────────────────────────────────────────────────────── */

.mak-fx-text-raised {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25),
        0 -1px 0 rgba(0, 0, 0, 0.55);
}

.mak-fx-text-letterpress {
    color: rgba(245, 240, 234, 0.85);
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.65),
        0 1px 0 rgba(255, 255, 255, 0.10);
}

.mak-fx-text-3d {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.45),
        0 2px 0 rgba(0, 0, 0, 0.40),
        0 3px 0 rgba(0, 0, 0, 0.35),
        0 4px 0 rgba(0, 0, 0, 0.30),
        0 5px 0 rgba(0, 0, 0, 0.25),
        0 6px 8px rgba(0, 0, 0, 0.55);
}

.mak-fx-text-glow-accent {
    color: var(--mak-fx-accent, #C4A46B);
    text-shadow:
        0 0 12px rgba(196, 164, 107, 0.55),
        0 0 28px rgba(196, 164, 107, 0.35);
}

.mak-fx-text-stroke {
    -webkit-text-stroke: 1px rgba(196, 164, 107, 0.85);
    color: transparent;
}

/* ── Interactive ─────────────────────────────────────────────────────────── */

.mak-fx-lift {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mak-fx-lift:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        0 4px 10px  rgba(0, 0, 0, 0.20);
}