/* Animatie 04: Dossier per behandeling. Tijdlijn (lus van 10 s, 1 s = 10%):
   0,0 injectable · 3,2 laser · 6,2 injectiepunten · 9,6 terug naar injectable.
   De kaart blijft staan, alleen de inhoud wisselt */

.cm04-defs {
    position: absolute;
}
.cm04-card {
    height: 504px;
    padding: 28px 32px;
}
.cm04-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
}
.cm04-title {
    font: 600 22px/1.2 var(--ui);
}

/* Schakelaar Injectable / Laser. Basisstijl = Laser (middelste scène) */
.cm04-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 120px);
    padding: 4px;
    border-radius: 999px;
    background: #f5f7f6;
    font: 600 16px/40px var(--ui);
    text-align: center;
}
.cm04-tabs i {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 120px;
    height: 40px;
    border-radius: 999px;
    background: var(--teal);
    translate: 120px 0;
    animation-name: cm04-tab;
}
.cm04-tabs span {
    position: relative;
    color: #fff;
}
.cm04-tabs span:first-of-type {
    color: var(--ink-2);
    animation-name: cm04-t1;
}
.cm04-tabs span:last-of-type {
    animation-name: cm04-t2;
}
@keyframes cm04-tab {
    0%, 32% { translate: 0 0; }
    34%, 62% { translate: 120px 0; }
    64%, 100% { translate: 0 0; }
}
@keyframes cm04-t1 {
    0%, 32% { color: #fff; }
    34%, 62% { color: var(--ink-2); }
    64%, 100% { color: #fff; }
}
@keyframes cm04-t2 {
    0%, 32% { color: var(--ink-2); }
    34%, 62% { color: #fff; }
    64%, 100% { color: var(--ink-2); }
}

/* Velden */
.cm04-body {
    position: relative;
    height: 368px;
    margin-top: 28px;
}
.cm04-fields {
    position: absolute;
    inset: 48px 0 auto;
}
.cm04-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
    border-top: 1px solid var(--line);
    font: 500 18px/1 var(--ui);
}
.cm04-row span:first-child {
    color: var(--ink-2);
}
.cm04-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Scène 1: injectable. Waarden vullen zich 0,2 s na elkaar (--d) ── */
.cm04-inj {
    opacity: 0;
    animation-name: cm04-inj;
}
.cm04-inj .cm04-val {
    animation-name: cm04-val;
}
@keyframes cm04-inj {
    0%, 32% { opacity: 1; translate: 0 0; }
    34%, 96% { opacity: 0; translate: 0 0; }
    97% { opacity: 0; translate: 0 8px; }
    100% { opacity: 1; translate: 0 0; }
}
@keyframes cm04-val {
    0%, 6% { opacity: 0; translate: 0 4px; }
    8%, 40% { opacity: 1; translate: 0 0; }
    41%, 100% { opacity: 0; translate: 0 0; }
}

/* ── Scène 2: laser. Andere velden, 0,1 s na elkaar (--d) ── */
.cm04-las .cm04-row {
    animation-name: cm04-las;
}
@keyframes cm04-las {
    0%, 34% { opacity: 0; translate: 0 8px; }
    37%, 62% { opacity: 1; translate: 0 0; }
    64%, 100% { opacity: 0; translate: 0 0; }
}

/* ── Scène 3: injectiepunten op het gezichtssjabloon ─────── */
.cm04-face {
    position: absolute;
    inset: 0;
    margin: auto;
    overflow: visible;
    opacity: 0;
    animation-name: cm04-face;
}
@keyframes cm04-face {
    0%, 64% { opacity: 0; translate: 0 8px; }
    67%, 96% { opacity: 1; translate: 0 0; }
    99%, 100% { opacity: 0; translate: 0 0; }
}
/* Kruisjes: twee paden per kruisje, 0,15 s per pad, 0,3 s per kruisje (--d) */
.cm04-x path {
    stroke-dasharray: 1;
    animation-name: cm04-draw;
}
@keyframes cm04-draw {
    0%, 68% { stroke-dashoffset: 1; opacity: 0; }
    68.1% { opacity: 1; }
    69.5%, 97% { stroke-dashoffset: 0; opacity: 1; }
    97.1%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
/* Stift volgt het kruisje dat getekend wordt */
.cm04-pen {
    animation-name: cm04-pen;
}
@keyframes cm04-pen {
    0%, 66% { opacity: 0; translate: 125px 95px; }
    67.5%, 70.5% { opacity: 1; translate: 125px 95px; }
    71%, 73.5% { translate: 175px 95px; }
    74%, 76.5% { translate: 127px 258px; }
    77%, 79.5% { translate: 150px 264px; }
    80%, 82.5% { opacity: 1; translate: 173px 258px; }
    85%, 100% { opacity: 0; translate: 173px 258px; }
}