/* ==========================================================================
   CrystalKoorn - animatielaag
   Aangelegd 20-09-2026.

   Waarom dit bestand: de designlaag had alleen opacity + translateY. Gemeten
   op de live site: 0 keyframe-animaties. De AH-Vastgoedadvies-site heeft er 25,
   met clip-path veegeffecten, gestaffelde delays en subtiele beweging in de
   hero. Dat verschil is precies wat "high end" van "netjes" scheidt.

   Alles respecteert prefers-reduced-motion, en alles zit achter html.ck-js
   zodat inhoud nooit onzichtbaar blijft als het script faalt.
   ========================================================================== */

/* ---------- keyframes ---------- */

/* Beeld dat van onder naar boven wordt "opengeveegd". Het AH-signatuureffect. */
@keyframes ckVeegOp {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Tekst die van links openveegt: voor koppen en eyebrow-labels. */
@keyframes ckVeegLinks {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Haarlijn die uitgroeit. Rustig accent onder een sectiekop. */
@keyframes ckLijn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Heel langzame inzoom op een herobeeld: geeft leven zonder op te vallen. */
@keyframes ckHeroDrift {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(1.055) translateY(-1.2%); }
}

/* Zachte opkomst met een klein beetje schaal: productkaarten en kolommen. */
@keyframes ckRijs {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* Glans die één keer over een vlak trekt: voor de "extra kans"-band. */
@keyframes ckGlans {
    from { transform: translateX(-120%) skewX(-16deg); }
    to   { transform: translateX(320%)  skewX(-16deg); }
}

/* Cijfer/prijs die kort optelt in aandacht. Subtiel, geen sprong. */
@keyframes ckPuls {
    0%, 100% { opacity: 1; }
    50%      { opacity: .72; }
}

/* Vangnet: alles tonen als er iets misgaat met de observer. */
@keyframes ckVangnet {
    to { opacity: 1; clip-path: none; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {

    /* ---------- 1. HERO ---------- */

    /* Het beeld veegt open en drijft daarna heel langzaam door. */
    html.ck-js body.home .wp-block-cover .wp-block-cover__image-background {
        animation:
            ckVeegOp 1100ms var(--ck-ease) both,
            ckHeroDrift 26s ease-out 1100ms both;
    }

    /* Kop, subkop, knop en link komen na elkaar op. */
    html.ck-js body.home .wp-block-cover h1 {
        animation: ckVeegLinks 900ms var(--ck-ease) 320ms both;
    }
    html.ck-js body.home .wp-block-cover .wp-block-cover__inner-container > p,
    html.ck-js body.home .wp-block-cover .wp-block-buttons {
        animation: ckRijs 700ms var(--ck-ease) both;
    }
    html.ck-js body.home .wp-block-cover .wp-block-cover__inner-container > p:nth-of-type(1) {
        animation-delay: 620ms;
    }
    html.ck-js body.home .wp-block-cover .wp-block-buttons {
        animation-delay: 780ms;
    }
    html.ck-js body.home .wp-block-cover .wp-block-cover__inner-container > p:last-of-type {
        animation-delay: 920ms;
    }

    /* De verticale accentlijn links groeit mee. */
    html.ck-js body.home .wp-block-cover .wp-block-cover__inner-container {
        animation: ckLijn 800ms var(--ck-ease) 240ms both;
        transform-origin: top;
    }

    /* ---------- 2. SECTIEKOPPEN ---------- */

    /* Kop veegt van links open, met een haarlijn eronder die uitgroeit. */
    html.ck-js .ck-reveal.ck-in > h2,
    html.ck-js h2.ck-reveal.ck-in {
        animation: ckVeegLinks 760ms var(--ck-ease) both;
    }
    html.ck-js .ck-eyebrow {
        position: relative;
        overflow: hidden;
    }
    html.ck-js .ck-reveal.ck-in .ck-eyebrow,
    html.ck-js .ck-in .ck-eyebrow {
        animation: ckVeegLinks 620ms var(--ck-ease) both;
    }

    /* ---------- 3. BEELD IN KAARTEN EN BANDEN ---------- */

    /* Categoriekaart: beeld veegt open, tekst komt na. */
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart img {
        animation: ckVeegOp 780ms var(--ck-ease) both;
    }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart figcaption {
        animation: ckRijs 620ms var(--ck-ease) both;
    }
    /* gestaffeld: elke kaart iets later */
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(1) img { animation-delay: 0ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(2) img { animation-delay: 90ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(3) img { animation-delay: 180ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(4) img { animation-delay: 240ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(5) img { animation-delay: 300ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(6) img { animation-delay: 350ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(n+7) img { animation-delay: 400ms; }

    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(1) figcaption { animation-delay: 300ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(2) figcaption { animation-delay: 390ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(3) figcaption { animation-delay: 480ms; }
    html.ck-js .ck-cat-grid.ck-in .ck-cat-kaart:nth-child(n+4) figcaption { animation-delay: 540ms; }

    /* Media-text-banden (Zo gaat een bestelling, Om te dragen). */
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__media img,
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__media {
        animation: ckVeegOp 900ms var(--ck-ease) both;
    }
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__content > * {
        animation: ckRijs 700ms var(--ck-ease) both;
    }
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__content > *:nth-child(1) { animation-delay: 200ms; }
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__content > *:nth-child(2) { animation-delay: 300ms; }
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__content > *:nth-child(3) { animation-delay: 400ms; }
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__content > *:nth-child(n+4) { animation-delay: 500ms; }

    /* ---------- 4. PRODUCTKAARTEN ---------- */

    html.ck-js ul.products.ck-in li.product,
    html.ck-js .ck-in .wc-block-product {
        animation: ckRijs 640ms var(--ck-ease) both;
    }
    html.ck-js ul.products.ck-in li.product:nth-child(1) { animation-delay: 0ms; }
    html.ck-js ul.products.ck-in li.product:nth-child(2) { animation-delay: 70ms; }
    html.ck-js ul.products.ck-in li.product:nth-child(3) { animation-delay: 140ms; }
    html.ck-js ul.products.ck-in li.product:nth-child(4) { animation-delay: 210ms; }
    html.ck-js ul.products.ck-in li.product:nth-child(n+5) { animation-delay: 270ms; }

    /* ---------- 5. TABELLEN EN LIJSTEN ---------- */

    html.ck-js .wp-block-table.ck-in tbody tr {
        animation: ckRijs 520ms var(--ck-ease) both;
    }
    html.ck-js .wp-block-table.ck-in tbody tr:nth-child(1) { animation-delay: 60ms; }
    html.ck-js .wp-block-table.ck-in tbody tr:nth-child(2) { animation-delay: 110ms; }
    html.ck-js .wp-block-table.ck-in tbody tr:nth-child(3) { animation-delay: 160ms; }
    html.ck-js .wp-block-table.ck-in tbody tr:nth-child(4) { animation-delay: 210ms; }
    html.ck-js .wp-block-table.ck-in tbody tr:nth-child(n+5) { animation-delay: 260ms; }

    /* ---------- 6. "EXTRA KANS"-BAND: glans die een keer overtrekt ---------- */

    html.ck-js .ck-kans { position: relative; overflow: hidden; }
    html.ck-js .ck-kans.ck-in::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 32%;
        background: linear-gradient(100deg,
            transparent 0%,
            rgba(255, 255, 255, .42) 50%,
            transparent 100%);
        animation: ckGlans 1500ms var(--ck-ease) 260ms both;
        pointer-events: none;
    }
    html.ck-js .ck-kans.ck-in .ck-kans__kaart {
        animation: ckRijs 660ms var(--ck-ease) both;
    }
    html.ck-js .ck-kans.ck-in .ck-kans__kaart:nth-child(1) { animation-delay: 120ms; }
    html.ck-js .ck-kans.ck-in .ck-kans__kaart:nth-child(2) { animation-delay: 220ms; }
    html.ck-js .ck-kans.ck-in .ck-kans__kaart:nth-child(3) { animation-delay: 320ms; }

    /* ---------- 7. FOOTER ---------- */

    html.ck-js .ck-footer.ck-in .ck-footer__kolom {
        animation: ckRijs 560ms var(--ck-ease) both;
    }
    html.ck-js .ck-footer.ck-in .ck-footer__kolom:nth-child(1) { animation-delay: 0ms; }
    html.ck-js .ck-footer.ck-in .ck-footer__kolom:nth-child(2) { animation-delay: 80ms; }
    html.ck-js .ck-footer.ck-in .ck-footer__kolom:nth-child(3) { animation-delay: 160ms; }
    html.ck-js .ck-footer.ck-in .ck-footer__kolom:nth-child(4) { animation-delay: 240ms; }

    /* ---------- 8. VANGNET ---------- */

    /* Wat na 3,5 seconde nog verborgen is, wordt alsnog getoond. Zonder dit
       kan een falende observer of een rare viewport inhoud wegpoetsen. */
    html.ck-js .ck-reveal:not(.ck-in) {
        animation: ckVangnet 1ms linear 3500ms both;
    }
}

/* Bij reduced-motion: geen beweging, maar wel alles zichtbaar. */
@media (prefers-reduced-motion: reduce) {
    html.ck-js .ck-reveal,
    html.ck-js .ck-reveal * {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- 9. HOVER-VERFIJNING (alleen op apparaten met een muis) ---------- */

@media (hover: hover) and (pointer: fine) {
    /* Productkaart: beeld schaalt, titel krijgt een onderlijn die uitgroeit. */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .wc-block-product .wc-block-components-product-name {
        display: inline-block;
        background-image: linear-gradient(var(--wp--preset--color--bronze, #9A7442),
                                          var(--wp--preset--color--bronze, #9A7442));
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 0% 1px;
        transition: background-size 420ms var(--ck-ease);
    }
    .woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
    .wc-block-product:hover .wc-block-components-product-name {
        background-size: 100% 1px;
    }

    /* Menulink: onderlijn veegt open in plaats van te verschijnen. */
    .wp-block-navigation .wp-block-navigation-item__content {
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 0% 1px;
        text-decoration: none !important;
        transition: background-size 320ms var(--ck-ease);
    }
    .wp-block-navigation .wp-block-navigation-item__content:hover,
    .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
        background-size: 100% 1px;
    }

    /* Knop: de vulling schuift in van onderen. */
    .wp-block-button.is-style-outline .wp-block-button__link {
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
    .wp-block-button.is-style-outline .wp-block-button__link::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--wp--preset--color--plum, #3D2440);
        transform: translateY(101%);
        transition: transform 380ms var(--ck-ease);
    }
    .wp-block-button.is-style-outline .wp-block-button__link:hover::before {
        transform: none;
    }
    .wp-block-button.is-style-outline .wp-block-button__link:hover {
        color: var(--wp--preset--color--paper, #FAF8F5) !important;
        border-color: var(--wp--preset--color--plum, #3D2440);
    }

    /* Categoriekaart: beeld iets dieper, kader licht op. */
    .ck-cat-kaart a { display: block; overflow: hidden; border-radius: 2px; }
    .ck-cat-kaart:hover img { transform: scale(1.045); }

    /* "Extra kans"-kaart: de pijl schuift een tikje door. */
    .ck-kans__cta { transition: border-color var(--ck-dur) var(--ck-ease),
                                color var(--ck-dur) var(--ck-ease); }
    .ck-kans__cta::after { display: inline-block; transition: transform 260ms var(--ck-ease); }
    .ck-kans__cta:hover::after { transform: translateX(4px); }
}

/* ---------- 10. FOCUS-ANIMATIE (toegankelijkheid) ---------- */

@media (prefers-reduced-motion: no-preference) {
    a:focus-visible, button:focus-visible {
        animation: ckPuls 900ms ease-in-out 1;
    }
}

/* ==========================================================================
   11. AANVULLINGEN DIE DE JS AANSTUURT
   ========================================================================== */

/* --- staffeling via --ck-i (de JS zet de index per kind) --- */
@media (prefers-reduced-motion: no-preference) {
    html.ck-js .ck-in > * { --ck-i: 0; }

    html.ck-js .wp-block-columns.ck-in > .wp-block-column,
    html.ck-js .ck-kans.ck-in .ck-kans__kaart,
    html.ck-js .ck-footer.ck-in .ck-footer__kolom,
    html.ck-js .wp-block-post-content > .wp-block-list.ck-in > li {
        animation: ckRijs 640ms var(--ck-ease) both;
        animation-delay: calc(var(--ck-i, 0) * 85ms);
    }
    html.ck-js .ck-cat-grid.ck-in > .ck-cat-kaart {
        animation: ckRijs 660ms var(--ck-ease) both;
        animation-delay: calc(var(--ck-i, 0) * 70ms);
    }
    html.ck-js ul.products.ck-in > li.product {
        animation: ckRijs 640ms var(--ck-ease) both;
        animation-delay: calc(var(--ck-i, 0) * 65ms);
    }
}

/* --- parallax: de JS zet --ck-par, de CSS gebruikt het --- */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
    html.ck-js .wp-block-cover__image-background {
        will-change: transform;
        transform: translate3d(0, var(--ck-par, 0px), 0) scale(1.06);
    }
    /* de hero-drift mag de parallax niet overschrijven: alleen bij eerste load */
    html.ck-js body.home .wp-block-cover .wp-block-cover__image-background {
        animation: ckVeegOp 1100ms var(--ck-ease) both;
    }
    html.ck-js .wp-block-media-text__media img {
        will-change: transform;
        transform: translate3d(0, calc(var(--ck-par, 0px) * -1), 0) scale(1.08);
    }
}

/* --- voortgangsbalk bovenaan --- */
.ck-voortgang {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 9999;
    background: linear-gradient(90deg,
        var(--wp--preset--color--bronze, #9A7442),
        var(--wp--preset--color--plum, #3D2440));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ck-voortgang { display: none; }
}

/* --- magnetische knop: de JS zet --ck-mx / --ck-my --- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .wp-block-button__link,
    .ck-kans__cta {
        transform: translate(var(--ck-mx, 0px), var(--ck-my, 0px));
        transition: transform 260ms var(--ck-ease),
                    background-color var(--ck-dur) var(--ck-ease),
                    color var(--ck-dur) var(--ck-ease),
                    box-shadow var(--ck-dur) var(--ck-ease);
    }
    .wp-block-button__link:hover {
        transform: translate(var(--ck-mx, 0px), calc(var(--ck-my, 0px) - 1px));
    }
}

/* --- teller --- */
[data-ck-tel] {
    font-family: var(--ck-display);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   12. MOBIEL - animaties horen daar ook, alleen lichter
   Op touch geen parallax (scroll-jank) en kortere duur, maar wel de
   veeg- en opkomsteffecten: die maken het verschil in gevoel.
   ========================================================================== */

@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
    html.ck-js .wp-block-cover__image-background,
    html.ck-js .wp-block-media-text__media img {
        transform: none !important;     /* geen parallax op touch */
    }
    html.ck-js body.home .wp-block-cover .wp-block-cover__image-background {
        animation: ckVeegOp 850ms var(--ck-ease) both;
    }
    html.ck-js body.home .wp-block-cover h1 {
        animation: ckVeegLinks 700ms var(--ck-ease) 200ms both;
    }
    /* staffeling korter houden: op een klein scherm scrollt men sneller */
    html.ck-js .ck-cat-grid.ck-in > .ck-cat-kaart,
    html.ck-js ul.products.ck-in > li.product {
        animation-duration: 520ms;
        animation-delay: calc(min(var(--ck-i, 0), 4) * 55ms);
    }
    html.ck-js .wp-block-media-text.ck-in .wp-block-media-text__media img {
        animation: ckVeegOp 700ms var(--ck-ease) both;
    }
}

/* Geen animatie bij printen. */
@media print {
    * { animation: none !important; transition: none !important; }
    .ck-voortgang { display: none; }
}

/* ============================================================
   12. SCHRIJVENDE HEROKOP
   ============================================================
   De kop op de homepage veegde eerst open. Dat las als een
   banner. Nu wordt hij geschreven: teken voor teken, met een
   cursor die meeloopt en pauzes die een mens nabootsen.

   Drie dingen zijn hier bewust:

   1. De tekens blijven `display: inline`. Zou ik ze inline-block
      maken, dan mag de browser midden in een woord afbreken en
      valt de kop uit elkaar op smalle schermen. Inline betekent
      wel dat `transform` niet werkt, dus animeren we alleen
      opacity. Dat is precies hoe typen eruitziet.

   2. De kop wordt door CSS verborgen zodra `ck-js` op <html>
      staat, en JS zet in dezelfde synchrone stap de tekens klaar.
      Zonder die twee samen flitst de volledige kop nog even in
      beeld voordat het schrijven begint.

   3. De cursor is nul pixels breed en tekent zichzelf met een
      ::after erbuiten. Een cursor met echte breedte verschuift
      de nog onzichtbare tekens en dan verspringt de regelval
      tijdens het typen.
   ============================================================ */

@keyframes ckKnipper {
    0%, 45%   { opacity: .9; }
    50%, 95%  { opacity: 0; }
    100%      { opacity: .9; }
}

@keyframes ckWoord {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Verbergen tot JS de tekens heeft klaargezet. */
html.ck-js .ck-schrijf-wacht {
    opacity: 0;
}

/* Zodra de tekens gesplitst zijn is het element zelf weer zichtbaar;
   de losse tekens zijn dan nog onzichtbaar. En de veeg-animatie uit
   sectie 1 moet hier wijken, anders lopen er twee door elkaar. */
html.ck-js .ck-schrijf {
    opacity: 1;
    animation: none !important;
    clip-path: none !important;
}

html.ck-js .ck-schrijf .ck-ch {
    opacity: 0;
}

html.ck-js .ck-schrijf .ck-ch.ck-aan,
html.ck-js .ck-schrijf.ck-af .ck-ch {
    opacity: 1;
}

/* Woord-voor-woord, voor de regel onder de kop. Tekens zijn daar te
   langzaam: een zin van honderd tekens laat je niet uittypen. */
html.ck-js .ck-schrijf-woorden {
    opacity: 1;
    animation: none !important;
}

html.ck-js .ck-schrijf-woorden .ck-wd {
    opacity: 0;
}

html.ck-js .ck-schrijf-woorden.ck-aan .ck-wd {
    animation: ckWoord 420ms var(--ck-ease) both;
    animation-delay: calc(var(--ck-w, 0) * 38ms);
}

html.ck-js .ck-schrijf-woorden.ck-af .ck-wd {
    opacity: 1;
    animation: none;
}

/* De cursor. Nul breed, tekent buiten zijn eigen box. */
.ck-caret {
    /* inline, niet inline-block: een inline-block van nul breed geeft de
       browser alsnog een afbreekkans, en dan springt de rest van het woord
       naar de volgende regel terwijl de cursor er middenin staat. */
    display: inline;
    position: relative;
}

.ck-caret::after {
    content: "";
    position: absolute;
    left: 0;
    top: .08em;
    bottom: .16em;
    width: 2px;
    background: currentColor;
    opacity: .9;
}

/* Stilstaan = knipperen. Tijdens het typen staat hij vast, dat leest
   rustiger dan een cursor die knippert terwijl er letters komen. */
.ck-caret.ck-knipper::after {
    animation: ckKnipper 1.05s steps(1, end) infinite;
}

.ck-caret.ck-weg::after {
    opacity: 0;
    transition: opacity 500ms ease-out;
    animation: none;
}

/* Bij reduced-motion raakt JS de kop niet aan, maar mocht er ooit een
   restklasse blijven staan, dan is de tekst hier gewoon zichtbaar. */
@media (prefers-reduced-motion: reduce) {
    .ck-schrijf-wacht,
    .ck-schrijf,
    .ck-schrijf-woorden { opacity: 1 !important; }
    .ck-ch, .ck-wd      { opacity: 1 !important; animation: none !important; }
    .ck-caret           { display: none; }
}

/* De knop en de onderste link wachten tot de kop is uitgeschreven. JS meet
   hoe lang dat duurt en zet --ck-na op de herocontainer. De waarde na de
   komma is de oude timing: die geldt zodra er niets geschreven wordt. */
html.ck-js body.home .wp-block-cover .wp-block-buttons {
    animation-delay: var(--ck-na, 780ms);
}

html.ck-js body.home .wp-block-cover .wp-block-cover__inner-container > p:last-of-type {
    animation-delay: calc(var(--ck-na, 780ms) + 160ms);
}

/* ============================================================
   13. BEELDBANDEN IN BEELD BRENGEN
   ============================================================
   De nieuwe banden (.ck-band, .ck-slot) en de beelden naast tekst
   komen met dezelfde veeg als de rest. Bij .ck-band veegt het beeld
   open van onder naar boven; dat leest als een gordijn dat opengaat
   en past bij een bioscoopuitsnede.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    html.ck-js .wp-block-image.ck-band.ck-reveal img {
        clip-path: inset(0 0 100% 0);
        transform: scale(1.06);
    }

    html.ck-js .wp-block-image.ck-band.ck-reveal.ck-in img {
        animation: ckBandOpen 1150ms var(--ck-ease) both;
    }

    /* De beginstand is opacity en GEEN clip-path. Een statische clip-path op
       het element dat de IntersectionObserver bekijkt maakt het snijvlak
       leeg: de observer ziet het element dan nooit in beeld komen. Gemeten
       kwam de slotband daardoor pas na 2,4s op, via het vangnet in plaats
       van via de observer, en op een pagina waar dat vangnet ook niet
       aanslaat pas na 5s. Opacity beinvloedt de observer niet, dus de
       veeg zit nu in de keyframe die na .ck-in start. */
    html.ck-js .wp-block-cover.ck-slot.ck-reveal {
        opacity: 0;
    }

    html.ck-js .wp-block-cover.ck-slot.ck-reveal.ck-in {
        animation: ckSlotOpen 1000ms var(--ck-ease) both;
    }
}

@keyframes ckSlotOpen {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ckBandOpen {
    from { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
    to   { clip-path: inset(0 0 0 0);    transform: scale(1); }
}

/* ============================================================
   14. SIGNATUURBAND IN BEWEGING
   ============================================================
   Zonder JS staat de band er gewoon: woord en kristal volledig
   getekend. Pas als de animatielaag draait (html.ck-js) wordt
   er iets verborgen, en de reveal-observer zet .ck-in zodra de
   band in beeld komt.

   Vier schrijfbewegingen na elkaar, samen ongeveer 7,3s:
     regel 1   0,15s  850ms   clip-veeg
     regel 2   0,65s  1700ms  clip-veeg, schrijfletter
     kristal   2,1s   3000ms  pen door de lettervormen
     tekening  5,0s   2300ms  lijn naar het kristal
   Dat is lang voor een animatie, maar dit is schrijven en geen
   overgang. Te snel en het leest als een veeg. De band staat
   onderaan de pagina en is bedoeld als rustmoment.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* De verborgen beginstand krijgt GEEN transitie. Stond die op de
       beginstand, dan animeert het moment waarop `ck-js` op <html> komt:
       de browser ziet de dashoffset van 0 naar 1 gaan en maakt daar een
       overgang van 4,2s van. Gemeten: de offset liep bij het laden juist
       OMHOOG (0,007 -> 0,019 -> 0,077), dus het pad gumde zichzelf uit in
       plaats van zich te tekenen. De transitie hoort op de EINDstand: een
       overgang gebruikt de transition-eigenschap van de nieuwe stijl. */
    html.ck-js .ck-signatuur .ck-sig-pen,
    html.ck-js .ck-signatuur .ck-sig-lijn {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

    html.ck-js .ck-signatuur.ck-in .ck-sig-pen {
        stroke-dashoffset: 0;
        /* Bijna rechtlijnig, met een zachte aanzet en een korte afremming.
           De kromme van AH (.62,.04,.7,.56) is veel sterker achterlastig:
           gemeten stond er na 1,2s nog 0,4% van het woord, en daarna kwam
           de rest in een sprint. Een hand schrijft gelijkmatiger. */
        transition: stroke-dashoffset 3000ms cubic-bezier(.30, .10, .50, .95) 2100ms;
    }

    html.ck-js .ck-signatuur.ck-in .ck-sig-lijn {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 2300ms cubic-bezier(.3, .5, .15, 1) 5000ms;
    }

    /* De glans trekt door de schrijfregel zodra de band in beeld is. */
    html.ck-js .ck-signatuur.ck-in .ck-sig-schrift {
        animation: ckGlansTekst 9s linear 600ms infinite;
    }

    /* De twee regels worden GESCHREVEN, niet gefade. Een clip-veeg van
       links naar rechts leest bij een schrijfletter als een hand die de
       regel neerzet. Een fade met een zetje omhoog leest als een banner,
       en daar ging de klacht over.

       LET OP de inset boven en onder: die staat op -14%, anders knipt de
       veeg de stokken en staarten van Parisienne af. En GEEN opacity als
       beginstand erbij, want dan zie je eerst niets en daarna een veeg
       over iets wat al zichtbaar had moeten zijn. */
    html.ck-js .ck-signatuur .ck-sig-lead,
    html.ck-js .ck-signatuur .ck-sig-schrift {
        clip-path: inset(-14% 100% -14% -3%);
    }

    html.ck-js .ck-signatuur.ck-in .ck-sig-lead {
        animation: ckSchrijfRegel 850ms cubic-bezier(.30, .08, .52, .96) 150ms both;
    }

    html.ck-js .ck-signatuur.ck-in .ck-sig-schrift {
        animation: ckSchrijfRegel 1700ms cubic-bezier(.26, .06, .5, .97) 650ms both,
                   ckGlansTekst 9s linear 2400ms infinite;
    }
}

@keyframes ckSchrijfRegel {
    from { clip-path: inset(-14% 100% -14% -3%); }
    to   { clip-path: inset(-14% -3% -14% -3%); }
}

@keyframes ckGlansTekst {
    from { background-position: 130% 0; }
    to   { background-position: -130% 0; }
}