/* =========================================================
   ALPHA STRIKE — HERO CHART COMPONENT
   Version: 1.0
   Status: Active

   The Trading-page hero visual: a perspective wire-mesh floor
   with a live, continuously-scrolling glowing candlestick feed -
   the rightmost candle ticks in real time and a new one rolls in
   every couple of seconds, echoing the reference clip's restless
   live-market motion without borrowing its colour.

   Colour: strictly the same locked accent used by the home globe
   and everywhere else on the site - ALPHA Yellow/Gold in dark
   theme, the locked v1.1 ALPHA Chrome (Steel/Silver) in light
   theme. No green/red or any other hue anywhere in this file.
   ========================================================= */

.as-chart-outer {
    --as-chart-accent-rgb: 245, 184, 0;      /* ALPHA Yellow #F5B800 */
    --as-chart-accent: var(--alpha-color-brand-yellow, #F5B800);

    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
}

[data-theme="light"] .as-chart-outer {
    --as-chart-accent-rgb: 75, 85, 99;       /* ALPHA Steel #4B5563 */
    --as-chart-accent: var(--alpha-color-brand-chrome-steel, #4B5563);
}

.as-chart-stage {
    position: absolute;
    inset: 0;
}

/* ---------------------------------------------------------
   Backdrop: perspective wire-mesh floor
   --------------------------------------------------------- */

.as-chart-mesh-wrap {
    position: absolute;
    inset: 0;
    perspective: 600px;
    perspective-origin: 50% 34%;
    overflow: hidden;
}

.as-chart-mesh {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;
    transform: rotateX(62deg);
    background-image:
        repeating-linear-gradient(0deg, rgba(var(--as-chart-accent-rgb), .14) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(var(--as-chart-accent-rgb), .14) 0 1px, transparent 1px 40px);
    background-color: transparent;
    -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, #000 38%, transparent 68%);
    mask-image: radial-gradient(circle at 50% 35%, #000 0%, #000 38%, transparent 68%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: as-chart-mesh-drift 3.5s linear infinite;
}

@keyframes as-chart-mesh-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 40px, 0 0; }
}

.as-chart-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 58%, rgba(var(--as-chart-accent-rgb), .14), rgba(var(--as-chart-accent-rgb), 0) 60%);
    pointer-events: none;
}

[data-theme="light"] .as-chart-glow {
    background: radial-gradient(ellipse at 50% 58%, rgba(var(--as-chart-accent-rgb), .08), rgba(var(--as-chart-accent-rgb), 0) 60%);
}

/* ---------------------------------------------------------
   Candlesticks: hollow wireframe, glowing, live
   --------------------------------------------------------- */

.as-chart-viewport {
    position: absolute;
    left: 50%;
    bottom: 137px;
    transform: translateX(-50%);
    width: 347px;
    height: 201px;
    overflow: hidden;
}

.as-chart-track {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    will-change: transform;
}

.as-chart-bar {
    position: absolute;
    top: 0;
    bottom: 0;
}

.as-chart-bar__body {
    position: absolute;
    left: 0;
    right: 0;
    border: 1px solid rgba(var(--as-chart-accent-rgb), .85);
    border-radius: 1px;
    background: rgba(var(--as-chart-accent-rgb), .10);
    box-shadow:
        0 0 6px rgba(var(--as-chart-accent-rgb), .5),
        0 0 14px rgba(var(--as-chart-accent-rgb), .22);
    transition: height .09s ease-out, bottom .09s ease-out, opacity .15s ease;
}

.as-chart-bar--up .as-chart-bar__body { background: rgba(var(--as-chart-accent-rgb), .16); }
.as-chart-bar--down .as-chart-bar__body { background: rgba(var(--as-chart-accent-rgb), .06); border-color: rgba(var(--as-chart-accent-rgb), .55); }

.as-chart-bar__wick {
    position: absolute;
    left: 50%;
    width: 1px;
    background: rgba(var(--as-chart-accent-rgb), .65);
    box-shadow: 0 0 5px rgba(var(--as-chart-accent-rgb), .45);
    transform: translateX(-50%);
    transition: height .09s ease-out, bottom .09s ease-out;
}

.as-chart-bar--live .as-chart-bar__body {
    border-color: var(--as-chart-accent);
    box-shadow:
        0 0 11px rgba(var(--as-chart-accent-rgb), .8),
        0 0 24px rgba(var(--as-chart-accent-rgb), .45);
}

.as-chart-bar--live .as-chart-bar__wick {
    background: var(--as-chart-accent);
    box-shadow: 0 0 8px rgba(var(--as-chart-accent-rgb), .7);
}

.as-chart-bar--entering .as-chart-bar__body,
.as-chart-bar--entering .as-chart-bar__wick {
    transition: none;
}

/* faint connective price line tracing the closes - grows live with the feed */
.as-chart-priceline {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.as-chart-priceline path {
    fill: none;
    stroke: rgba(var(--as-chart-accent-rgb), .4);
    stroke-width: 1;
}

/* diagonal shine sweep - the glossy quality from the reference clip */
.as-chart-shine {
    position: absolute;
    top: -60%;
    left: -40%;
    width: 26%;
    height: 220%;
    background: linear-gradient(75deg, transparent 0%, rgba(var(--as-chart-accent-rgb), .16) 42%, rgba(var(--as-chart-accent-rgb), .26) 50%, rgba(var(--as-chart-accent-rgb), .16) 58%, transparent 100%);
    transform: rotate(8deg);
    animation: as-chart-sweep 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes as-chart-sweep {
    0%          { left: -40%; }
    45%, 100%   { left: 120%; }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .as-chart-mesh { animation: none; }
    .as-chart-shine { display: none; }
}

/* Below the desktop breakpoint hero.css already hides
   .alpha-hero__visual entirely, so this component simply never
   mounts on mobile - no separate mobile rule needed. */