/* Somente os elementos do desenho se movem; o conteúdo e a área ocupada já estão no HTML. */
@media (prefers-reduced-motion: no-preference) {
    .sketch-entered :is(.record-layer, .sketch-sheet, .sk-note) {
        animation: sketch-settle .85s var(--sheet-delay, 0s) cubic-bezier(.2,.75,.25,1) backwards;
    }
    .sketch-entered :is(.record-finance, .sk-ledger-back, .sk-folder-back, .sk-access-back, .sk-agenda, .sk-pass) {
        --sheet-x: -7px; --sheet-y: 12px; --sheet-angle: -2deg;
    }
    .sketch-entered :is(.record-family, .sk-ledger-mid, .sk-ballot, .sk-shop) {
        --sheet-x: 5px; --sheet-delay: .26s;
    }
    .sketch-entered :is(.record-main, .sk-ledger-front, .sk-company-left, .sk-company-right, .sk-folder-front, .sk-access-front) {
        --sheet-delay: .54s;
    }
    .sketch-entered :is(.sk-small, .sk-note, .sk-report, .sk-agenda-tab) {
        --sheet-x: 8px; --sheet-y: 4px; --sheet-delay: .68s;
    }

    /* Cadastro, arquivo e caixa: as fichas se compõem antes dos campos internos. */
    .sketch-entered :is(.record-fields i, .sk-ledger-rules, .sk-news b, .sk-agenda-lines i) {
        transform-origin: left;
        animation: sketch-draw-across .68s .79s ease-out backwards;
    }
    .sketch-entered :is(.sk-branch, .sk-network-line) {
        transform-origin: top center;
        animation: sketch-draw-across .65s .28s ease-out backwards;
    }
    .sketch-entered .sk-file-tabs i {
        animation: sketch-file .56s calc(.56s + var(--stagger, 0s)) ease-out backwards;
    }

    /* Contribuições e rede conveniada: a leitura precede a confirmação do vínculo. */
    .sketch-entered .sk-barcode { position: relative; overflow: hidden; }
    .sketch-entered .sk-barcode::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(90deg, transparent 42%, #fff4cf 49%, #b97725 50%, transparent 57%);
        opacity: 0;
        animation: sketch-scan .88s .16s ease-in-out;
    }
    .sketch-entered :is(.sk-small, .sk-note, .sk-agenda-tab)::after {
        content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: inherit;
        pointer-events: none; opacity: 0;
        animation: sketch-accent .86s .9s ease-out;
    }
    .sketch-entered .sk-file-row i {
        animation: sketch-point .66s .24s ease-out;
    }

    /* As faixas da agenda marcam horários; as da colônia ocupam períodos. */
    .sketch-entered :is(.sk-calendar-grid i, .sk-bars i) {
        transform-origin: center bottom;
        animation: sketch-grow .78s calc(.42s + var(--stagger, 0s)) cubic-bezier(.2,.7,.3,1) backwards;
    }
    .sketch-entered .sk-occupancy i {
        transform-origin: left;
        animation: sketch-draw-across .72s calc(.32s + var(--stagger, 0s)) ease-out backwards;
    }
    .sketch-entered:is(.sk-archive, .sk-voting) .sk-bars i {
        animation-delay: calc(.9s + var(--stagger, 0s));
    }

    /* Jurídico e acessos: aparecem as relações entre registros e permissões. */
    .sketch-entered .sk-timeline span::before {
        animation: sketch-point .6s calc(.27s + var(--stagger, 0s)) ease-out;
    }
    .sketch-entered .sk-timeline span::after {
        transform-origin: top;
        animation: sketch-grow .42s calc(.3s + var(--stagger, 0s)) ease-out backwards;
    }
    .sketch-entered .sk-permissions b {
        animation: sketch-point .66s calc(.72s + var(--stagger, 0s)) ease-out;
    }

    /* Votação e publicação: cédula, apuração e blocos editoriais mantêm suas formas finais. */
    .sketch-entered .sk-ballot-options i::after {
        transform-origin: left;
        animation: sketch-draw-across .55s calc(.43s + var(--stagger, 0s)) ease-out backwards;
    }
    .sketch-entered .sk-news > i {
        animation: sketch-file .7s .24s ease-out backwards;
    }
    .sketch-entered :is(.sk-file-tabs, .sk-calendar-grid, .sk-occupancy, .sk-bars, .sk-ballot-options, .record-fields) > :nth-child(2) { --stagger: .1s; }
    .sketch-entered :is(.sk-file-tabs, .sk-calendar-grid, .sk-occupancy, .sk-bars, .record-fields) > :nth-child(3) { --stagger: .2s; }
    .sketch-entered :is(.sk-occupancy, .sk-bars, .record-fields) > :nth-child(4) { --stagger: .3s; }
    .sketch-entered .sk-timeline span:nth-child(2) { --stagger: .36s; }
    .sketch-entered .sk-timeline span:nth-child(3) { --stagger: .72s; }
    .sketch-entered .sk-permissions b:nth-of-type(2) { --stagger: .12s; }
    .sketch-entered .sk-permissions b:nth-of-type(3) { --stagger: .24s; }
    .sketch-entered .sk-permissions b:nth-of-type(4) { --stagger: .36s; }
}

@keyframes sketch-settle {
    from { translate: var(--sheet-x, 0px) var(--sheet-y, 8px); rotate: var(--sheet-angle, 0deg); }
    to { translate: 0 0; rotate: 0deg; }
}
@keyframes sketch-draw-across { from { scale: .18 1; } to { scale: 1 1; } }
@keyframes sketch-grow { from { scale: 1 .22; } to { scale: 1 1; } }
@keyframes sketch-file { from { translate: 0 6px; opacity: .64; } to { translate: 0 0; opacity: 1; } }
@keyframes sketch-point { 0%,100% { scale: 1; } 50% { scale: 1.28; box-shadow: 0 0 0 3px #adc8e35c; } }
@keyframes sketch-accent { 0%,100% { opacity: 0; } 35% { opacity: .62; } }
@keyframes sketch-scan {
    0% { translate: -100% 0; opacity: 0; }
    12%,82% { opacity: 1; }
    100% { translate: 100% 0; opacity: 0; }
}