/* ============================================================
   MASTO a Testaccio — line-art motifs
   Sizing, colour variants, draw-in transition, reduced motion.
   Pairs with assets/js/motifs.js (injects sprite + IntersectionObserver).

   Markup:  <svg class="motif motif--wine" data-motif="romani"></svg>
   ============================================================ */

.motif {
  display: block;
  width: clamp(56px, 14vw, 80px);
  height: auto;
  aspect-ratio: 1 / 1;
  flex: none;
  overflow: visible;
  color: var(--wine-mid, #8E1C2C);
}

/* Stroke style. The sprite also carries these as presentation attributes
   (so a raw <use href="assets/img/motifs.svg#m-…"> still looks right),
   but hydrated motifs are plain paths in the page and need the CSS. */
.motif > * {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- sizes (mobile-first, all fluid) ---------- */
.motif--xs { width: clamp(36px, 9vw, 46px); }
.motif--sm { width: clamp(44px, 11vw, 58px); }
.motif--lg { width: clamp(84px, 22vw, 132px); }

/* ornaments keep their own proportions */
.motif--wide { aspect-ratio: 160 / 130; width: clamp(112px, 28vw, 180px); }
.motif--rule { aspect-ratio: 360 / 40;  width: min(320px, 80%); }

/* ---------- colour ---------- */
.motif--wine  { color: var(--wine-mid, #8E1C2C); }
.motif--deep  { color: var(--wine, #6E1220); }
.motif--gold  { color: var(--gold, #9C7B41); }
.motif--ink   { color: var(--ink, #241F1D); }
.motif--soft  { color: var(--ink-soft, #5B524C); opacity: .68; }
.motif--paper { color: var(--paper-2, #F4EDE0); }

/* ============================================================
   Draw-in. Every path in the sprite carries pathLength="1", so one
   dasharray value normalises across strokes of any real length.

   The undrawn state lives behind .motifs-ready, which motifs.js adds
   only when it is actually going to animate. No JS / no IO / reduced
   motion  ->  the motif is simply there, fully drawn.
   ============================================================ */

.motifs-ready .motif > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset 1s cubic-bezier(.22, .61, .36, 1),
    opacity .28s linear;
}

.motifs-ready .motif.is-drawn > * {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* stagger: outline first, interior detail after */
.motifs-ready .motif > *:nth-child(1)  { transition-delay: 0s; }
.motifs-ready .motif > *:nth-child(2)  { transition-delay: .07s; }
.motifs-ready .motif > *:nth-child(3)  { transition-delay: .14s; }
.motifs-ready .motif > *:nth-child(4)  { transition-delay: .21s; }
.motifs-ready .motif > *:nth-child(5)  { transition-delay: .28s; }
.motifs-ready .motif > *:nth-child(6)  { transition-delay: .35s; }
.motifs-ready .motif > *:nth-child(7)  { transition-delay: .42s; }
.motifs-ready .motif > *:nth-child(8)  { transition-delay: .49s; }
.motifs-ready .motif > *:nth-child(9)  { transition-delay: .56s; }
.motifs-ready .motif > *:nth-child(10) { transition-delay: .63s; }
.motifs-ready .motif > *:nth-child(11) { transition-delay: .70s; }
.motifs-ready .motif > *:nth-child(n+12) { transition-delay: .77s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .motifs-ready .motif > *,
  .motifs-ready .motif.is-drawn > * {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transition: none;
    transition-delay: 0s;
  }
}