/* ============================================================================
   SHELFIE case study — hero title-card + the "board game journey" interactive.
   Slate & Steel theme (matches the app). Scoped under .shelfie-card and
   #shelfie-journey so nothing leaks into the rest of the case study.
   ========================================================================== */

/* ---- hero title-card ---------------------------------------------------- */
.shelfie-card {
  --fx: rgba(91,155,213,.55);
  position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12%;
  background: linear-gradient(180deg, #1a1f2b 0%, #12151d 55%, #0d0f15 100%);
  border: 1px solid rgba(91,155,213,.3); box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.shelfie-card::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 42%, rgba(91,155,213,.16), rgba(0,0,0,0) 62%); }
.shelfie-card > * { position: relative; z-index: 1; }
.shelfie-card__knight { font-size: clamp(30px, 6vw, 46px); color: #5b9bd5; line-height: 1; filter: drop-shadow(0 2px 8px rgba(91,155,213,.5)); }
.shelfie-card__name { font-family: var(--font-head); font-weight: 900; font-size: clamp(38px, 9vw, 64px); letter-spacing: -1px; color: #fff; line-height: 1; }
.shelfie-card__sub { font-family: var(--font-head); font-weight: 700; font-size: clamp(10px, 1.7vw, 12.5px); letter-spacing: .22em; text-transform: uppercase; color: #6d85a8; }

/* ========================================================================
   #shelfie-journey — the board game
   ======================================================================== */
#shelfie-journey {
  --sb-accent: #5b9bd5; --sb-meeple: #eef1f8;
  --sb-text: #e8eaf0; --sb-muted: #8090a8; --sb-line: rgba(255,255,255,.1);
  max-width: 760px; margin: 30px auto 0; color: var(--sb-text);
  background: linear-gradient(180deg, #141824, #0e1016); border: 1px solid var(--sb-line);
  border-radius: 16px; padding: 22px; box-shadow: 0 24px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
#shelfie-journey *, #shelfie-journey *::before, #shelfie-journey *::after { box-sizing: border-box; }

/* ---- the board ---- */
#shelfie-journey .sb-board {
  --fx: rgba(91,155,213,.42);
  position: relative; width: 100%; aspect-ratio: 2 / 1; min-height: 230px;
  background: radial-gradient(130% 150% at 50% -10%, #212a3e, #10131c 72%);
  border: 1px solid var(--sb-line); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 2px 22px rgba(0,0,0,.55); transition: box-shadow .4s ease;
}
#shelfie-journey .sb-board.is-won { box-shadow: inset 0 2px 22px rgba(0,0,0,.4), 0 0 0 1px #3fb6b2, 0 0 26px rgba(63,182,178,.5); }
#shelfie-journey .sb-path { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ONE continuous strip, split into coloured BANDS that touch edge-to-edge.
   Each band is the same path redrawn, revealing only its own dash-segment, so
   they bend along every curve with no gaps. Strokes are in viewBox units and
   scale with the board (board is 2:1, matching the 200x100 viewBox). */
#shelfie-journey .sb-strip-base { fill: none; stroke: #0b1020; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
#shelfie-journey .sb-band {
  fill: none; stroke-width: 17; stroke-linecap: butt; stroke-linejoin: round;
  opacity: .4; transition: opacity .3s ease, stroke-width .2s ease;
}
#shelfie-journey .sb-band.is-visited { opacity: 1; }
#shelfie-journey .sb-band.is-active  { opacity: 1; stroke-width: 19.5; }
#shelfie-journey .sb-band--milestone { stroke: #5b9bd5; }
#shelfie-journey .sb-band--feature   { stroke: #52b47a; }
#shelfie-journey .sb-band--action    { stroke: #e3a53a; }
#shelfie-journey .sb-band--next       { stroke: #a274d4; }
#shelfie-journey .sb-band--start      { stroke: #e07b3a; }
#shelfie-journey .sb-band--finish     { stroke: #3fb6b2; }
/* thin dark hairlines marking each band boundary (so same-colour runs still read) */
#shelfie-journey .sb-dividers { fill: none; stroke: #0b1020; stroke-width: 17; stroke-linecap: butt; opacity: .5; }

/* a number rides the centre of every band */
#shelfie-journey .sb-num {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; padding: 0; line-height: 1;
  background: none; border: none; cursor: default; pointer-events: none;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(8px, 1.7vw, 12px);
  color: rgba(255,255,255,.5); text-shadow: 0 1px 2px rgba(0,0,0,.75);
  transition: color .25s ease, font-size .18s ease;
}
#shelfie-journey .sb-num.is-visited { color: rgba(255,255,255,.95); cursor: pointer; pointer-events: auto; }
#shelfie-journey .sb-num.is-active  { color: #fff; }

/* the meeple (classic wooden piece) */
#shelfie-journey .sb-meeple { position: absolute; transform: translate(-50%, -60%); z-index: 6; width: 40px; height: 45px; pointer-events: none;
  transition: left .22s cubic-bezier(.4,0,.3,1), top .22s cubic-bezier(.4,0,.3,1); }
#shelfie-journey .sb-meeple__hop { display: block; width: 100%; height: 100%; }
#shelfie-journey .sb-meeple__hop.is-hop { animation: sb-hop .24s ease; }
#shelfie-journey .sb-meeple__svg { width: 100%; height: 100%; display: block; }
@keyframes sb-hop { 0% { transform: translateY(0); } 45% { transform: translateY(-15px) scale(1.06); } 100% { transform: translateY(0); } }

/* legend */
#shelfie-journey .sb-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--sb-muted); }
#shelfie-journey .sb-legend__item { display: inline-flex; align-items: center; gap: 6px; }
#shelfie-journey .sb-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
#shelfie-journey .sb-sw--milestone { background: #5b9bd5; } #shelfie-journey .sb-sw--feature { background: #52b47a; }
#shelfie-journey .sb-sw--action { background: #e3a53a; } #shelfie-journey .sb-sw--next { background: #a274d4; }

/* ---- stage: detail + controls ---- */
#shelfie-journey .sb-stage { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 16px; }
#shelfie-journey .sb-detail { min-width: 0; }
#shelfie-journey .sb-detail.is-in { animation: sb-fade .4s ease both; }
@keyframes sb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#shelfie-journey .sb-detail__tag { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sb-accent); margin-bottom: 6px; }
#shelfie-journey .sb-detail__tag--milestone { color: #6ea9de; } #shelfie-journey .sb-detail__tag--feature { color: #6cc593; }
#shelfie-journey .sb-detail__tag--action { color: #edba6a; } #shelfie-journey .sb-detail__tag--next { color: #b78ee0; }
#shelfie-journey .sb-detail__tag--start, #shelfie-journey .sb-detail__tag--finish { color: #5fc4c0; }
#shelfie-journey .sb-detail__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(18px, 2.6vw, 22px); color: #fff; margin: 0 0 7px; line-height: 1.15; }
#shelfie-journey .sb-detail__body { font-size: 14.5px; line-height: 1.55; color: rgba(232,234,240,.8); margin: 0; max-width: 54ch; }
#shelfie-journey .sb-detail__stat { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; }
#shelfie-journey .sb-detail__stat b { font-family: var(--font-head); font-weight: 900; font-size: 34px; line-height: 1; color: var(--sb-accent); }
#shelfie-journey .sb-detail__stat span { font-size: 13px; color: var(--sb-muted); }

#shelfie-journey .sb-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
#shelfie-journey .sb-die { width: 66px; height: 60px; cursor: pointer; padding: 0; background: none; border: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition: transform .1s; }
#shelfie-journey .sb-die:active { transform: translateY(3px); }
#shelfie-journey .sb-die.is-rolling { animation: sb-roll .5s cubic-bezier(.3,.7,.4,1); }
@keyframes sb-roll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.14); } 100% { transform: rotate(360deg) scale(1); } }
#shelfie-journey .sb-die.is-acting { animation: sb-pulse .5s ease infinite alternate; }
@keyframes sb-pulse { to { transform: scale(1.08); } }
#shelfie-journey .sb-d4 { width: 100%; height: 100%; display: block; }
#shelfie-journey .sb-d4__tri { fill: #eef1f5; stroke: #aeb8c6; stroke-width: 1.5; stroke-linejoin: round; }
#shelfie-journey .sb-d4__num { font-family: var(--font-head); font-weight: 900; font-size: 22px; fill: #2a2f3a; }
#shelfie-journey .sb-die.is-finish .sb-d4__tri { fill: var(--sb-accent); stroke: #9fc7ec; }
#shelfie-journey .sb-die.is-finish .sb-d4__num { fill: #0e1a28; }
#shelfie-journey .sb-ctrl__text { text-align: center; display: flex; flex-direction: column; gap: 1px; }
#shelfie-journey .sb-die__label { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .03em; color: #cfe0f2; }
#shelfie-journey .sb-progress { font-size: 11px; color: var(--sb-muted); }

@media (max-width: 600px) {
  #shelfie-journey { padding: 16px; }
  #shelfie-journey .sb-meeple { width: 30px; height: 34px; }
  #shelfie-journey .sb-stage { grid-template-columns: 1fr; gap: 14px; }
  #shelfie-journey .sb-controls { flex-direction: row; justify-content: center; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #shelfie-journey .sb-meeple { transition: none; }
  #shelfie-journey .sb-meeple__hop.is-hop, #shelfie-journey .sb-die.is-rolling, #shelfie-journey .sb-die.is-acting, #shelfie-journey .sb-detail.is-in { animation: none; }
}