/* **************** */

body .content-footer-read-story .read-story-label {
    color: var(--secondary-colour, #888);
}
body .content-footer-read-story .read-story-attention {
    opacity: var(--attention-rect-opacity, 0.8);
}
body .content-footer-read-story .read-story-attention .read-story-attention-anim {
    background-color: var(--attention-rect-colour, rgb(255, 140, 0)); /* no alpha here */
}


/* In use when overlays active */
.pages[data-overlays="enabled"] .content-footer-read-story {
    display: flex;
}


/* Read story hidden if overlay is visible */
.overlay-visible .content-footer-read-story {
    opacity: 0;
}
.content-footer-read-story {
    transition:
        opacity 1s linear 0s
        ;
}


/* 'Read story' text appears only until the user clicks on it */
.content-footer-read-story .read-story-label {
    overflow: hidden;

    opacity: 1;
    max-width: 100%;
    transition:
        /* Smooth opacity transition */
        opacity 1s linear 0s,
        /* Once it's all translucent we collapse size otherwise
        cursor pointer will be wrong on invisible-but-present container. */
        max-width 0s linear 1s;
}
body.overlay-has-been-visible .content-footer-read-story .read-story-label {
    opacity: 0;
    max-width: 0;
}


/* 'Read story' text sliding right effect */
body.overlay-has-been-visible .content-footer-read-story .read-story-label .read-story-text {
    transform: translateX(150%);
    transition:
        transform 1s linear 0s;
}


/* Attention animations */
.active .attention-anim-a {
    animation: attention-anim-10-a 10s linear infinite;
}
.active .attention-anim-b {
    animation: attention-anim-10-b 10s linear infinite;
}