/* "Bir akşam" — the whole flow as a self-playing story: scene, two phones with real app
   screenshots, caption and a timeline. */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "scene phones" "caption phones" "nav nav";
  gap: 20px clamp(24px, 4vw, 56px); margin-top: 36px; align-items: start; }

/* Scene */
.story-scene { grid-area: scene; position: relative; aspect-ratio: 5 / 4; border-radius: 28px; background: var(--bg); overflow: hidden;
  border: 1px solid var(--line); }
.scene-layer { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.scene-layer.on { opacity: 1; transform: none; }
.story-clock { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--fg); color: var(--bg); border-radius: 999px; padding: 6px 12px;
  font: 700 0.9rem/1 var(--display); font-variant-numeric: tabular-nums; }

/* Market: the illustration with the list's ticks landing in the corner. */
.market-scene img { width: 100%; height: 100%; object-fit: contain; }
.market-scene .ticks { position: absolute; right: 0; bottom: 2%; display: flex; gap: 8px; }
.market-scene .ticks span { position: relative; width: clamp(40px, 5vw, 56px); aspect-ratio: 1; border-radius: 30%; background: var(--bg);
  display: grid; place-items: center; border: 1px solid var(--line); }
.market-scene .ticks span img { width: 74%; height: 74%; }
.market-scene .ticks i { position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--done); color: #fff;
  font: 900 11px/20px var(--body); text-align: center; font-style: normal; transform: scale(0); }
.scene-layer.on.market-scene .ticks i { animation: pop 0.35s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d); }
@keyframes pop { to { transform: none; opacity: 1; } }

.route-scene { inset: 4%; width: 92%; height: 92%; }
.scene-layer svg { width: 100%; height: 100%; display: block; }
.route-scene .street { stroke: color-mix(in srgb, var(--fg) 8%, transparent); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.route-scene .path-bg { stroke: color-mix(in srgb, var(--fg) 18%, transparent); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 0.5 2.6; }
.route-scene .path { stroke: var(--fg); stroke-width: 1.3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Phones: real screenshots, crossfading from step to step. */
.story-phones { grid-area: phones; display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 28px); }
/* Whose phone: a portrait from the illustrations, the name and the role in that person's colour. */
.person { --c: #3b82f6; width: min(46%, 220px); display: grid; gap: 12px; }
.person.her { --c: #f43f5e; margin-top: 52px; }
.who { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; justify-self: center;
  background: color-mix(in srgb, var(--c) 9%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.who .av { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--c); }
.who span { display: grid; gap: 2px; text-align: left; }
.who b { font: 700 0.88rem/1.1 var(--display); color: var(--fg); white-space: nowrap; }
.who em { font: 700 0.68rem/1 var(--body); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
.mock { position: relative; margin: 0; width: 100%; padding: 7px; border-radius: 36px; background: #1b1b1a;
  box-shadow: 0 0 0 1px #3a3936 inset, 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 24px 44px -24px color-mix(in srgb, var(--c) 55%, rgba(30, 20, 10, 0.5)); }
.scr { position: relative; aspect-ratio: 1206 / 2622; border-radius: 29px; overflow: hidden; background: #fff; }
.scr .ly { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.45s ease; }
.scr .ly.on { opacity: 1; }

/* Caption + timeline */
.story-caption { grid-area: caption; min-height: 8.5em; }
.story-caption .n { font: 600 0.85rem/1 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.story-caption h3 { font: 800 clamp(1.5rem, 3vw, 1.9rem)/1.1 var(--display); letter-spacing: -0.03em; margin: 8px 0; }
.story-caption p { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 46ch; }
.story-caption.swap { animation: fadeup 0.45s ease both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } }

.story-nav { grid-area: nav; display: flex; align-items: center; gap: 14px; }
.story-nav .play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); cursor: pointer; display: grid; place-items: center; }
.story-nav .play svg { width: 14px; height: 14px; fill: currentColor; }
.steps-bar { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.steps-bar li { margin: 0; }
.steps-bar button { width: 100%; border: 0; background: none; padding: 6px 0 0; cursor: pointer; text-align: left; color: var(--muted); font: 600 0.78rem/1.2 var(--body); }
.steps-bar button[aria-current="step"] { color: var(--fg); }
.steps-bar .track { display: block; height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 7px; }
.steps-bar .track i { display: block; height: 100%; width: 0; background: var(--fg); }
.steps-bar .label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps-bar .time { display: block; font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 0.72rem; }

@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; grid-template-areas: "scene" "caption" "phones" "nav"; }
  .story-scene { aspect-ratio: 16 / 10; }
  .person { width: min(46%, 190px); }
  .mock { border-radius: 30px; padding: 6px; }
  .scr { border-radius: 24px; }
  .story-caption { min-height: 7.5em; }
}
@media (max-width: 620px) {
  .steps-bar .label { display: none; }
  .person.her { margin-top: 32px; }
  .who { padding-right: 8px; } .who .av { width: 32px; height: 32px; } .who b { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before, .story *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}