/* ============================================================================
   THE JOURNAL STORY BLOCKS IN MOTION (12 Nov 2026) — inc/journal/class-journal-motion.php.
   Same one style as the story blocks in journal.css: white card, violet for the data, brand colours only.
   Loaded only on a story that uses [ssj_scale], [ssj_island] or [ssj_slot].
   The class "ssjm-on" is put on <html> by journal-motion.js ONLY when the reader's device allows motion; without
   it (no script, or "reduce motion") every block simply shows its finished state.
   ============================================================================ */

/* ---- bars on one shared scale */
.ssj .ssjm-scale__row{margin-top:16px}
.ssj .ssjm-scale__row:first-of-type{margin-top:0}
.ssj .ssjm-scale__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.ssj .ssjm-scale__top span{font-size:15px;font-weight:500;color:var(--navy);min-width:0}
.ssj .ssjm-scale__top b{font-size:17px;font-weight:700;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.ssj .ssjm-scale__row.is-big .ssjm-scale__top b{color:var(--v)}
.ssj .ssjm-scale__track{height:18px;border-radius:999px;background:var(--vt);overflow:hidden}
.ssj .ssjm-scale__bar{display:block;height:100%;min-width:4px;border-radius:999px;background:var(--v);transform-origin:left center}
.ssj .ssjm-scale__row.is-big .ssjm-scale__bar{background:var(--v)}
body .ssj .ssj-body .ssjm-scale__times{margin-top:16px;font-size:16px;line-height:1.5;font-weight:700;color:var(--v)}
.ssj .ssjm-scale__foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--soft)}
.ssj .ssjm-scale__foot span{font-size:14px;font-weight:500;line-height:1.3;color:var(--navy);background:var(--vu);border:1px solid var(--vb);border-radius:999px;padding:7px 14px}

