.panda-story--living .panda-media img,
.panda-story--living .panda-media video {
  object-position: 60% center;
}

.panda-story--living .panda-living-poster {
  z-index: 0;
}

.panda-story--living .panda-eye-texture {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  animation: panda-eye-reveal 360ms ease-out both;
}

@keyframes panda-eye-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panda-story--living .panda-eye-texture[hidden] {
  display: none;
}

.panda-story--living[data-has-frame="true"] .panda-media video {
  opacity: 1;
}

.panda-story--living[data-motion-state="error"] .panda-media video,
.panda-story--living[data-motion-state="static"] .panda-media video {
  opacity: 0;
}

.panda-story--living .panda-shade {
  background:
    linear-gradient(90deg, rgba(5, 9, 6, .7), rgba(5, 9, 6, .3) 36%, transparent 65%),
    linear-gradient(0deg, rgba(5, 9, 6, .72), transparent 42%, transparent 80%, rgba(5, 9, 6, .18));
}

.panda-story--living .panda-controls {
  align-items: center;
  gap: 14px;
}

.panda-motion-hint {
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  text-shadow: 0 1px 6px #152014;
}

.panda-story--living .panda-control {
  background: rgba(10, 17, 12, .45);
  backdrop-filter: blur(8px);
}

@media (max-width: 840px) {
  .panda-story--living .panda-hero { background: #050906; }
  .panda-story--living .panda-media { height: 80%; }

  .panda-story--living .panda-media img,
  .panda-story--living .panda-media video {
    object-position: 64% center;
  }

  .panda-story--living .panda-shade {
    background: linear-gradient(0deg, #050906, rgba(5, 9, 6, .06) 42%, transparent 66%, rgba(5, 9, 6, .25));
  }

  .panda-motion-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panda-story--living .panda-media video { display: none; }
  .panda-story--living .panda-controls { display: none; }
}