/* Paw trail: a lost pet's prints cross the neighborhood at night.
   Phones on the route wake as the trail reaches their alert zone, and the
   map turns to morning at the reunion. JavaScript sets --dawn to the last
   chapter's position; the fallback keeps the gradient sensible without it. */
.story-trail {
  position: relative;
  --dawn: calc(100% - 1300px);
  --night: #0f201d;
  --w: 238px;
  padding: 36vh 0 9vh;
  overflow: clip;
  color: #fff8ee;
  background: linear-gradient(
    to bottom,
    var(--paper) 0,
    #f4e3d3 6vh,
    #d7a79a 13vh,
    #6a4a55 21vh,
    #1d2c2d 29vh,
    var(--night) 35vh,
    var(--night) calc(var(--dawn) - 42vh),
    #1f2230 calc(var(--dawn) - 24vh),
    #5e3942 calc(var(--dawn) - 8vh),
    #c9796a calc(var(--dawn) + 8vh),
    #f0c4a4 calc(var(--dawn) + 22vh),
    var(--cream) calc(var(--dawn) + 38vh)
  );
}
.trail-ground {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.trail-map {
  position: absolute;
  inset: 0;
  background-position: 50% 0;
  background-size: 640px 520px;
}
.trail-map-night {
  background-image: url("assets/trail-night.svg");
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 22vh,
    #000 38vh,
    #000 calc(var(--dawn) - 22vh),
    transparent calc(var(--dawn) + 4vh)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 22vh,
    #000 38vh,
    #000 calc(var(--dawn) - 22vh),
    transparent calc(var(--dawn) + 4vh)
  );
}
.trail-map-day {
  background-image: url("assets/trail-day.svg");
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--dawn) + 14vh),
    #000 calc(var(--dawn) + 42vh),
    #000 calc(100% - 26vh),
    transparent calc(100% - 4vh)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--dawn) + 14vh),
    #000 calc(var(--dawn) + 42vh),
    #000 calc(100% - 26vh),
    transparent calc(100% - 4vh)
  );
}

/* Prints are placed by JavaScript; each one stamps in as the trail passes. */
.trail-prints {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.print {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background: #f58566;
  -webkit-mask: url("assets/print.svg") center / contain no-repeat;
  mask: url("assets/print.svg") center / contain no-repeat;
  opacity: 0;
  scale: 1.8;
  transition:
    opacity 0.3s ease,
    scale 0.55s var(--ease-out-expo);
}
.print.day {
  background: #c9502f;
}
.print.on {
  opacity: var(--o, 0.9);
  scale: var(--s, 1);
}
.story-trail:not(.is-live) .print {
  transition: none;
}
.trail-head {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #f5856652 0,
    #f5856621 34%,
    transparent 66%
  );
  opacity: 0;
  pointer-events: none;
  transition:
    translate 0.7s var(--ease-out-quart),
    opacity 0.5s ease;
}
.story-trail.is-live .trail-head.on {
  opacity: 1;
}
.sighting-pin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: #fffdf9;
  color: var(--teal);
  box-shadow: 0 10px 26px #0006;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  scale: 0.6;
  translate: var(--x) calc(var(--y) - 34px);
  transition:
    opacity 0.3s ease,
    scale 0.6s var(--ease-out-expo),
    translate 0.7s var(--ease-out-expo);
}
.sighting-pin > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff8ee;
}
.sighting-pin .icon {
  width: 15px;
  height: 15px;
}
.sighting-pin b {
  font-weight: 600;
}
.sighting-pin.on {
  opacity: 1;
  scale: 1;
  translate: var(--x) var(--y);
}
.sighting-pin.flip {
  translate: calc(var(--x) - 100%) calc(var(--y) - 34px);
}
.sighting-pin.flip.on {
  translate: calc(var(--x) - 100%) var(--y);
}
.story-trail:not(.is-live) .sighting-pin {
  transition: none;
}

