/* Stories demonstration: a phone showing the map, one stop and its stories. Tokens only (tokens.css). */
.story-demo { width: min(100%, 340px); min-width: 0; margin: 0; justify-self: center; }
.story-demo-screen {
  position: relative; isolation: isolate; height: 650px; padding-block: 30px 20px; overflow: hidden;
  border: 9px solid var(--ink); border-radius: var(--radius-device-lg); background: var(--surface); box-shadow: var(--shadow-device); text-align: start;
}
/* Camera island and home indicator stay inside the frame. */
.story-demo-screen::before { content: ""; position: absolute; top: 8px; inset-inline: calc(50% - 48px); z-index: 20; height: 24px; border-radius: var(--radius-pill); background: var(--ink); pointer-events: none; }
.story-demo-screen::after { content: ""; position: absolute; bottom: 7px; inset-inline: calc(50% - 50px); z-index: 20; height: 5px; border-radius: var(--radius-pill); background: var(--ink); pointer-events: none; }
.story-demo-nav { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); font: 600 14px/1.3 var(--font-sans); }
.story-demo-map { position: absolute; inset: 80px 0 20px; background: var(--surface-sunken) url("old-town-map-background.svg") center / auto 100%; }
.story-demo-map-label { position: absolute; top: var(--space-5); inset-inline-start: var(--space-4); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); font: 600 14px/1.4 var(--font-sans); }
.story-demo-map-credit { position: absolute; bottom: var(--space-2); inset-inline-end: var(--space-2); padding: 0 var(--space-1); background: var(--surface); font: 400 12px/1.4 var(--font-sans); direction: ltr; }

/* The stop: the rose teardrop pin used across the guide's map. */
.story-demo-pin { position: absolute; top: 42%; inset-inline-start: calc(50% - 105px); display: grid; justify-items: center; gap: var(--space-2); width: 210px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 600 14px/1.3 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.story-demo-pin > span { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--accent); border-radius: var(--shape-pin); background: var(--rose); color: var(--ink); box-shadow: var(--shadow-soft); font-size: 25px; }
.story-demo-pin strong, .story-demo-pin small { padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 14px; white-space: nowrap; }
.story-demo-pin small { background: var(--rose); font-weight: 700; }
.story-demo-tap { display: none; }
.story-demo[data-stage=map] .story-demo-pin > span { animation: story-pin-pulse 1.8s ease-in-out infinite; }
@keyframes story-pin-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
.story-pointer-cursor { position: absolute; top: calc(42% + 32px); inset-inline-end: calc(50% + 14px); z-index: 5; pointer-events: none; animation: cursor-click 1.8s ease-in-out infinite; }
.story-pointer-cursor svg { display: block; width: 28px; height: 35px; }
.story-demo[data-stage=detail] .story-pointer-cursor { display: none; }

/* The place card with its stories. */
.story-demo-card {
  position: absolute; inset: 88px 10px 22px; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(35px); visibility: hidden; transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.story-demo[data-stage=detail] .story-demo-card { opacity: 1; transform: none; visibility: visible; }
.story-demo-media { position: relative; flex: 0 0 290px; height: 290px; overflow: hidden; background: var(--ink); direction: ltr; }
.story-demo-media > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.story-demo-media > img[hidden] { display: none; }
.story-demo-progress { position: absolute; top: 7px; inset-inline: 8px; z-index: 2; display: flex; gap: var(--space-1); }
.story-demo-progress i { flex: 1; height: 3px; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-raised) 35%, transparent); }
.story-demo-progress i::before { content: ""; display: block; width: var(--progress, 0%); height: 100%; background: var(--surface-raised); }
.story-demo-creator { position: absolute; top: 14px; inset-inline: 12px 4px; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: var(--surface-raised); text-shadow: var(--shadow-text); font: 600 14px/1.3 var(--font-sans); }
.story-demo-back { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 400 26px/1 var(--font-sans); text-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-demo-back:active { background: var(--rose-strong); }
.story-demo-description { min-height: 0; padding: var(--space-3) var(--space-4); overflow: auto; }
.story-demo-description small { font: 700 14px/1.4 var(--font-display); color: var(--accent); }
.story-demo-description h3 { margin: var(--space-1) 0 var(--space-2); font: 700 18px/1.3 var(--font-display); }
.story-demo-description p { margin: 0 0 var(--space-2); font: 400 15px/1.5 var(--font-sans); }
.story-demo-description > span { font: 600 14px/1.4 var(--font-sans); color: var(--accent); }
.story-demo figcaption { padding-top: var(--space-4); font: 600 15px/1.4 var(--font-sans); color: var(--ink-muted); text-align: center; }
.story-demo-caption { display: block; width: 100%; }
.story-demo button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (min-width: 1024px) { .story-demo { width: 100%; max-width: 350px; } }
@media (prefers-reduced-motion: reduce) {
  .story-demo-card { transition: none; }
  .story-demo[data-stage=map] .story-demo-pin > span, .story-demo[data-stage=map] .story-demo-pin > span::after, .story-pointer-cursor { animation: none; }
}