/* ============================================================
   THE DRAWINGS (Pages/Shared/_Drawing.cshtml): their motion, and the two sizes they come in.
   Loaded by _Layout and _MarketingLayout, because the same drawings sit on the marketing site
   (the homepage's cards, /tour) and in the app (/Help, the empty states).

   Motion is once, on arrival: js/drawings.js marks a drawing .is-seen when 60% of it is in view,
   its shapes settle (.mv-*, each with its own --at delay, plus the row's --d), then the
   chartreuse line (.pen, pathLength 1) draws itself, then nothing moves again.

   Three rules hold it safe.
   1. Hidden-before-seen applies only under html.rf-draw, which the layouts' head script sets and
      takes away again after three seconds if drawings.js never arrives. A page whose script
      failed shows every drawing as it ends, never a drawing stuck half-hidden.
   2. Nothing here applies under prefers-reduced-motion: the drawing is simply there.
   3. "html body" outranks the homepage's CALM rule, which stops every animation inside a
      revealed block (".home [data-reveal] *:not([data-reveal])", marketing.css). That rule is
      right for everything else on the page; these drawings are its one stated exception.
   ============================================================ */
.rf-drawing { margin: 0; overflow: hidden; background: #0C1024; }
.rf-drawing svg { display: block; width: 100%; height: 100%; }
.rf-drawing--tile { width: 64px; height: 64px; border-radius: 15px; }
.rf-drawing--wide { width: 100%; max-width: 520px; aspect-ratio: 360 / 170; border-radius: 16px; }

@media (prefers-reduced-motion: no-preference) {
    html body .rf-drawing [class*="mv-"] { transform-box: fill-box; }
    html.rf-draw body .rf-drawing:not(.is-seen) .pen { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
    html.rf-draw body .rf-drawing:not(.is-seen) [class*="mv-"]:not(.mv-bump) { opacity: 0; }
    html body .rf-drawing.is-seen .pen { stroke-dasharray: 1 2; animation: rf-draw-pen 1.05s cubic-bezier(.45, 0, .3, 1) both !important; animation-delay: calc(var(--d, 0s) + var(--at, .5s)) !important; }
    html body .rf-drawing.is-seen .mv-rise { transform-origin: 50% 100%; animation: rf-draw-rise .8s cubic-bezier(.2, .9, .3, 1.12) both !important; animation-delay: calc(var(--d, 0s) + var(--at, .1s)) !important; }
    html body .rf-drawing.is-seen .mv-drop { animation: rf-draw-drop .7s cubic-bezier(.3, 1.35, .5, 1) both !important; animation-delay: calc(var(--d, 0s) + var(--at, .1s)) !important; }
    html body .rf-drawing.is-seen .mv-pop { transform-origin: 50% 50%; animation: rf-draw-pop .45s cubic-bezier(.3, 1.6, .5, 1) both !important; animation-delay: calc(var(--d, 0s) + var(--at, 1s)) !important; }
    html body .rf-drawing.is-seen .mv-show { animation: rf-draw-show .5s ease-out both !important; animation-delay: calc(var(--d, 0s) + var(--at, 1s)) !important; }
    html body .rf-drawing.is-seen .mv-sweep { transform-origin: 0 50%; animation: rf-draw-sweep .45s cubic-bezier(.5, 0, .3, 1) both !important; animation-delay: calc(var(--d, 0s) + var(--at, .4s)) !important; }
    html body .rf-drawing.is-seen .mv-bump { transform-origin: 50% 100%; animation: rf-draw-bump .5s ease-out both !important; animation-delay: calc(var(--d, 0s) + var(--at, 1.5s)) !important; }
    html body .rf-drawing.is-seen .mv-slide { animation: rf-draw-slide .8s cubic-bezier(.2, .8, .3, 1) both !important; animation-delay: calc(var(--d, 0s) + var(--at, .2s)) !important; }
    html body .rf-drawing.is-seen .mv-nudge { animation: rf-draw-nudge .6s cubic-bezier(.3, 1.3, .5, 1) both !important; animation-delay: calc(var(--d, 0s) + var(--at, 1s)) !important; }
    /* In the app a drawing plays the first time it is seen in a visit and is simply there after that
       (drawings.js marks it .rf-still): an empty state met five times a morning must not perform
       five times. The marketing site and the way in play every time; they are seldom seen twice. */
    html body .rf-drawing.is-seen.rf-still .pen, html body .rf-drawing.is-seen.rf-still [class*="mv-"] { animation: none !important; }
}
@keyframes rf-draw-pen { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes rf-draw-rise { from { transform: scaleY(.35); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rf-draw-drop { from { transform: translateY(-55%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rf-draw-pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rf-draw-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes rf-draw-sweep { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rf-draw-bump { 0%, 100% { transform: none; } 45% { transform: scale(1.09) rotate(-2deg); } }
@keyframes rf-draw-slide { from { transform: translateX(45%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rf-draw-nudge { from { transform: translateX(-170%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Where they sit in the app. A tile over an empty state's words, centred; a scene under a
   help category's heading. The marketing site's placements are sized in marketing.css. */
.rf-empty-art { width: 88px; margin: 0 auto 16px; }
.rf-empty-art .rf-drawing { width: 88px; height: 88px; border-radius: 20px; }
.hc-main .rf-drawing--wide { margin: 14px 0 24px; }

/* ---- The build (case "scene-building"). Not a once-through drawing: build.js sets classes on its
   <svg> from the build's real steps, so the drawing IS the progress. run-N while step N runs, on-N
   once it is done, n-K for how many tables there are (3 to 5). A part is pencilled in (dashed, .bg)
   while its step runs and stands, solid (.bs), once the step is done: the brief from the start,
   the tables and their links at 2, the records at 3, the views at 4, the reports at 5, the lamp at
   6. Only the build moves it, and under reduced motion it changes without moving. ---- */
.bscene .bs, .bscene .bg { opacity: 0; transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.bscene .bs { transform: translateY(8px); transform-box: fill-box; transform-origin: 50% 100%; }
.bscene .bs-1 { opacity: 1; transform: none; }
.bscene .bl { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .9s ease; }
.bscene.run-1 .bl, .bscene.on-1 .bl { stroke-dashoffset: 0; }
.bscene .bl-1 { transition-delay: .25s; }
.bscene .bl-2 { transition-delay: .5s; }
.bscene .bpen { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset 1s ease calc(.25s + var(--i, 0) * .22s); }
.bscene .bdot { opacity: 0; transition: opacity .3s ease calc(.9s + var(--i, 0) * .22s); }
.bscene.run-1 .bg-2, .bscene.run-2 .bg-2, .bscene.run-4 .bg-4, .bscene.run-5 .bg-5 { opacity: 1; }
.bscene.on-2 .bg-2, .bscene.on-4 .bg-4, .bscene.on-5 .bg-5 { opacity: 0; }
.bscene.on-2 .bs-2, .bscene.on-3 .bs-3, .bscene.on-4 .bs-4, .bscene.on-5 .bs-5, .bscene.on-6 .bs-6 { opacity: 1; transform: none; }
.bscene .bs-2, .bscene .bs-3 { transition-delay: calc(var(--i, 0) * .12s); }
.bscene.on-2 .bpen { stroke-dashoffset: 0; }
.bscene.on-2 .bdot { opacity: 1; }
.bscene.n-3 .tc-4, .bscene.n-3 .tc-5, .bscene.n-4 .tc-5 { display: none; }
@media (prefers-reduced-motion: reduce) {
    .bscene .bs, .bscene .bg, .bscene .bl, .bscene .bpen, .bscene .bdot { transition: none !important; }
}

/* A small tile over a short empty sentence: a list in a menu, a section of My Work. */
.rf-empty-art--sm { width: 56px; margin: 4px auto 12px; }
.rf-empty-art--sm .rf-drawing { width: 56px; height: 56px; border-radius: 14px; }