/* ========== Vicerium concept page (#concept) ==========
   Shared tokens, type, buttons, chips and the shell live in css/tokens.css.
   Sections: Page head · District figure · Pillars · Read on · Responsive · Reduced motion
   Every class here is prefixed cx- so nothing leaks into other pages. */

/* =====================================================================
   Page head: headline and the Vicerium paragraph, with the district beside it
   ===================================================================== */
.cx-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px clamp(40px, 5vw, 80px);
}
.cx-title .line { display: block; }
.cx-lede { max-width: 25em; color: var(--c-text); }
.cx-body {
    margin: 20px 0 0;
    max-width: 36em;
    color: var(--c-body);
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* =====================================================================
   District figure: a 2:1 street grid with one ripple of light
   ===================================================================== */
.cx-figure { margin: 0; min-width: 0; }
.cx-district { width: 100%; height: auto; overflow: visible; }

.cx-tile, .cx-street { fill: none; stroke: var(--c-text); stroke-width: 1; }
.cx-tile { stroke-opacity: 0.05; }
.cx-street { stroke-opacity: 0.1; }
.cx-lot { fill: none; stroke: var(--c-line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.cx-block polygon { stroke: var(--c-line-2); stroke-width: 1; stroke-linejoin: round; }
.cx-face-t { fill: var(--c-raised); }
.cx-face-l { fill: var(--c-panel); }
.cx-face-r { fill: var(--c-deep); }

.cx-link { fill: none; stroke: var(--c-line-3); stroke-width: 1.5; transition: stroke 0.9s var(--ease-out), stroke-opacity 0.9s var(--ease-out); }
.cx-link.is-kept { stroke: var(--c-amber); stroke-opacity: 0.5; }

/* the lit stretch draws along the street from the corner the effect comes from (pathLength="1") */
.cx-flow {
    fill: none;
    stroke: var(--c-amber);
    stroke-width: 2.5;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset 0.24s linear, opacity 0.1s linear;
}
.cx-flow.is-on { stroke-dashoffset: 0; opacity: 1; }
.cx-flow.is-fading { opacity: 0; transition: opacity 0.9s var(--ease-out); }

/* something bent the rules: a dotted link across an open lot */
.cx-bent {
    fill: none;
    stroke: var(--c-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0.1 6;
    opacity: 0;
    transition: opacity 1.2s var(--ease-out);
}
.cx-bent.is-on { opacity: 0.75; }

.cx-dot { fill: var(--c-deep); stroke: var(--c-line-3); stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.3s var(--ease-out), stroke 0.3s var(--ease-out); }
.cx-core { fill: var(--c-amber); opacity: 0; transition: opacity 0.6s var(--ease-out); }
.cx-halo { fill: var(--c-amber-halo); opacity: 0; transition: opacity 0.3s var(--ease-out); }
.cx-ring { fill: none; stroke: var(--c-amber); stroke-width: 1.5; opacity: 0; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.cx-hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }

.cx-node:hover .cx-dot { stroke: var(--c-text); }
.cx-node.is-kept .cx-dot { stroke: var(--c-amber-a); }
.cx-node.is-kept .cx-core { opacity: 1; }
.cx-node.is-lit .cx-dot { fill: var(--c-amber); stroke: var(--c-amber); }
.cx-node.is-lit .cx-halo { opacity: 1; }
.cx-node.is-pulse .cx-ring { animation: cx-pulse 1.2s var(--ease-out) both; }
@keyframes cx-pulse {
    from { opacity: 0.9; transform: scale(1); }
    to { opacity: 0; transform: scale(3.4); }
}

/* a new ripple starts from a clean slate, without fading out the old one first */
.cx-district.is-resetting * { transition: none !important; animation: none !important; }

/* Caption row under the drawing */
.cx-caption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line);
}
.cx-caption-text {
    margin-right: auto;
    color: var(--c-body);
    font: 600 0.875rem/1.2 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.cx-hint { color: var(--c-muted); font-size: 0.8125rem; line-height: 1.2; }
.cx-hint-touch { display: none; }
@media (hover: none) {
    .cx-hint-fine { display: none; }
    .cx-hint-touch { display: inline; }
}

/* =====================================================================
   Pillars: six, frameless, on hairline rules
   ===================================================================== */
.cx-pillar-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.cx-pillar { padding: 30px 32px 44px; border-top: 1px solid var(--c-line); }
.cx-pillar:nth-child(3n + 1) { padding-left: 0; }
.cx-pillar:nth-child(3n) { padding-right: 0; }
.cx-pillar:not(:nth-child(3n + 1)) { border-left: 1px solid var(--c-line); }
.cx-pillar .i { width: 28px; height: 28px; color: var(--c-body); stroke-width: 1.6; }
.cx-pillar-title { margin: 18px 0 0; font: 600 1.75rem/1.1 var(--f-display); color: var(--c-text); }
.cx-pillar p { margin: 12px 0 0; max-width: 34ch; color: var(--c-body); }

/* =====================================================================
   Read on: News and the Roadmap
   ===================================================================== */
.cx-next-head { margin: 0 0 22px; }
.cx-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cx-next-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 28px 28px 28px 26px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-panel);
    color: var(--c-body);
    text-decoration: none;
    transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.cx-next-card:hover { border-color: var(--c-line-3); background: var(--c-raised); }
.cx-next-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-md); }
.cx-next-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-line-2);
    color: var(--c-body);
    transition: color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.cx-next-icon .i { width: 22px; height: 22px; }
.cx-next-card:hover .cx-next-icon { color: var(--c-text); border-color: var(--c-line-3); }
.cx-next-text { display: block; min-width: 0; }
.cx-next-label {
    display: block;
    color: var(--c-muted);
    font: 600 0.8125rem/1.2 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.cx-next-title { display: block; margin-top: 6px; font: 600 1.625rem/1.1 var(--f-display); color: var(--c-text); }
.cx-next-sub { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--c-body); }
.cx-next-go { width: 20px; height: 20px; color: var(--c-teal); transition: transform var(--t-ui) var(--ease-out); }
.cx-next-card:hover .cx-next-go { transform: translateX(3px); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 960px) {
    .cx-head-grid { grid-template-columns: minmax(0, 1fr); }
    .cx-figure { width: 100%; max-width: 600px; }
}

@media (max-width: 900px) {
    .cx-pillar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cx-pillar, .cx-pillar:nth-child(n) { padding: 28px 28px 36px; border-left: 0; }
    .cx-pillar:nth-child(2n + 1) { padding-left: 0; }
    .cx-pillar:nth-child(2n) { padding-right: 0; border-left: 1px solid var(--c-line); }
    .cx-next-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 600px) {
    .cx-head-grid { row-gap: 28px; }
    .cx-body { font-size: 1rem; }
    .cx-pillar-list { grid-template-columns: minmax(0, 1fr); }
    .cx-pillar, .cx-pillar:nth-child(n) {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 16px;
        padding: 22px 0 24px;
        border-left: 0;
    }
    .cx-pillar .i { grid-row: 1 / 3; width: 26px; height: 26px; margin-top: 2px; }
    .cx-pillar-title { margin: 0; font-size: 1.5rem; }
    .cx-pillar p { margin-top: 8px; max-width: 46ch; }
    .cx-next-card { gap: 16px; padding: 20px 18px; }
    .cx-next-icon { width: 42px; height: 42px; }
    .cx-next-icon .i { width: 20px; height: 20px; }
    .cx-next-title { font-size: 1.375rem; }
}

/* =====================================================================
   Reduced motion: the district is a still with the lights on
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cx-hint { display: none; }
}