/* Animatie 00: Eén systeem. Tijdlijn (lus van 10 s, 1 s = 10%):
   0,0 agenda · 2,8 dossier · 6,6 factuur · 9,7 uitfaden */

/* Scènes in en uit. Basisstijl = statisch beeld van scène 2 */
.cm00-s1,
.cm00-s3 {
    opacity: 0;
}
.cm00-s1 { animation-name: cm00-s1; }
.cm00-s2 { animation-name: cm00-s2; }
.cm00-s3 { animation-name: cm00-s3; }

@keyframes cm00-s1 {
    0% { opacity: 0; translate: 0 12px; }
    4%, 28% { opacity: 1; translate: 0 0; }
    31%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes cm00-s2 {
    0%, 30% { opacity: 0; translate: 0 12px; }
    34%, 66% { opacity: 1; translate: 0 0; }
    69%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes cm00-s3 {
    0%, 68% { opacity: 0; translate: 0 12px; }
    72%, 97% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
}

/* ── Scène 1: weekagenda ─────────────────────────────────── */
.cm00-cal {
    position: relative;
    height: 504px;
}
.cm00-days {
    position: absolute;
    left: 24px;
    top: 20px;
    display: grid;
    grid-template-columns: repeat(5, 107px);
    font: 600 17px/44px var(--ui);
    color: var(--ink-2);
    text-align: center;
}
.cm00-grid {
    position: absolute;
    left: 24px;
    top: 72px;
    width: 536px;
    height: 409px;
    background:
        repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 51px),
        repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 107px);
}
/* Blok: --day = dag (0 = ma), --h = startuur (09:00 tot 17:00), --l = duur in uren */
.cm00-slot {
    position: absolute;
    left: calc(28px + var(--day) * 107px);
    top: calc(75px + (var(--h) - 9) * 51px);
    width: 99px;
    height: calc(var(--l) * 51px - 6px);
    border-radius: 10px;
    background: var(--teal-12);
}
.cm00-appt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 12px;
    background: var(--teal);
    color: #fff;
    font: 600 17px/1.1 var(--ui);
    animation-name: cm00-drop;
}
.cm00-appt time {
    font-weight: 500;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.cm00-appt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 2px var(--coral),
        0 0 18px 3px rgba(232, 115, 90, 0.45);
    opacity: 0;
    animation: cm00-glow var(--T) var(--ease) infinite both;
}
@keyframes cm00-drop {
    0%, 6% { opacity: 0; translate: 0 -16px; }
    8% { opacity: 1; }
    10%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes cm00-glow {
    0%, 8% { opacity: 0; }
    10% { opacity: 1; }
    16%, 100% { opacity: 0; }
}

/* ── Scène 2: slim dossier ───────────────────────────────── */
.cm00-s2 {
    align-items: start;
    padding-top: 10px;
}
/* Na het filteren schuift de kleinere kaart naar het midden: (504 - 292) / 2 - 10 */
.cm00-s2 .cm-card {
    translate: 0 96px;
    animation-name: cm00-center;
}
@keyframes cm00-center {
    0%, 47% { translate: 0 0; }
    53%, 100% { translate: 0 96px; }
}
.cm00-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 84px;
    padding: 0 32px;
}
.cm00-title {
    font: 600 22px/1.2 var(--ui);
}
.cm00-sub {
    font: 500 16px/1.2 var(--ui);
    color: var(--ink-2);
}
.cm00-body {
    height: 208px;
    padding: 0 32px;
    overflow: hidden;
    animation-name: cm00-body;
}
.cm00-row {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 48px;
    overflow: hidden;
    background: linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat;
    font: 500 17px/1 var(--ui);
}
.cm00-row span:first-child {
    width: 230px;
}
.cm00-row .cm-ph {
    width: 150px;
}
.cm00-row .cm-dot {
    margin-left: auto;
}
.cm00-row.is-off {
    height: 0;
    opacity: 0;
}
.cm00-row:nth-child(1) { animation-name: cm00-r1; }
.cm00-row:nth-child(2) { animation-name: cm00-r2; }
.cm00-row:nth-child(3) { animation-name: cm00-r3; }
.cm00-row:nth-child(4) { animation-name: cm00-r4; }
.cm00-row:nth-child(5) { animation-name: cm00-r5; }
.cm00-row:nth-child(6) { animation-name: cm00-r6; }
.cm00-row:nth-child(7) { animation-name: cm00-r7; }
.cm00-row:nth-child(8) { animation-name: cm00-r8; }
.cm00-row:nth-child(1) .cm-dot { animation-name: cm00-d1; }
.cm00-row:nth-child(3) .cm-dot { animation-name: cm00-d2; }
.cm00-row:nth-child(5) .cm-dot { animation-name: cm00-d3; }
.cm00-row:nth-child(7) .cm-dot { animation-name: cm00-d4; }

