/* --- Sætningerne i profetsidens hero ---------------------------------------

   Heroen viste før syv koranvers sat med stor arabisk skrift. Nu står der
   korte sætninger om profeterne, én ad gangen.

   To ting bærer designet:

   Alle sætningerne ligger oven på hinanden i det samme felt i gitteret, så
   feltet er lige så højt som den længste af dem. Skifter slideren, står den
   næste sætning præcis dér, hvor den forrige stod, og heroen springer ikke i
   højden. Uden det ville siden hoppe atten gange i minuttet.

   Skiftet er en indtoning med et lille løft nedefra. Den nye sætning tones ind
   lidt efter den gamle er tonet ud, så de to ikke står oven i hinanden.
--------------------------------------------------------------------------- */

.prophet-lines {
    width: min(100%, 1040px);
    color: #fff;
}

/* --- Overskriften over sætningerne ---------------------------------------- */

.prophet-lines-eyebrow {
    margin: 0 0 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--gold, #e7bd70);
    font: 750 0.72rem/1.4 var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Stregen løber ud fra ordet og fylder resten af linjen — den samme figur som
   guldstregen over citatet gjorde før. */
.prophet-lines-eyebrow::after {
    content: "";
    flex: 1;
    max-width: 220px;
    height: 1px;
    background: linear-gradient(90deg, #e7bd70, rgba(231, 189, 112, 0));
}

/* --- Selve sætningerne ----------------------------------------------------- */

/* Feltet er et gitter med ét felt. Alle sætningerne lægges i det, så højden er
   den længstes, og ingen af dem flytter de andre. */
.prophet-lines-stage {
    display: grid;
    align-items: start;
}

.prophet-line {
    grid-area: 1 / 1;
    margin: 0;
    max-width: 26ch;
    color: #fff;
    font: 500 clamp(1.9rem, 3.4vw, 3.15rem)/1.22 var(--sans);
    letter-spacing: -0.015em;
    text-wrap: balance;

    visibility: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.75s ease,
        transform 0.9s cubic-bezier(0.2, 0.72, 0.2, 1),
        visibility 0s linear 0.75s;
}

.prophet-line.is-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    /* Den nye sætning venter, til den gamle er tonet ud. */
    transition-delay: 0.16s, 0.16s, 0s;
}

/* --- Tælleren, tidslinjen og pauseknappen ---------------------------------- */

.prophet-lines-foot {
    margin-top: 2.1rem;
    max-width: 320px;
}

/* Stregen viser de femten sekunder gå. Uden den ser slideren ud til at stå
   stille, fordi der er så længe mellem skiftene. */
.prophet-lines-track {
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
}

.prophet-lines-track > i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gold, #e7bd70);
    transform: scaleX(0);
    transform-origin: left;
}

@keyframes prophet-line-time {
    to {
        transform: scaleX(1);
    }
}

.prophet-lines.is-running:not(.is-suspended) .prophet-lines-track > i {
    animation: prophet-line-time var(--line-duration, 15000ms) linear forwards;
}

/* --- Skærme uden højde at give -------------------------------------------- */

@media (max-width: 860px) {
    .prophet-line {
        max-width: none;
    }

    .prophet-lines-foot {
        margin-top: 1.7rem;
    }
}

/* --- Når brugeren har bedt om ro ------------------------------------------- */

/* Skriptet holder skiftet i ro af sig selv. Her fjernes bevægelsen i selve
   indtoningen, så en sætning, der alligevel skiftes med knappen, ikke glider. */
@media (prefers-reduced-motion: reduce) {
    .prophet-line {
        transform: none;
        transition: opacity 0.2s linear, visibility 0s linear 0.2s;
    }

    .prophet-line.is-active {
        transition-delay: 0s, 0s;
    }

    .prophet-lines-track > i {
        animation: none;
    }
}