.aix-intro-stone {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.aix-intro-stone img,
.aix-intro-stone canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.aix-intro-stone img {
  object-fit: cover;
}

.aix-intro-stone canvas {
  opacity: 0;
  pointer-events: none;
  touch-action: pan-y;
  outline-offset: 4px;
  transition: opacity .65s cubic-bezier(.4, 0, .2, 1);
}

.aix-intro-stone.is-ready canvas {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
}

.aix-intro-stone.is-interacted canvas {
  transition: none;
}

.aix-stone-loading {
  position: absolute;
  bottom: 8px;
  left: calc(50% - 24px);
  width: 48px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  background: var(--aix-gray-200);
  transition: opacity .3s ease;
  pointer-events: none;
}

.aix-intro-stone.is-loading .aix-stone-loading {
  opacity: .6;
}

.aix-stone-loading span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--aix-blue);
  animation: stone-loading 1.2s linear infinite paused;
}

.is-loading .aix-stone-loading span {
  animation-play-state: running;
}

.aix-stone-loading[aria-valuenow] span {
  width: 100%;
  animation: none;
  transform: scaleX(var(--stone-progress, 0));
  transform-origin: left;
  transition: transform .18s linear;
}

@keyframes stone-loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

.aix-intro-stone.is-dragging canvas {
  cursor: grabbing;
}

.aix-intro-stone canvas:focus-visible {
  outline: 1px solid var(--aix-blue);
}

@media (prefers-reduced-motion: reduce) {
  .aix-intro-stone canvas,
  .aix-stone-loading,
  .aix-stone-loading span {
    transition: none;
    animation: none;
  }
}