.model-animation {
  height: var(--height, 300vh);
  position: relative;
  color: var(--color);
}

.model-grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url('/assets/textures/grain.png');
  background-size: 100px 100px;
  background-repeat: repeat;
  opacity: .2;
  z-index: 1;
}

.model-animation-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  box-sizing: border-box;
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    var(--color-text) calc(50% - 0.5px),
    var(--color-text) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}


.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .5s ease;
  z-index: 2;
}

.loading-indicator::after {
  content:'Loading Model...';
  animation: fadeInOut 1.5s ease-in-out infinite alternate;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.loading-scene .loading-indicator{
  opacity: 1;
  
}

.model-animation-text.layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  background: none;
  z-index: 2;
}

.model-animation-text-text {
  padding-left: calc(var(--indent-left, 0) / var(--col-span, 12) * 150%);
  padding-right: calc(var(--indent-right, 0) / var(--col-span, 12) * 150%);
}

.model-animation-scrollbar {
  position: absolute;
  right: 1rem;
  left: 1rem;
  bottom: 1rem;
  height: .25rem;
  border: var(--regular-border);
  border-radius: 99px;
  cursor: grab;
  background-color: rgba(255,255,255,.2);
  backdrop-filter: var(--blur);
  z-index: 3;
}
.model-animation-scrollbar.dragging {
  cursor: grabbing;
}
.model-animation-scrollbar:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 10%;
  left: calc(var(--progress, 0) * 90%);
  background-color: var(--color);
  border-radius: 99px;
}