/* Move-in ready emblem — the "Ready Diamond". Used by the inventory table, the expanded
   home card, the printed inventory sheet and the community plat maps (js/move-in-ready.js).

   Everything here is drawn STATIC first: the check is closed, the gleam sits as a highlight
   on the crown and the spark is lit. Motion is added only inside
   `@media screen and (prefers-reduced-motion: no-preference)`, so the printed sheet and
   anyone who asks for less motion gets the finished mark, never a half-drawn one.

   Colours are the incentive palette (SW Iron Ore / SW Rojo Marron / light gold) so the
   emblem belongs next to the Paseo incentive blocks. --mir-bg is whatever the emblem is
   sitting on: the check disc is ringed in it so the mark reads as cut out of its pill. */
:root {
  --mir-gold: #DCC794; --mir-gold-hi: #F3E7C6; --mir-line: #B89B5E;
  --mir-rojo: #4B3029; --mir-bg: #FBF9F4;
}

/* ---------- the mark ---------- */
.mir-mark { width: 1.35em; height: 1.35em; flex: none; display: block; }
.mir-gem { fill: var(--mir-gold); stroke: var(--mir-line); stroke-width: 1; stroke-linejoin: round; }
.mir-facet { fill: none; stroke: var(--mir-line); stroke-width: .8; stroke-linejoin: round; stroke-linecap: round; opacity: .5; }
.mir-gleam { fill: var(--mir-gold-hi); opacity: .85; transform: translateX(14px) skewX(-18deg); }
.mir-gleam-2 { opacity: .45; transform: translateX(21px) skewX(-18deg); }
.mir-spark { fill: var(--mir-gold-hi); stroke: var(--mir-line); stroke-width: .5; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center; }
.mir-seal { transform-box: fill-box; transform-origin: center; }
.mir-disc { fill: var(--mir-rojo); stroke: var(--mir-bg); stroke-width: 1.5; }
.mir-check { fill: none; stroke: var(--mir-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the pill ---------- */
.mir-badge {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .22rem .58rem .22rem .34rem;
  background: linear-gradient(180deg, #FFFDF7, #F5EDDA);
  border: 1px solid var(--mir-line); color: var(--mir-rojo);
  font-family: var(--sans); font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
  --mir-bg: #FDFAF2;
}
.mir-badge .mir-mark { width: 1.9em; height: 1.9em; margin: -.1em 0; }
.mir-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* dark pill: the gem keeps the gold, the disc and check swap so the check still reads */
.mir-badge.is-dark { background: var(--mir-rojo); border-color: var(--mir-rojo); color: var(--mir-gold); --mir-bg: #4B3029; }
.mir-badge.is-dark .mir-disc { fill: var(--mir-gold); stroke: var(--mir-rojo); }
.mir-badge.is-dark .mir-check { stroke: var(--mir-rojo); }

/* ---------- inventory table: under the status pill ---------- */
.inv-st .mir-badge { display: flex; width: fit-content; margin-top: .34rem; white-space: nowrap; }
/* the middle widths are where the table is tightest (the generated table-fit rules already
   drop the Package column there), so the emblem shrinks and wraps rather than pushing
   price and completion off the row */
@media (min-width: 701px) and (max-width: 1200px) {
  .inv-st .mir-badge { font-size: .55rem; letter-spacing: .1em; white-space: normal; max-width: 6.4rem; }
}

/* the "Move-in ready" filter chip in the status chips */
.chip.chip-ready { display: inline-flex; align-items: center; gap: .4rem; --mir-bg: #FBF9F4; }
.chip.chip-ready .mir-mark { width: 1.15em; height: 1.15em; }
.chip.chip-ready.on { background: var(--mir-rojo); border-color: var(--mir-rojo); color: var(--mir-gold); --mir-bg: #4B3029; }
.chip.chip-ready.on .mir-disc { fill: var(--mir-gold); stroke: var(--mir-rojo); }
.chip.chip-ready.on .mir-check { stroke: var(--mir-rojo); }
.chip.chip-ready:hover { border-color: var(--mir-line); }

/* ---------- homepage "On the market now" cards: a ribbon on the photo ----------
   Bottom-left, so it clears the Available pill and the package medal at the top and reads
   the same way as the ribbon on the expanded inventory card. It rides inside .ib-card-img,
   so it scales with the photo on hover exactly like the pill above it. */
.ib-card-img .mir-badge {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  font-size: .58rem; padding: .26rem .62rem .26rem .38rem;
  box-shadow: 0 2px 10px rgb(30 22 18 / .4);
}
@media (max-width: 700px) { .ib-card-img .mir-badge { font-size: .55rem; } }

/* ---------- inventory detail: a ribbon on the photo ---------- */
.inv-photo-wrap { position: relative; flex: none; line-height: 0; }
.inv-photo-wrap .mir-badge.is-ribbon {
  position: absolute; left: .6rem; bottom: .6rem; font-size: .62rem;
  padding: .3rem .7rem .3rem .42rem; box-shadow: 0 2px 12px rgb(30 22 18 / .38);
}
@media (max-width: 700px) { .inv-photo-wrap { width: 100%; } }

/* ---------- plat maps ---------- */
.mir-map { pointer-events: none; }
.mir-halo { fill: rgb(220 199 148 / .34); stroke: rgb(184 155 94 / .6); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center; }
.mir-seat { fill: #FDFAF2; stroke: var(--mir-line); stroke-width: 1; }
.cm-item-ready { margin-top: .4rem; }
.cm-item-ready .mir-badge { font-size: .55rem; }
.plat-legend .mir-lg { display: inline-flex; align-items: center; gap: .4rem; --mir-bg: #FAF7F1; }
.plat-legend .mir-lg .mir-mark { width: 1.25em; height: 1.25em; }
.plat-tooltip .tt-ready {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem;
  color: var(--mir-gold); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  --mir-bg: #2A2722;
}
.plat-tooltip .tt-ready .mir-mark { width: 1.2em; height: 1.2em; }

/* ---------- motion (screen only, and only when it is welcome) ----------
   One 3.2s bar, in order: the gem swells and glows, two gleams sweep it (the second
   trailing the first, so it double-flashes), a sheen crosses the pill, the two sparks
   catch the light in turn, the seal pops, then everything rests for about a second.
   Nothing here changes layout — it is all transform, opacity and filter. */
@media screen and (prefers-reduced-motion: no-preference) {
  .mir-mark { animation: mir-breathe 3.2s ease-in-out infinite; }
  .mir-gleam { animation: mir-sweep 3.2s cubic-bezier(.35, 0, .15, 1) infinite; }
  .mir-gleam-2 { animation: mir-sweep 3.2s cubic-bezier(.35, 0, .15, 1) .22s infinite; }
  .mir-spark { animation: mir-twinkle 3.2s ease-in-out infinite; }
  .mir-spark-2 { animation: mir-twinkle 3.2s ease-in-out 1.15s infinite; }
  .mir-seal { animation: mir-pop 3.2s cubic-bezier(.34, 1.56, .64, 1) infinite; }
  .mir-check { stroke-dasharray: 9.2; stroke-dashoffset: 9.2; animation: mir-draw .75s .3s cubic-bezier(.65, 0, .35, 1) forwards; }
  .mir-halo { animation: mir-pulse 2.4s ease-out infinite; }

  /* the sheen only exists while it is moving — a stationary band across the pill would
     just look like a printing fault */
  .mir-badge::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .6) 50%, transparent 62%);
    animation: mir-shine 3.2s ease-in-out infinite;
  }
  .mir-badge.is-dark::after { background: linear-gradient(105deg, transparent 38%, rgb(220 199 148 / .34) 50%, transparent 62%); }
  .mir-badge { transition: transform .25s cubic-bezier(.23, 1, .32, 1), box-shadow .25s ease; }
  .cm-item:hover .mir-badge, .inv-row:hover .mir-badge { transform: translateY(-1px); }
}
@keyframes mir-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgb(220 199 148 / 0)); }
  15% { transform: scale(1.08); filter: drop-shadow(0 0 4px rgb(220 199 148 / .9)); }
  42% { transform: scale(1); filter: drop-shadow(0 0 1px rgb(220 199 148 / .25)); }
}
@keyframes mir-sweep {
  0% { transform: translateX(-12px) skewX(-18deg); }
  26%, 100% { transform: translateX(34px) skewX(-18deg); }
}
@keyframes mir-shine {
  0% { transform: translateX(-130%); }
  30%, 100% { transform: translateX(130%); }
}
@keyframes mir-twinkle {
  0%, 8%, 32%, 100% { opacity: 0; transform: scale(.3) rotate(-30deg); }
  17% { opacity: 1; transform: scale(1.15) rotate(5deg); }
  24% { opacity: .3; transform: scale(.65) rotate(15deg); }
}
@keyframes mir-pop {
  0%, 45%, 100% { transform: scale(1); }
  56% { transform: scale(1.18); }
  70% { transform: scale(1); }
}
@keyframes mir-draw { to { stroke-dashoffset: 0; } }
@keyframes mir-pulse {
  0% { transform: scale(.8); opacity: .95; }
  70%, 100% { transform: scale(1.3); opacity: 0; }
}

/* ---------- printed inventory sheet ----------
   Flat, solid, no gleam — the mark has to survive a mono laser printer as well as the PDF,
   so it is the gem + check outline with print-color-adjust holding the fills. */
@media print {
  .mir-badge {
    display: flex; width: fit-content; margin-top: .7mm; gap: .9mm;
    padding: .3mm 1.3mm .3mm .7mm; background: #fff; border: .5pt solid #b89b5e;
    color: #4b3029; font-size: 5.8pt; letter-spacing: .1em; line-height: 1.15;
    box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .mir-mark { width: 3mm; height: 3mm; }
  .mir-badge .mir-mark { width: 3.4mm; height: 3.4mm; }
  .mir-badge.is-dark { background: #4b3029; border-color: #4b3029; color: #dcc794; }
  .mir-gleam { display: none; }
  .mir-gem { fill: #dcc794; stroke: #8d7440; stroke-width: 1.2; }
  .mir-facet { stroke: #8d7440; opacity: .6; }
  .mir-spark { fill: #f3e7c6; stroke: #8d7440; }
  .mir-disc { fill: #4b3029; stroke: #fff; }
  .mir-check { stroke: #dcc794; stroke-dashoffset: 0; }
  .mir-map, .mir-halo { display: none; }
}