/* Clinicminds productanimaties: gedeelde stage en stijl.
   Pure CSS. Elke animatie is één lus van 10 s: alle keyframes delen die duur,
   zodat procenten tijdstippen zijn (1 s = 10%). De uitleg staat naast de
   animatie op de pagina, dus in de stage alleen beeld en zo min mogelijk tekst. */

.cm-anim {
    --T: 10s;
    --ease: cubic-bezier(0.65, 0, 0.35, 1);
    --teal: #1f8a84;
    --teal-12: rgba(31, 138, 132, 0.12);
    --coral: #e8735a;
    --ink: #14211f;
    --ink-2: #5e6b69;
    --line: rgba(20, 33, 31, 0.08);
    --ph: rgba(20, 33, 31, 0.07);
    --head: "Sora", system-ui, sans-serif;
    --ui: "Figtree", system-ui, sans-serif;
    position: relative;
    aspect-ratio: 640 / 560;
    overflow: hidden;
    background: #f5f7f6;
    container-type: inline-size;
}

/* Interne stage van 640x560 die meeschaalt met de breedte van het blok */
.cm-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 560px;
    transform-origin: 0 0;
    /* --s zet het script op de pagina; de formule is alleen een reserve zonder JavaScript,
       want Safari 26 rekent die fout uit (negatief) */
    scale: var(--s, tan(atan2(100cqw, 640px)));
    font-family: var(--ui);
    line-height: 1.3;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
.cm-stage *,
.cm-stage *::before,
.cm-stage *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Alles met .cm-a loopt op de gedeelde tijdlijn. --d verschuift een element
   binnen de lus, zodat gelijke stappen één keyframe kunnen delen */
@property --d {
    syntax: "<time>";
    inherits: false;
    initial-value: 0s;
}
.cm-anim .cm-a {
    animation-delay: var(--d);
    animation-duration: var(--T);
    animation-timing-function: var(--ease);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* Afspelen: pas in beeld (cm-js zet dit aan), ?t= zet een tijdstip vast */
.cm-js .cm-anim:not(.is-on) *,
.cm-js .cm-anim:not(.is-on) *::after,
.cm-hidden .cm-anim *,
.cm-hidden .cm-anim *::after {
    animation-play-state: paused;
}
.cm-anim.is-seek *,
.cm-anim.is-seek *::after {
    animation-play-state: paused !important;
    animation-delay: calc(var(--d) - var(--seek) * 1s) !important;
}

/* Achtergrondcirkel */
.cm-bg {
    position: absolute;
    left: -180px;
    top: -220px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(31, 138, 132, 0.04), rgba(31, 138, 132, 0));
    animation: cm-drift 15s ease-in-out infinite alternate;
}
@keyframes cm-drift {
    to {
        translate: 20px 10px;
    }
}

/* Lichte beweging: de kaart drijft 3px op en neer */
.cm-cards {
    position: absolute;
    inset: 0;
    animation: cm-float 2s ease-in-out infinite alternate;
}
@keyframes cm-float {
    from { translate: 0 -3px; }
    to { translate: 0 3px; }
}

/* Kaartvlak: vult de stage op 28px na */
.cm-slot {
    position: absolute;
    inset: 28px;
    display: grid;
    place-items: center;
}
.cm-card {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow:
        0 24px 48px rgba(20, 33, 31, 0.08),
        0 2px 6px rgba(20, 33, 31, 0.04);
}
.cm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font: 600 16px/1.15 var(--ui);
    color: #fff;
    background: var(--teal);
}
.cm-ph {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--ph);
}
.cm-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--coral);
}

/* Geen beweging gewenst: statisch beeld (de basisstijlen tonen de middelste scène) */
@media (prefers-reduced-motion: reduce) {
    .cm-anim *,
    .cm-anim *::after {
        animation: none !important;
    }
}