/* Hero rechts: Kanban-Board als 3D-Szene (hero-kanban.js baut das Markup).
   Liest --e (Scroll 0..1, geglaettet, aus hero.js), --rx/--ry (Maus) und --open. */

.scene {
    --rx: 0;
    --ry: 0;
    --p: 0;
    --e: 0;
    --open: 0;
    --bx: 56deg;
    --by: 0deg;
    --bz: -38deg;
    --tx: 7deg;
    --ty: 0deg;
    --tz: 9deg;
    --ki: linear-gradient(135deg, #22A8E6 0%, #3B6FD8 50%, #7947C7 100%);
    --kit-plate: #EEF2F6;
    --kit-dot: #CBD3DC;
    --kit-rim: rgba(20, 24, 31, .06);
    --kit-shadow: rgba(20, 24, 31, .35);
    --kit-top: #FFFFFF;
    --kit-s1: #DCE3EA;
    --kit-s2: #C8D1DB;
    --kit-label: #5B6573;
    --kit-bar: #E3E8EE;
    position: relative;
    justify-self: end;
    width: min(100%, 34rem);
    aspect-ratio: 1;
    perspective: 1800px;
}

[data-theme="dark"] .scene {
    --kit-plate: #151A21;
    --kit-dot: #2A323E;
    --kit-rim: rgba(255, 255, 255, .05);
    --kit-shadow: rgba(0, 0, 0, .8);
    --kit-top: #2A3240;
    --kit-s1: #1C222C;
    --kit-s2: #141920;
    --kit-label: #AEB8C5;
    --kit-bar: #374152;
}

.scene__rig {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform:
        rotateX(calc(var(--bx) + var(--ry) * var(--tx)))
        rotateY(calc(var(--by) + var(--rx) * var(--ty)))
        rotateZ(calc(var(--bz) + var(--rx) * var(--tz)));
    transition: transform .8s var(--ease);
}

/* ---------- Balken als Text-Platzhalter ---------- */
.bars {
    display: grid;
    gap: .4375rem;
    margin: 8% 10% 0;
}

.bars i {
    display: block;
    height: .3125rem;
    border-radius: 99px;
    background: var(--kit-bar);
}

/* ---------- Kanban-Board ---------- */
/* Ruhig: alle Zettel liegen als Block in der Ideen-Spalte. Beim Scrollen loest sich
   einer nach dem anderen ab (Ecke hebt sich), fliegt im Bogen in seine Spalte und
   klebt. Zum Schluss schiebt der KI-Agent selbst eine Karte nach "live". */
.scene--kanban { --bx: 46deg; --by: 0deg; --bz: -14deg; --tx: 7deg; --ty: 0deg; --tz: 7deg; }

.board {
    position: absolute;
    inset: 10% 6%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 1rem;
    background:
        radial-gradient(circle, var(--kit-dot) 1px, transparent 1.5px) 0 0 / 14px 14px,
        var(--kit-plate);
    box-shadow: 0 0 0 1px var(--kit-rim), 0 40px 80px -36px var(--kit-shadow);
}

.board span {
    padding: 4% 8%;
    color: var(--kit-label);
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.board span + span {
    border-left: 1px dashed var(--kit-s2);
}

.board em {
    margin-left: .25rem;
    padding: 0 .3rem;
    border-radius: 99px;
    background: var(--kit-s1);
    font-style: normal;
}

.board .c-post,
.is-docked .board .c-pre {
    display: none;
}

.is-docked .board .c-post {
    display: inline;
    background: var(--brand-soft);
    color: var(--brand);
    animation: kit-ping 1s var(--ease) .9s both;
}

/* Unterlage des Zettelblocks */
.pad-base {
    position: absolute;
    left: 9%;
    top: 68%;
    width: 24%;
    height: 19%;
    display: grid;
    place-items: center;
    border: 1.5px dashed color-mix(in srgb, #E8B931 60%, var(--kit-s2));
    border-radius: .3rem;
    color: color-mix(in srgb, #B98A10 80%, var(--kit-label));
    font-family: var(--font-mono);
    font-size: .625rem;
    transform: translateZ(1px);
}

.note {
    --t: clamp(0, calc(var(--e) * 7.2 - var(--i) * 1.05), 1);
    --s: sin(var(--t) * 3.1416);
    --x0: 9;
    --y0: 68;
    position: absolute;
    left: calc((var(--x0) + (var(--x1) - var(--x0)) * var(--t)) * 1%);
    top: calc((var(--y0) + (var(--y1) - var(--y0)) * var(--t)) * 1%);
    width: 24%;
    height: 19%;
    padding: 2.5% 3%;
    border-radius: .2rem .2rem .35rem .2rem;
    background:
        linear-gradient(160deg, transparent 70%, rgba(0, 0, 0, .06)),
        #FDE68A;
    box-shadow: 0 calc(2px + var(--s) * 34px) calc(4px + var(--s) * 30px) calc(-4px - var(--s) * 6px) rgba(20, 24, 31, calc(.25 + var(--s) * .15));
    transform-origin: 50% 0;
    transform:
        translateZ(calc(var(--z0) * (1 - var(--t)) * 1px + var(--s) * 110px + 2px + var(--open) * var(--t) * 4px))
        rotateX(calc(var(--s) * -32deg))
        rotateZ(calc(var(--r0) * (1 - var(--t)) + var(--r1) * var(--t)));
    transition: left .25s var(--ease), top .25s var(--ease), transform .25s var(--ease), box-shadow .25s;
}

.note b {
    display: block;
    color: #3B3220;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.2;
}

.note .bars {
    margin: 10% 0 0;
    gap: .25rem;
}

.note .bars i {
    height: .1875rem;
    background: rgba(0, 0, 0, .12);
}

.note--b { background: linear-gradient(160deg, transparent 70%, rgba(0, 0, 0, .06)), #BAE6FD; }
.note--p { background: linear-gradient(160deg, transparent 70%, rgba(0, 0, 0, .06)), #FBCFE8; }

.note--ki {
    background: var(--ki);
    box-shadow:
        0 calc(2px + var(--s) * 34px) calc(4px + var(--s) * 30px) -6px rgba(20, 24, 31, .3),
        0 0 calc(var(--t) * 30px) color-mix(in srgb, #3B6FD8 calc(var(--t) * 55%), transparent);
}

.note--ki b {
    color: #fff;
}

.note--ki .bars i {
    background: rgba(255, 255, 255, .35);
}

/* Hoehepunkt: der Agent schiebt "Rechnungen pruefen" nach live und hakt ab */
.is-docked .note--moves {
    left: 67%;
    top: 68%;
    transition: left .9s var(--ease) .45s, top .9s var(--ease) .45s, transform .9s var(--ease) .45s;
    transform: translateZ(3px) rotateZ(.5deg);
}

.note--moves::after {
    content: '✓';
    position: absolute;
    right: 8%;
    bottom: 10%;
    display: grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    font-size: .625rem;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.is-docked .note--moves::after {
    opacity: 1;
    transform: scale(1);
    transition-delay: 1.35s;
}

.is-docked .note--ki {
    animation: kit-ping 1.2s var(--ease) .2s;
}

/* kurzer Impuls beim Abschluss */
@keyframes kit-ping {
    0% { box-shadow: inset 0 0 0 1px var(--kit-rim); }
    35% { box-shadow: inset 0 0 0 2px var(--brand), 0 0 18px color-mix(in srgb, var(--brand) 45%, transparent); }
    100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, var(--kit-rim)); }
}

@media (max-width: 52rem) {
    .scene {
        position: absolute;
        top: 8%;
        right: -26%;
        z-index: -1;
        width: 80%;
        opacity: .28;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene__rig,
    .scene * {
        transition: none;
        animation: none;
    }
}