/* ==========================================================================
   Corporate Projukti — Redesign :: Hero capability map
   A radial "constellation": the logo core in the middle, four capability
   clusters around it, connected by curves that JS draws into an SVG layer
   (public/assets/js/redesign/hero-cmap.js) from the live DOM geometry.

   Consumes tokens only. The four cluster hues live here because they are
   presentational to this module and are not used anywhere else.
   ========================================================================== */

.rd-cmap {
    --cmap-core: 116px;
    --cmap-gap: 8px;

    position: relative;
    display: block;
    padding: var(--sp-6) var(--sp-5);
    isolation: isolate;
}

/* ── The SVG connector layer ──────────────────────────────────────────── */

.rd-cmap-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.rd-cmap-line { transition: opacity var(--t); }

/* pathLength is set to 100 by the script, so one dash pattern works for
   every curve regardless of its real length. */
.rd-cmap-pulse {
    stroke-dasharray: 3 97;
    animation: rd-cmap-flow 3.4s linear infinite;
    transition: opacity var(--t);
}

@keyframes rd-cmap-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -100; }
}

/* Focus dimming — the script writes data-active with the hovered cluster
   index and tags every path with data-g. */
.rd-cmap[data-active] .rd-cmap-svg path { opacity: .12; }
.rd-cmap[data-active="0"] .rd-cmap-svg path[data-g="0"],
.rd-cmap[data-active="1"] .rd-cmap-svg path[data-g="1"],
.rd-cmap[data-active="2"] .rd-cmap-svg path[data-g="2"],
.rd-cmap[data-active="3"] .rd-cmap-svg path[data-g="3"] { opacity: 1; }

.rd-cmap[data-active] .rd-cmap-group { opacity: .45; }
.rd-cmap[data-active] .rd-cmap-group.is-active { opacity: 1; }

/* ── Layout: column · core · column ───────────────────────────────────── */

.rd-cmap-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr var(--cmap-core) 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--sp-6);
    row-gap: var(--sp-8);
}

.rd-cmap-col {
    display: grid;
    gap: var(--sp-8);
    min-width: 0;
}

.rd-cmap-col-l { grid-column: 1; grid-row: 1 / span 2; }
.rd-cmap-col-r { grid-column: 3; grid-row: 1 / span 2; }

.rd-cmap-core-cell {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
}

/* ── The core ─────────────────────────────────────────────────────────── */

.rd-cmap-core {
    position: relative;
    width: var(--cmap-core);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(var(--brand-2-rgb), .16) 0%,
            rgba(var(--brand-1-rgb), .06) 55%,
            transparent 72%);
}

/* Slow conic ring — the "orbit" gesture, kept to one element */
.rd-cmap-core::before,
.rd-cmap-core::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.rd-cmap-core::before {
    inset: -6px;
    padding: 1.5px;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(var(--brand-2-rgb), .85) 40deg,
        rgba(var(--brand-3-rgb), .55) 140deg,
        transparent 220deg,
        rgba(var(--brand-1-rgb), .7) 320deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: rd-cmap-spin 14s linear infinite;
}

.rd-cmap-core::after {
    inset: -20px;
    border: 1px dashed var(--accent-line);
    opacity: .5;
    animation: rd-cmap-spin 46s linear infinite reverse;
}

@keyframes rd-cmap-spin {
    to { transform: rotate(360deg); }
}

.rd-cmap-core img {
    position: relative;
    width: 74%;
    height: auto;
    border-radius: 50%;
    z-index: 1;
}

/* ── A cluster ────────────────────────────────────────────────────────── */

.rd-cmap-group {
    position: relative;
    display: grid;
    gap: var(--cmap-gap);
    transition: opacity var(--t);
}

