/* Clippy2027: the interludes between act 2's levels, and the finale.
   Both are full-screen, over everything but the question dialog. */
.story {
  position: fixed; inset: 0; z-index: 40; overflow: hidden; cursor: pointer;
  background: #05060a; color: #e6e8f0;
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; word-spacing: normal;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}
.story[hidden] { display: none; }
.story:focus { outline: none; }
.story p { margin: 0; }
.story-tap {
  position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a90a6;
  opacity: 0; transition: opacity 1s;
}
.story-tap.in { opacity: 1; }

/* ---------- interludes ---------- */
.story-lines { max-width: 34em; display: flex; flex-direction: column; gap: 1.1em; }
.story-lines p { opacity: 0; transform: translateY(6px); transition: opacity 1.4s, transform 1.4s; font-style: italic; color: #cfd3e2; }
.story-lines p.in { opacity: 1; transform: none; }
/* Out of white, after level 4's "all of it". */
.story.from-white::before {
  content: ""; position: absolute; inset: 0; background: #fff; pointer-events: none;
  animation: story-unwhite 3s ease-out forwards;
}
@keyframes story-unwhite { from { opacity: 1; } to { opacity: 0; } }
.story.over-scene { background: linear-gradient(to bottom, rgba(5,6,10,0) 35%, rgba(5,6,10,0.82) 70%); justify-content: flex-end; padding-bottom: 96px; }
.story.over-scene .story-lines p { color: #eef0f7; text-shadow: 0 1px 6px #000, 0 0 2px #000; }
.story.over-scene::before { animation-duration: 2.2s; }

/* ---------- the finale ---------- */
.story.finale { justify-content: center; }
.story-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-recap, .story-credits, .story-last { position: relative; z-index: 1; }
.story-recap {
  max-width: 30em; display: flex; flex-direction: column; gap: 0.8em; text-align: center;
  text-shadow: 0 1px 8px #000, 0 0 2px #000; transition: opacity 1.2s;
}
.story-recap p { opacity: 0; transition: opacity 1.4s; }
.story-recap p.in { opacity: 1; }
/* The line being told is bright; the ones before it settle back. */
.story-recap p.in.past { opacity: 0.55; }
.story-recap::before {
  content: ""; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5,6,10,0.85), rgba(5,6,10,0));
}
@media (max-width: 480px) { .story-recap { font-size: 15px; gap: 0.6em; } }
.story-recap p:last-child { margin-top: 0.6em; color: #f2d27a; }
.story-credits { position: absolute; inset: 0; overflow: hidden; display: none; }
.story-roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; text-shadow: 0 1px 8px #000; padding: 0 24px; }
.story-roll .c-h { font-size: 34px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 1.6em; }
.story-roll .c-role { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a90a6; margin-top: 2em; }
.story-roll .c-name { font-size: 18px; margin-top: 0.3em; }
.story-last { display: none; flex-direction: column; align-items: center; gap: 18px; }
.story-last svg { width: 120px; height: 120px; color: #e6e8f0; filter: drop-shadow(0 0 18px rgba(242,210,122,0.55)); animation: story-settle 2.4s cubic-bezier(.2,.9,.3,1.2) both, story-bob 4s 2.4s ease-in-out infinite; }
.story-last p { font-size: 20px; opacity: 0; animation: story-in 1.6s 1.4s forwards; }
@keyframes story-settle { from { transform: scale(0.2) rotate(-200deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes story-bob { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes story-in { to { opacity: 1; } }

.story[data-stage="credits"] .story-recap, .story[data-stage="fall"] .story-recap, .story[data-stage="last"] .story-recap { opacity: 0; }
.story[data-stage="credits"] .story-credits { display: block; }
.story[data-stage="last"] .story-last { display: flex; }
.story[data-stage="last"] { background: #000; }
.story[data-stage="last"] .story-recap, .story[data-stage="fall"] .story-recap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .story-last svg { animation: none; }
}