/* Animatie 03: MWST. Tijdlijn (lus van 10 s, 1 s = 10%):
   0,0 tarief per behandeling · 2,8 factuur · 3,8 uitzondering op de regel · 5,8 totaal in CHF · 9,7 uitfaden */

/* Scènes in en uit. Basisstijl = statisch beeld van de factuur */
.cm03-s1 {
    opacity: 0;
}
.cm03-s1 { animation-name: cm03-s1; }
.cm03-s2 { animation-name: cm03-s2; }

@keyframes cm03-s1 {
    0% { opacity: 0; translate: 0 12px; }
    4%, 28% { opacity: 1; translate: 0 0; }
    31%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes cm03-s2 {
    0%, 30% { opacity: 0; translate: 0 12px; }
    34%, 97% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
}

/* Gedeeld: kaart met regels en tariefpillen */
.cm03-card {
    padding: 32px;
}
.cm03-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}
.cm03-title {
    font: 600 22px/1.2 var(--ui);
}
.cm03-nr {
    font: 500 16px/1 var(--ui);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}
.cm03-cols {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    font: 500 15px/1 var(--ui);
    color: var(--ink-2);
}
.cm03-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 60px;
    border-top: 1px solid var(--line);
    font: 500 18px/1.2 var(--ui);
    font-variant-numeric: tabular-nums;
}
.cm03-row > * {
    justify-self: start;
}
.cm03-row > :last-child {
    justify-self: end;
}
.cm03-rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font: 600 15px/1 var(--ui);
    white-space: nowrap;
    color: var(--teal);
    background: var(--teal-12);
}
.cm03-rate.is-free {
    color: var(--ink-2);
    background: var(--ph);
}

/* ── Scène 1: tarief per behandeling ─────────────────────── */
/* Pillen verschijnen 0,2 s na elkaar (--d) */
.cm03-s1 .cm03-rate {
    animation-name: cm03-chip;
}
@keyframes cm03-chip {
    0%, 6% { opacity: 0; translate: 0 8px; }
    9%, 40% { opacity: 1; translate: 0 0; }
    41%, 100% { opacity: 0; translate: 0 0; }
}

/* ── Scène 2: uitzondering op de factuurregel ────────────── */
.cm03-inv .cm03-row {
    grid-template-columns: 1fr 160px 130px;
}
/* Pijltje: het tarief is per regel aan te passen */
.cm03-inv .cm03-rate::after {
    content: "";
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    rotate: 45deg;
    translate: 0 -2px;
}
/* Het label hangt onder "Botox", zodat de naam op één lijn blijft met de pil */
.cm03-edit {
    min-height: 72px;
}
.cm03-edit > :first-child {
    position: relative;
    translate: 0 -10px;
    animation-name: cm03-name;
}
.cm03-why {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 3px;
    white-space: nowrap;
    font: 500 15px/1.2 var(--ui);
    color: var(--coral);
    animation-name: cm03-why;
}
.cm03-edit::after {
    content: "";
    position: absolute;
    inset: 4px -12px;
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 2px var(--coral),
        0 0 18px 3px rgba(232, 115, 90, 0.35);
    opacity: 0;
    animation: cm03-glow var(--T) var(--ease) infinite both;
}
/* Oude en nieuwe pil op dezelfde plek */
.cm03-swap {
    position: relative;
    display: grid;
    justify-items: start;
}
.cm03-swap > .cm03-rate {
    grid-area: 1 / 1;
}
.cm03-swap > .cm03-rate:first-child {
    opacity: 0;
    animation-name: cm03-old;
}
.cm03-swap > .cm03-rate.is-free {
    animation-name: cm03-new;
}
.cm03-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 1;
    display: grid;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow:
        0 12px 28px rgba(20, 33, 31, 0.12),
        0 1px 3px rgba(20, 33, 31, 0.08);
    font: 500 16px/1 var(--ui);
    white-space: nowrap;
    opacity: 0;
    animation-name: cm03-menu;
}
.cm03-menu span {
    padding: 11px 12px;
    border-radius: 8px;
}
.cm03-menu span:first-child {
    animation-name: cm03-pick;
}

/* Keuzelijst open 3,8 · "Vrijgesteld" gekozen 4,2 · dicht en gewisseld 4,6 tot 4,8 */
@keyframes cm03-menu {
    0%, 38% { opacity: 0; translate: 0 -6px; }
    40%, 45% { opacity: 1; translate: 0 0; }
    47%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes cm03-pick {
    0%, 42% { background-color: rgba(31, 138, 132, 0); }
    43%, 100% { background-color: rgba(31, 138, 132, 0.12); }
}
@keyframes cm03-old {
    0%, 46% { opacity: 1; }
    48%, 100% { opacity: 0; }
}
@keyframes cm03-new {
    0%, 46% { opacity: 0; }
    48%, 100% { opacity: 1; }
}
@keyframes cm03-glow {
    0%, 47% { opacity: 0; }
    49% { opacity: 1; }
    56%, 100% { opacity: 0; }
}
@keyframes cm03-name {
    0%, 48% { translate: 0 0; }
    51%, 100% { translate: 0 -10px; }
}
@keyframes cm03-why {
    0%, 48% { opacity: 0; translate: 0 -4px; }
    51%, 100% { opacity: 1; translate: 0 0; }
}

/* ── Scène 3: totaal in CHF ──────────────────────────────── */
@property --cm03-chf {
    syntax: "<integer>";
    inherits: false;
    initial-value: 936;
}
@property --cm03-rp {
    syntax: "<integer>";
    inherits: false;
    initial-value: 45;
}
.cm03-sums {
    padding-top: 8px;
    border-top: 1px solid var(--line);
    animation-name: cm03-sums;
}
.cm03-sum {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font: 500 17px/1.2 var(--ui);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}
.cm03-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 12px;
    font: 600 18px/1 var(--ui);
    counter-reset: chf var(--cm03-chf) rp var(--cm03-rp);
    animation-name: cm03-count;
}
.cm03-total::after {
    content: "CHF " counter(chf) "." counter(rp, decimal-leading-zero);
    font: 600 36px/1 var(--head);
    font-variant-numeric: tabular-nums;
    color: var(--teal);
}
@keyframes cm03-sums {
    0%, 58% { opacity: 0; translate: 0 8px; }
    62%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes cm03-count {
    0%, 62% { --cm03-chf: 0; --cm03-rp: 0; }
    72%, 100% { --cm03-chf: 936; --cm03-rp: 45; }
}