/* Loading splash (markup: src/splash.ts, seeds, fill and exit: splash.js). Uses the --pm-* primitives from style.css.
 * The isotype in Deep Charcoal on Zest & Life (owner's pick; about 12:1), nothing else on screen.
 * 1. A dashed blueprint draws in (CSS, --pm-blueprint).
 * 2. Once their outlines are drawn, seeds fill one by one, slowly while the page loads; the rest quickly once it is
 *    ready (splash.js). About 2.3s in all on a fast load.
 * 3. The whole mark fills solid, holds, and the splash fades out with a quick zoom (splash.js).
 * Seeds, fill and exit animate transform/opacity only; the line drawing is stroke-dashoffset on a handful of paths. */

.pm-splash { display: none; }

html.pm-splash-on .pm-splash {
  --pm-blueprint: 1s;   /* dashed blueprint draw-in; splash.js never finishes the mark before this */
  --pm-line: 7px;       /* stroke width in isotype units (viewBox is 979 tall): about 1.3–2.4px on screen */
  --pm-dash: 24px;      /* dash length, same units (round caps add half the stroke width at each end) */
  --pm-dash-gap: 20px;  /* gap between dashes, same units */
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  min-height: 100vh; min-height: 100dvh;
  padding: 16px;
  background: var(--pm-zest);
  touch-action: none; user-select: none; -webkit-user-select: none;
  /* Failsafe with no JS at all: gone after 9s even if splash.js never runs. */
  animation: pm-splash-failsafe 0.5s ease 9s forwards;
}

.pm-splash-stage { display: grid; place-items: center; will-change: transform; }

.pm-mark {
  position: relative;
  height: clamp(180px, 38vh, 330px); height: clamp(180px, 38dvh, 330px);
  aspect-ratio: 632.3 / 979.28;
  will-change: transform;
}
.pm-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

.pm-outline { fill: none; }
/* Dashed outline with softly rounded ends. */
.pm-dashes { stroke: var(--pm-charcoal); stroke-width: var(--pm-line); stroke-linecap: round; stroke-dasharray: var(--pm-dash) var(--pm-dash-gap); }
/* The mask draws the blueprint in; it is wider than the dashes so it uncovers them whole. */
.pm-mask { stroke: #fff; stroke-width: calc(var(--pm-line) * 6); stroke-linecap: round; }
.pm-mask path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: pm-draw var(--pm-blueprint) cubic-bezier(0.45, 0, 0.25, 1) forwards; }
.pm-mask .pm-line-leaf { animation-delay: calc(var(--pm-blueprint) * 0.15); animation-duration: calc(var(--pm-blueprint) * 0.85); }
.pm-mask .pm-line-seed { animation-delay: calc(var(--pm-blueprint) * 0.1); animation-duration: calc(var(--pm-blueprint) * 0.7); }

.pm-fill { fill: var(--pm-charcoal); opacity: 0; will-change: opacity; }

.pm-seed { position: absolute; display: block; overflow: visible; fill: var(--pm-charcoal); opacity: 0; will-change: transform, opacity; }

@keyframes pm-draw { to { stroke-dashoffset: 0; } }
@keyframes pm-splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Reduced motion: no drawing or zoom. The outline fades in whole, seeds and fill fade in, the splash fades out. */
@media (prefers-reduced-motion: reduce) {
  .pm-mask path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .pm-outline { animation: pm-fade-in 0.5s ease both; }
  @keyframes pm-fade-in { from { opacity: 0; } }
}