/* Part II only: content stays visible until a one-shot entrance starts. */
.type-word {
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.type-running .type-word {
  animation: word-arrival .7s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: var(--word-delay,0s);
}
.type-element.type-running {
  animation: text-arrival .75s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: var(--text-delay,.12s);
}
.type-action.type-running {
  animation: action-arrival .6s ease-out both;
  animation-delay: .2s;
}
@keyframes word-arrival {
  from { opacity: .12; transform: translate3d(var(--type-x,0px),22px,0) scale(.97); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes text-arrival {
  from { opacity: .3; transform: translate3d(var(--type-x,0px),12px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
/* Links stay in the same position, visible and clickable throughout. */
@keyframes action-arrival { from { opacity: .8; } to { opacity: 1; } }
.story-controls {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: max(24px,calc((100% - 1180px)/2));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}
.story-controls button {
  background: var(--navy);
  border: 1px solid rgba(212,175,55,.4);
  border-radius: 18px;
  padding: 8px 12px;
  color: var(--gold-light);
  cursor: pointer;
}
.story-controls button:disabled { opacity: .4; cursor: default; }
@media(max-width:720px) {
  .story-controls { top: 10px; right: 16px; left: 16px; gap: 6px; font-size: 11px; justify-content: flex-end; }
  .story-controls button { padding: 6px 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .type-running, .type-running .type-word { animation: none !important; transform: none !important; opacity: 1 !important; }
}