/* Openvouwen 3,4 tot 4,2 · filteren 4,5 tot 5,3 */
@keyframes cm00-body {
    0%, 34% { height: 0; }
    42%, 47% { height: 400px; }
    53%, 100% { height: 208px; }
}
/* Juiste velden: alleen verschijnen, 0,05 s na elkaar */
@keyframes cm00-r1 { 0%, 34% { opacity: 0; translate: 0 -8px; } 37%, 100% { opacity: 1; translate: 0 0; } }
@keyframes cm00-r3 { 0%, 35% { opacity: 0; translate: 0 -8px; } 38%, 100% { opacity: 1; translate: 0 0; } }
@keyframes cm00-r5 { 0%, 36% { opacity: 0; translate: 0 -8px; } 39%, 100% { opacity: 1; translate: 0 0; } }
@keyframes cm00-r7 { 0%, 37% { opacity: 0; translate: 0 -8px; } 40%, 100% { opacity: 1; translate: 0 0; } }
/* Overbodige velden: verschijnen, worden lichter, klappen in */
@keyframes cm00-r2 {
    0%, 34.5% { opacity: 0; translate: 0 -8px; height: 48px; }
    37.5%, 45% { opacity: 1; translate: 0 0; height: 48px; }
    47% { opacity: 0.35; height: 48px; }
    53%, 100% { opacity: 0; translate: 0 0; height: 0; }
}
@keyframes cm00-r4 {
    0%, 35.5% { opacity: 0; translate: 0 -8px; height: 48px; }
    38.5%, 45% { opacity: 1; translate: 0 0; height: 48px; }
    47% { opacity: 0.35; height: 48px; }
    53%, 100% { opacity: 0; translate: 0 0; height: 0; }
}
@keyframes cm00-r6 {
    0%, 36.5% { opacity: 0; translate: 0 -8px; height: 48px; }
    39.5%, 45% { opacity: 1; translate: 0 0; height: 48px; }
    47% { opacity: 0.35; height: 48px; }
    53%, 100% { opacity: 0; translate: 0 0; height: 0; }
}
@keyframes cm00-r8 {
    0%, 37.5% { opacity: 0; translate: 0 -8px; height: 48px; }
    40.5%, 45% { opacity: 1; translate: 0 0; height: 48px; }
    47% { opacity: 0.35; height: 48px; }
    53%, 100% { opacity: 0; translate: 0 0; height: 0; }
}
/* Markeren: koraal stipjes 5,5 / 5,65 / 5,8 / 5,95 */
@keyframes cm00-d1 { 0%, 55% { opacity: 0; scale: 0; } 58%, 100% { opacity: 1; scale: 1; } }
@keyframes cm00-d2 { 0%, 56.5% { opacity: 0; scale: 0; } 59.5%, 100% { opacity: 1; scale: 1; } }
@keyframes cm00-d3 { 0%, 58% { opacity: 0; scale: 0; } 61%, 100% { opacity: 1; scale: 1; } }
@keyframes cm00-d4 { 0%, 59.5% { opacity: 0; scale: 0; } 62.5%, 100% { opacity: 1; scale: 1; } }

/* ── Scène 3: factuur ────────────────────────────────────── */
@property --cm00-eur {
    syntax: "<integer>";
    inherits: false;
    initial-value: 425;
}
.cm00-inv {
    padding: 36px;
}
.cm00-invhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}
.cm00-nr {
    font: 500 16px/1 var(--ui);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}
.cm00-inv .cm-ph {
    width: 160px;
    margin-bottom: 32px;
}
.cm00-line {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    font: 500 18px/1.2 var(--ui);
    font-variant-numeric: tabular-nums;
}
.cm00-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font: 600 18px/1 var(--ui);
    counter-reset: eur var(--cm00-eur);
    animation-name: cm00-count;
}
.cm00-total::after {
    content: "€ " counter(eur) ",00";
    font: 600 40px/1 var(--head);
    font-variant-numeric: tabular-nums;
    color: var(--teal);
}
.cm00-sent {
    margin-top: 32px;
    animation-name: cm00-sent;
}
@keyframes cm00-count {
    0%, 74% { --cm00-eur: 0; }
    83%, 100% { --cm00-eur: 425; }
}
@keyframes cm00-sent {
    0%, 83% { opacity: 0; translate: 0 8px; }
    87%, 100% { opacity: 1; translate: 0 0; }
}