/*
 * Przyklad dzialania na /jerzyk (PL i EN) odgrywany przewijaniem:
 * podswietla sie fragment pisma, a obok pojawia sie odpowiedz modelu,
 * ktora z niego wynika. Na koncu data terminu. Pierwsza para (rodzaj
 * pisma) stoi od poczatku, zeby karta odpowiedzi nie wygladala na pusta.
 *
 * Sam CSS (view-timeline). Stan bez animacji to stan koncowy, wiec
 * przegladarki bez obslugi, niskie ekrany i osoby z ograniczeniem ruchu
 * widza po prostu gotowy przyklad, tak jak wczesniej.
 */

/* Zaznaczenia w pismie: turkus marki zamiast zoltego <mark>. */
.example-letter .hl {
    color: inherit;
    padding: 1px 2px;
    border-radius: 3px;
    background-color: #ccfbf1;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Numer przy fragmencie i przy wierszu, zeby bylo widac, co z czego wynika. */
.hl-num {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: 2px;
}

/* Numer wydluza etykiete, wiec odstep od wartosci obok. */
.example-result .data-table td:first-child {
    padding-right: 16px;
}

/* Podpis stoi pod przykladem, poza przyklejona czescia, zeby ta byla nizsza. */
.example-caption {
    max-width: 760px;
    margin-top: 20px;
    font-size: 14px;
    color: #80868b;
    line-height: 1.6;
}

.example-caption p {
    margin: 0 0 6px;
}

@supports (animation-timeline: view()) {
    /*
     * Przyklad musi sie zmiescic pod naglowkiem strony; na niskich ekranach
     * (maly telefon, poziomo) zostaje statyczny.
     */
    @media (prefers-reduced-motion: no-preference) and (min-width: 769px) and (min-height: 600px),
           (prefers-reduced-motion: no-preference) and (min-height: 760px) {
        /*
         * Dlugi kontener, w ktorym przyklad stoi przyklejony pod naglowkiem
         * strony. Postep animacji = przewiniecie tego kontenera.
         */
        .example-scroll {
            --example-sticky-top: 80px;
            height: 200svh;
            view-timeline-name: --jerzyk-example;
        }

        .example-stage {
            position: sticky;
            top: var(--example-sticky-top);
            padding: 16px 0;
        }

        .example-scroll .hl,
        .example-scroll .example-letter .hl-num,
        .example-scroll .example-result tr {
            animation-timeline: --jerzyk-example;
            animation-fill-mode: both;
            animation-timing-function: linear;
        }

        .example-scroll .hl {
            animation-name: example-highlight;
        }

        .example-scroll .example-letter .hl-num {
            animation-name: example-pop;
        }

        .example-scroll .example-result tr {
            animation-name: example-row-in;
        }

        .example-scroll .step-2 { animation-range: contain 6% contain 22%; }
        .example-scroll .step-3 { animation-range: contain 32% contain 48%; }
        .example-scroll .step-4 { animation-range: contain 58% contain 74%; }

        /* Odpowiedz pojawia sie odrobine po zaznaczeniu, a nie rownoczesnie. */
        .example-scroll .example-result .step-2 { animation-range: contain 14% contain 28%; }
        .example-scroll .example-result .step-3 { animation-range: contain 40% contain 54%; }

        /* Pierwsza para widoczna od razu, bez animacji. */
        .example-scroll .example-letter .step-1,
        .example-scroll .example-result .step-1 {
            animation: none;
        }
    }
}

@keyframes example-highlight {
    from { background-color: transparent; }
    to { background-color: #ccfbf1; }
}

/* Numer czeka szary w tekscie, zeby nie zostawiac dziury, i zapala sie na turkus. */
@keyframes example-pop {
    from { background-color: #e5e7eb; color: #9ca3af; }
    to { background-color: #0f766e; color: #fff; }
}

@keyframes example-row-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}