/* ---------------------------------------------------------------------------
   motion-picture.css - styles for the animated drawings and for pictures drawn by
   Views/Shared/_ProjectMotionPicture.cshtml (Mechanical build, Step 2b).
   Works with wwwroot/js/motion-scenes.js (its header comment lists the contract this file fulfils).
   Everything is scoped under .mp, so it cannot change any other element of a page.

   Colours come from the page that shows the picture, so a drawing matches every template:
     stroke  = --mp-stroke, else the template's accent (--acc, --hv-acc, --pp-acc, --pf-primary), else the text colour
     labels  = --mp-muted, else the text colour at 62%
   A template can set --mp-stroke / --mp-muted on any parent to override.
   --------------------------------------------------------------------------- */
@property --d { syntax: '<number>'; inherits: true; initial-value: 0; }

.mp {
    --mp-ink: var(--mp-stroke, var(--acc, var(--hv-acc, var(--pp-acc, var(--pf-primary, currentColor)))));
    --mp-soft: var(--mp-muted, color-mix(in srgb, currentColor 62%, transparent));
    display: block;
    position: relative;
    min-width: 0;
}

/* no JavaScript, or a key the script does not know: nothing to show, so no empty box */
.mp--drawing:empty { display: none; }

/* ----- the drawing ----- */
.mp .art { --d: 1; display: block; width: 100%; height: auto; fill: none; stroke: var(--mp-ink); stroke-width: 1.6; stroke-linejoin: round; overflow: visible; }
.mp .dr { --d: 0; transition: --d 1.8s ease; }
.mp .dr.in { --d: 1; }
.mp .p { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d)); }
.mp .cl { stroke-dasharray: 8 4 2 4; opacity: .5; stroke-width: 1; }
.mp .fl { stroke-dasharray: 6 6; opacity: .8; }
.mp .ln { stroke-width: 3; stroke-linecap: round; }
.mp .bt { stroke-dasharray: 2 10; stroke-width: 6; opacity: .45; }
.mp .dot { fill: var(--mp-ink); }
.mp .art text { fill: var(--mp-soft); stroke: none; font: 500 11px ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace; letter-spacing: .08em; }
.mp .art .ld { stroke: var(--mp-soft); stroke-width: 1; opacity: .7; }

/* ----- an uploaded picture ----- */
.mp--image .mp-img { display: block; width: 100%; height: auto; }
.mp-fit-whole .mp-img { object-fit: contain; }
.mp-fit-fill .mp-img { object-fit: cover; }

/* ----- fill a card's thumbnail box (the box must be position: relative; every card thumbnail already is) ----- */
.mp--fill { position: absolute; inset: 14px; }
.mp--fill .art { height: 100%; }
.mp--fill.mp--image { inset: 0; }
.mp--fill .mp-img { height: 100%; }

/* ----- card adaptations ----- */
/* Editorial and Pharmacy cards always print the project name over the thumbnail: keep the drawing above it */
.ed-thumb .mp--fill, .ph-thumb .mp--fill { inset: 12px 12px 56px; }
/* profile cards: the cover sits under the darkening overlay, like the uploaded picture (.pp-pj-img) */
.pp-pj .mp--fill { z-index: -2; }

@media (prefers-reduced-motion: reduce) {
    .mp .dr { --d: 1; transition: none; }
}