/* ---------- 15 · pocket ---------- */
#ch15 { --scrim: 0; --veil: 1; --icon-glow: 0.08; }

/* The ground returns from chapter 14's black. */
#ch15 .pk-veil { position: absolute; inset: 0; background: #000; opacity: var(--veil); pointer-events: none; }

/* Flying pieces of the film, converging on the icon. */
#ch15 .pk-sprite {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none;
  transform: translate(calc(var(--x, 50vw) - 50%), calc(var(--y, 50vh) - 50%)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 0);
  will-change: transform, opacity;
}
#ch15 .pk-sprite svg { width: 100%; height: 100%; overflow: visible; }
#ch15 .pk-haze svg { filter: blur(4px); }
#ch15 .pk-aurora svg { filter: blur(1px); }
#ch15 .pk-drop svg { filter: drop-shadow(0 0 6px rgba(156, 200, 245, 0.6)); }
#ch15 .pk-flake svg { filter: drop-shadow(0 0 5px rgba(242, 247, 255, 0.7)); }

/* The icon: its own groups fly in along their paths; the plate gathers first. */
#ch15 .icon-slot { position: relative; }
#ch15 .icon-slot svg { overflow: visible; filter: drop-shadow(0 30px 50px rgba(255, 140, 40, var(--icon-glow))); }
#ch15 .icon-slot > svg > g {
  transform-box: fill-box; transform-origin: center;
  transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(var(--gs, 1));
  opacity: var(--go, 1);
}
#ch15 .icon-slot img { width: 100%; height: 100%; border-radius: 22%; }

/* Credits stagger in; the scrim keeps them legible over a bright live sky. */
#ch15 .pocket { z-index: 5; text-shadow: 0 2px 18px rgba(5, 7, 14, calc(var(--scrim) * 0.8)); }
/* closest-side: the gradient reaches zero exactly at the box edge, so the
   scrim never ends in a visible line across a bright sky. */
#ch15 .pocket::before {
  content: ''; position: absolute; inset: -28% -70%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 7, 14, 0.5), rgba(5, 7, 14, 0.22) 55%, rgba(5, 7, 14, 0) 100%);
  opacity: var(--scrim);
}
#ch15 .pocket .note { color: color-mix(in srgb, var(--mute-dim), var(--paper) calc(var(--scrim) * 70%)); }
#ch15 .credits { color: color-mix(in srgb, var(--mute), var(--paper) calc(var(--scrim) * 60%)); }
#ch15 .pocket h2, #ch15 .credits, #ch15 .store-row, #ch15 .note { will-change: opacity, transform; }
#ch15 .credit-v .live-k { color: var(--sun-1); }

/* The header sits out the ending until the store buttons have landed (the
   chapter toggles the class), so the icon and its flying pieces never slide
   under it. Chapter 14 hid it already; this keeps it hidden. */
html[data-chapter="ch15"] .site-head { transition: opacity 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
html[data-chapter="ch15"].pk-head-off .site-head { opacity: 0; pointer-events: none; }

/* A real width for the centred block: at left: 50% an absolutely positioned
   box shrink-wraps to half the viewport, which stacked the title in three
   lines and pushed the icon up under the header on a phone. */
#ch15 .pocket.at-center { width: min(92vw, 44rem); max-width: none; }
#ch15 .pocket h2 { text-wrap: balance; }
#ch15 .pocket .note { max-width: 36ch; }
#ch15 .store-row .btn { white-space: nowrap; }
#ch15 .credit[hidden] { display: none; }

@media (max-width: 900px) {
  #ch15 .pocket .icon-slot { width: clamp(88px, 24vw, 120px); margin-bottom: clamp(0.8rem, 2vh, 1.2rem); }
  #ch15 .credits { gap: 0.25rem; margin-top: clamp(0.8rem, 2vh, 1.2rem); }
  #ch15 .credit-v { display: block; text-wrap: balance; }
}
@media (max-width: 480px) {
  #ch15 .pocket .icon-slot { width: 88px; }
  /* Store buttons: stacked, full width, one line each. */
  #ch15 .pocket .store-row { flex-direction: column; align-items: stretch; gap: 0.55rem; width: 100%; max-width: 22rem; margin-left: auto; margin-right: auto; }
  #ch15 .pocket .store-row .btn { justify-content: center; width: 100%; }
  #ch15 .pocket .note { font-size: 0.82rem; }
}
/* Short phones: the block must still fit under the top of the frame. */
@media (max-width: 900px) and (max-height: 740px) {
  #ch15 .pocket .icon-slot { width: 72px; margin-bottom: 0.6rem; }
  #ch15 .pocket h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  #ch15 .credits { font-size: 0.8rem; }
  #ch15 .pocket .store-row { margin-top: 0.9rem; }
  #ch15 .pocket .store-row .btn { padding-block: 0.6rem; }
}

/* The real app icon: iOS squircle-ish corners, gathers by scale and light. */
#ch15 .icon-slot img.pk-icon {
  width: 100%; height: 100%; border-radius: 22.5%;
  transform: scale(var(--gs, 1)); opacity: var(--go, 1);
  filter: brightness(calc(1 - var(--gb, 0) * 0.85)) drop-shadow(0 30px 50px rgba(255, 140, 40, var(--icon-glow, 0.08)));
  will-change: transform, opacity;
}

/* Held in place while the footer slides in (set per frame by the chapter). */
#ch15 .pocket { translate: 0 var(--foot-lift, 0px); }