/* project-visual.css — CSS art visualizations */

.project-visual {
    position: relative; display: flex;
    align-items: center; justify-content: center;
    background: var(--surface); border-left: 1px solid var(--rule);
    min-height: 260px; overflow: hidden;
}

/* 01 — Concentric Rings (ChainDecode) */
.viz-rings { position: relative; width: 180px; height: 180px; }
.ring {
    position: absolute; border: 1px solid var(--rule); border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    transition: all 0.5s var(--ease);
}
.ring:nth-child(1) { width: 56px; height: 56px; border-width: 2px; border-color: var(--ink); }
.ring:nth-child(2) { width: 110px; height: 110px; opacity: 0.5; }
.ring:nth-child(3) { width: 170px; height: 170px; opacity: 0.25; }
.ring-dot {
    position: absolute; width: 6px; height: 6px;
    background: var(--accent); border-radius: 50%;
    top: -3px; left: 50%; transform: translateX(-50%);
}

@media (hover: hover) {
    .project:hover .ring { border-color: var(--accent); }
    .project:hover .ring:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
    .project:hover .ring:nth-child(2) { transform: translate(-50%, -50%) rotate(-20deg); opacity: 0.7; }
    .project:hover .ring:nth-child(3) { transform: translate(-50%, -50%) rotate(10deg); opacity: 0.4; }
}

/* 02 — Stacked Layers (OpenWord) */
.viz-stack { perspective: 600px; position: relative; width: 180px; height: 140px; }
.stack-layer {
    position: absolute; width: 180px; height: 44px; left: 0;
    background: var(--white); border: 1px solid var(--rule);
    border-radius: 6px; transition: all 0.45s var(--ease);
}
.stack-layer::before {
    content: ''; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%); width: 50%; height: 4px;
    background: var(--rule); border-radius: 2px;
    transition: background 0.3s var(--ease);
}
.stack-layer:nth-child(1) { top: 0; z-index: 3; box-shadow: 0 4px 16px rgba(26,26,24,0.06); }
.stack-layer:nth-child(2) { top: 48px; z-index: 2; opacity: 0.7; }
.stack-layer:nth-child(3) { top: 96px; z-index: 1; opacity: 0.4; }

@media (hover: hover) {
    .project:hover .stack-layer:nth-child(1) { transform: translateX(12px); }
    .project:hover .stack-layer:nth-child(1)::before { background: var(--accent); }
    .project:hover .stack-layer:nth-child(2) { transform: translateX(4px); opacity: 0.85; }
    .project:hover .stack-layer:nth-child(3) { transform: translateX(-4px); opacity: 0.6; }
}

/* 03 — Graph Nodes (ChainTerms) */
.viz-graph { position: relative; width: 200px; height: 160px; }
.graph-node {
    position: absolute; width: 10px; height: 10px;
    background: var(--white); border: 2px solid var(--ink);
    border-radius: 50%; z-index: 2; transition: all 0.3s var(--ease);
}
.graph-node:nth-child(1) { top: 15%; left: 25%; width: 14px; height: 14px; }
.graph-node:nth-child(2) { top: 45%; left: 65%; }
.graph-node:nth-child(3) { top: 75%; left: 35%; }
.graph-node:nth-child(4) { top: 25%; left: 80%; width: 8px; height: 8px; }
.graph-node:nth-child(5) { top: 65%; left: 15%; width: 8px; height: 8px; }

@media (hover: hover) {
    .project:hover .graph-node {
        border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
    }
}

.viz-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viz-graph svg line { stroke: var(--rule); stroke-width: 1; transition: stroke 0.3s var(--ease); }

@media (hover: hover) {
    .project:hover .viz-graph svg line { stroke: var(--accent); stroke-opacity: 0.4; }
}

/* 04 — Signal Bars (PoweredADHD) */
.viz-signal {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 5px; height: 120px;
}
.signal-bar {
    width: 6px; border-radius: 3px; background: var(--rule);
    transition: all 0.35s var(--ease);
}
.signal-bar:nth-child(1)  { height: 25%; }
.signal-bar:nth-child(2)  { height: 55%; }
.signal-bar:nth-child(3)  { height: 35%; }
.signal-bar:nth-child(4)  { height: 80%; }
.signal-bar:nth-child(5)  { height: 45%; }
.signal-bar:nth-child(6)  { height: 65%; }
.signal-bar:nth-child(7)  { height: 30%; }
.signal-bar:nth-child(8)  { height: 90%; }
.signal-bar:nth-child(9)  { height: 50%; }
.signal-bar:nth-child(10) { height: 40%; }
.signal-bar:nth-child(11) { height: 70%; }

