/* ══════════════════════════════════════════════════════════════════════════
   Client Report animation
   ══════════════════════════════════════════════════════════════════════════

   The animated mock PDF used by the homepage's "Automated Client Reporting"
   section — the section whose "Learn more" link points at
   /integrated-automated-client-reporting-made-easy/ — and by that page's own
   hero. One drawing of one claim, in the two places the claim is made.

   Moved here out of static-pages/home/body.css, byte for byte, so both pages
   draw the same report. Loaded only by the pages that ask for it, through the
   `styles` array in their deps.json rather than from shared.css, which
   functions.php enqueues site-wide for the CTA.

   Unlike anim-agent-chat.css and anim-knowledge-base.css there is nothing to
   resolve when reusing it: every state here is a pure CSS `infinite` keyframe
   with no script gating it, so the markup below animates wherever it is
   dropped. A copy carries its own motion.

   Deliberately left UNSCOPED, exactly as it was in home/body.css. Scoping it
   to .static-page would change the homepage's rendering, which is the one
   thing this move must not do; it is safe because the file is opt-in — a page
   that has not declared it in deps.json never downloads it.

   The `.crpt` element brings its own box (white, square, bordered, shadowed)
   from the utility classes on the markup, not from here. This file draws only
   what is inside it.
   ══════════════════════════════════════════════════════════════════════════ */

        /* ── Client Report animation ── */
        .crpt { font-family: var(--bodyfontfamily, system-ui, sans-serif); position: relative; overflow: hidden; padding: 20px 18px; display: flex; flex-direction: column; }
        .crpt__logo {
            display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px;
            opacity: 0; animation: crptFadeDown 8s ease infinite;
        }
        .crpt__logo-icon { position: relative; }
        .crpt__logo-icon svg { display: block; }
        .crpt__logo-name { font-size: 9px; font-weight: 700; color: #0F172A; }
        .crpt__hdr {
            display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px;
            opacity: 0; animation: crptFadeDown 8s ease infinite; animation-delay: .15s;
        }
        .crpt__label { font-size: 10px; font-weight: 700; color: #20796F; }
        .crpt__client { font-size: 13px; font-weight: 800; color: #0F172A; font-family: var(--headingsfontfamily, sans-serif); margin-top: 1px; }
        .crpt__date { font-size: 9px; font-weight: 600; color: #64748B; text-align: right; }
        .crpt__section {
            margin-bottom: 10px;
            opacity: 0; animation: crptFadeDown 8s ease infinite;
        }
        .crpt__section:nth-child(3) { animation-delay: .3s; margin-bottom: 0; }
        .crpt__section:nth-child(4) { animation-delay: .5s; }
        .crpt__section:nth-child(5) { animation-delay: .7s; }
        .crpt__section-title { font-size: 9px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
        .crpt__section-body { display: flex; gap: 10px; align-items: flex-start; }
        .crpt__lines { display: flex; flex-direction: column; gap: 5px; flex: 1; }
        .crpt__line {
            height: 8px; border-radius: 2px; background: #E2E8F0;
            transform: scaleX(0); transform-origin: left;
        }
        .crpt__section:nth-child(3) .crpt__line { animation: crptLineGrow 8s ease infinite; }
        .crpt__section:nth-child(4) .crpt__line { animation: crptLineGrow 8s ease infinite; animation-delay: .5s; }
        .crpt__section:nth-child(5) .crpt__line { animation: crptLineGrow 8s ease infinite; animation-delay: .7s; }
        .crpt__line:nth-child(1) { width: 85%; }
        .crpt__line:nth-child(2) { width: 100%; }
        .crpt__line:nth-child(3) { width: 70%; }
        @keyframes crptLineGrow {
            0%, 10% { transform: scaleX(0); }
            20%     { transform: scaleX(1); }
            85%     { transform: scaleX(1); }
            95%     { transform: scaleX(0); }
            100%    { transform: scaleX(0); }
        }
        @keyframes crptFadeDown {
            0%      { opacity: 0; transform: translateY(-6px); }
            8%      { opacity: 1; transform: translateY(0); }
            85%     { opacity: 1; transform: translateY(0); }
            95%     { opacity: 0; transform: translateY(0); }
            100%    { opacity: 0; transform: translateY(-6px); }
        }
        .crpt__donut {
            width: 95px; height: 95px; flex-shrink: 0; margin-top: -6px;
            opacity: 0; animation: crptDonutIn 8s ease infinite; animation-delay: .4s;
        }
        @keyframes crptDonutIn {
            0%, 12% { opacity: 0; transform: scale(.7) rotate(-30deg); }
            22%     { opacity: 1; transform: scale(1) rotate(0deg); }
            85%     { opacity: 1; transform: scale(1) rotate(0deg); }
            95%     { opacity: 0; transform: scale(.7) rotate(30deg); }
            100%    { opacity: 0; transform: scale(.7) rotate(-30deg); }
        }