/* The skeleton of the parts under the hero (course/parts/skeleton.php) -- each of the page's own
   components drawn as its placeholder, in place, in the design's skeleton language (Figma 01.0): words
   become grey bars the length of the words, a paragraph grey lines, pictures and marks grey shapes;
   cards, chips and tiles keep their outline. Nothing changes size, so nothing moves when the page is
   revealed. Written against the components' own classes: a new component needs its lines here. */

/* The parts, shown after the same moment the hero's skeleton waits, and faded in again when real. */
.cil-course-page.is-loading :is(.cil-course-facts, .cil-course-notes, .cil-course-learn, .cil-course-faq, .cil-course-about, .cil-course-team, .cil-course-podcasts, .cil-course-testimonials, .cil-course-topics, .cil-course-related) {
    animation: cil-course-skel-in 0.25s ease 0.15s both;
}
.cil-course-page.is-revealed :is(.cil-course-facts, .cil-course-notes, .cil-course-learn, .cil-course-faq, .cil-course-about, .cil-course-team, .cil-course-podcasts, .cil-course-testimonials, .cil-course-topics, .cil-course-related) {
    animation: cil-course-skel-in 0.3s ease backwards;
}

/* ---- pictures and marks: gone, their frames grey ---- */
.cil-course-page.is-loading :is(.cil-course-facts, .cil-course-notes, .cil-course-team, .cil-course-podcasts, .cil-course-testimonials, .cil-course-topics, .cil-course-related) :is(img, svg) { visibility: hidden; }
.cil-course-page.is-loading :is(
    .cil-course-fact__tile, .cil-course-facts__logo, .cil-course-staff__photo, .cil-course-team__face,
    .cil-card__image, .cil-card__logo, .cil-card__factIcon, .cil-course-related__arrow,
    .cil-course-episode__cover, .cil-course-episode__play, .cil-course-episode__qrTile,
    .cil-course-testimonial__photo, .cil-course-testimonials__arrow
) { background: var(--cd-skel-shine) !important; border-color: transparent; box-shadow: none; animation: var(--cd-skel-sweep); }
.cil-course-page.is-loading :is(.cil-course-fact__tile, .cil-card__factIcon, .cil-course-related__arrow, .cil-course-episode__play, .cil-course-testimonial__photo, .cil-course-testimonials__arrow) { border-radius: 50%; }
/* The podcast's dark card keeps only its outline. */
.cil-course-page.is-loading .cil-course-episode { background: transparent; box-shadow: inset 0 0 0 1px var(--cil-black-light-4); }
.cil-course-page.is-loading .cil-course-episode__divider { background: var(--cil-black-light-4); }
.cil-course-page.is-loading .cil-course-testimonials__dots { visibility: hidden; }
.cil-course-page.is-loading .cil-course-facts__logo { border-radius: 24px; color: transparent; }
.cil-course-page.is-loading .cil-course-learn__check { color: transparent; background: var(--cd-skel-shine); border-radius: 50%; animation: var(--cd-skel-sweep); }
/* The title's tick goes into its bar: one grey pill, the tick's place and all. */
.cil-course-page.is-loading .cil-course-section-title::before,
.cil-course-page.is-loading .cil-course-topic__line { background: transparent; }
/* On the card's picture the pills would be the only thing drawn: they wait with the words. */
.cil-course-page.is-loading :is(.cil-card__topicTag, .cil-card__badges, .cil-card__more, .cil-card__sep, .cil-course-tip, .cil-course-faq .cilFaq__icon) { visibility: hidden; }

/* ---- a line of words: a grey bar as long as the words ---- */
.cil-course-page.is-loading :is(
    .cil-course-section-title,
    .cil-course-fact__label, .cil-course-fact__value > span:first-child, .cil-course-plans-line,
    .cil-course-meta__label, .cil-course-meta__value, .cil-course-meta__count, .cil-course-chip, .cil-course-pop__button,
    .cil-course-facts__toggle [data-cd-facts-toggle-label],
    .cil-course-about__more,
    .cil-course-staff__name, .cil-course-staff__role, .cil-course-staff__more > span,
    .cil-course-team__count, .cil-course-team__names, .cil-course-team__label,
    .cil-course-topic, .cil-course-related__all > span, .cil-course-faq .cilFaq__question, .cil-course-note__title,
    .cil-course-episode__show, .cil-course-episode__meta, .cil-course-episode__qrTitle, .cil-course-podcasts__all,
    .cil-course-testimonials__title, .cil-course-testimonial__name, .cil-course-testimonial__role, .cil-course-testimonial__more,
    .cil-card__partner, .cil-card__with, .cil-card__partnersMore, .cil-card__title a, .cil-card__factLabel
) {
    color: transparent !important;
    background: var(--cd-skel-shine) !important;
    border-color: transparent !important;
    border-radius: 999px;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: var(--cd-skel-sweep);
}
/* Blocks that would stretch the bar across their whole width hold it to their words. */
.cil-course-page.is-loading :is(.cil-course-section-title, .cil-course-about__more, .cil-course-staff__name, .cil-course-note__title, .cil-course-episode__words > *, .cil-course-episode__qrWords > *, .cil-course-testimonial__who > *) { width: fit-content; max-width: 100%; }
.cil-course-page.is-loading .cil-course-staff__role { border-radius: 8px; }

/* ---- a paragraph: a grey line under each line of words ---- */
.cil-course-page.is-loading :is(.cil-course-learn__points li > span, .cil-course-about__text :is(p, li, div), .cil-course-faq .cilFaq__answer, .cil-course-note__text, .cil-course-episode__title, .cil-course-episode__qrHint, .cil-course-testimonial__text) {
    color: transparent !important;
    background: var(--cd-skel-shine) !important;
    /* The lines are cut out of the swept grey: one under each line of words. */
    -webkit-mask: repeating-linear-gradient(to bottom, transparent 0 0.25em, #000 0.25em 0.95em, transparent 0.95em 1.2em);
    mask: repeating-linear-gradient(to bottom, transparent 0 0.25em, #000 0.25em 0.95em, transparent 0.95em 1.2em);
    text-decoration: none !important;
    animation: var(--cd-skel-sweep);
}
.cil-course-page.is-loading :is(.cil-course-about__text :is(p, li, div), .cil-course-faq .cilFaq__answer, .cil-course-note__text) * { color: transparent !important; background: none !important; }
/* The answer's lines inside its padding, where its words are. */
.cil-course-page.is-loading .cil-course-faq .cilFaq__answer { background-clip: content-box !important; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; }
/* A question's bar as long as the question, not the row. */
.cil-course-page.is-loading .cil-course-faq .cilFaq__question { flex: 0 1 auto; }
.cil-course-page.is-loading .cil-course-about__text li::marker { color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .cil-course-page:is(.is-loading, .is-revealed) :is(.cil-course-facts, .cil-course-notes, .cil-course-learn, .cil-course-faq, .cil-course-about, .cil-course-team, .cil-course-podcasts, .cil-course-testimonials, .cil-course-topics, .cil-course-related),
    .cil-course-page.is-loading :is(.cil-course-facts, .cil-course-notes, .cil-course-learn, .cil-course-faq, .cil-course-about, .cil-course-team, .cil-course-podcasts, .cil-course-testimonials, .cil-course-topics, .cil-course-related) * { animation: none !important; }
}