@media (hover: hover) {
    .project:hover .signal-bar:nth-child(odd)  { background: var(--ink); }
    .project:hover .signal-bar:nth-child(even) { background: var(--accent); }
}

/* 05 — Grid Blocks / Matrix (TextScore) */
.viz-matrix {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; width: 140px;
}
.matrix-cell {
    height: 20px; background: var(--rule); border-radius: 3px;
    transition: all 0.3s var(--ease);
    position: relative; overflow: hidden;
}
.matrix-cell::after {
    content: ''; position: absolute; inset: 0;
    background: var(--ink); transform: scaleX(0);
    transform-origin: left; transition: transform 0.4s var(--ease);
}
.matrix-cell:nth-child(1) { grid-column: span 2; }
.matrix-cell:nth-child(5) { grid-column: span 3; }
.matrix-cell:nth-child(8) { grid-column: span 2; }

@media (hover: hover) {
    .project:hover .matrix-cell::after { transform: scaleX(1); }
    .project:hover .matrix-cell:nth-child(1)::after { background: var(--accent); transition-delay: 0ms; }
    .project:hover .matrix-cell:nth-child(2)::after { transition-delay: 40ms; }
    .project:hover .matrix-cell:nth-child(3)::after { transition-delay: 80ms; }
    .project:hover .matrix-cell:nth-child(4)::after { transition-delay: 120ms; }
    .project:hover .matrix-cell:nth-child(5)::after { background: var(--accent); transition-delay: 160ms; }
    .project:hover .matrix-cell:nth-child(6)::after { transition-delay: 200ms; }
    .project:hover .matrix-cell:nth-child(7)::after { transition-delay: 240ms; }
    .project:hover .matrix-cell:nth-child(8)::after { transition-delay: 280ms; }
}

/* 06 — Prompt Cards (2paste.io) */
.viz-prompts { position: relative; width: 160px; height: 140px; }
.prompt-card {
    position: absolute; width: 120px; height: 56px;
    background: var(--white); border: 1px solid var(--rule);
    border-radius: 6px; transition: all 0.4s var(--ease);
}
.prompt-card::before {
    content: ''; position: absolute; left: 10px; top: 14px;
    width: 55%; height: 4px;
    background: var(--rule); border-radius: 2px;
    transition: background 0.3s var(--ease);
}
.prompt-card::after {
    content: ''; position: absolute; left: 10px; top: 24px;
    width: 35%; height: 4px;
    background: var(--rule); border-radius: 2px; opacity: 0.5;
}
.prompt-card:nth-child(1) { top: 0; left: 0; z-index: 3; box-shadow: 0 4px 16px rgba(26,26,24,0.06); }
.prompt-card:nth-child(2) { top: 36px; left: 20px; z-index: 2; opacity: 0.7; }
.prompt-card:nth-child(3) { top: 72px; left: 40px; z-index: 1; opacity: 0.4; }

@media (hover: hover) {
    .project:hover .prompt-card:nth-child(1) { transform: translate(-4px, -4px); }
    .project:hover .prompt-card:nth-child(1)::before { background: var(--accent); }
    .project:hover .prompt-card:nth-child(2) { transform: translate(4px, 0); opacity: 0.85; }
    .project:hover .prompt-card:nth-child(3) { transform: translate(8px, 4px); opacity: 0.6; }
}

/* Responsive */
@media (max-width: 900px) {
    .project-visual {
        border-left: none; border-top: 1px solid var(--rule);
        min-height: 200px;
    }
}

/* M.3 — Visualization scaling for very narrow screens */
@media (max-width: 360px) {
    .project-visual { min-height: 160px; }
    .viz-rings,
    .viz-stack,
    .viz-graph,
    .viz-prompts { transform: scale(0.8); }
    .viz-matrix { width: 120px; }
    .viz-signal { gap: 4px; }
    .viz-signal .signal-bar { width: 5px; }
}