.fossil-demo-scene {
  position: relative;
  perspective: 1300px;
}

.demo-artifact {
  transform: perspective(1100px) rotateX(var(--artifact-pitch, 2deg)) rotateY(var(--artifact-yaw, -3deg)) rotate(-1.2deg) !important;
  transform-origin: 50% 45%;
  box-shadow: 1px 2px 0 #d1b999, 3px 5px 0 #ab8a65, 5px 9px 0 #5d3922, 12px 22px 20px #07030166, 0 40px 60px #0008 !important;
  transition: transform .45s ease, box-shadow .45s ease;
  backface-visibility: hidden;
}

.st.demo-field-card {
  --artifact-pitch: 0deg;
  --artifact-yaw: 0deg;
  transform: perspective(1000px) translateY(var(--field-drop, 0px)) rotateX(var(--artifact-pitch)) rotateY(var(--artifact-yaw)) rotate(var(--field-angle, -1deg));
  box-shadow: 0 2px 0 #d7c5a8, 1px 5px 0 #9b8060, 4px 9px 0 #492d1b, 0 22px 30px #0008;
  transition: transform .35s ease, box-shadow .35s ease;
}

.demo-typing {
  position: relative;
}

.demo-type-original {
  display: block;
}

.demo-type-overlay {
  position: absolute;
  inset: 0;
  display: none;
  color: #ffb62e;
  white-space: pre-wrap;
}

.demo-typing[data-typing="true"] .demo-type-original { opacity: 0; }
.demo-typing[data-typing="true"] .demo-type-overlay { display: block; }
.demo-typing[data-typing="true"] .demo-type-overlay::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: #ffb62e;
  vertical-align: -.12em;
  animation: demo-caret .6s steps(1) infinite;
}

.demo-row,
.demo-media,
.demo-token,
.demo-answer {
  transition: opacity .45s ease, filter .55s ease, transform .65s cubic-bezier(.18,.75,.2,1);
  transform-origin: 50% 0;
}

.demo-playing .demo-row:not(.is-found) {
  opacity: .08;
  filter: saturate(.35);
  transform: translate3d(0, 13px, -24px) rotateX(-8deg);
  pointer-events: none;
}

.demo-playing .demo-media:not(.is-found) {
  opacity: .12;
  transform: translate3d(0, 12px, -28px) scale(.96);
  filter: saturate(.3) blur(1px);
  pointer-events: none;
}

.demo-playing .demo-token:not(.is-found) {
  opacity: 0;
  transform: translateY(18px) scale(.72);
  pointer-events: none;
}

.demo-playing .demo-answer:not(.is-found) {
  opacity: .12;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
}

.demo-playing .demo-row.is-found {
  box-shadow: inset 0 1px 0 #fff3, 0 7px 8px #160b0618;
}

.demo-playing .demo-media.is-found {
  animation: demo-pop .7s cubic-bezier(.18,.75,.2,1) both;
}

.demo-loop-controls {
  position: absolute;
  z-index: 6;
  right: 2px;
  bottom: -38px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #bfae8f;
  font: 10px/1.2 'IBM Plex Mono', monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.demo-loop-controls__status::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ffb62e;
  box-shadow: 0 0 8px #ffb62e66;
  vertical-align: 1px;
}

.demo-loop-controls button {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid #5a3220;
  border-radius: 50%;
  background: #17110c;
  color: #e5d5b9;
  cursor: pointer;
}

.demo-loop-controls button:hover { color: #ffb62e; border-color: #ffb62e; }
.demo-loop-controls button:focus-visible { outline: 2px solid #ffb62e; outline-offset: 4px; }
.demo-loop-controls button svg { width: 12px; height: 12px; }
.demo-loop-controls button[aria-pressed="true"] { color: #ffb62e; }
.demo-loop-controls__progress { width: 36px; height: 2px; background: #5a3220; overflow: hidden; }
.demo-loop-controls__progress::after { content: ''; display: block; width: 100%; height: 100%; background: #ffb62e; transform: scaleX(var(--demo-progress, 0)); transform-origin: left; transition: transform .5s ease; }

@keyframes demo-caret { 50% { opacity: 0; } }
@keyframes demo-pop { 0% { transform: translateY(14px) scale(.96); } 65% { transform: translateY(-3px) scale(1.012); } 100% { transform: none; } }

@media (hover: none) {
  .demo-artifact { --artifact-pitch: 0deg; --artifact-yaw: 0deg; }
}

@media (max-width: 800px) {
  .demo-loop-controls { bottom: -36px; font-size: 9px; gap: 7px; }
  .demo-artifact { box-shadow: 1px 2px 0 #d1b999, 2px 5px 0 #8d6644, 4px 8px 0 #472a18, 0 24px 35px #0007 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-loop-controls { display: none; }
  .demo-artifact, .st.demo-field-card, .demo-row, .demo-media, .demo-token, .demo-answer { transition: none !important; animation: none !important; }
  .demo-artifact { transform: rotate(-1.2deg) !important; }
  .st.demo-field-card { transform: translateY(var(--field-drop, 0px)) rotate(var(--field-angle, -1deg)); }
  .demo-playing .demo-row, .demo-playing .demo-media, .demo-playing .demo-token, .demo-playing .demo-answer { opacity: 1 !important; filter: none !important; transform: none !important; }
  .demo-typing .demo-type-original { opacity: 1 !important; }
  .demo-typing .demo-type-overlay { display: none !important; }
}