/* ---- the island with numbered pins */
.ssj .ssjm-island__grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:center}
.ssj .ssjm-island__map{background:var(--vu);border-radius:12px;padding:10px}
.ssj .ssjm-island__map svg{display:block;width:100%;height:auto;overflow:visible}
.ssj .ssjm-coast{fill:#fff;stroke:var(--vb);stroke-width:1.2;stroke-linejoin:round}
.ssj .ssjm-area{opacity:.22}
.ssj .ssjm-pin{cursor:pointer;outline:none}
.ssj .ssjm-pin circle{stroke:#fff;stroke-width:1.1}
.ssj .ssjm-pin text{font:700 5.6px "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;fill:#fff;pointer-events:none}
.ssj .ssjm-pin--access text{fill:#090920}
.ssj .ssjm-pin__in{transform-box:fill-box;transform-origin:center;transition:transform .15s}
.ssj .ssjm-pin:hover .ssjm-pin__in,.ssj .ssjm-pin:focus-visible .ssjm-pin__in,.ssj .ssjm-pin.is-on .ssjm-pin__in{transform:scale(1.3)}
.ssj .ssjm-pin:focus-visible circle,.ssj .ssjm-pin.is-on circle{stroke:#090920;stroke-width:1.4}
.ssj .ssjm-pin--sea:focus-visible circle,.ssj .ssjm-pin--sea.is-on circle{stroke:var(--v)}
.ssj .ssjm-island__side{display:flex;flex-direction:column;gap:16px;min-width:0}
.ssj .ssjm-island__info{min-height:118px;border-radius:14px;background:var(--vu);border:1px solid var(--vb);padding:16px 18px;display:flex;flex-direction:column;gap:3px;justify-content:center}
.ssj .ssjm-island__hint{font-size:14px;color:var(--t2)}
.ssj .ssjm-island__info em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v)}
.ssj .ssjm-island__info b{font-size:18px;line-height:1.3;color:var(--navy)}
.ssj .ssjm-island__info span{font-size:15px;line-height:1.45;color:var(--navy)}
.ssj .ssjm-island__info i{font-style:normal;font-size:15px;font-weight:700;color:var(--v)}
.ssj .ssjm-key{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--t2)}
.ssj .ssjm-key span{display:inline-flex;align-items:center;gap:6px}
.ssj .ssjm-key i{width:12px;height:12px;border-radius:50%;flex:none}

/* ---- a place kept for a picture that is still to come (draft only) */
.ssj .ssjm-slot__box{aspect-ratio:16/9;border-radius:12px;background:#fff;border:1px dashed var(--vb);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--t2);font-size:14px;text-align:center;padding:12px}
.ssj .ssjm-slot__box b{font-size:22px;color:var(--v)}

@media (max-width:760px){
  .ssj .ssjm-island__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ssj .ssjm-island__map{max-width:300px;width:100%;margin:0 auto}
  .ssj .ssjm-island__info{min-height:112px}
  .ssj .ssjm-scale__top{flex-direction:column;align-items:flex-start;gap:2px}
  .ssj .ssjm-scale__foot span{font-size:13px;padding:6px 12px}
}

/* ---- the motion: once, when the block comes into view; never for "reduce motion" (ssjm-on is then not set) */
.ssjm-on .ssj .ssjb-stat{opacity:0;transform:translateY(8px);transition:opacity .35s ease-out,transform .35s ease-out}
.ssjm-on .ssj .ssjb-stats.is-in .ssjb-stat{opacity:1;transform:none}
.ssjm-on .ssj .ssjb-stats.is-in .ssjb-stat.ssjm-late{transition-delay:1.1s}

.ssjm-on .ssj .ssjb-bar__fill{transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.ssjm-on .ssj .ssjb-bar__val{opacity:0;transition:opacity .3s ease-out;transition-delay:calc(var(--i,0) * 80ms + .45s)}
.ssjm-on .ssj .is-in .ssjb-bar__fill{transform:none}
.ssjm-on .ssj .is-in .ssjb-bar__val{opacity:1}

.ssjm-on .ssj .ssjm-scale__bar{transform:scaleX(0);transition:transform .35s ease-out}
.ssjm-on .ssj .ssjm-scale__row.is-big .ssjm-scale__bar{transition:transform 1s cubic-bezier(.2,.7,.2,1) .35s}
.ssjm-on .ssj .ssjm-scale.is-in .ssjm-scale__bar{transform:none}
.ssjm-on .ssj .ssjm-scale__times{opacity:0;transform:translateY(6px);transition:opacity .3s ease-out 1.2s,transform .3s ease-out 1.2s}
.ssjm-on .ssj .ssjm-scale.is-in .ssjm-scale__times{opacity:1;transform:none}

.ssjm-on .ssj .ssjm-pin__in{opacity:0;transform:translateY(-7px) scale(.6);transition:opacity .3s ease-out,transform .3s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--i,0) * 90ms)}
.ssjm-on .ssj .ssjm-island.is-in .ssjm-pin__in{opacity:1;transform:none}
.ssjm-on .ssj .ssjm-island.is-done .ssjm-pin__in{transition:transform .15s;transition-delay:0s}
.ssjm-on .ssj .ssjm-island.is-done .ssjm-pin:hover .ssjm-pin__in,.ssjm-on .ssj .ssjm-island.is-done .ssjm-pin:focus-visible .ssjm-pin__in,.ssjm-on .ssj .ssjm-island.is-done .ssjm-pin.is-on .ssjm-pin__in{transform:scale(1.3)}
.ssjm-on .ssj .ssjm-area{opacity:0;transition:opacity .6s ease-out .2s}
.ssjm-on .ssj .ssjm-island.is-in .ssjm-area{opacity:.22}

.ssjm-on .ssj .ssjb-date{opacity:0;transform:translateY(8px);transition:opacity .35s ease-out,transform .35s ease-out;transition-delay:calc(var(--i,0) * 200ms)}
.ssjm-on .ssj .ssjb-dates.is-in .ssjb-date{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ssj .ssjb *,.ssj .ssjb{transition:none!important;animation:none!important}
}