/* ==========================================================================
   BALOCH SM — PREMIUM DEPTH AND 3D EFFECTS
   ==========================================================================

   FILE:
   <DOMAIN_ROOT>/public_html/assets/css/motion/depth-3d.css

   WEBSITE:
   https://investt.online

   PROJECT:
   Baloch SM Trading Intelligence Platform

   VERSION:
   1.0.0

   ==========================================================================
   PURPOSE

   Optional visual enhancements for:

   01. Premium depth surfaces
   02. Three-dimensional card elevation
   03. Perspective-based interaction
   04. Layered content elements
   05. Illuminated card edges
   06. Subtle reflection and glare
   07. Premium authentication panels
   08. Subscription plan cards
   09. Trading dashboard cards
   10. Market navigation tabs
   11. Financial metric tiles
   12. Technical indicator panels
   13. Signal history cards
   14. Confirmed BUY / SELL alerts
   15. Notification drawer elevation
   16. Signal receipt presentation
   17. CPI event cards
   18. Administrator statistics
   19. Responsive perspective
   20. Touchscreen compatibility
   21. Reduced-motion support
   22. Forced-colors accessibility
   23. Print-friendly appearance

   ==========================================================================
   DESIGN PRINCIPLES

   PREMIUM:
       Subtle, controlled depth instead of excessive movement.

   PERFORMANCE:
       Transform and opacity-based effects where possible.

   ACCESSIBILITY:
       Do not make content dependent on 3D animation.

   FINANCIAL ACCURACY:
       Never distort candlestick geometry or price axes.

   SECURITY:
       Visual effects never change authorization or data.

   ==========================================================================
   OPTIONAL CLASSES

   .depth-3d
   .depth-3d-scene
   .depth-3d-card
   .depth-3d-soft
   .depth-3d-strong
   .depth-3d-glass
   .depth-3d-glare
   .depth-3d-layer
   .depth-3d-float
   .depth-3d-static

   Additional namespaced classes:

   .bsm-depth-scene
   .bsm-depth-card
   .bsm-depth-button
   .bsm-depth-hero
   .bsm-depth-layer
   .bsm-depth-orbit
   .bsm-depth-badge

   ==========================================================================
   IMPLEMENTATION RULE

   These classes are opt-in.

   Existing cards, forms, tables, popups and chart data
   remain functional even without any 3D classes.

   The relevant HTML or future JavaScript module must
   deliberately add the classes where they are appropriate.

   ==========================================================================
   REQUIRED LOAD ORDER

   reset.css
   tokens.css
   themes/{approved-theme}.css
   themes/market-colors.css
   layout.css
   components.css
   auth.css / dashboard.css / admin.css
   notifications.css
   signal-receipt.css
   responsive.css
   accessibility.css
   motion/depth-3d.css

   LAST:
       motion/reduced-motion.css

   Reduced-motion styles must remain the final motion
   override in the application.

   ========================================================================== */


/* ==========================================================================
   01. DEPTH DESIGN TOKENS
   ==========================================================================

   All theme-sensitive values derive from the existing
   Baloch SM semantic tokens.

   Fallbacks are supplied where necessary so missing
   optional variables cannot invalidate visual rules.
   ========================================================================== */

