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

   The home-page hero visual: a CSS-only 3D rotating wireframe
   globe with a faint market-ticker motif underneath, filling
   the .alpha-hero__visual column (see components/hero/hero.css
   Sec 7B - desktop only, min-width:1024px).

   Colour: uses the exact same locked brand accent as everywhere
   else - ALPHA Yellow/Gold in dark theme, the locked v1.1 ALPHA
   Chrome (Steel/Silver) in light theme (design-system/foundations/
   colors.md Sec 9). The --as-globe-accent-rgb custom properties
   below are just RGB-triplet restatements of those same locked
   hex values (needed for rgba() opacity math) - no new colours
   are introduced.
   ========================================================= */

.as-globe-outer {
    --as-globe-accent-rgb: 245, 184, 0;      /* ALPHA Yellow #F5B800 */
    --as-globe-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-globe-outer {
    --as-globe-accent-rgb: 75, 85, 99;       /* ALPHA Steel #4B5563 */
    --as-globe-accent: var(--alpha-color-brand-chrome-steel, #4B5563);
}

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

/* ---------------------------------------------------------
   Wireframe globe
   --------------------------------------------------------- */

.as-globe-wrap {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 310px;
    height: 310px;
    margin-left: -155px;
    perspective: 1000px;
    overflow: visible;
}

.as-globe {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: as-globe-spin 42s linear infinite;
}

@keyframes as-globe-spin {
    from { transform: rotateY(0deg) rotateX(-8deg); }
    to   { transform: rotateY(360deg) rotateX(-8deg); }
}

.as-globe-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--as-globe-accent-rgb), .34);
}

.as-globe-ring.as-globe-ring--lat {
    border-color: rgba(var(--as-globe-accent-rgb), .24);
}

.as-globe-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, rgba(var(--as-globe-accent-rgb), .16), rgba(var(--as-globe-accent-rgb), 0) 68%);
}

.as-globe-atmosphere {
    position: absolute;
    inset: -64px;
    border-radius: 50%;
    /* v1.1 (2026-08-15): this box bleeds 64px past .as-globe-outer on
       every side, but that box clips with overflow:hidden - so the old
       55%/72% stops (calibrated against this div's own, much larger,
       farthest-corner reference) were still non-zero alpha at the clip
       line. A circular gradient sliced by a square clip at non-zero
       alpha reads as a faint rectangle outline. Stops pulled in so the
       gradient is fully transparent well inside the clip boundary -
       the glow now fades out on its own before anything gets cut. */
    background: radial-gradient(circle at 50% 50%, rgba(var(--as-globe-accent-rgb), .16), rgba(var(--as-globe-accent-rgb), .05) 20%, rgba(var(--as-globe-accent-rgb), 0) 36%);
    filter: blur(6px);
    pointer-events: none;
}

[data-theme="light"] .as-globe-atmosphere {
    /* chrome glow reads muddier on white than gold does on black */
    background: radial-gradient(circle at 50% 50%, rgba(var(--as-globe-accent-rgb), .10), rgba(var(--as-globe-accent-rgb), .03) 20%, rgba(var(--as-globe-accent-rgb), 0) 36%);
}

.as-globe-orbit {
    position: absolute;
    inset: -42px;
    border-radius: 50%;
    border: 1px solid rgba(var(--as-globe-accent-rgb), .20);
    transform-style: preserve-3d;
    transform: rotateX(72deg) rotateZ(-18deg);
    animation: as-globe-orbit-spin 26s linear infinite;
}

@keyframes as-globe-orbit-spin {
    from { transform: rotateX(72deg) rotateZ(-18deg) rotateY(0deg); }
    to   { transform: rotateX(72deg) rotateZ(-18deg) rotateY(360deg); }
}

.as-globe-satellite {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--as-globe-accent);
    box-shadow: 0 0 8px 2px rgba(var(--as-globe-accent-rgb), .6);
}

.as-globe-hub {
    position: absolute;
    border-radius: 50%;
    background: var(--as-globe-accent);
    animation: as-globe-hub-twinkle 5.5s ease-in-out infinite;
}

@keyframes as-globe-hub-twinkle {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

.as-globe-arc-dot {
    position: absolute;
    width: 2.5px;
    height: 2.5px;
    margin: -1.25px 0 0 -1.25px;
    border-radius: 50%;
    background: rgba(var(--as-globe-accent-rgb), .55);
}

/* ---------------------------------------------------------
   Market motif: faint ticker / sparkline beneath the globe
   --------------------------------------------------------- */

.as-globe-ticker-wrap {
    position: absolute;
    left: 50%;
    bottom: 27px;
    transform: translateX(-50%);
    width: 310px;
    height: 40px;
}

.as-globe-ticker {
    width: 100%;
    height: 100%;
    opacity: .4;
    display: block;
}

.as-globe-ticker path.as-globe-ticker__line {
    fill: none;
    stroke: var(--as-globe-accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.as-globe-ticker path.as-globe-ticker__fill {
    stroke: none;
    fill: url(#asHeroGlobeTickerFade);
}

.as-globe-ticker stop.as-globe-ticker__s0 { stop-color: var(--as-globe-accent); stop-opacity: 0; }
.as-globe-ticker stop.as-globe-ticker__s1 { stop-color: var(--as-globe-accent); stop-opacity: .12; }
.as-globe-ticker stop.as-globe-ticker__s2 { stop-color: var(--as-globe-accent); stop-opacity: 0; }

.as-globe-ticker-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--as-globe-accent);
    box-shadow: 0 0 6px 1px rgba(var(--as-globe-accent-rgb), .6);
    animation: as-globe-ticker-move 7s linear infinite;
}

@keyframes as-globe-ticker-move {
    0%   { left: 0%;   top: 52%; opacity: 0; }
    8%   { opacity: 1; }
    50%  { top: 28%; }
    92%  { opacity: 1; }
    100% { left: 100%; top: 44%; opacity: 0; }
}

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

@media (prefers-reduced-motion: reduce) {
    .as-globe,
    .as-globe-orbit {
        animation: none;
    }
    .as-globe-hub {
        animation: none;
        opacity: .85;
    }
    .as-globe-ticker-pulse {
        animation: none;
        left: 76%;
        top: 30%;
        opacity: 1;
    }
}

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