/* Chapters: copy on one side, the phone's patch of map on the other. */
.station {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 6vw, 110px);
  max-width: 1200px;
  min-height: max(760px, 98svh);
  margin: 0 auto;
  padding: 0 6%;
  scroll-margin-top: 0;
}
.station:nth-of-type(even) .station-copy {
  order: 2;
}
.station-copy {
  position: relative;
  z-index: 3;
  max-width: 400px;
}
.station-copy .chapter-number {
  color: #f59a7e;
}
.station-copy h3 {
  margin: 24px 0 16px;
  color: #fff8ee;
  font: 500 clamp(36px, 3.7vw, 56px) / 1.12 var(--display);
  letter-spacing: -0.025em;
}
.station-copy h3 span {
  color: #f59a7e;
}
.station-copy .chapter-label {
  color: #fff8eec2;
  font-size: 15px;
}
.station-day .station-copy .chapter-number,
.station-day .station-copy .chapter-label {
  color: #5c4f42;
}
.station-day .station-copy h3 {
  color: var(--ink);
}
.station-day .station-copy h3 span {
  color: var(--teal);
}
.station-scene {
  position: relative;
  display: grid;
  place-items: center;
  height: 640px;
  color: var(--ink);
}

/* A neighbor's alert zone, drawn on the map around each phone. */
.zone {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: min(500px, 120%);
  aspect-ratio: 1;
  border: 1.5px dashed #f59a7e59;
  border-radius: 50%;
  background: radial-gradient(circle, #e8674a1f 0, #e8674a0d 52%, transparent 71%);
  translate: -50% -50%;
  transition:
    border-color 0.8s ease,
    background-color 0.8s ease;
}
.zone::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe0bc5c 0, #ffd6a61f 42%, transparent 70%);
  transition: opacity 1s ease 0.1s;
}
.zone::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #f59a7e;
  border-radius: 50%;
  opacity: 0;
}
.zone-park {
  border-color: #8fd0ae4d;
  background:
    radial-gradient(circle at 28% 30%, #3f7d5c 0 13px, #2f6149 14px 17px, transparent 18px),
    radial-gradient(circle at 36% 22%, #3f7d5c 0 10px, #2f6149 11px 14px, transparent 15px),
    radial-gradient(circle at 64% 20%, #3f7d5c 0 12px, #2f6149 13px 16px, transparent 17px),
    radial-gradient(circle at 74% 30%, #3f7d5c 0 9px, #2f6149 10px 13px, transparent 14px),
    radial-gradient(circle at 80% 58%, #3f7d5c 0 13px, #2f6149 14px 17px, transparent 18px),
    radial-gradient(circle at 72% 72%, #3f7d5c 0 10px, #2f6149 11px 14px, transparent 15px),
    radial-gradient(circle at 30% 70%, #3f7d5c 0 12px, #2f6149 13px 16px, transparent 17px),
    radial-gradient(circle at 22% 56%, #3f7d5c 0 9px, #2f6149 10px 13px, transparent 14px),
    radial-gradient(circle at 44% 84%, #3f7d5c 0 10px, #2f6149 11px 14px, transparent 15px),
    radial-gradient(circle at 60% 84%, #3f7d5c 0 11px, #2f6149 12px 15px, transparent 16px),
    radial-gradient(circle, #3e8e5a38 0, #3e8e5a1c 56%, transparent 71%);
}
.zone-park::after {
  border-color: #8fd0ae;
}

/* Homes in the alert zone that receive the same alert. */
.pings {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(500px, 120%);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.pings i {
  position: absolute;
  left: calc(50% + var(--x));
  top: calc(50% + var(--y));
  width: 14px;
  height: 14px;
  margin: -7px;
  border: 3px solid #fff8ee;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 18px 4px #f5856680;
  transition:
    opacity 0.5s ease var(--d),
    scale 0.7s var(--ease-out-expo) var(--d);
}
.pings i::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1.5px solid #f58566;
  border-radius: 50%;
  opacity: 0;
}
.story-trail.is-live .station.is-awake .pings i::after {
  animation: ping 2.6s var(--ease-out-quart) var(--d) infinite;
}
@keyframes ping {
  0% {
    opacity: 0.9;
    scale: 0.4;
  }
  70%,
  100% {
    opacity: 0;
    scale: 2.2;
  }
}

/* The phone, its shadow on the map, and the screen. */
.device-slot {
  position: relative;
  z-index: 2;
  width: var(--w);
  height: calc(var(--w) * 2.06);
  rotate: var(--tilt, -5deg);
}
.station:nth-of-type(even) .device-slot {
  --tilt: 5deg;
}
.device-shadow {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) * 0.18);
  background: #000;
  filter: blur(20px);
  opacity: 0.55;
  translate: 20px 30px;
}
.device {
  position: absolute;
  inset: 0;
  border: 6px solid #2b231e;
  border-radius: calc(var(--w) * 0.18);
  background: #090807;
  box-shadow:
    0 0 0 1.5px #8a766566,
    0 0 0 0 #ffd8b200;
  transition: box-shadow 1s ease;
}
.device::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(
    128deg,
    #ffffff1f 0,
    #ffffff05 30%,
    transparent 46%,
    transparent 70%,
    #ffffff0d 86%,
    transparent
  );
  pointer-events: none;
}
.device::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--w) * 0.04);
  z-index: 4;
  width: 32%;
  height: calc(var(--w) * 0.09);
  border-radius: 99px;
  background: #000;
  translate: -50% 0;
}
.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.18 - 6px);
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  transition:
    opacity 0.6s ease,
    filter 1.1s ease;
}
.status-bar {
  display: flex;
  justify-content: space-between;
  height: 38px;
  padding: 14px 22px 0;
  font-size: 10px;
  font-weight: 700;
}
.status-glyphs::before {
  content: "••• ▰";
  letter-spacing: 1px;
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px 10px;
  font: 500 16px var(--display);
}
.app-bar .icon {
  width: 16px;
  height: 16px;
  color: var(--coral-dark);
}
.app-photo {
  position: relative;
  height: 31%;
  margin: 0 14px;
  overflow: hidden;
  border-radius: 18px;
}
.app-photo img {
  width: 100%;
  height: 100%;
  object-position: 50% 34%;
}
.app-photo .status-badge {
  top: 9px;
  left: 9px;
  padding: 5px 9px;
  font-size: 10px;
}
.app-rows {
  margin: 10px 14px 0;
  padding: 2px 12px;
  border-radius: 14px;
  background: #f4ede2;
}
.app-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #33281f12;
  font-size: 10.5px;
}
.app-rows > div:last-child {
  border-bottom: 0;
}
.app-rows span {
  color: var(--muted);
}
.app-rows strong {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.app-rows .icon {
  width: 12px;
  height: 12px;
  color: var(--coral);
}
.app-hint {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 600;
}
.app-hint .icon {
  width: 13px;
  height: 13px;
}
.app-sighting {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px;
  padding: 8px;
  border-radius: 14px;
  background: #f4ede2;
}
.mini-map {
  position: relative;
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  height: 46px;
  overflow: hidden;
  border-radius: 10px;
  color: var(--coral);
}
.mini-map .map-art {
  inset: -60%;
}
.mini-map .icon {
  position: relative;
  width: 20px;
  height: 20px;
  fill: #fffdf9;
}
.app-sighting > span:nth-child(2) {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
}
.app-sighting small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 400;
}
.app-sighting > .icon {
  width: 16px;
  height: 16px;
  color: var(--teal);
}
.app-button {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 999px;
  background: var(--coral);
  color: #2d2119;
  font-size: 11.5px;
  font-weight: 700;
  transition: background 0.4s ease;
}
.app-button > span {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 5px;
  transition: opacity 0.35s ease;
}
.app-button .icon {
  width: 14px;
  height: 14px;
}
.label-done {
  opacity: 0;
}
.app-button.teal {
  background: var(--teal);
  color: #fff8ee;
}

/* Lock screen and notification banners use the app's real alert text. */
.lock-screen {
  background:
    radial-gradient(120% 60% at 22% 0%, #3c7c69 0, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, #7a3f36 0, transparent 60%),
    #122f2a;
  color: #fff8ee;
}
.lock-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background:
    radial-gradient(circle at 22% 42%, #ffffff2e 0 16px, transparent 17px),
    radial-gradient(circle at 78% 42%, #ffffff2e 0 16px, transparent 17px),
    linear-gradient(#fff8ee, #fff8ee) 50% 88% / 34% 4px no-repeat;
  opacity: 0.9;
}
.lock-clock {
  margin-top: 26px;
  text-align: center;
}
.lock-clock .icon {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto 6px;
  opacity: 0.85;
}
.lock-clock strong {
  font: 500 calc(var(--w) * 0.27) / 1 var(--display);
  letter-spacing: -0.03em;
}
.banner {
  position: absolute;
  left: 9px;
  right: 9px;
  top: calc(var(--w) * 0.66);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: #fffdf9eb;
  color: var(--ink);
  box-shadow: 0 10px 24px #0000004d;
  transition:
    opacity 0.45s ease 0.45s,
    translate 0.8s var(--ease-out-expo) 0.45s,
    scale 0.8s var(--ease-out-expo) 0.45s;
}
.banner-icon {
  display: grid;
  flex: 0 0 26px;
  place-items: center;
  height: 26px;
  border-radius: 8px;
  background: var(--coral);
  color: var(--paper);
}
.banner-icon .icon {
  width: 15px;
  height: 15px;
}
.banner-text {
  flex: 1;
  min-width: 0;
}
.banner-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 8.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.banner-meta i {
  font-style: normal;
  text-transform: none;
}
.banner-text strong {
  display: block;
  margin: 3px 0 2px;
  font-size: 11px;
  line-height: 1.25;
}
.banner-text p {
  color: #5c4f42;
  font-size: 9.5px;
  line-height: 1.35;
}
.banner-thumb {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 8px;
  object-position: 50% 30%;
}
.banner-drop {
  top: calc(var(--w) * 0.17);
}

/* Match review. */
.app-pair {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 2px 14px 0;
}
.app-pair > span {
  position: relative;
  flex: 1;
  height: calc(var(--w) * 0.62);
  overflow: hidden;
  border-radius: 14px;
}
.app-pair img {
  width: 100%;
  height: 100%;
  object-position: 50% 30%;
}
.app-pair > span + span img {
  object-position: 60% 35%;
  transform: scaleX(-1);
}
.app-pair i {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--paper);
  font-size: 9px;
  font-style: normal;
}
.app-pair > span + span i {
  background: var(--teal);
  color: #fff;
}
.pair-link {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--coral);
  box-shadow: 0 3px 8px #33281f26;
  translate: -50% -50%;
}
.pair-link .icon {
  width: 18px;
  height: 18px;
}
.app-checks {
  display: flex;
  gap: 12px;
  margin: 12px 14px;
  color: var(--teal);
  font-size: 10px;
}
.app-checks span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.app-checks .icon {
  width: 12px;
  height: 12px;
}

/* Reunion. */
.app-home .app-photo {
  height: 36%;
}
.reunited-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 14px auto 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #dfecd9;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.reunited-pill .icon {
  width: 12px;
  height: 12px;
}
.app-note {
  margin: 8px 16px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

/* Pieces that pop out of the scene when a phone wakes. */
.pop {
  position: absolute;
  z-index: 3;
  transition:
    opacity 0.45s ease var(--pop-delay, 0.8s),
    scale 0.7s var(--ease-out-expo) var(--pop-delay, 0.8s);
}
.pop-sticker {
  right: 1%;
  bottom: 13%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 5px solid var(--paper);
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 12px 28px #00000059;
  font-size: 13px;
  rotate: 6deg;
  white-space: nowrap;
}
.pop-sticker .icon {
  width: 18px;
  height: 18px;
}
.pop-zone {
  left: 2%;
  top: 14%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 999px;
  background: #fffdf9;
  color: var(--ink);
  box-shadow: 0 12px 28px #00000059;
  font-size: 12px;
  rotate: -5deg;
  white-space: nowrap;
}
.pop-zone .icon {
  width: 16px;
  height: 16px;
  color: var(--teal);
}
.station-scene .message-in {
  left: -3%;
  bottom: 24%;
  --pop-delay: 1.9s;
}
.station-scene .message-out {
  right: -2%;
  bottom: 10%;
  --pop-delay: 2.5s;
}
.station-scene .message > span:not(.message-avatar) {
  box-shadow: 0 12px 28px #00000052;
}

/* The final chapter: the trail loops and ends at the reunion. */
.scene-home {
  --w: 176px;
  display: block;
  height: 660px;
}
.reunion-arch {
  position: absolute;
  right: 0;
  top: 2%;
  width: 76%;
  height: 80%;
  overflow: hidden;
  border: 8px solid var(--paper);
  border-radius: 230px 230px 36px 36px;
  box-shadow: 0 24px 60px #33281f33;
  rotate: 2deg;
}
.reunion-arch img {
  width: 100%;
  height: 100%;
  object-position: 53% 50%;
}
.scene-home .device-slot {
  position: absolute;
  left: 0;
  bottom: 5%;
  --tilt: -7deg;
}
.trail-end {
  position: absolute;
  right: 6%;
  top: -2%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 6px solid var(--paper);
  border-radius: 50%;
  background: var(--coral);
  color: var(--paper);
  box-shadow: 0 10px 26px #33281f33;
  rotate: 12deg;
}
.trail-end .icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
}
.scene-home .reunion-badge {
  left: 26%;
  right: -2%;
  bottom: 1%;
  --pop-delay: 1.5s;
}
.story-trail .story-caption {
  position: relative;
  z-index: 3;
  padding: 44px 24px 0;
  color: var(--muted);
}

/* Live mode: phones sleep until the trail reaches them. */
.story-trail.is-live .station:not(.is-awake) .screen {
  opacity: 0;
  filter: brightness(2.4) saturate(0.6);
}
.story-trail.is-live .station:not(.is-awake) .zone::before {
  opacity: 0;
}
.story-trail.is-live .station:not(.is-awake) .pings i {
  opacity: 0;
  scale: 0.2;
  transition-delay: 0s;
}
.story-trail.is-live .station:not(.is-awake) .banner {
  opacity: 0;
  translate: 0 -26px;
  scale: 0.94;
  transition-delay: 0s;
}
.story-trail.is-live .station:not(.is-awake) .pop {
  opacity: 0;
  scale: 0.7;
  transition-delay: 0s;
}
.story-trail.is-live .station:not(.is-awake) .trail-end {
  scale: 0.4;
  opacity: 0;
}
.story-trail.is-live .trail-end {
  transition:
    scale 0.8s var(--ease-out-expo) 0.2s,
    opacity 0.4s ease 0.2s;
}
.story-trail.is-live .station.is-awake .device {
  box-shadow:
    0 0 0 1.5px #8a766566,
    0 0 90px 8px #ffd8b233;
}
.story-trail.is-live .station.is-awake .zone {
  border-color: #f59a7ea6;
}
.story-trail.is-live .station.is-awake .zone::after {
  animation: zone-ripple 1.8s var(--ease-out-quart) 0.15s both;
}
.story-trail.is-live .station.is-awake .app-report .app-button {
  animation: press 0.45s ease 1.3s both;
  background: var(--teal);
  color: #fff8ee;
  transition-delay: 1.45s;
}
.story-trail.is-live .station.is-awake .label-idle {
  opacity: 0;
  transition-delay: 1.45s;
}
.story-trail.is-live .station.is-awake .label-done {
  opacity: 1;
  transition-delay: 1.45s;
}
.story-trail.is-live .station.is-awake .banner-drop {
  animation: banner-peek 3.6s var(--ease-out-expo) 0.4s both;
}
@keyframes zone-ripple {
  from {
    opacity: 0.9;
    scale: 0.3;
  }
  to {
    opacity: 0;
    scale: 1.08;
  }
}
@keyframes press {
  40% {
    scale: 0.94;
  }
}
@keyframes banner-peek {
  0% {
    opacity: 0;
    translate: 0 -30px;
    scale: 0.94;
  }
  14%,
  74% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -40px;
    scale: 0.96;
  }
}

/* Chapter bar: appears while the story is on screen. */
.story-hud {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid #33281f14;
  border-radius: 999px;
  background: #fffdf9f5;
  box-shadow: 0 12px 34px #33281f24;
  opacity: 0;
  visibility: hidden;
  translate: -50% 28px;
  transition:
    opacity 0.3s ease,
    translate 0.55s var(--ease-out-expo),
    visibility 0s linear 0.55s;
}
.story-hud.is-visible {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition-delay: 0s;
}
.story-hud a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  transition:
    background 0.25s,
    color 0.25s;
}
.story-hud a:hover {
  background: #f4ede2;
}
.story-hud a[aria-current] {
  background: #fbe6dc;
  color: var(--coral-dark);
}
.story-hud .icon {
  width: 18px;
  height: 18px;
}
.hud-progress {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 2px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
}
.hud-progress span {
  display: block;
  height: 100%;
  background: var(--coral);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

@media (max-width: 760px), (max-height: 520px) {
  .story-hud {
    bottom: 14px;
  }
  .story-hud a {
    padding: 0 12px;
  }
}
@media (max-width: 560px), (max-height: 520px) {
  .story-hud a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .story-hud .icon {
    width: 19px;
    height: 19px;
  }
}
@media (max-width: 1050px) {
  .story-trail {
    --w: 220px;
  }
  .station {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    padding: 0 5%;
  }
  .station-scene {
    height: 600px;
  }
  .scene-home {
    --w: 160px;
  }
}
@media (max-width: 760px) {
  .story-trail {
    --w: 206px;
    padding: 30vh 0 6vh;
  }
  .station {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    min-height: 0;
    padding: 20vh 7% 4vh;
  }
  .station:first-of-type {
    padding-top: 6vh;
  }
  .station-copy,
  .station:nth-of-type(even) .station-copy {
    order: 0;
    max-width: 72%;
  }
  .station:nth-of-type(even) .station-copy {
    align-self: flex-end;
    text-align: right;
  }
  .station-copy h3 {
    margin: 12px 0 8px;
    font-size: clamp(31px, 8.4vw, 40px);
  }
  .station-copy .chapter-label {
    font-size: 14px;
  }
  .station-scene {
    height: 500px;
  }
  .zone,
  .pings {
    width: min(460px, 118%);
  }
  .banner-thumb {
    display: none;
  }
  .sighting-pin {
    padding: 5px;
  }
  .sighting-pin b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pop-sticker {
    right: -2%;
    bottom: 6%;
    padding: 10px 14px;
    font-size: 12px;
  }
  .pop-zone {
    left: -3%;
    top: 6%;
    font-size: 11px;
  }
  .station-scene .message {
    font-size: 12px;
  }
  .station-scene .message > span:not(.message-avatar) {
    padding: 13px 15px;
  }
  .station-scene .message-in {
    top: 7%;
    bottom: auto;
    left: -4%;
  }
  .station-scene .message-out {
    right: -3%;
    bottom: 6%;
  }
  .scene-home {
    --w: 138px;
    height: 520px;
  }
  .reunion-arch {
    width: 82%;
    height: 76%;
    border-radius: 180px 180px 28px 28px;
  }
  .trail-end {
    left: 2%;
    right: auto;
    top: 4%;
    width: 58px;
    height: 58px;
    border-width: 5px;
  }
  .trail-end .icon {
    width: 26px;
    height: 26px;
  }
  .scene-home .reunion-badge {
    left: 30%;
    right: -3%;
    bottom: 9%;
    padding: 14px;
    gap: 9px;
  }
  .scene-home .reunion-badge strong {
    font-size: 17px;
    white-space: nowrap;
  }
  .scene-home .reunion-badge > .icon {
    display: none;
  }
}