/* Scrolling Text Section - START */
.scrolling-text-wrapper {
  display: flex;
  overflow: hidden;
  --animation-duration: 8s;
}

.scrolling-text-wrapper.no-scrolling {
  visibility: hidden;
}

.scrolling-text-wrapper .scrolling-text-container {
  display: flex;
  flex-shrink: 0;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.scrolling-text-container.text-sm {
  font-size: var(--text-size-lg);
}

.scrolling-text-container.text-md {
  font-size: var(--text-size-2xl);
}

.scrolling-text-container.text-lg {
  font-size: var(--text-size-4xl);
}

.scrolling-text-container.text-xl {
  font-size: var(--text-size-5xl);
}

.scrolling-text-wrapper .scrolling-text {
  white-space: nowrap;
  margin-left: calc(var(--scroll-gap, calc(1.5rem * var(--body-scale))) / 2);
  margin-right: calc(var(--scroll-gap, calc(1.5rem * var(--body-scale))) / 2);
  display: inline-block;
  flex-shrink: 0;
}

@keyframes scrolling-text {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.scrolling-text-wrapper:not(.no-scrolling) .scrolling-text-container {
  animation: scrolling-text var(--animation-duration) linear infinite;
  align-items: center;
}

/* Decorative Lines (Full-width, Section level) */
.scrolling-text-section-inner .scrolling-text-line {
  width: 100%;
  height: 1px;
  background-color: rgb(var(--border-color) / 0.5);
  display: block;
  position: relative;
  transition: all 0.3s ease;
  z-index: 2;
}

/* Hide full-width lines for bounce and blink effects */
.scrolling-text-section-inner[data-animation-effect="bounce"] .scrolling-text-line,
.scrolling-text-section-inner[data-animation-effect="blink"] .scrolling-text-line {
  display: none;
}

/* Add spacing between the full-width lines and the scrolling text */
.scrolling-text-section-inner[data-animation-effect="none"] .scrolling-text-wrapper {
  margin-top: 8px;
  margin-bottom: 8px;
}

.scrolling-text-section-inner[data-animation-effect="wave"] .scrolling-text-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Wave animation on full-width decorative lines (Horizontal wave mask) */
.scrolling-text-section-inner[data-animation-effect="wave"] .scrolling-text-line {
  height: 20px;
  background-color: rgb(var(--border-color));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 Q25,2 50,10 T100,10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 Q25,2 50,10 T100,10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  -webkit-mask-repeat: repeat-x;
  mask-size: 80px 20px;
  -webkit-mask-size: 80px 20px;
  animation: line-wave-scroll 3s linear infinite;
}

@keyframes line-wave-scroll {
  0% {
    mask-position-x: 0;
    -webkit-mask-position-x: 0;
  }
  100% {
    mask-position-x: 80px;
    -webkit-mask-position-x: 80px;
  }
}

/* Separate Line Segments (Block level) */
.scrolling-text-inner {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}

.scrolling-text-line-segment {
  display: none; /* Hidden by default */
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(var(--border-color) / 0.5);
  transition: all 0.3s ease;
}

.scrolling-text-line-segment.line-top {
  top: 0;
}

.scrolling-text-line-segment.line-bottom {
  bottom: 0;
}

/* Show block-level line segments only for bounce and blink effects */
.scrolling-text-section-inner[data-animation-effect="bounce"] .scrolling-text-line-segment,
.scrolling-text-section-inner[data-animation-effect="blink"] .scrolling-text-line-segment {
  display: block;
}

/* Divider Shapes */
.scrolling-text-wrapper[data-divider-shape]:not([data-divider-shape="none"]) .scrolling-text::after {
  display: inline-block;
  margin-left: var(--scroll-gap, calc(1.5rem * var(--body-scale)));
  color: rgb(var(--text-color) / 0.4);
  vertical-align: middle;
  line-height: 1;
}

.scrolling-text-wrapper[data-divider-shape="dot"] .scrolling-text::after {
  content: "•";
  font-size: 1.5em;
}

.scrolling-text-wrapper[data-divider-shape="star"] .scrolling-text::after {
  content: "★";
  animation: spin-slow 6s linear infinite;
}

.scrolling-text-wrapper[data-divider-shape="diamond"] .scrolling-text::after {
  content: "◆";
}

.scrolling-text-wrapper[data-divider-shape="flower"] .scrolling-text::after {
  content: "✿";
  animation: spin-slow 8s linear infinite;
}

.scrolling-text-wrapper[data-divider-shape="heart"] .scrolling-text::after {
  content: "♥";
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Text Animations */
.scrolling-text-wrapper[data-animation-effect="wave"] .wave-char {
  display: inline-block;
  animation: text-wave 1.8s ease-in-out infinite;
  animation-delay: calc(var(--char-index) * 0.06s);
}

@keyframes text-wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.25em);
  }
}

.scrolling-text-wrapper[data-animation-effect="blink"] .scrolling-text {
  animation: text-blink 2s ease-in-out infinite;
}

@keyframes text-blink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.97);
  }
}

.scrolling-text-wrapper[data-animation-effect="bounce"] .scrolling-text {
  animation: text-bounce 1.6s ease-in-out infinite;
  animation-delay: calc(var(--word-index, 0) * 0.15s);
}

@keyframes text-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3em);
  }
}

/* Scrolling Text Section - END */