:root {

    /* Perspective */

    --bsm-depth-perspective: 1300px;

    --bsm-depth-perspective-near: 850px;

    --bsm-depth-perspective-far: 1800px;

    --bsm-depth-perspective-origin: 50% 38%;


    /* Elevation distances */

    --bsm-depth-level-0: 0px;

    --bsm-depth-level-1: 3px;

    --bsm-depth-level-2: 7px;

    --bsm-depth-level-3: 12px;

    --bsm-depth-level-4: 18px;

    --bsm-depth-level-5: 26px;


    /* Maximum decorative tilt */

    --bsm-depth-rotate-x: 1.2deg;

    --bsm-depth-rotate-y: -1.2deg;

    --bsm-depth-rotate-strong-x: 2deg;

    --bsm-depth-rotate-strong-y: -2deg;


    /* Interaction lift */

    --bsm-depth-hover-lift: -4px;

    --bsm-depth-hover-lift-strong: -7px;

    --bsm-depth-active-lift: -1px;


    /* Motion */

    --bsm-depth-duration:
        var(--bsm-motion-medium, 220ms);

    --bsm-depth-duration-slow:
        var(--bsm-motion-slow, 360ms);

    --bsm-depth-ease:
        var(
            --bsm-ease-out,
            cubic-bezier(0.2, 0.7, 0.25, 1)
        );


    /* Core appearance */

    --bsm-depth-surface:
        var(--bsm-bg-card, #10263A);

    --bsm-depth-surface-raised:
        var(--bsm-bg-surface-raised, #18354D);

    --bsm-depth-border:
        var(
            --bsm-border-default,
            rgba(165, 184, 201, 0.26)
        );

    --bsm-depth-border-highlight:
        var(
            --bsm-color-primary-border,
            rgba(53, 234, 255, 0.32)
        );


    /* Brand light */

    --bsm-depth-primary:
        var(--bsm-color-primary, #35EAFF);

    --bsm-depth-buy:
        var(--bsm-signal-buy, #5CE4C7);

    --bsm-depth-sell:
        var(--bsm-signal-sell, #FF697C);


    /* Surface highlight */

    --bsm-depth-glare-start:
        rgba(255, 255, 255, 0.11);

    --bsm-depth-glare-mid:
        rgba(255, 255, 255, 0.025);

    --bsm-depth-glare-end:
        rgba(255, 255, 255, 0);


    /* Decorative ambient glows */

    --bsm-depth-cyan-glow:
        rgba(53, 234, 255, 0.12);

    --bsm-depth-violet-glow:
        rgba(130, 112, 255, 0.10);

    --bsm-depth-buy-glow:
        var(
            --bsm-signal-buy-glow,
            rgba(92, 228, 199, 0.30)
        );

    --bsm-depth-sell-glow:
        var(
            --bsm-signal-sell-glow,
            rgba(255, 105, 124, 0.30)
        );


    /* Shadows */

    --bsm-depth-shadow-1:
        0 5px 14px rgba(0, 0, 0, 0.12);

    --bsm-depth-shadow-2:
        0 10px 28px rgba(0, 0, 0, 0.17);

    --bsm-depth-shadow-3:
        0 18px 44px rgba(0, 0, 0, 0.22);

    --bsm-depth-shadow-4:
        0 26px 65px rgba(0, 0, 0, 0.29);

    --bsm-depth-shadow-5:
        0 32px 85px rgba(0, 0, 0, 0.34);


    /* Shape */

    --bsm-depth-radius:
        var(--bsm-radius-xl, 20px);

}


/* ==========================================================================
   02. LIGHT-THEME DEPTH ADAPTATION
   ==========================================================================

   Both the dark and light themes use the same
   depth components.

   Light mode uses softer shadows and more restrained
   reflective highlights.

   No trading direction colors are overwritten.
   ========================================================================== */

:root[data-theme="baloch-light"],
html.theme-baloch-light,
body[data-theme="baloch-light"],
body.theme-baloch-light {

    --bsm-depth-glare-start:
        rgba(255, 255, 255, 0.86);

    --bsm-depth-glare-mid:
        rgba(255, 255, 255, 0.24);

    --bsm-depth-glare-end:
        rgba(255, 255, 255, 0);

    --bsm-depth-cyan-glow:
        rgba(0, 109, 127, 0.085);

    --bsm-depth-violet-glow:
        rgba(87, 63, 189, 0.065);

    --bsm-depth-shadow-1:
        0 4px 12px rgba(19, 40, 60, 0.06);

    --bsm-depth-shadow-2:
        0 9px 25px rgba(19, 40, 60, 0.09);

    --bsm-depth-shadow-3:
        0 16px 38px rgba(19, 40, 60, 0.11);

    --bsm-depth-shadow-4:
        0 22px 55px rgba(19, 40, 60, 0.15);

    --bsm-depth-shadow-5:
        0 30px 75px rgba(19, 40, 60, 0.19);

}


/* ==========================================================================
   03. DEPTH SCENE
   ==========================================================================

   Provides a perspective environment for opt-in cards.

   A scene is a layout wrapper, not a security boundary.

   No perspective is applied globally to the body or
   primary trading chart.
   ========================================================================== */

.depth-3d-scene,
.bsm-depth-scene {
    position: relative;

    min-width: 0;

    perspective: var(--bsm-depth-perspective);

    perspective-origin:
        var(--bsm-depth-perspective-origin);
}


/* ==========================================================================
   04. NEAR AND FAR PERSPECTIVE OPTIONS
   ========================================================================== */

.depth-3d-scene.is-near,
.bsm-depth-scene.is-near {
    perspective: var(--bsm-depth-perspective-near);
}

.depth-3d-scene.is-far,
.bsm-depth-scene.is-far {
    perspective: var(--bsm-depth-perspective-far);
}


/* ==========================================================================
   05. GENERAL OPT-IN DEPTH SURFACE
   ==========================================================================

   Does not override the component's display mode.

   Can be added to existing .card or .dashboard-card
   elements without replacing their layout rules.
   ========================================================================== */

.depth-3d,
.depth-3d-card,
.bsm-depth-card {
    position: relative;

    min-width: 0;

    border-color: var(--bsm-depth-border);

    border-radius: var(--bsm-depth-radius);

    background-color: var(--bsm-depth-surface);

    box-shadow:
        var(--bsm-depth-shadow-2);

    transform-style: preserve-3d;

    backface-visibility: hidden;

    transition:
        transform
            var(--bsm-depth-duration)
            var(--bsm-depth-ease),
        box-shadow
            var(--bsm-depth-duration)
            var(--bsm-depth-ease),
        border-color
            var(--bsm-depth-duration)
            var(--bsm-depth-ease);
}


/* ==========================================================================
   06. SOFT DEPTH
   ========================================================================== */

.depth-3d-soft {
    box-shadow:
        var(--bsm-depth-shadow-1);

    --bsm-depth-hover-lift: -2px;

    --bsm-depth-rotate-x: 0.5deg;

    --bsm-depth-rotate-y: -0.5deg;
}


/* ==========================================================================
   07. STRONG DEPTH
   ==========================================================================

   Intended for small decorative feature cards.

   Do not apply strong tilt to full-size trading charts,
   long forms, payment receipts or data tables.
   ========================================================================== */

.depth-3d-strong {
    box-shadow:
        var(--bsm-depth-shadow-4);

    --bsm-depth-hover-lift: -7px;

    --bsm-depth-rotate-x: 2deg;

    --bsm-depth-rotate-y: -2deg;
}


/* ==========================================================================
   08. STATIC DEPTH OPTION
   ==========================================================================

   Adds elevation without any hover tilt.

   Appropriate for:

   - Payment instructions
   - Detailed signal receipts
   - Administrative forms
   - Chart containers
   - Sensitive or dense information
   ========================================================================== */

.depth-3d-static {
    box-shadow:
        var(--bsm-depth-shadow-3);
}

.depth-3d-static,
.depth-3d-static:hover {
    transform: none;
}


/* ==========================================================================
   09. THREE-DIMENSIONAL HOVER
   ==========================================================================

   Only hover-capable, precise-pointer devices receive tilt.

   This prevents cards from sticking in a tilted state
   after touchscreen taps.

   Users with reduced motion receive a flat alternative.
   ========================================================================== */

@media (hover: hover)
    and (pointer: fine)
    and (prefers-reduced-motion: no-preference) {

    :where(
        .depth-3d,
        .depth-3d-card,
        .bsm-depth-card
    ):not(
        .depth-3d-static,
        .chart-panel,
        .chart-card,
        .receipt-card,
        .receipt-content,
        .signal-receipt,
        .signal-popup,
        .notification-panel,
        .notice-panel,
        .admin-card
    ):hover {
        transform:
            translate3d(
                0,
                var(--bsm-depth-hover-lift),
                var(--bsm-depth-level-3)
            )
            rotateX(var(--bsm-depth-rotate-x))
            rotateY(var(--bsm-depth-rotate-y));

        box-shadow:
            var(--bsm-depth-shadow-4);

        border-color:
            var(--bsm-depth-border-highlight);

        will-change: transform;
    }

}


/* ==========================================================================
   10. ACTIVE PRESS FEEDBACK
   ==========================================================================

   Active feedback is very small.

   It must not move important trading controls outside
   their expected click or touch region.
   ========================================================================== */

@media (hover: hover)
    and (pointer: fine)
    and (prefers-reduced-motion: no-preference) {

    :where(
        .depth-3d-card,
        .bsm-depth-card
    ):not(
        .depth-3d-static,
        .admin-card,
        .chart-panel,
        .receipt-card,
        .signal-popup
    ):active {
        transform:
            translate3d(
                0,
                var(--bsm-depth-active-lift),
                var(--bsm-depth-level-1)
            );

        transition-duration:
            var(--bsm-motion-fast, 120ms);
    }

}


/* ==========================================================================
   11. KEYBOARD FOCUS
   ==========================================================================

   Keyboard users receive a strong focus outline.

   The card is not required to rotate or move.

   Focus appearance is available even when animations
   have been disabled.
   ========================================================================== */

.depth-3d:focus-visible,
.depth-3d-card:focus-visible,
.bsm-depth-card:focus-visible {
    outline:
        3px solid
        var(--bsm-focus-color, currentColor);

    outline-offset: 3px;

    border-color:
        var(--bsm-depth-border-highlight);
}


/* ==========================================================================
   12. FOCUS WITHIN
   ==========================================================================

   Helps identify which interactive card contains
   the focused form field or control.

   Does not change authentication or payment behavior.
   ========================================================================== */

.depth-3d:focus-within,
.depth-3d-card:focus-within,
.bsm-depth-card:focus-within {
    border-color:
        var(--bsm-depth-border-highlight);
}


/* ==========================================================================
   13. DECORATIVE REFLECTION
   ==========================================================================

   Opt-in class:

       .depth-3d-glare

   Reflection is decorative and does not block pointer
   interaction with child controls.

   The card's text remains ordinary readable HTML.
   ========================================================================== */

.depth-3d-glare {
    position: relative;

    isolation: isolate;
}

.depth-3d-glare::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    border-radius: inherit;

    background-image:
        linear-gradient(
            135deg,
            var(--bsm-depth-glare-start) 0%,
            var(--bsm-depth-glare-mid) 23%,
            var(--bsm-depth-glare-end) 55%
        );

    pointer-events: none;
}


/* ==========================================================================
   14. PREMIUM GLASS DEPTH
   ==========================================================================

   Glass effects are optional.

   Avoid using them behind long text or financial values
   when the background would reduce readability.
   ========================================================================== */

.depth-3d-glass {
    border:
        1px solid
        var(--bsm-glass-border, var(--bsm-border-default));

    background-color:
        var(--bsm-glass-bg, var(--bsm-bg-card));

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    box-shadow:
        var(--bsm-depth-shadow-3);
}


/* ==========================================================================
   15. ILLUMINATED EDGE
   ==========================================================================

   Keeps the surface border visible without requiring
   a constantly animated glow.
   ========================================================================== */

.depth-3d-edge,
.bsm-depth-edge {
    border:
        1px solid
        var(--bsm-depth-border-highlight);

    box-shadow:
        var(--bsm-depth-shadow-2),
        inset 0 1px 0 var(--bsm-depth-glare-start);
}


/* ==========================================================================
   16. INNER SURFACE DEPTH
   ==========================================================================

   Can be used for metric wells, small indicator panels
   and compact financial information surfaces.
   ========================================================================== */

.depth-3d-inset,
.bsm-depth-inset {
    border:
        1px solid
        var(--bsm-border-subtle, rgba(165, 184, 201, 0.15));

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color:
        var(--bsm-bg-surface-inset, #0D2032);

    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* ==========================================================================
   17. LAYERED DEPTH ELEMENTS
   ==========================================================================

   Decorative child layers can create a 3D stack
   when used inside a perspective scene.

   Do not apply 3D layering to chart axis labels or
   other content requiring pixel-accurate geometry.
   ========================================================================== */

.depth-3d-layer,
.bsm-depth-layer {
    position: relative;

    transform-style: preserve-3d;
}

.depth-3d-layer--back,
.bsm-depth-layer[data-plane="back"] {
    transform: translateZ(-8px);
}

.depth-3d-layer--middle,
.bsm-depth-layer[data-plane="middle"] {
    transform: translateZ(8px);
}

.depth-3d-layer--front,
.bsm-depth-layer[data-plane="front"] {
    transform: translateZ(16px);
}


/* ==========================================================================
   18. HERO PANEL
   ==========================================================================

   Optional premium visual treatment for a public/auth
   hero or approved dashboard welcome card.

   The hero's actual information stays readable.

   These gradients do not contain generated user data.
   ========================================================================== */

.bsm-depth-hero {
    position: relative;

    isolation: isolate;

    min-width: 0;

    border:
        1px solid
        var(--bsm-depth-border);

    border-radius:
        var(--bsm-radius-2xl, 24px);

    background-color:
        var(--bsm-depth-surface);

    background-image:
        radial-gradient(
            circle at 15% 15%,
            var(--bsm-depth-cyan-glow),
            transparent 45%
        ),
        radial-gradient(
            circle at 88% 82%,
            var(--bsm-depth-violet-glow),
            transparent 42%
        );

    box-shadow:
        var(--bsm-depth-shadow-4);
}


/* ==========================================================================
   19. DECORATIVE HERO ORBIT
   ==========================================================================

   Optional ornament only.

   Does not provide trading information or user actions.

   The parent should set aria-hidden="true" on the
   decorative markup when appropriate.
   ========================================================================== */

.bsm-depth-orbit {
    position: relative;

    display: grid;
    place-items: center;

    width: min(100%, 240px);

    aspect-ratio: 1;

    border:
        1px solid
        var(--bsm-depth-border-highlight);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--bsm-depth-cyan-glow),
            transparent 72%
        );

    box-shadow:
        var(--bsm-depth-shadow-2),
        inset 0 0 28px var(--bsm-depth-cyan-glow);
}


/* ==========================================================================
   20. ORBIT INNER RING
   ========================================================================== */

.bsm-depth-orbit::before {
    content: "";

    position: absolute;

    inset: 15%;

    border:
        1px solid
        var(--bsm-depth-border-highlight);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   21. FLOATING ORNAMENT
   ==========================================================================

   Optional decorative animation.

   This is never used for real signal status or
   time-sensitive information.

   The reduced-motion layer disables it entirely.
   ========================================================================== */

.depth-3d-float {
    animation:
        bsm-depth-float
        6s
        ease-in-out
        infinite;
}

@keyframes bsm-depth-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


/* ==========================================================================
   22. BUTTON DEPTH
   ==========================================================================

   Optional:

       .btn.bsm-depth-button

   Hover and active states do not alter actual
   form submission or payment processing.
   ========================================================================== */

.bsm-depth-button,
.depth-3d-button {
    position: relative;

    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.11),
        var(--bsm-depth-shadow-1);

    transition:
        transform
            var(--bsm-depth-duration)
            var(--bsm-depth-ease),
        box-shadow
            var(--bsm-depth-duration)
            var(--bsm-depth-ease);
}


/* ==========================================================================
   23. BUTTON HOVER
   ========================================================================== */

@media (hover: hover)
    and (pointer: fine)
    and (prefers-reduced-motion: no-preference) {

    .bsm-depth-button:hover:not(:disabled),
    .depth-3d-button:hover:not(:disabled) {
        transform: translateY(-2px);

        box-shadow:
            0 6px 0 rgba(0, 0, 0, 0.10),
            var(--bsm-depth-shadow-2);
    }

}


/* ==========================================================================
   24. BUTTON ACTIVE
   ========================================================================== */

.bsm-depth-button:active:not(:disabled),
.depth-3d-button:active:not(:disabled) {
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.10),
        var(--bsm-depth-shadow-1);
}


/* ==========================================================================
   25. AUTHENTICATION CARD DEPTH
   ==========================================================================

   Authentication inputs remain flat and readable.

   The card may gain a subtle shadow, but login controls
   must not move while the user is entering credentials.
   ========================================================================== */

.auth-card.depth-3d,
.admin-auth-page .auth-card.depth-3d {
    transform: none;

    box-shadow:
        var(--bsm-depth-shadow-3);

    border-color:
        var(--bsm-depth-border);
}

.auth-card.depth-3d:focus-within,
.admin-auth-page .auth-card.depth-3d:focus-within {
    border-color:
        var(--bsm-depth-border-highlight);
}


/* ==========================================================================
   26. SUBSCRIPTION PLAN DEPTH
   ==========================================================================

   Plan hover movement is permitted only on a device
   with precise hover support.

   Selection remains determined by actual radio/button
   state, never by hover.
   ========================================================================== */

.plan-card.depth-3d,
.plan-card.depth-3d-card {
    box-shadow:
        var(--bsm-depth-shadow-2);
}

.plan-card.depth-3d.is-selected,
.plan-card.depth-3d[aria-selected="true"] {
    border-color:
        var(--bsm-color-primary-border, #35EAFF);

    box-shadow:
        var(--bsm-depth-shadow-3);
}


/* ==========================================================================
   27. PAYMENT SURFACE DEPTH
   ==========================================================================

   Manual payment methods, transaction references,
   screenshot previews and payment status areas remain
   stable while the user interacts with them.
   ========================================================================== */

.payment-instructions.depth-3d,
.payment-method-card.depth-3d,
.payment-review-status.depth-3d {
    transform: none;

    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   28. DASHBOARD CARD DEPTH
   ========================================================================== */

.dashboard-card.depth-3d,
.dashboard-widget.depth-3d,
.market-panel.depth-3d {
    border-color:
        var(--bsm-depth-border);

    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   29. MARKET TAB DEPTH
   ==========================================================================

   Market tabs can have a small elevated appearance.

   The market selection remains controlled by the actual
   selected state and authenticated application logic.
   ========================================================================== */

#market-tabs .depth-3d,
#market-tabs .market-tab.depth-3d,
.market-tabs .market-tab.depth-3d {
    box-shadow:
        var(--bsm-depth-shadow-1);

    transform-style: flat;
}


/* ==========================================================================
   30. SELECTED MARKET TAB
   ========================================================================== */

#market-tabs .depth-3d[aria-selected="true"],
#market-tabs .market-tab.depth-3d.is-active,
.market-tabs .market-tab.depth-3d[aria-selected="true"] {
    border-color:
        var(
            --bsm-market-tab-border,
            var(--bsm-depth-border-highlight)
        );

    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   31. MARKET TAB HOVER
   ==========================================================================

   Do not apply an exaggerated tilt to navigation tabs.

   A small vertical lift is sufficient.
   ========================================================================== */

@media (hover: hover)
    and (pointer: fine)
    and (prefers-reduced-motion: no-preference) {

    #market-tabs .depth-3d:hover,
    .market-tabs .market-tab.depth-3d:hover {
        transform: translateY(-2px);

        box-shadow:
            var(--bsm-depth-shadow-2);
    }

}


/* ==========================================================================
   32. MARKET CLUE INTEGRITY
   ==========================================================================

   Other-market clues represent aggregate BUY/SELL counts.

   Their position and direction must not change because of
   the decorative market-tab elevation.

   No pair-specific details are created through CSS.
   ========================================================================== */

#market-tabs .market-clue,
#market-tabs .market-clue-count,
.market-tabs .market-clue {
    transform: none;
}


/* ==========================================================================
   33. CHART PANEL DEPTH
   ==========================================================================

   CRITICAL:

   Only the chart CONTAINER receives shadow depth.

   Candlestick geometry, axis positions and canvas
   coordinates must remain untransformed.

   Do not rotate or perspective-transform #price-chart.
   ========================================================================== */

.chart-panel.depth-3d,
.chart-card.depth-3d,
.chart-region.depth-3d {
    transform: none;

    border-color:
        var(--bsm-depth-border);

    box-shadow:
        var(--bsm-depth-shadow-3);
}


/* ==========================================================================
   34. PREVENT CHART DISTORTION
   ==========================================================================

   Do not use 3D tilt on the chart viewport itself.

   Actual canvas/SVG transformations belonging to the
   renderer are intentionally not overridden here.
   ========================================================================== */

#price-chart.depth-3d,
#price-chart.depth-3d-card,
#price-chart.bsm-depth-card {
    transform: none !important;

    transform-style: flat;

    perspective: none;
}


/* ==========================================================================
   35. FINANCIAL METRIC TILE DEPTH
   ==========================================================================

   Small metric cards are suitable for subtle elevation.

   The underlying values remain server-provided and
   selectable.

   Hover movement must never change numeric content.
   ========================================================================== */

.market-metric.depth-3d,
.metric-card.depth-3d,
.admin-stat.depth-3d {
    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   36. METRIC NUMBER READABILITY
   ========================================================================== */

.depth-3d :where(
    .metric-value,
    .market-metric-value,
    .market-price,
    .signal-symbol,
    .payment-reference,
    .receipt-price
) {
    font-variant-numeric:
        tabular-nums lining-nums;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   37. TECHNICAL INDICATOR PANEL DEPTH
   ==========================================================================

   Indicator panels should remain easy to read.

   No decorative effect changes indicator calculations.
   ========================================================================== */

.indicator-panel.depth-3d,
.technical-panel.depth-3d {
    transform: none;

    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   38. CONFIRMED SIGNAL HISTORY DEPTH
   ========================================================================== */

.signal-history-item.depth-3d,
.recent-signal.depth-3d,
.signal-list-item.depth-3d {
    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   39. BUY SIGNAL DEPTH
   ==========================================================================

   Apply only when the frontend has an actual confirmed
   BUY signal from an authorized selected market.
   ========================================================================== */

.signal-history-item.depth-3d[data-direction="buy"],
.recent-signal.depth-3d.is-buy {
    border-inline-start:
        3px solid
        var(--bsm-depth-buy);
}


/* ==========================================================================
   40. SELL SIGNAL DEPTH
   ========================================================================== */

.signal-history-item.depth-3d[data-direction="sell"],
.recent-signal.depth-3d.is-sell {
    border-inline-start:
        3px solid
        var(--bsm-depth-sell);
}


/* ==========================================================================
   41. SIGNAL POPUP ELEVATION
   ==========================================================================

   The popup is positioned by notifications.css.

   This file does not apply perspective transforms
   to moving or dismissing popups.

   Their 30-second lifecycle remains in JavaScript.
   ========================================================================== */

.signal-popup.depth-3d,
.trade-signal-popup.depth-3d {
    transform-style: flat;

    box-shadow:
        var(--bsm-depth-shadow-4);
}


/* ==========================================================================
   42. BUY POPUP SHADOW
   ========================================================================== */

.signal-popup.depth-3d.is-buy,
.signal-popup.depth-3d[data-direction="buy"] {
    border-color:
        var(
            --bsm-signal-buy-border,
            var(--bsm-depth-buy)
        );

    box-shadow:
        var(--bsm-depth-shadow-4),
        0 0 26px var(--bsm-depth-buy-glow);
}


/* ==========================================================================
   43. SELL POPUP SHADOW
   ========================================================================== */

.signal-popup.depth-3d.is-sell,
.signal-popup.depth-3d[data-direction="sell"] {
    border-color:
        var(
            --bsm-signal-sell-border,
            var(--bsm-depth-sell)
        );

    box-shadow:
        var(--bsm-depth-shadow-4),
        0 0 26px var(--bsm-depth-sell-glow);
}


/* ==========================================================================
   44. POPUP INTERACTION SAFETY
   ==========================================================================

   Signal popups may already use CSS transforms for
   arrival/exit presentation.

   Do not override those transforms on hover.

   Notification acknowledgements must not depend on
   animation completion.
   ========================================================================== */

.signal-popup.depth-3d:hover,
.trade-signal-popup.depth-3d:hover {
    box-shadow:
        var(--bsm-depth-shadow-4);
}

.signal-popup.depth-3d.is-buy:hover,
.signal-popup.depth-3d[data-direction="buy"]:hover {
    box-shadow:
        var(--bsm-depth-shadow-4),
        0 0 26px var(--bsm-depth-buy-glow);
}

.signal-popup.depth-3d.is-sell:hover,
.signal-popup.depth-3d[data-direction="sell"]:hover {
    box-shadow:
        var(--bsm-depth-shadow-4),
        0 0 26px var(--bsm-depth-sell-glow);
}


/* ==========================================================================
   45. NOTIFICATION DRAWER DEPTH
   ==========================================================================

   Keep the notification drawer's actual fixed position
   and scrolling behavior unchanged.

   Visual depth is supplied by its shadow only.
   ========================================================================== */

#notice-panel.depth-3d,
.notification-panel.depth-3d,
.notice-panel.depth-3d {
    transform: none;

    transform-style: flat;

    box-shadow:
        var(--bsm-depth-shadow-5);
}


/* ==========================================================================
   46. NOTIFICATION HISTORY CARDS
   ========================================================================== */

.notification-item.depth-3d,
.notice-item.depth-3d {
    box-shadow:
        var(--bsm-depth-shadow-1);
}


/* ==========================================================================
   47. SIGNAL RECEIPT CARD
   ==========================================================================

   Receipts must remain static and readable.

   Applying a perspective rotation to an entire
   receipt could make financial values harder to read.

   Use elevation without rotation.
   ========================================================================== */

#receipt-modal .receipt-card.depth-3d,
#receipt-modal .receipt-content.depth-3d,
#receipt-modal .signal-receipt.depth-3d,
#receipt-modal .receipt.depth-3d {
    transform-style: flat;

    box-shadow:
        var(--bsm-depth-shadow-5);
}


/* ==========================================================================
   48. RECEIPT MODAL POSITION SAFETY
   ==========================================================================

   Modal positioning and actual opening/closing are
   controlled by signal-receipt.css and JavaScript.

   This stylesheet must not change the modal's z-index
   or accessibility state.
   ========================================================================== */

#receipt-modal.depth-3d {
    transform: none;

    perspective: none;
}


/* ==========================================================================
   49. CPI EVENT DEPTH
   ==========================================================================

   Events display actual verified release information.

   Decorative styling does not indicate that an event
   has occurred or that a trade will be profitable.
   ========================================================================== */

.cpi-panel.depth-3d,
.cpi-event.depth-3d,
.economic-event.depth-3d,
.news-event.depth-3d {
    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   50. CPI COUNTDOWN STABILITY
   ==========================================================================

   Do not transform the numeric countdown display.

   Actual seconds/days must continue updating without
   changes to geometry or accessibility.
   ========================================================================== */

.cpi-countdown.depth-3d,
.economic-countdown.depth-3d,
.countdown-grid.depth-3d {
    transform: none;
}


/* ==========================================================================
   51. ADMINISTRATION DEPTH
   ==========================================================================

   Administrator data tables, approval forms and audit
   records must not tilt while being operated.

   Static shadow depth is allowed.
   ========================================================================== */

.admin-app .admin-card.depth-3d {
    transform: none;

    box-shadow:
        var(--bsm-depth-shadow-2);
}

.admin-app .admin-stat.depth-3d {
    box-shadow:
        var(--bsm-depth-shadow-2);
}


/* ==========================================================================
   52. ADMINISTRATION TABLE STABILITY
   ========================================================================== */

.admin-app .admin-table.depth-3d,
.admin-app .admin-table-scroll.depth-3d,
.admin-app .admin-form.depth-3d {
    transform: none;

    perspective: none;
}


/* ==========================================================================
   53. PREMIUM STATUS BADGE
   ==========================================================================

   Optional class for a genuine backend-provided state.

   CSS does not insert labels or assign the state.
   ========================================================================== */

.bsm-depth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--bsm-space-2, 8px);

    min-height: 28px;

    padding:
        var(--bsm-space-1, 4px)
        var(--bsm-space-3, 12px);

    border:
        1px solid
        var(--bsm-depth-border);

    border-radius:
        var(--bsm-radius-pill, 999px);

    background-color:
        var(--bsm-bg-surface-raised, #18354D);

    color:
        var(--bsm-text-primary, #F4F8FC);

    font-size:
        var(--bsm-text-xs, 0.75rem);

    font-weight:
        var(--bsm-weight-semibold, 600);

    box-shadow:
        var(--bsm-depth-shadow-1);
}


/* ==========================================================================
   54. BUY AND SELL BADGE VARIANTS
   ========================================================================== */

.bsm-depth-badge[data-direction="buy"] {
    color:
        var(--bsm-signal-buy-text, #5CE4C7);

    border-color:
        var(--bsm-signal-buy-border, #5CE4C7);

    background-color:
        var(--bsm-signal-buy-bg, rgba(92, 228, 199, 0.12));
}

.bsm-depth-badge[data-direction="sell"] {
    color:
        var(--bsm-signal-sell-text, #FF697C);

    border-color:
        var(--bsm-signal-sell-border, #FF697C);

    background-color:
        var(--bsm-signal-sell-bg, rgba(255, 105, 124, 0.12));
}


/* ==========================================================================
   55. DEPTH UNDER HIGH-CONTRAST PREFERENCE
   ==========================================================================

   Shadows become less important than clear borders.

   Readable text and trading status labels take priority.
   ========================================================================== */

@media (prefers-contrast: more) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card,
    .depth-3d-glass,
    .bsm-depth-hero {
        border-width: 2px;
    }

    .depth-3d-glare::before {
        opacity: 0.25;
    }

}


/* ==========================================================================
   56. TABLET DEPTH
   ==========================================================================

   Reduce large shadows to avoid visually crowding
   the trading workspace.
   ========================================================================== */

@media (max-width: 1024px) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card {
        --bsm-depth-rotate-x: 0.75deg;

        --bsm-depth-rotate-y: -0.75deg;

        --bsm-depth-hover-lift: -3px;
    }

    .bsm-depth-hero {
        box-shadow:
            var(--bsm-depth-shadow-3);
    }

}


/* ==========================================================================
   57. MOBILE DEPTH
   ==========================================================================

   Touchscreen interfaces keep their layered look,
   without requiring hovering or rotating cards.
   ========================================================================== */

@media (max-width: 767px) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card {
        transform: none;

        box-shadow:
            var(--bsm-depth-shadow-2);
    }

    .depth-3d-strong {
        box-shadow:
            var(--bsm-depth-shadow-3);
    }

    .bsm-depth-hero {
        box-shadow:
            var(--bsm-depth-shadow-2);
    }

    .bsm-depth-orbit {
        width: min(100%, 170px);
    }

    .depth-3d-glass {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

}


/* ==========================================================================
   58. TOUCHSCREEN DEPTH SAFETY
   ==========================================================================

   Avoid hover-triggered perspective effects on touch.

   The interface must not jump when a user taps a
   form field, market selector, or notification.
   ========================================================================== */

@media (hover: none), (pointer: coarse) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card,
    .bsm-depth-button,
    .depth-3d-button {
        transform: none;
    }

    .depth-3d-glare::before {
        opacity: 0.60;
    }

}


/* ==========================================================================
   59. VERY SMALL SCREENS
   ========================================================================== */

@media (max-width: 480px) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card {
        --bsm-depth-radius:
            var(--bsm-radius-lg, 16px);
    }

    .bsm-depth-orbit {
        width: min(100%, 128px);
    }

    .bsm-depth-hero {
        background-image:
            radial-gradient(
                circle at 15% 15%,
                var(--bsm-depth-cyan-glow),
                transparent 55%
            );
    }

}


/* ==========================================================================
   60. SHORT VIEWPORTS
   ==========================================================================

   Reduce ornament size for landscape phones and
   short desktop windows.

   Do not change chart data or dialog visibility.
   ========================================================================== */

@media (max-height: 520px) {

    .bsm-depth-orbit {
        width: min(100%, 120px);
    }

    .depth-3d-scene,
    .bsm-depth-scene {
        perspective:
            var(--bsm-depth-perspective-far);
    }

}


/* ==========================================================================
   61. REDUCED-MOTION OVERRIDE
   ==========================================================================

   OS-level preference.

   This rule removes every decorative motion effect
   introduced by this stylesheet.

   Real-time data and notification timers continue to
   function independently of CSS animation.

   The dedicated reduced-motion.css file is loaded LAST
   and provides the final application-wide protection.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card,
    .depth-3d-button,
    .bsm-depth-button,
    .depth-3d-layer,
    .bsm-depth-layer,
    .depth-3d-float,
    .bsm-depth-orbit {
        animation: none !important;

        transition: none !important;

        transform: none !important;
    }

    .depth-3d-glare::before {
        animation: none !important;

        transition: none !important;
    }

}


/* ==========================================================================
   62. MANUAL REDUCED-MOTION OVERRIDE
   ==========================================================================

   Supported future application preferences:

       html[data-motion="reduce"]
       html[data-motion="reduced"]
       html.motion-reduce

   These selectors apply only to opted-in visual elements.
   ========================================================================== */

:is(
    html[data-motion="reduce"],
    html[data-motion="reduced"],
    html.motion-reduce
) :is(
    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card,
    .depth-3d-button,
    .bsm-depth-button,
    .depth-3d-layer,
    .bsm-depth-layer,
    .depth-3d-float,
    .bsm-depth-orbit
) {
    animation: none !important;

    transition: none !important;

    transform: none !important;
}


/* ==========================================================================
   63. REDUCED TRANSPARENCY
   ==========================================================================

   Use the solid theme surface instead of glass blur.
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {

    .depth-3d-glass {
        -webkit-backdrop-filter: none !important;

        backdrop-filter: none !important;

        background-color:
            var(--bsm-bg-surface, #10263A);
    }

    .depth-3d-glare::before {
        display: none;
    }

}


/* ==========================================================================
   64. FORCED COLORS
   ==========================================================================

   Honor operating system accessibility colors.

   Decorative shadows and gradients must not interfere
   with system high-contrast settings.
   ========================================================================== */

@media (forced-colors: active) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card,
    .depth-3d-glass,
    .depth-3d-inset,
    .bsm-depth-inset,
    .bsm-depth-hero,
    .bsm-depth-badge {
        border-color: CanvasText;

        background-color: Canvas;

        background-image: none;

        color: CanvasText;

        box-shadow: none;

        transform: none;
    }

    .depth-3d-glare::before,
    .bsm-depth-orbit::before {
        display: none;
    }

    .depth-3d:focus-visible,
    .depth-3d-card:focus-visible,
    .bsm-depth-card:focus-visible {
        outline-color: Highlight;
    }

}


/* ==========================================================================
   65. GRACEFUL 3D FEATURE FALLBACK
   ==========================================================================

   If the browser lacks CSS 3D transform support,
   keep simple flat elevation.

   The financial interface remains readable and usable.
   ========================================================================== */

@supports not (transform-style: preserve-3d) {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card,
    .depth-3d-layer,
    .bsm-depth-layer {
        transform: none;

        transform-style: flat;
    }

    .depth-3d-scene,
    .bsm-depth-scene {
        perspective: none;
    }

}


/* ==========================================================================
   66. PRINT
   ==========================================================================

   Printing must produce flat, readable content.

   Decorative 3D ornaments are not necessary for
   financial records or administrator reports.

   Hidden or unauthorized content stays hidden.
   ========================================================================== */

@media print {

    .depth-3d,
    .depth-3d-card,
    .bsm-depth-card,
    .depth-3d-glass,
    .depth-3d-inset,
    .bsm-depth-inset,
    .bsm-depth-hero,
    .bsm-depth-badge {
        transform: none !important;

        perspective: none !important;

        animation: none !important;

        transition: none !important;

        background-image: none !important;

        box-shadow: none !important;
    }

    .depth-3d-glare::before,
    .bsm-depth-orbit {
        display: none !important;
    }

    [hidden] {
        display: none !important;
    }

}


/* ==========================================================================
   67. FINAL INTEGRATION CHECKLIST
   ==========================================================================

   CORE DEPTH
   ----------
   [x] Perspective scenes
   [x] Soft depth cards
   [x] Strong depth cards
   [x] Static elevated surfaces
   [x] Three-dimensional hover effects
   [x] Illuminated edges
   [x] Glass surfaces
   [x] Decorative reflection
   [x] Layered content
   [x] Subtle floating ornament

   APPLICATION
   -----------
   [x] Authentication cards
   [x] Subscription plan cards
   [x] Payment instruction panels
   [x] Dashboard cards
   [x] Market tabs
   [x] Financial metric tiles
   [x] Technical indicator panels
   [x] Confirmed signal history
   [x] BUY / SELL popup shadows
   [x] Notification drawer
   [x] Signal receipt modal
   [x] CPI economic event cards
   [x] Administrator cards
   [x] Administrator statistics

   MARKET SAFETY
   -------------
   [x] No artificial candle rendering
   [x] No 3D chart distortion
   [x] No fabricated prices
   [x] No fake LIVE provider state
   [x] No invented BUY / SELL signals
   [x] No modification of market authorization
   [x] No automatic pair switching
   [x] No impact on CPI countdown calculations
   [x] No interference with 30-second popup timers

   RESPONSIVENESS
   --------------
   [x] Desktop
   [x] Laptop
   [x] Tablet
   [x] Mobile
   [x] Touchscreen
   [x] Narrow screen
   [x] Short viewport
   [x] CSS 3D fallback

   ACCESSIBILITY
   -------------
   [x] Keyboard focus
   [x] Accessible static cards
   [x] Reduced motion
   [x] Manual reduced-motion preference
   [x] Reduced transparency
   [x] High contrast
   [x] Forced colors
   [x] Print

   ==========================================================================
   IMPORTANT FRONTEND CONTRACT

   The application should add 3D classes only to approved
   presentation surfaces.

   Suitable:
       Hero cards
       Subscription plan cards
       Dashboard overview cards
       Metric tiles
       Market tabs
       Signal history cards

   Avoid tilting:
       #price-chart
       Candlestick rendering surfaces
       Price axes
       Administrator tables
       Payment entry forms
       Full notification drawers
       Signal receipt content

   CSS hover is deliberately static-angle.

   Any future pointer-following tilt would require a
   separate accessible, performance-limited JavaScript
   implementation. It is not implied by this stylesheet.

   ==========================================================================
   SECURITY AND TIMING CONTRACT

   Depth effects never:

   - Grant subscription access.
   - Approve user registrations.
   - Verify payments.
   - Change administrator privileges.
   - Publish trading signals.
   - Alter notification ownership.
   - Modify the 30-second popup lifetime.
   - Change live chart data.
   - Change economic-event timestamps.

   ==========================================================================
   END OF BALOCH SM DEPTH AND 3D EFFECTS STYLESHEET
   ========================================================================== */