/* ============================================================
   HOMEPAGE - API CARD VISUAL, the "hub"  (includes/home-api-visuals.php)
   Loaded only on the homepage via adp_head(array('css' => ...)).

   Reuses the .ways__window / .ways__window--code / .ways__bar shell from
   styles3.css section 28 so it reads as a sibling of the other two cards.
   Colours: scheme accent (--color-accent-soft / --btn-*) = data out of AdPolice,
   green (#4ade80) = written back into AdPolice (semantic, fixed). The accent
   follows the colour scheme (styles3.css section 1 + 30); all of it sits on navy.
   The keyword plate covers the bottom-left ~150x40px of the stage: keep
   nothing important there.
   ============================================================ */

.ways__apivis--hub {
    position: relative;
    height: 100%;
    container-type: inline-size;
    font-family: var(--font-primary);
}

/* --- shared bar extras: legend (hub) and live dot (flow) --- */
.ways__bar .apivis__legend {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    font-weight: 500;
    color: #7f8db3;
    white-space: nowrap;
}

.apivis__legend b {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.apivis__legend b.is-back { margin-left: 6px; }
.apivis__legend b.is-out  { background: var(--color-accent-soft); box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-soft) 80%, transparent); }
.apivis__legend b.is-back { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.8); }







/* ============================================================
   1. HUB - the API at the centre of the customer's stack
   ============================================================ */

.apihub__stage {
    position: relative;
    height: calc(100% - 26px);
    background: radial-gradient(circle at 50% 47%, rgba(var(--color-glow-rgb), 0.16) 0%, transparent 55%);
}

.apihub__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.apihub__links line {
    stroke: color-mix(in srgb, var(--color-accent-soft) 26%, transparent);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.apihub__links line.is-twoway { stroke: color-mix(in srgb, var(--color-accent-soft) 34%, transparent); }

/* data packets: travel in a straight line from (--x1,--y1) to (--x2,--y2),
   disappearing into the chips at both ends */
.apihub__dot {
    position: absolute;
    z-index: 1;
    left: var(--x1);
    top: var(--y1);
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-accent-soft) 85%, transparent);
    opacity: 0;
    animation: apihub-travel 2.8s linear var(--t, 0s) infinite;
}

.apihub__dot.is-back {
    background: #4ade80;
    box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.85);
    animation-duration: 3.2s;
}

@keyframes apihub-travel {
    0%   { left: var(--x1); top: var(--y1); opacity: 0; }
    14%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { left: var(--x2); top: var(--y2); opacity: 0; }
}

.apihub__core {
    position: absolute;
    z-index: 3;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px 8px 10px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--btn-from) 0%, var(--btn-to) 100%);
    color: var(--btn-fg);
    box-shadow: 0 0 0 4px rgba(var(--btn-glow-rgb), 0.16), 0 8px 24px rgba(var(--btn-glow-rgb), 0.45);
    white-space: nowrap;
}

.apihub__core::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--color-accent-soft) 70%, transparent);
    animation: apihub-pulse 2.8s ease-out infinite;
    pointer-events: none;
}

@keyframes apihub-pulse {
    0%   { transform: scale(1);    opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

.apihub__core span {
    font-size: 8px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--btn-fg) 78%, transparent);
}

.apihub__core strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--btn-fg);
}

.apihub__node {
    position: absolute;
    z-index: 2;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 8px;
    border-radius: 999px;
    background: #121e3d;
    border: 1px solid color-mix(in srgb, var(--color-accent-soft) 24%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.3;
    color: #c9d4f2;
    white-space: nowrap;
}

.apihub__node svg { flex-shrink: 0; color: var(--color-accent-soft); }

/* systems that also write back get a faint green rim */
.apihub__node.is-twoway { border-color: rgba(74, 222, 128, 0.32); }




































































































/* ============================================================
   3. FLOW - one event through a U-shaped pipeline
   New case (AdPolice) -> GET (API) -> Rule fires (your tool)
   -> PUT (API) -> Updated (AdPolice). The bottom-left cell stays
   empty for the keyword plate; a dashed loop line runs through it.
   Geometry: stage is 188px tall (240 - 26 padding - 26 bar); rows
   are px, columns are % so it stretches with the card.
   ============================================================ */






























































/* idle   border .16, bg #121e3d
   active border --color-secondary + glow, bg #173064
   done   border .4,  bg #14244a */

















/* ============================================================
   NARROW CARDS (phone ~290px stage, also the 2-column tablet edge)
   ============================================================ */
@container (max-width: 310px) {
    .apihub__node { font-size: 8.5px; padding: 3px 7px 3px 6px; gap: 4px; }
    .apihub__node svg { width: 10px; height: 10px; }
    .apihub__core { padding: 7px 10px 7px 8px; }
    .apihub__core strong { font-size: 10.5px; }

















}


/* ============================================================
   REDUCED MOTION - a readable still of each story
   ============================================================ */
@media (prefers-reduced-motion: reduce) {


    /* hub: packets parked on the links, out-packets near the centre,
       write-back packets near the systems */
    .apihub__dot {
        animation: none;
        opacity: 1;
        left: calc(var(--x1) + (var(--x2) - var(--x1)) * 0.5);
        top:  calc(var(--y1) + (var(--y2) - var(--y1)) * 0.5);
    }
    .apihub__dot.is-back {
        left: calc(var(--x1) + (var(--x2) - var(--x1)) * 0.3);
        top:  calc(var(--y1) + (var(--y2) - var(--y1)) * 0.3);
    }
    .apihub__core::before { animation: none; opacity: 0; }











}