/* The parent controls the displayed dimensions. Canvas resolution is independent. */
.kyo-foil-surface {
  position: relative;
  display: block;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  transform-origin: center;
  transition: transform 160ms ease-out;
}
.kyo-foil-artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kyo-foil-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kyo-foil-canvas[hidden],
.kyo-foil-surface[data-foil-enabled="false"] > .kyo-foil-canvas {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .kyo-foil-surface {
    transition: none;
    transform: none !important;
  }
}