/* ==========================================================================
   SIGMA SCANNER — why.css
   §6 The Difference · a single radar-chart infographic, not a paragraph.

   ---------------------------------------------------------------------------
   THE CENTREPIECE
   ---------------------------------------------------------------------------
   One hexagonal radar plots "manual approach" against "Sigma Scanner" on
   all six requested axes (speed / automation / AI / accuracy / reliability
   / professional trading) at once — the whole comparison is legible as a
   single shape difference before a word is read. The legend list beside it
   exists to name each axis and give it one concrete before/after; nothing
   in this section is a paragraph of prose.

   ---------------------------------------------------------------------------
   NO-JS CONTRACT
   ---------------------------------------------------------------------------
   Both radar polygons ship at their real, final points — the comparison is
   already complete and readable with JS disabled. js/why.js only hides
   them via gsap.set() at runtime and replays the reveal as the chart
   scrolls into view. Row icons are the same: each renders in its correct
   resting artwork; only the icon's own transform is touched by script.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Base rules and every responsive override live together in
   @layer components — splitting an override into @layer layout has broken
   two earlier sections in this project (it silently loses to a
   components-layer base rule regardless of specificity), so this file
   never uses that layer at all.
   ========================================================================== */

@layer components {

  /* ========================================================================
     SECTION SHELL
     ======================================================================== */
  .why { position: relative; isolation: isolate; overflow: clip; }

  .why__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(50% 45% at 90% 4%,  rgb(16 160 80 / .07) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(55% 50% at 6% 96%,  rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%);
  }

  .why .ss-container { position: relative; z-index: 1; }

  .why__header { max-inline-size: 640px; margin-block-end: var(--sp-11); }

  .why__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: var(--ink-900);
    margin-block: var(--sp-3) var(--sp-4);
  }

  .why__intro {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--ink-500);
  }

  /* ========================================================================
     BOARD — radar column + legend column
     ======================================================================== */
  .why__board {
    display: flex;
    flex-direction: column;
    gap: var(--sp-11);
  }

  .why__radar-col { position: static; }

  /* ========================================================================
     RADAR
     ======================================================================== */
  .why__radar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    max-inline-size: 380px;
    margin-inline: auto;
    padding: var(--sp-7);
    border-radius: var(--r-xl);
    background: var(--paper);
    border: 1px solid var(--ink-150);
    box-shadow: var(--shadow-sm);
  }

  .why-radar { display: block; inline-size: 100%; block-size: auto; }

  .why-radar__grid polygon,
  .why-radar__grid line {
    fill: none;
    stroke: var(--ink-200);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .why-radar__before,
  .why-radar__after {
    /* Explicit view-box origin, not fill-box: these are irregular hexagons,
       so their own bounding-box centre is not the chart's true centre
       (120,120). Growing from the wrong point would read as the shape
       sliding rather than expanding. */
    transform-box: view-box;
    transform-origin: 120px 120px;
    vector-effect: non-scaling-stroke;
  }

  .why-radar__before {
    fill: var(--ink-300);
    fill-opacity: .32;
    stroke: var(--ink-400);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
  }

  .why-radar__after {
    fill: var(--signal-100);
    fill-opacity: .6;
    stroke: var(--signal-600);
    stroke-width: 2.5;
  }

  .why-radar__labels text {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    fill: var(--ink-400);
  }

  .why-radar__key {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-5);
  }
  .why-radar__key-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-500);
  }
  .why-radar__key-item i {
    display: block;
    inline-size: 10px; block-size: 10px;
    border-radius: var(--r-full);
    flex: none;
  }
  .why-radar__key-item--before i { background: var(--ink-300); }
  .why-radar__key-item--after  i { background: var(--signal-600); }
  .why-radar__key-item--after  { color: var(--signal-700); font-weight: 600; }

  /* ========================================================================
     LEGEND
     ======================================================================== */
  .why__legend {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }

  .why-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
    padding-block-end: var(--sp-6);
    border-block-end: 1px solid var(--ink-150);
  }
  .why-row:last-child { padding-block-end: 0; border-block-end: none; }

  .why-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 48px; block-size: 48px;
    border-radius: var(--r-lg);
    background: var(--signal-050);
    border: 1px solid var(--ink-150);
    color: var(--signal-600);
  }
  .why-row__icon .ss-icon { inline-size: 22px; block-size: 22px; }

  .why-row__body { display: flex; flex-direction: column; gap: var(--sp-2); padding-block-start: var(--sp-1); }

  .why-row__name {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    color: var(--ink-900);
  }

  .why-row__compare {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
  }

  .why-row__before {
    font-size: var(--fs-sm);
    color: var(--ink-400);
  }

  .why-row__after {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--signal-700);
  }

  .why-row__arrow {
    inline-size: 20px; block-size: 10px;
    color: var(--ink-300);
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  /* ========================================================================
     ICON MOTION — the "animated SVGs" the section was asked for.
     Continuous loops (auto, ai) are pure CSS and gated behind
     [data-motion="full"] so a page with no GSAP shows a still gear and a
     still node graph rather than a broken one. Reduced motion silences
     them site-wide via animations.css's blanket 1ms-duration rule. One-time
     entrances (speed, accuracy, reliability, trading) are driven by
     js/why.js against the icon's resting artwork.
     ======================================================================== */
  [data-motion="full"] [data-why-icon="auto"] .ss-icon {
    animation: why-spin 7s linear infinite;
  }
  [data-motion="full"] [data-why-icon="ai"] .ss-icon {
    animation: why-pulse 2.6s ease-in-out infinite;
  }

  @keyframes why-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes why-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.1); opacity: .78; }
  }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see file header
     ======================================================================== */
  @media (min-width: 640px) {
    .why-row__compare { flex-wrap: nowrap; }
  }

  @media (max-width: 479px) {
    /* No room for a wide arrow between two stacked lines — the same glyph
       rotated a quarter turn reads as "leads to" pointing down instead. */
    .why-row__compare { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
    .why-row__arrow { transform: rotate(90deg); margin-inline-start: 2px; }
  }

  @media (min-width: 1024px) {
    .why__board {
      display: grid;
      grid-template-columns: minmax(300px, 380px) 1fr;
      gap: var(--sp-13);
      align-items: start;
    }
    .why__radar-col {
      position: sticky;
      top: calc(var(--nav-h-scrolled) + var(--sp-8));
    }
  }
}