.room-person {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--person-size, 56px);
  height: var(--person-size, 56px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transform: translate(var(--person-x, 0), var(--person-y, 0)) scale(0.9);
  transition: none;
}


.room-person.is-world-presence {
  position: absolute;
  z-index: 1 !important;
  opacity: 1 !important;
  cursor: default;
  pointer-events: auto !important;
  transform: none;
  transition: none;
  will-change: top, left, width, height;
}


.room-person img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  filter: saturate(0.88) sepia(0.16) hue-rotate(-8deg) brightness(0.97) contrast(1.02);
  box-shadow:
    0 0 0 var(--person-ring, 2px) rgba(255, 238, 212, 0.82),
    0 6px 20px rgba(0, 0, 0, 0.5);
  transition: box-shadow 260ms ease, filter 320ms ease, transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}


.room-person.is-story-noticing img {
  filter: saturate(0.94) sepia(0.12) hue-rotate(-8deg) brightness(1.04) contrast(1.02);
  box-shadow:
    0 0 0 var(--person-ring, 2px) #f6d8aa,
    0 0 24px rgba(237, 173, 92, 0.5),
    0 9px 26px rgba(0, 0, 0, 0.46);
  transform: translateY(-3px) scale(1.018);
}


.room-person.is-world-presence img {
  animation: story-world-float 5.6s ease-in-out infinite;
  box-shadow:
    0 0 0 var(--person-ring, 2px) rgba(255, 238, 212, 0.88),
    0 0 22px rgba(232, 169, 92, 0.15),
    0 10px 28px rgba(0, 0, 0, 0.5);
}

.room-person.is-story-writing img {
  animation: story-ink-glow 1.48s ease-in-out both;
}


.story-beat {
  --story-reveal: 0;
  --story-conceal: 100%;
  clip-path: inset(0 0 var(--story-conceal) 0);
  opacity: var(--story-reveal);
  transform: translateY(calc((1 - var(--story-reveal)) * 22px));
  transition:
    color 450ms ease,
    clip-path 120ms linear,
    opacity 160ms linear,
    transform 700ms cubic-bezier(0.22, 0.75, 0.2, 1);
  will-change: clip-path, opacity, transform;
}

.story-beat.is-being-written {
  color: rgba(250, 239, 221, 0.96);
  text-shadow: 0 0 24px rgba(230, 164, 87, 0.13);
}

.story-beat.is-written {
  will-change: auto;
}


@keyframes story-write {
  0%, 14%, 100% { transform: rotate(0deg) translate(0); }
  30% { transform: rotate(-7deg) translate(-1px, 1px); }
  47% { transform: rotate(4deg) translate(1px, -1px); }
  64% { transform: rotate(-5deg) translate(-1px, 1px); }
  79% { transform: rotate(3deg) translate(1px, -1px); }
}

@keyframes story-ink-glow {
  0%, 100% {
    filter: saturate(0.9) sepia(0.14) hue-rotate(-8deg) brightness(0.99) contrast(1.02);
    transform: translate3d(-1px, 1px, 0) rotate(-0.35deg) scale(1);
  }
  42% {
    filter: saturate(0.98) sepia(0.1) hue-rotate(-8deg) brightness(1.07) contrast(1.02);
    transform: translate3d(1px, -2px, 0) rotate(0.35deg) scale(1.025);
  }
  76% {
    filter: saturate(0.94) sepia(0.12) hue-rotate(-8deg) brightness(1.03) contrast(1.02);
    transform: translate3d(-1px, -1px, 0) rotate(-0.15deg) scale(1.012);
  }
}

@keyframes story-world-float {
  0%, 100% { transform: translate3d(-1px, 1px, 0) rotate(-0.45deg); }
  38% { transform: translate3d(2px, -3px, 0) rotate(0.55deg); }
  68% { transform: translate3d(-1px, -1px, 0) rotate(0.15deg); }
}


@media(prefers-reduced-motion:reduce){
 .story-beat { transition:none; transform:none; }
 .room-person.is-world-presence img,.room-person.is-story-writing img { animation:none; }
}