/**
 * Liveposter - Base styles for animation library
 */

.liveposter-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.liveposter-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.liveposter-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Ensure smooth transitions */
.liveposter-slide,
.liveposter-image {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optional: Add loading state */
.liveposter-container.loading {
  background: #f0f0f0;
}

.liveposter-container.loading::after {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-family: sans-serif;
}

/* Overlay layer and overlay elements */
.liveposter-overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.liveposter-overlay {
  position: absolute;
  pointer-events: none;
}

/* Gridline overlay */
.liveposter-overlay-gridline {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Video overlay */
.liveposter-overlay-video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Image overlay */
.liveposter-overlay-image {
  /* Base positioning, can be overridden by inline styles */
}

/* Image overlay preset positions */
.liveposter-overlay-image[data-position="center"] {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.liveposter-overlay-image[data-position="top-left"] {
  top: 0;
  left: 0;
}

.liveposter-overlay-image[data-position="top-right"] {
  top: 0;
  right: 0;
}

.liveposter-overlay-image[data-position="bottom-left"] {
  bottom: 0;
  left: 0;
}

.liveposter-overlay-image[data-position="bottom-right"] {
  bottom: 0;
  right: 0;
}

.liveposter-overlay-image[data-position="top-center"] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.liveposter-overlay-image[data-position="bottom-center"] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Ensure overlays work with hardware acceleration */
.liveposter-overlay {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}