/* Hero rechts: Projekt-Canvas, das sich in ein Kanban-Board sortiert.
   Fahrt mit der Maus ueber eine Notiz zeigt die Kette Problem -> Loesung -> Nutzen.
   Markup und Ablauf: hero-canvas.js. */

.hcv {
    --ki: linear-gradient(135deg, #22A8E6 0%, #3B6FD8 50%, #7947C7 100%);
    --ki-a: #22A8E6;
    --amber: #F5B83D;
    --rose: #E8789A;
    --sky: #4FB8E8;
    --mint: #3FBF94;
    --note: #ffffff;
    --note-shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 8px 24px -12px rgba(20, 24, 31, .3);
    position: relative;
    justify-self: end;
    width: min(100%, 32rem);
    aspect-ratio: 1 / .92;
}

[data-theme="dark"] .hcv {
    --note: #1C222C;
    --note-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .8);
}

.hcv__layer {
    position: absolute;
    inset: 0;
    transition: opacity .8s var(--ease);
}

.hcv__layer > div {
    font: 500 .6875rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .75rem;
}

.hcv__canvas {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    border: 1.5px solid var(--line-strong);
    border-radius: .875rem;
    background: color-mix(in srgb, var(--bg) 60%, transparent);
}

.hcv__canvas > div { border: 0 solid var(--line-strong); }
.hcv__canvas > div:nth-child(odd) { border-right-width: 1.5px; }
.hcv__canvas > div:nth-child(-n+2) { border-bottom-width: 1.5px; }

/* Board ist flacher als das Canvas, damit die Spalten nicht halb leer stehen */
.hcv__board {
    inset: 17% 0 21%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    opacity: 0;
}

.hcv__board > div {
    border-radius: .875rem;
    background: var(--bg-subtle);
    border: 1px solid var(--line);
}

.hcv.is-board .hcv__canvas { opacity: 0; }
.hcv.is-board .hcv__board { opacity: 1; }

.hcv__spot {
    /* groesser als die Flaeche, damit der Lichtkegel nie an einer Kante abreisst */
    position: absolute;
    inset: -8rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
    background: radial-gradient(15rem circle at calc(var(--px, 50%) + 8rem) calc(var(--py, 50%) + 8rem), color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
}

.hcv.is-hover .hcv__spot { opacity: 1; }

/* ---------- Notizen ---------- */
.hcv__n {
    position: absolute;
    left: var(--ax);
    top: var(--ay);
    width: 28%;
    padding: .5rem .6rem .55rem;
    border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
    border-radius: 7px;
    font-size: .8125rem;
    line-height: 1.25;
    color: var(--text);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, var(--note)), color-mix(in srgb, var(--c) 9%, var(--note)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--note-shadow);
    rotate: var(--r);
    opacity: 0;
    translate: 0 -10px;
    transition:
        left 1s var(--ease), top 1s var(--ease), rotate .6s var(--ease),
        scale .3s var(--ease), translate .6s var(--ease), opacity .4s, box-shadow .3s;
    transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s, 0s, 0s, 0s, 0s;
}

.hcv.is-in .hcv__n {
    opacity: 1;
    translate: 0 0;
}

.hcv__tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .4rem;
    padding: .15rem .4rem .15rem .3rem;
    border-radius: var(--radius-pill);
    font: 600 .5625rem/1.2 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--c) 62%, var(--text));
    background: color-mix(in srgb, var(--c) 20%, transparent);
}

.hcv__tag svg {
    width: .6875rem;
    height: .6875rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hcv__n b {
    display: block;
    hyphens: manual;
    overflow-wrap: break-word;
    font-weight: 650;
    letter-spacing: -.005em;
}

.hcv__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
}

/* Fortschritt: im Board fuellt er sich mit der Spalte */
.hcv__prog {
    display: flex;
    gap: 3px;
    flex: 1;
    max-width: 3.25rem;
}

.hcv__prog i {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text) 14%, transparent);
    transition: background .4s .7s;
}

.hcv__prog i:first-child,
.hcv.is-board [data-col="1"] .hcv__prog i:nth-child(2),
.hcv.is-board [data-col="2"] .hcv__prog i { background: var(--c); }

.hcv__av {
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    font: 600 .5rem var(--font-mono);
    color: color-mix(in srgb, var(--c) 55%, var(--text));
    background: var(--note);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent);
}

/* KI-Karte: Verlauf, Schimmer, pulsierender Punkt */
.hcv__n--ki {
    --c: #ffffff;
    color: #fff;
    background: var(--ki);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: var(--note-shadow), 0 10px 30px -12px rgba(121, 71, 199, .7);
    overflow: hidden;
}

.hcv__n--ki .hcv__tag { color: #fff; background: rgba(255, 255, 255, .18); }
.hcv__n--ki .hcv__prog i { background: rgba(255, 255, 255, .28); }
.hcv__n--ki .hcv__prog i:first-child,
.hcv.is-board .hcv__n--ki[data-col="1"] .hcv__prog i:nth-child(2) { background: #fff; }

.hcv__n--ki .hcv__av {
    background: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.hcv__n--ki .hcv__av::before {
    content: "";
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: #fff;
    animation: hcv-pulse 1.8s ease-in-out infinite;
}

.hcv__n--ki::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%;
    animation: hcv-shine 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hcv-pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes hcv-shine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

.hcv.is-board .hcv__n { left: var(--bx); top: var(--by); rotate: 0deg; }

.hcv__n:hover,
.hcv.has-focus .hcv__n.is-rel {
    rotate: 0deg;
    z-index: 3;
}

.hcv__n:hover {
    scale: 1.06;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent), 0 18px 36px -14px rgba(0, 0, 0, .5);
}

.hcv.has-focus .hcv__n:not(.is-rel) { opacity: .3; }

/* ---------- Verbindungslinien ---------- */
.hcv__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

.hcv__links path {
    fill: none;
    stroke: url(#hcvGrad);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hcv-draw .5s var(--ease) forwards;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ki-a) 70%, transparent));
}

.hcv__links circle { fill: var(--ki-a); }

@keyframes hcv-draw { to { stroke-dashoffset: 0; } }

.hcv__hint {
    position: absolute;
    right: 0;
    bottom: -1.75rem;
    font: 500 .6875rem var(--font-mono);
    color: var(--text-muted);
    transition: opacity .3s;
}

.hcv.is-hover .hcv__hint,
.hcv.was-used .hcv__hint { opacity: 0; }

@media (hover: none) {
    .hcv__hint { display: none; }
}

/* schmal: als ruhiger Hintergrund hinter dem Text, ohne Interaktion */
@media (max-width: 52rem) {
    .hcv {
        position: absolute;
        top: 8%;
        right: -30%;
        z-index: -1;
        width: 80%;
        opacity: .16;
        pointer-events: none;
    }

    .hcv__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hcv__n--ki::after,
    .hcv__n--ki .hcv__av::before { animation: none; }

    .hcv__layer,
    .hcv__n {
        transition: none;
    }

    .hcv__links path { animation: none; stroke-dashoffset: 0; }
}