.rd-cmap-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 8px 10px;
    border: 1px solid rgba(var(--g-rgb), .38);
    border-radius: var(--r-pill);
    background: linear-gradient(90deg,
        rgba(var(--g-rgb), .16), rgba(var(--g-rgb), .04));
    box-shadow: 0 0 0 1px rgba(var(--g-rgb), .06),
                0 6px 18px -12px rgba(var(--g-rgb), .8);
}

.rd-cmap-col-r .rd-cmap-head { flex-direction: row-reverse; text-align: right; }

.rd-cmap-head i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1rem;
    color: #fff;
    background: rgba(var(--g-rgb), .95);
}

/* Text stack inside the pill — wrapper span must be allowed to shrink or
   long titles push the icon out of the pill. */
.rd-cmap-head > span {
    min-width: 0;
    flex: 1 1 auto;
}

.rd-cmap-head b {
    font-family: var(--ff-display);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--track-head);
    color: var(--tx-1);
}

.rd-cmap-head > span > span {
    display: block;
    margin-top: 2px;
    font-family: var(--ff-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-3);
}

/* Items */

.rd-cmap-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--tx-2);
    transition: border-color var(--t), transform var(--t), color var(--t);
}

.rd-cmap-col-r .rd-cmap-item { flex-direction: row-reverse; text-align: right; }

.rd-cmap-item i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .82rem;
    color: rgb(var(--g-rgb));
    background: rgba(var(--g-rgb), .12);
}

.rd-cmap-group:hover .rd-cmap-item {
    border-color: rgba(var(--g-rgb), .42);
    color: var(--tx-1);
}

.rd-cmap-col-l .rd-cmap-group:hover .rd-cmap-item { transform: translateX(3px); }
.rd-cmap-col-r .rd-cmap-group:hover .rd-cmap-item { transform: translateX(-3px); }

/* The connector attaches to this invisible point, not to the box edge, so
   the curves fan out from one place per cluster. */
.rd-cmap-hub {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: rgb(var(--g-rgb));
    box-shadow: 0 0 0 3px rgba(var(--g-rgb), .18);
}

.rd-cmap-col-l .rd-cmap-hub { right: -14px; }
.rd-cmap-col-r .rd-cmap-hub { left: -14px; }

/* ── Cluster hues ─────────────────────────────────────────────────────── */

.rd-cmap-group[data-hue="soft"]  { --g-rgb: 240, 138, 36; }   /* amber   */
.rd-cmap-group[data-hue="cloud"] { --g-rgb: 46, 168, 92; }    /* brand   */
.rd-cmap-group[data-hue="infra"] { --g-rgb: 129, 92, 205; }   /* purple  */
.rd-cmap-group[data-hue="ops"]   { --g-rgb: 46, 130, 216; }   /* blue    */

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .rd-cmap { --cmap-core: 96px; padding-inline: var(--sp-4); }
    .rd-cmap-grid { column-gap: var(--sp-5); }
    .rd-cmap-head > span > span { display: none; }
}

/* Two columns stop fitting: stack the clusters and drop the connector
   layer entirely rather than shipping curves that cross the content. */
@media (max-width: 620px) {
    .rd-cmap { padding: var(--sp-5) 10px; }
    .rd-cmap-svg,
    .rd-cmap-hub { display: none; }

    .rd-cmap-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: var(--sp-6);
    }
    .rd-cmap-col-l,
    .rd-cmap-col-r,
    .rd-cmap-core-cell { grid-column: 1; grid-row: auto; }
    .rd-cmap-core-cell { order: -1; }
    .rd-cmap-col { gap: var(--sp-6); }

    .rd-cmap-col-r .rd-cmap-head,
    .rd-cmap-col-r .rd-cmap-item { flex-direction: row; text-align: left; }

    .rd-cmap-group { grid-template-columns: 1fr 1fr; }
    .rd-cmap-head { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .rd-cmap-core::before,
    .rd-cmap-core::after { animation: none; }
    .rd-cmap-pulse { display: none; }
    .rd-cmap-item,
    .rd-cmap-group { transition: none; }
}