/* Woordmorph — "Lesmateriaal" morpht naar "Element" (over.html, de kaart
 * "Element — het platform"). Overgenomen uit prototypes/woordmorph/.
 *
 * Alle waarden komen uit de tokens van static/css/educatie.css (.site).
 * Geen losse hex, geen tweede designsysteem: dit bestand kent alleen tokens
 * en de klasse .morph.
 *
 * Bewust afwezig: transition, filter, text-shadow. Elke frame wordt door
 * morph.js gezet, en het systeem schrijft harde randen voor.
 */

.morph {
    --morph-size: clamp(38px, 9vw, 104px);
    --morph-regel: 1.18;

    position: relative;
    font: 800 var(--morph-size) / var(--morph-regel) var(--font-core);
    letter-spacing: 0;
    color: var(--text-strong);
    -webkit-font-smoothing: antialiased;

    /* Tot morph.js gemeten heeft staat alles nog op nul: dan liever niets
     * tonen dan één frame een stapel letters op elkaar. */
    opacity: 0;
}

.morph.is-gemeten {
    opacity: 1;
}

/* Het podium. Alle letters liggen hier absoluut in; de hoogte is precies
 * één regelbox, zodat de clip-path van een letter en de veeg van de
 * vormwissel op dezelfde hoogte rekenen. */
.morph__spoor {
    position: relative;
    height: calc(var(--morph-size) * var(--morph-regel));
}

/* De meetstrook: hier zet morph.js beide woorden even neer om per letter
 * een Range op te meten. Niet display:none — dan is er niets te meten. */
.morph__meet {
    position: absolute;
    inset: 0 auto auto 0;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
}

.morph__glyph {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    white-space: pre;
    will-change: transform, clip-path;
}

/* De vijf letters die het doelwoord niet haalt. Ze verkleuren naar steen
 * en worden er dan met een harde rand uit geveegd. */
.morph__glyph--uitval {
    color: var(--stone-300);
    transition: color var(--duration-fast) var(--ease-out);
}

.morph__glyph--uitval:not(.is-weg) {
    color: var(--text-strong);
}

/* De twee letters die van vorm wisselen (L->E, r->n). Twee lagen op elkaar,
 * gescheiden door één horizontale snede die naar beneden loopt. De breedte
 * zet morph.js: de bredere van de twee glyphs. */
.morph__glyph--wissel {
    bottom: 0;
    height: auto;
}

.morph__laag {
    position: absolute;
    top: 0;
    left: 0;
    white-space: pre;
    will-change: clip-path;
}

/* De snijrand is de merkbalk zelf: 3px groen, dezelfde die onder het woord
 * ligt. Iets breder dan de letter, zodat hij eroverheen snijdt in plaats van
 * er netjes binnen te blijven. */
.morph__snede {
    position: absolute;
    top: 0;
    left: -0.06em;
    right: -0.06em;
    height: var(--stroke-heavy);
    background: var(--green-500);
    opacity: 0;
    will-change: transform;
}

/* De merkbalk onder het woord. Basisbreedte 1px, breedte via scaleX zodat
 * het een transform blijft en geen layout. */
.morph__merkbalk {
    width: 1px;
    height: var(--stroke-heavy);
    margin-top: var(--space-5);
    background: var(--green-500);
    transform-origin: left center;
    will-change: transform;
}

/* Bij het doelwoord springt de balk naar oranje: de tweede stem van het
 * systeem, en het enige moment waarop je hem gebruikt. */
.morph.is-doel .morph__merkbalk {
    background: var(--orange-500);
    transition: background-color var(--duration-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .morph__snede {
        display: none;
    }
}