/**
 * The PDF defect report, drawn as SVG pages in PDF points (A4, 595.28 × 841.89).
 * Layout, wording and colours follow the real report
 * (services/api/src/services/defect-report/render-pdf.ts, copy.ts, severity.ts):
 * one Major finding scores 74 (a Major caps the score at 74), two score 72
 * (100 − 14 − 14), both grade C, "Needs attention". The report is
 * English-only, so these pages are too.
 *
 * Home #heal shows the cover on the Auto Heal clock (--hs-t, css/heal-scene.css):
 * the badge is marked when the window finds it and the page is rated when the
 * window says "Added to the PDF report". /agencies #receipts shows the cover and
 * the findings page as a 12 s loop (.dr-stack, played while on screen).
 * Decorative: the copy beside them carries the meaning.
 */

.dr-paper {
    position: relative;
    aspect-ratio: 595.28 / 841.89;
    overflow: hidden;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 18px 36px -24px rgba(0, 0, 0, 0.6);
}

.dr-paper svg {
    display: block;
    width: 100%;
    height: 100%;
    font-family: 'Inter', system-ui, sans-serif;
}

/* The score arc: 74 of 100 unless the ring sets --dr-gap (100 − score) */
.dr-ring {
    stroke-dasharray: 100 100;
    stroke-dashoffset: var(--dr-gap, 26);
}

/* ── Home: the cover on the Auto Heal clock ───────────────────────────── */
.heal-sheet .dr-paper { transform: rotate(1.5deg); }
.heal-sheet .dr-mark { animation: drHomeMark var(--hs-t) linear infinite; }
.heal-sheet .dr-ring { animation: drHomeRing var(--hs-t) linear infinite; }
.heal-sheet .dr-score { animation: drHomeScore var(--hs-t) linear infinite; }
.heal-sheet .dr-count { animation: drHomeCount var(--hs-t) linear infinite; }
.heal-sheet .dr-verdict { animation: drHomeVerdict var(--hs-t) linear infinite; }

@keyframes drHomeMark {
    0%, 22% { opacity: 0; }
    25%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drHomeRing {
    0%, 58% { stroke-dashoffset: 100; }
    68%, 95% { stroke-dashoffset: var(--dr-gap, 26); }
    100% { stroke-dashoffset: 100; }
}

@keyframes drHomeScore {
    0%, 62% { opacity: 0; }
    66%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drHomeCount {
    0%, 64% { opacity: 0; }
    68%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drHomeVerdict {
    0%, 67% { opacity: 0; }
    71%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── /agencies: the cover fills in, then the findings page lands on it ── */
.dr-stack {
    --dr-t: 12s;
    position: relative;
    aspect-ratio: 1 / 1.1;
}

.dr-stack .dr-paper {
    position: absolute;
    width: 76%;
}

.dr-stack .dr-paper--cover {
    left: 0;
    top: 0;
    transform: rotate(-2deg);
}

.dr-stack .dr-paper--findings {
    right: 0;
    bottom: 0;
    transform: rotate(1.5deg);
}

.dr-stack .dr-mark { animation: drMark var(--dr-t) linear infinite; }
.dr-stack .dr-ring { animation: drRing var(--dr-t) linear infinite; }
.dr-stack .dr-score { animation: drScore var(--dr-t) linear infinite; }
.dr-stack .dr-count { animation: drCount var(--dr-t) linear infinite; }
.dr-stack .dr-verdict { animation: drVerdict var(--dr-t) linear infinite; }
.dr-stack .dr-paper--findings { animation: drFindings var(--dr-t) linear infinite; }
.dr-stack .dr-card { animation: drCard var(--dr-t) linear infinite; }
.dr-stack .dr-crops { animation: drCrops var(--dr-t) linear infinite; }
.dr-stack .dr-notes { animation: drNotes var(--dr-t) linear infinite; }
.dr-stack .dr-mark--2 { animation-name: drMark2; }
.dr-stack .dr-card--2 { animation-name: drCard2; }
.dr-stack .dr-crops--2 { animation-name: drCrops2; }
.dr-stack .dr-notes--2 { animation-name: drNotes2; }

.dr-stack:not(.is-playing) *,
.dr-stack:not(.is-playing) .dr-paper { animation-play-state: paused; }

@keyframes drMark {
    0%, 8% { opacity: 0; }
    11%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drMark2 {
    0%, 11% { opacity: 0; }
    14%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drRing {
    0%, 14% { stroke-dashoffset: 100; }
    25%, 96% { stroke-dashoffset: var(--dr-gap, 26); }
    100% { stroke-dashoffset: 100; }
}

@keyframes drScore {
    0%, 20% { opacity: 0; }
    24%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drCount {
    0%, 22% { opacity: 0; }
    26%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drVerdict {
    0%, 25% { opacity: 0; }
    29%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drFindings {
    0%, 34% { opacity: 0; transform: translateY(4px) rotate(1.5deg); }
    39%, 93% { opacity: 1; transform: rotate(1.5deg); }
    97%, 100% { opacity: 0; transform: rotate(1.5deg); }
}

@keyframes drCard {
    0%, 41% { opacity: 0; }
    44%, 100% { opacity: 1; }
}

@keyframes drCrops {
    0%, 45% { opacity: 0; }
    49%, 100% { opacity: 1; }
}

@keyframes drNotes {
    0%, 50% { opacity: 0; }
    54%, 100% { opacity: 1; }
}

/* The second finding lands below the first */
@keyframes drCard2 {
    0%, 56% { opacity: 0; }
    59%, 100% { opacity: 1; }
}

@keyframes drCrops2 {
    0%, 60% { opacity: 0; }
    64%, 100% { opacity: 1; }
}

@keyframes drNotes2 {
    0%, 65% { opacity: 0; }
    69%, 100% { opacity: 1; }
}

@media (max-width: 899.98px) {
    .heal-sheet .dr-paper { transform: none; }
}

/* Reduced motion: the finished pages, nothing moves */
@media (prefers-reduced-motion: reduce) {
    .dr-stack *,
    .dr-stack .dr-paper { animation: none !important; }
}