/* ==========================================================================
   La tiza escribiendo en la pizarra.

   El recorrido de la mano (el <path> del partial) hace de mascara del texto y
   de rail de la tiza a la vez, asi que aqui solo hay que animar una cosa: el
   stroke-dashoffset del trazo. La tiza la mueve el <animateMotion> del SVG
   sobre ese mismo path, con la misma duracion y el mismo retardo.

   Si se cambian dur/begin hay que cambiarlos en los dos sitios.
   ========================================================================== */

.chalk-write {
    position: relative;
}

.chalk-write__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chalk-write__word {
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: 116px;
    font-weight: 700;
    fill: #edf5f1;
    opacity: 0.92;
}

/* Longitud del recorrido, medida con getTotalLength() sobre el path del
   partial (1420 unidades; redondeo hacia arriba para cubrirlo entero). Si se
   toca el trazo hay que volver a medirla.

   No sirve normalizar con pathLength="1": cuando el dash viene del CSS el
   navegador lo toma como pixeles y lo aplica sobre la longitud real, con lo
   que salian setecientos guiones diminutos y el texto aparecia de golpe. */
.chalk-write {
    --trace-length: 1430;
}

/* Estado de reposo: el trazo esta entero, asi que el texto se ve completo
   aunque no llegue a animarse nunca. */
.chalk-write__trace {
    stroke-dasharray: var(--trace-length);
    stroke-dashoffset: 0;
}

.chalk-write__stick {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .chalk-write__trace {
        stroke-dashoffset: var(--trace-length);
        animation: chalk-trace 2600ms linear 600ms forwards;
    }

    .chalk-write__stick {
        animation: chalk-stick 2600ms linear 600ms forwards;
    }
}

@keyframes chalk-trace {
    to {
        stroke-dashoffset: 0;
    }
}

/* La tiza aparece al empezar el primer trazo y se retira al terminar. */
@keyframes chalk-stick {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { opacity: 0; }
}