.half-mockup-block {
  position: relative;
  overflow: hidden;
}
.half-mockup-block .section-title {
  position: relative;
}
.half-mockup-block .section-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: currentColor;
}

.logo-stroke {
  animation: float 6s ease-in-out infinite;
}
.logo-stroke svg {
  height: 100%;
  width: 100%;
}

.scroll-video {
  transition: none;
  will-change: transform;
}

.video-frame-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  z-index: 5;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1000;
}
.scroll-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #ef4444;
  width: 0%;
  transition: width 0.1s ease;
}