/* The ending: October 2026 replayed in the app (steps 17-18 of demo-full.html). Loaded after laminate.css.
   ending.js adds the step classes .end-play (17) and .end-title (18). */

/* ---- step 17: the Rocky Run card and the strip leave; the replay starts on Oct 1 ---- */
.laminates.end-play #s2-spot-web, .laminates.end-play #s2-callout-web { animation: fade-out .3s ease both; }
.laminates.end-play #s2-arch { opacity: 0; transition-delay: 0s; }
#e-frames { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#e-frames img { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: block; opacity: 0; }
#e-frames img.on { opacity: 1; }
/* The first day dissolves in over the Rocky Run; after that the days cut, one per frame. */
#e-frames img.first.on { animation: fade-in .5s ease both; }

/* ---- step 18: the title over the last day ---- */
#e-title { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: rgba(27, 36, 51, .62); }
.laminates.end-title #e-title { animation: fade-in .9s ease .2s both; }
#e-title .e-row { display: flex; align-items: center; gap: 44px; }
#e-title .e-mark { width: 260px; height: 260px; border-radius: 36px; display: block; object-fit: cover;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .92), var(--high); }
/* The sign: a fixed box with the word centred in it. Barlow Condensed's capitals sit low in its line box, so the
   bottom padding lifts them onto the box's centre (measured: equal gaps above and below the letters). */
#e-title .e-sign { height: 220px; padding: 0 56px 17px; display: flex; align-items: center; justify-content: center;
  font: 700 170px/1 var(--display); letter-spacing: .06em; color: #fff; background: var(--sign); border-radius: 22px;
  box-shadow: inset 0 0 0 10px var(--sign), inset 0 0 0 17px rgba(255, 255, 255, .92), var(--high);
  text-indent: .06em; /* letter-spacing adds space after the last letter; balance it before the first */ }
#e-title .e-name { font: 600 50px/1.2 var(--display); letter-spacing: .02em; color: #fff; margin-top: 14px; }
#e-title .e-stack { font: 400 28px/1.3 var(--ui); color: rgba(255, 255, 255, .82); }
#e-title .e-link { margin-top: 18px; }
#e-title .e-link .todo { font-size: 26px; }
.laminates.end-title #e-title .e-row { animation: e-sign-in .6s cubic-bezier(.3, 1.3, .5, 1) .5s both; }
@keyframes e-sign-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* The production link, on the last frame. */
#e-title .e-url { display: inline-block; font: 600 34px/1 var(--ui); color: #fff; letter-spacing: .01em;
  padding: 14px 26px 15px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }