/* ==========================================================
   11SECTORS — STRATEGY MOTION SYSTEM
   ========================================================== */

.strategy-motion-stage {
    position:relative;
    width:100%;
    height:230px;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;

    margin:0;
    border-top:1px solid rgba(0,229,255,.24);
    border-bottom:1px solid rgba(0,229,255,.24);

    background:
        linear-gradient(
            180deg,
            rgba(2,15,19,.98),
            rgba(1,8,11,.98)
        );
}


/* ----------------------------------------------------------
   TOP INTELLIGENCE STRIP
   ---------------------------------------------------------- */

.strategy-motion-head {
    position:absolute;
    z-index:5;

    top:0;
    left:0;
    right:0;

    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    padding:0 14px;

    border-bottom:
        1px solid rgba(0,229,255,.14);

    background:
        rgba(2,11,15,.90);

    pointer-events:none;
}


.strategy-motion-title {
    color:#00e5ff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}


.strategy-motion-state {
    display:flex;
    align-items:center;
    gap:8px;

    color:#a8bac2;
    font-size:9px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}


.strategy-motion-dot {
    width:7px;
    height:7px;
    border-radius:50%;

    background:#89ff00;

    box-shadow:
        0 0 7px rgba(137,255,0,.75);
}


/* ----------------------------------------------------------
   CANVAS
   ---------------------------------------------------------- */

.strategy-motion-canvas {
    position:absolute;

    left:0;
    right:0;
    bottom:0;
    top:38px;

    width:100%;
    height:calc(100% - 38px);

    display:block;
}


/* ----------------------------------------------------------
   GRID OVERLAY
   ---------------------------------------------------------- */

.strategy-motion-grid {
    position:absolute;

    left:0;
    right:0;
    bottom:0;
    top:38px;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(0,229,255,.075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,229,255,.075) 1px,
            transparent 1px
        );

    background-size:
        100% 25%,
        10% 100%;
}


/* ----------------------------------------------------------
   SCANNER
   ---------------------------------------------------------- */

.strategy-motion-scanner {
    position:absolute;

    z-index:3;

    top:38px;
    bottom:0;

    width:1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,229,255,.85),
            transparent
        );

    box-shadow:
        0 0 10px rgba(0,229,255,.55);

    animation:
        strategyScanner 5.5s linear infinite;

    pointer-events:none;
}


@keyframes strategyScanner {

    from {
        left:-2%;
    }

    to {
        left:102%;
    }
}


/* ----------------------------------------------------------
   BOTTOM TAGS
   ---------------------------------------------------------- */

.strategy-motion-tags {
    position:absolute;

    z-index:5;

    left:13px;
    right:13px;
    bottom:9px;

    display:flex;
    flex-wrap:wrap;
    gap:6px;

    pointer-events:none;
}


.strategy-motion-tag {
    padding:4px 7px;

    color:#a7bbc3;
    background:rgba(1,12,16,.82);

    border:
        1px solid rgba(0,229,255,.18);

    font-size:8px;
    line-height:1;

    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}


.strategy-motion-tag.hot {
    color:#8cff00;

    border-color:
        rgba(140,255,0,.40);
}


/* ----------------------------------------------------------
   ES FUTURES EXECUTION PULSE
   ---------------------------------------------------------- */

.strategy-motion-pulse {
    position:absolute;

    z-index:4;

    width:12px;
    height:12px;

    border:
        2px solid #8cff00;

    border-radius:50%;

    opacity:.85;

    box-shadow:
        0 0 12px rgba(140,255,0,.8);

    pointer-events:none;

    animation:
        strategyPulse 1.35s ease-out infinite;
}


.strategy-motion-pulse::after {
    content:"";

    position:absolute;

    inset:-7px;

    border:
        1px solid rgba(140,255,0,.45);

    border-radius:50%;
}


@keyframes strategyPulse {

    0% {
        transform:scale(.65);
        opacity:.35;
    }

    45% {
        opacity:1;
    }

    100% {
        transform:scale(1.45);
        opacity:.05;
    }
}


/* ----------------------------------------------------------
   PRODUCT ENERGY ACCENT
   ---------------------------------------------------------- */

.strategy-motion-stage.es-motion::after,
.strategy-motion-stage.orb-motion::after {
    content:"";

    position:absolute;

    z-index:1;

    left:0;
    right:0;
    bottom:0;

    height:42px;

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(120,255,0,.045),
            transparent
        );
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:900px) {

    .strategy-motion-stage {
        height:200px;
    }

}


@media(max-width:600px) {

    .strategy-motion-stage {
        height:185px;
    }

    .strategy-motion-head {
        min-height:34px;
        padding:0 9px;
    }

    .strategy-motion-canvas,
    .strategy-motion-grid,
    .strategy-motion-scanner {
        top:34px;
    }

    .strategy-motion-canvas {
        height:calc(100% - 34px);
    }

    .strategy-motion-title {
        font-size:8px;
    }

    .strategy-motion-state {
        font-size:7px;
    }

    .strategy-motion-tags {
        left:8px;
        right:8px;
        bottom:7px;
    }

    .strategy-motion-tag {
        font-size:7px;
        padding:3px 5px;
    }
}


/* Accessibility */

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

    .strategy-motion-scanner,
    .strategy-motion-pulse {
        animation:none !important;
    }

}