/* A component that is still waiting for its pictures (whole.js): grey placeholders in its own
   layout, as the design's loading frames draw them (Figma 38-24 and 2256-25, "loading") -- words as
   bars of their own length, pictures as grey blocks, marks and pills hidden. The page's header,
   title, toolbar and footer stay as they are.

   Only with the page's script (the head adds .cil-ctl-js), so a visitor without it sees the page
   itself. .cil-ctl-skel is on a whole component, or on a single card "show more" is adding. */

.cil-ctl-js { --cil-ctl-sk: var(--cil-black-light-2); }

.cil-ctl-js .cil-ctl-skel,
.cil-ctl-js .cil-card.cil-ctl-skel { pointer-events: none; animation: cil-ctl-sk-pulse 1.6s ease-in-out infinite; }
@keyframes cil-ctl-sk-pulse { 50% { opacity: .62; } }

/* The moment it shows, it shows together. */
.cil-ctl-js .is-shown { animation: cil-ctl-sk-in .4s ease-out; }
@keyframes cil-ctl-sk-in { from { opacity: .3; } }

/* ---- Words: bars as long as the words they stand for ---- */
.cil-ctl-js .cil-ctl-skel :is(.cil-ctl-count__num, .cil-ctl-count__for, .cil-ctl-more__status,
                               .cil-card__partner, .cil-card__with, .cil-card__partnersMore, .cil-card__factLabel),
.cil-ctl-js .cil-card.cil-ctl-skel :is(.cil-card__partner, .cil-card__with, .cil-card__partnersMore, .cil-card__factLabel) {
    color: transparent !important;
    background-color: var(--cil-ctl-sk);
    border-radius: 999px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Where a line is taller than its words -- a heading, a link set level with it, a card's title held to
   two lines -- the bar is drawn thin at the line's start, as the design's loading frames have it. */
.cil-ctl-js .cil-ctl-skel :is(.cil-ctl-sectionHead__title, .cil-ctl-sectionHead__text, .cil-ctl-sectionHead__link, .cil-card__title a),
.cil-ctl-js .cil-card.cil-ctl-skel .cil-card__title a {
    color: transparent !important;
    background: linear-gradient(var(--cil-ctl-sk), var(--cil-ctl-sk)) no-repeat;
    background-size: 100% 14px; background-position: right center;
}
.cil-ctl-js .cil-ctl-skel .cil-ctl-sectionHead__title { background-size: 100% 26px; width: fit-content; }
.cil-ctl-js .cil-ctl-skel .cil-ctl-sectionHead__text { width: fit-content; background-size: 100% 12px; }
.cil-ctl-js .cil-ctl-skel .cil-card__title a,
.cil-ctl-js .cil-card.cil-ctl-skel .cil-card__title a { background-size: 85% 12px; background-position: right top 6px; }
.cil-ctl-js .lang-to-css-ltr .cil-ctl-skel :is(.cil-ctl-sectionHead__title, .cil-ctl-sectionHead__text, .cil-ctl-sectionHead__link) { background-position: left center; }
.cil-ctl-js .lang-to-css-ltr .cil-ctl-skel .cil-card__title a, .cil-ctl-js .lang-to-css-ltr .cil-card.cil-ctl-skel .cil-card__title a { background-position: left top 6px; }
.cil-ctl-js .cil-ctl-skel :is(.cil-ctl-sectionHead__title, .cil-ctl-sectionHead__text, .cil-ctl-sectionHead__link, .cil-card__title a),
.cil-ctl-js .cil-card.cil-ctl-skel .cil-card__title a { border-radius: 999px; }
.cil-ctl-js .cil-ctl-skel .cil-ctl-sectionHead__title::before { background: var(--cil-ctl-sk); }

/* ---- Pictures: grey blocks where they will be ---- */
.cil-ctl-js .cil-ctl-skel img,
.cil-ctl-js .cil-card.cil-ctl-skel img { opacity: 0; }
/* The category's photo is its own block, so it is moved out of itself instead of hidden. */
.cil-ctl-js .cil-ctl-skel img.cil-ctl-hero__photo { opacity: 1; object-position: -99999px 0; }
.cil-ctl-js .cil-ctl-skel :is(.cil-card__image, .cil-card__logo, .cil-ctl-hero__photo),
.cil-ctl-js .cil-card.cil-ctl-skel :is(.cil-card__image, .cil-card__logo) { background-color: var(--cil-ctl-sk); }
.cil-ctl-js .cil-ctl-skel .cil-ctl-hero__photo { background-color: var(--cil-ctl-sk); }
.cil-ctl-js .cil-ctl-skel :is(.cil-ctl-mosaic__tile, .cil-ctl-catCard__photo) {
    background-image: none !important; background-color: var(--cil-ctl-sk); outline-color: transparent;
}
.cil-ctl-js .cil-ctl-skel .cil-logo-tile { width: 72%; margin-inline: auto; background: var(--cil-ctl-sk); }

/* ---- Marks, pills and buttons: hidden, or a grey pill where a button will be ---- */
.cil-ctl-js .cil-ctl-skel :is(svg, .cil-ctl-mosaic__label, .cil-ctl-catCard__name, .cil-ctl-catCard__go,
                               .cil-card__badges, .cil-card__more, .cil-card__sep, .cil-card__image > :not(a)),
.cil-ctl-js .cil-card.cil-ctl-skel :is(svg, .cil-card__badges, .cil-card__more, .cil-card__sep, .cil-card__image > :not(a)) { visibility: hidden; }
.cil-ctl-js .cil-ctl-skel .cil-ctl-more__go { color: transparent; background: var(--cil-ctl-sk); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .cil-ctl-js .cil-ctl-skel, .cil-ctl-js .cil-card.cil-ctl-skel, .cil-ctl-js .is-shown { animation: none; }
}