/* Ink's asides stay within the bottom walking lane. All motion is local to
   the character and follows the scene's existing pause/visibility contract. */
.desktop-walkway { height:84px; }
.cat-asides {
  position:absolute;
  right:-1px;
  top:-35px;
  width:108px;
  height:29px;
  pointer-events:none;
}
.cat-asides>span {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:0 7px 1px;
  border:1px solid #fffdf4;
  border-radius:12px 12px 4px 12px;
  background:linear-gradient(150deg,#fffef4f5,#edf0e8f2);
  box-shadow:0 2px 0 #3c596022,0 4px 9px #14334024;
  color:#263d48;
  font:italic 11px/1.25 Georgia,"Times New Roman",serif;
  white-space:nowrap;
  opacity:0;
  transform:translateY(3px);
  transform-origin:80% 100%;
  animation:ink-aside 24s linear infinite;
}
.cat-asides>span::after {
  content:'';
  position:absolute;
  right:26px;
  bottom:-4px;
  width:7px;
  height:7px;
  border-right:1px solid #fffdf4;
  border-bottom:1px solid #fffdf4;
  background:#edf0e8;
  transform:skewY(20deg) rotate(45deg);
}
.cat-asides>span:nth-child(2) { animation-delay:8s; }
.cat-asides>span:nth-child(3) { animation-delay:16s; }
.cat-collar {
  position:absolute;
  z-index:3;
  left:24px;
  top:25px;
  width:8px;
  height:3px;
  border-radius:2px;
  background:#bb7959;
  transform:rotate(-14deg);
  box-shadow:inset 0 1px #e9b07a;
}
.cat-collar::after {
  content:'';
  position:absolute;
  top:2px;
  left:3px;
  width:5px;
  height:6px;
  border-radius:50%;
  background:linear-gradient(110deg,#fcdf95,#c39953);
  box-shadow:0 1px 1px #102a3680;
  clip-path:polygon(45% 0,100% 7%,70% 25%,60% 65%,100% 84%,45% 100%,0 75%,0 20%);
}
/* Each phrase holds for four seconds, then leaves a quiet gap. */
@keyframes ink-aside {
  0%,.01% { opacity:0;transform:translateY(3px);animation-timing-function:var(--ease); }
  .8%,17.5% { opacity:1;transform:translateY(0);animation-timing-function:var(--ease); }
  18.3%,100% { opacity:0;transform:translateY(3px); }
}
/* Desktop speech shares the walking route's clock. Ink only speaks near the
   inner turn, where its bubble clears the arcade at the outer right edge. */
@media(min-width:900px) {
  .cat-asides>span,
  .cat-asides>span:nth-child(n) { animation-duration:54s;animation-delay:-17s; }
  .cat-asides>span { animation-name:ink-route-aside-one; }
  .cat-asides>span:nth-child(2) { animation-name:ink-route-aside-two; }
  .cat-asides>span:nth-child(3) { animation-name:ink-route-aside-three; }
}
@media(min-width:900px) and (max-width:1150px) {
  .cat-asides { display:none; }
}
@keyframes ink-route-aside-one {
  0%,38% { opacity:0;transform:translateY(3px);animation-timing-function:var(--ease); }
  38.36%,44.64% { opacity:1;transform:translateY(0);animation-timing-function:var(--ease); }
  45%,100% { opacity:0;transform:translateY(3px); }
}
@keyframes ink-route-aside-two {
  0%,46% { opacity:0;transform:translateY(3px);animation-timing-function:var(--ease); }
  46.36%,52.64% { opacity:1;transform:translateY(0);animation-timing-function:var(--ease); }
  53%,100% { opacity:0;transform:translateY(3px); }
}
@keyframes ink-route-aside-three {
  0%,54% { opacity:0;transform:translateY(3px);animation-timing-function:var(--ease); }
  54.36%,60.64% { opacity:1;transform:translateY(0);animation-timing-function:var(--ease); }
  61%,100% { opacity:0;transform:translateY(3px); }
}
html[data-motion="paused"] .cat-asides>span,
html[data-motion-preference="paused"] .cat-asides>span,
html[data-visible="false"] .cat-asides>span,
html[data-hero-visible="false"] .cat-asides>span { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
  .cat-asides>span { animation:none!important;transform:none; }
  .cat-asides>span:first-child { opacity:1; }
  .cat-asides>span:not(:first-child) { display:none; }
}
@media(prefers-reduced-motion:reduce) and (min-width:1151px) {
  .desktop-walkway .object-cat { transform:translateX(min(0px,calc((320px - 100vw)/2 + 96px))); }
}