section {
    /* padding: 2em; */
}
before-after:not(:defined) [slot=after]{
    display: none;
}
[slot=before] {
    /* background: rgba(0 0 0 / .05);
    border: 4px solid white; */
}
[slot=after] {
    /* background: rgba(0 0 0 / .7); */
    /* border: 4px solid black; */
    -webkit-text-stroke: 1px white;
    text-shadow: 1px 1px 5px black;
    color: white;
}

@property --val {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
before-after.animated {
    animation: 4s ease-in-out 1s infinite alternate after;
}
@keyframes before {
    from {
        --val: 100;
    }
    to {
        --val: 0;
    }
}
@keyframes after {
    from {
        --val: 0;
    }
    to {
        --val: 100;
    }
}
before-after.toggle {
    animation: .5s ease normal both before;
    animation-composition: add;
}
before-after.toggle:has( + input:checked) {
    animation: .5s ease normal both after;
}