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

   The Automation-page hero visual: a wireframe robot arm working
   the console of a server-rack "supercomputer" - LEDs blinking,
   a screen sweeping, a cooling fan spinning, and the arm dipping
   down to tap the console on a steady loop. Pure inline SVG +
   CSS animation, same technique family as hero-globe / hero-network
   (no canvas, no dependencies).

   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-robot-accent-rgb custom property below
   is just an RGB-triplet restatement of those same locked hex
   values (needed for rgba() opacity math) - no new colours are
   introduced.
   ========================================================= */

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

.as-robot-svg {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------------------------------------------------------
   Backdrop glow
   --------------------------------------------------------- */

.as-robot-glow-bg {
    fill: url(#asHeroRobotGlowRadial);
}

.as-robot-glow-s0 { stop-color: var(--as-robot-accent); stop-opacity: .16; }
.as-robot-glow-s1 { stop-color: var(--as-robot-accent); stop-opacity: .05; }
.as-robot-glow-s2 { stop-color: var(--as-robot-accent); stop-opacity: 0; }

/* ---------------------------------------------------------
   Server rack ("supercomputer")
   --------------------------------------------------------- */

.as-robot-rack__body {
    stroke: var(--as-robot-accent);
    stroke-width: 1.4;
    opacity: .8;
}

.as-robot-rack__divider {
    stroke: rgba(var(--as-robot-accent-rgb), .3);
    stroke-width: 1;
}

.as-robot-rack__vent {
    stroke: rgba(var(--as-robot-accent-rgb), .28);
    stroke-width: 1;
    stroke-linecap: round;
}

.as-robot-screen {
    stroke: var(--as-robot-accent);
    stroke-width: 1.2;
    opacity: .7;
}

.as-robot-scanline {
    stroke: var(--as-robot-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    animation: as-robot-scan 3.2s ease-in-out infinite;
}

@keyframes as-robot-scan {
    0%, 100% { transform: translateX(0); opacity: .15; }
    50%      { transform: translateX(94px); opacity: .9; }
}

.as-robot-led {
    fill: var(--as-robot-accent);
    stroke: none;
    animation: as-robot-led-blink 3.4s ease-in-out infinite;
}

.as-robot-led--1 { animation-delay: 0s; }
.as-robot-led--2 { animation-delay: -.6s; }
.as-robot-led--3 { animation-delay: -1.3s; }
.as-robot-led--4 { animation-delay: -2s; }
.as-robot-led--5 { animation-delay: -.9s; }
.as-robot-led--6 { animation-delay: -1.8s; }

@keyframes as-robot-led-blink {
    0%, 100% { opacity: .3; }
    50%      { opacity: 1; }
}

/* Cooling fan, mounted in the rack's base plinth */

.as-robot-fan__ring {
    stroke: rgba(var(--as-robot-accent-rgb), .55);
    stroke-width: 1;
}

.as-robot-fan__blades {
    transform-box: fill-box;
    transform-origin: center;
    animation: as-robot-fan-spin 2.6s linear infinite;
}

.as-robot-fan__blades line {
    stroke: var(--as-robot-accent);
    stroke-width: 1.3;
    stroke-linecap: round;
    opacity: .7;
}

@keyframes as-robot-fan-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   Robot arm
   --------------------------------------------------------- */

.as-robot-mount {
    stroke: rgba(var(--as-robot-accent-rgb), .4);
    stroke-width: 1.4;
}

.as-robot-joint {
    fill: var(--as-robot-accent);
}

.as-robot-upper-arm {
    stroke: var(--as-robot-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: .9;
}

.as-robot-forearm {
    /* pivots around the elbow joint at (110,150) in the SVG's own
       user-space coordinates - deliberately NOT transform-box:fill-box,
       since the pivot point needs to be the elbow, not this group's
       own bounding-box center */
    transform-origin: 110px 150px;
    animation: as-robot-work 3.6s ease-in-out infinite;
}

.as-robot-forearm__limb,
.as-robot-forearm__claw {
    stroke: var(--as-robot-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: .95;
}

.as-robot-forearm__wrist {
    fill: var(--as-robot-accent);
}

@keyframes as-robot-work {
    0%   { transform: rotate(-5deg); }
    50%  { transform: rotate(7deg); }
    100% { transform: rotate(-5deg); }
}

.as-robot-spark {
    fill: var(--as-robot-accent);
    animation: as-robot-spark 3.6s ease-in-out infinite;
}

@keyframes as-robot-spark {
    0%, 40%  { opacity: 0; transform: scale(.6); }
    52%      { opacity: 1; transform: scale(1.2); }
    64%, 100% { opacity: 0; transform: scale(.6); }
}

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

@media (prefers-reduced-motion: reduce) {
    .as-robot-scanline,
    .as-robot-led,
    .as-robot-fan__blades,
    .as-robot-forearm,
    .as-robot-spark {
        animation: none;
    }
    .as-robot-scanline { opacity: .5; }
    .as-robot-led { opacity: .75; }
    .as-robot-forearm { transform: rotate(4deg); }
    .as-robot-spark { opacity: .6; transform: scale(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. */