/* Animatie 01: Tekenen. Tijdlijn (lus van 10 s, 1 s = 10%):
   0,0 sjabloon · 3,1 foto · 6,4 preset · 9,7 uitfaden */

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

@keyframes cm01-s1 {
    0% { opacity: 0; translate: 0 12px; }
    4%, 29% { opacity: 1; translate: 0 0; }
    32%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes cm01-s2 {
    0%, 31% { opacity: 0; translate: 0 12px; }
    35%, 62% { opacity: 1; translate: 0 0; }
    65%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes cm01-s3 {
    0%, 64% { opacity: 0; translate: 0 12px; }
    68%, 97% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
}

/* Gedeeld: kaart met gezicht */
.cm01-defs {
    position: absolute;
}
.cm01-card {
    height: 504px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cm01-card svg {
    display: block;
    overflow: visible;
}

/* ── Scène 1: tekenen op het sjabloon ────────────────────── */
.cm01-tools {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #f5f7f6;
}
.cm01-tools i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c);
}
.cm01-tools .is-on {
    box-shadow:
        0 0 0 3px #f5f7f6,
        0 0 0 5px var(--c);
}
/* Kruisjes: twee paden per kruisje, 0,15 s per pad. --d schuift elk pad op */
.cm01-x path {
    stroke-dasharray: 1;
    animation-name: cm01-draw;
}
@keyframes cm01-draw {
    0%, 6% { stroke-dashoffset: 1; opacity: 0; }
    6.1% { opacity: 1; }
    7.5%, 32% { stroke-dashoffset: 0; opacity: 1; }
    32.1%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
/* Stift volgt het kruisje dat getekend wordt */
.cm01-pen {
    animation-name: cm01-pen;
}
@keyframes cm01-pen {
    0%, 4% { opacity: 0; translate: 125px 95px; }
    5.5%, 9% { opacity: 1; translate: 125px 95px; }
    10.2%, 13.2% { translate: 175px 95px; }
    14.4%, 17.4% { translate: 127px 258px; }
    18.6%, 21.6% { translate: 150px 264px; }
    22.8%, 25.8% { opacity: 1; translate: 173px 258px; }
    28%, 100% { opacity: 0; translate: 173px 258px; }
}

/* ── Scène 2: zones op de foto ───────────────────────────── */
.cm01-zone {
    stroke-dasharray: 1;
    animation-name: cm01-zone;
}
@keyframes cm01-zone {
    0%, 37% { stroke-dashoffset: 1; opacity: 0; }
    37.1% { opacity: 1; }
    43%, 65% { stroke-dashoffset: 0; opacity: 1; }
    65.1%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
.cm01-ml {
    font: 600 13px var(--ui);
    animation-name: cm01-ml;
}
@keyframes cm01-ml {
    0%, 52% { opacity: 0; translate: 0 4px; }
    55%, 100% { opacity: 1; translate: 0 0; }
}

/* ── Scène 3: presets ────────────────────────────────────── */
.cm01-presets {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 28px;
}
.cm01-list {
    display: grid;
    gap: 6px;
    width: 204px;
    align-self: center;
    font: 600 16px/1 var(--ui);
}
.cm01-list span {
    padding: 15px 14px;
    border-radius: 10px;
}
.cm01-list span:first-child {
    background: var(--teal-12);
    animation-name: cm01-pick;
}
@keyframes cm01-pick {
    0%, 70% { background-color: rgba(31, 138, 132, 0); }
    72%, 100% { background-color: rgba(31, 138, 132, 0.12); }
}
.cm01-marks {
    animation-name: cm01-marks;
}
@keyframes cm01-marks {
    0%, 74% { opacity: 0; }
    77%, 100% { opacity: 1; }
}