/**
 * Dual Scroll Animation - ExploreXR Landing Page
 * Version: 1.0.0
 * 
 * Two-column vertical scrolling word animation
 * Left column scrolls DOWN, Right column scrolls UP
 * Creates meaningful phrase combinations
 * 
 * Usage: Add class "dual-scroll-animation" to container
 */

.dual-scroll-animation {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.start{
  justify-content: flex-start;
}

.end{
  justify-content: flex-end;
}



/* Column containers */
.dual-scroll-animation__column {
  position: relative;
  height: 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dual-scroll-animation__column--left {
  text-align: right;
  min-width: 180px;
}

.dual-scroll-animation__column--right {
  text-align: left;
  min-width: 180px;
}

/* Words wrapper for animation */
.dual-scroll-animation__words {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Individual word items */
.dual-scroll-animation__word {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0 1rem;
}

/* Left column styling - using Elementor typography */
.dual-scroll-animation__column--left .dual-scroll-animation__word {
  font-family: var(--e-global-typography-945ec66-font-family), Sans-serif;
  font-size: var(--e-global-typography-945ec66-font-size);
  font-weight: var(--e-global-typography-945ec66-font-weight);
  line-height: var(--e-global-typography-945ec66-line-height);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  justify-content: flex-end; /* Align text right */
}

/* Right column styling - using Elementor typography */
.dual-scroll-animation__column--right .dual-scroll-animation__word {
  font-family: var(--e-global-typography-148cc15-font-family), Sans-serif;
  font-size: var(--e-global-typography-148cc15-font-size);
  font-weight: var(--e-global-typography-148cc15-font-weight);
  text-transform: var(--e-global-typography-148cc15-text-transform);
  font-style: var(--e-global-typography-148cc15-font-style);
  text-decoration: var(--e-global-typography-148cc15-text-decoration);
  line-height: var(--e-global-typography-148cc15-line-height);
  text-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
  justify-content: flex-start; /* Align text left */
}

/* Color cycling for left column words - ExpoXR brand colors */
.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+1) {
  color: var(--primary, #2AACE2); /* Primary Blue */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+2) {
  color: var(--secondary, #8062AA); /* Secondary Purple */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+3) {
  color: var(--accent, #4555A5); /* Accent Dark Blue */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+4) {
  color: var(--pink, #EF4681); /* Pink */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+5) {
  color: var(--orange, #F36E24); /* Orange */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+6) {
  color: var(--turquoise, #13BCD4); /* Turquoise */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+7) {
  color: var(--light, #E4E9EC); /* Light */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+8) {
  color: var(--primary, #2AACE2); /* Primary Blue */
}

.dual-scroll-animation__column--left .dual-scroll-animation__word:nth-child(9n+9) {
  color: var(--pink, #EF4681); /* Pink */
}

/* Color cycling for right column words - ExpoXR brand colors */
.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+1) {
  color: var(--orange, #F36E24); /* Orange */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+2) {
  color: var(--turquoise, #13BCD4); /* Turquoise */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+3) {
  color: var(--accent, #4555A5); /* Accent */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+4) {
  color: var(--primary, #2AACE2); /* Primary */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+5) {
  color: var(--pink, #EF4681); /* Pink */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+6) {
  color: var(--secondary, #8062AA); /* Secondary */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+7) {
  color: var(--turquoise, #13BCD4); /* Turquoise */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+8) {
  color: var(--orange, #F36E24); /* Orange */
}

.dual-scroll-animation__column--right .dual-scroll-animation__word:nth-child(9n+9) {
  color: var(--accent, #4555A5); /* Accent */
}

/* Animation for left column (scrolls DOWN with pause) */
.dual-scroll-animation__column--left .dual-scroll-animation__words {
  animation: scrollDownPause 20s ease-in-out infinite;
}

/* Animation for right column (scrolls UP with pause) */
.dual-scroll-animation__column--right .dual-scroll-animation__words {
  animation: scrollUpPause 20s ease-in-out infinite;
}

/* Keyframes for scrolling DOWN with 1-second pause (left column) */
@keyframes scrollDownPause {
  0% {
    transform: translateY(0);
  }
  4.5% {
    transform: translateY(-80px);
  }
  9.5% {
    transform: translateY(-80px); /* Pause 1 second */
  }
  14% {
    transform: translateY(-160px);
  }
  19% {
    transform: translateY(-160px); /* Pause 1 second */
  }
  23.5% {
    transform: translateY(-240px);
  }
  28.5% {
    transform: translateY(-240px); /* Pause 1 second */
  }
  33% {
    transform: translateY(-320px);
  }
  38% {
    transform: translateY(-320px); /* Pause 1 second */
  }
  42.5% {
    transform: translateY(-400px);
  }
  47.5% {
    transform: translateY(-400px); /* Pause 1 second */
  }
  52% {
    transform: translateY(-480px);
  }
  57% {
    transform: translateY(-480px); /* Pause 1 second */
  }
  61.5% {
    transform: translateY(-560px);
  }
  66.5% {
    transform: translateY(-560px); /* Pause 1 second */
  }
  71% {
    transform: translateY(-640px);
  }
  76% {
    transform: translateY(-640px); /* Pause 1 second */
  }
  80.5% {
    transform: translateY(-720px);
  }
  95% {
    transform: translateY(-720px); /* Pause before loop */
  }
  100% {
    transform: translateY(-720px);
  }
}

/* Keyframes for scrolling UP with 1-second pause (right column) */
@keyframes scrollUpPause {
  0% {
    transform: translateY(-720px); /* Start at bottom */
  }
  4.5% {
    transform: translateY(-640px);
  }
  9.5% {
    transform: translateY(-640px); /* Pause 1 second */
  }
  14% {
    transform: translateY(-560px);
  }
  19% {
    transform: translateY(-560px); /* Pause 1 second */
  }
  23.5% {
    transform: translateY(-480px);
  }
  28.5% {
    transform: translateY(-480px); /* Pause 1 second */
  }
  33% {
    transform: translateY(-400px);
  }
  38% {
    transform: translateY(-400px); /* Pause 1 second */
  }
  42.5% {
    transform: translateY(-320px);
  }
  47.5% {
    transform: translateY(-320px); /* Pause 1 second */
  }
  52% {
    transform: translateY(-240px);
  }
  57% {
    transform: translateY(-240px); /* Pause 1 second */
  }
  61.5% {
    transform: translateY(-160px);
  }
  66.5% {
    transform: translateY(-160px); /* Pause 1 second */
  }
  71% {
    transform: translateY(-80px);
  }
  76% {
    transform: translateY(-80px); /* Pause 1 second */
  }
  80.5% {
    transform: translateY(0);
  }
  95% {
    transform: translateY(0); /* Pause before loop */
  }
  100% {
    transform: translateY(0);
  }
}

/* Fade effect at top and bottom */
.dual-scroll-animation__column::before,
.dual-scroll-animation__column::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  z-index: 2;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .dual-scroll-animation {
    gap: 1rem;
    padding: 2rem 0.5rem;
    min-height: 150px;
  }
  
  .dual-scroll-animation__column {
    height: 60px;
  }
  
  .dual-scroll-animation__column--left,
  .dual-scroll-animation__column--right {
    min-width: 140px;
  }
  
  .dual-scroll-animation__word {
    height: 60px;
    padding: 0 0.5rem;
  }
  
  /* Adjust animation for smaller height with pause */
  @keyframes scrollDownPause {
    0% {
      transform: translateY(0);
    }
    4.5% {
      transform: translateY(-60px);
    }
    9.5% {
      transform: translateY(-60px); /* Pause 1 second */
    }
    14% {
      transform: translateY(-120px);
    }
    19% {
      transform: translateY(-120px); /* Pause 1 second */
    }
    23.5% {
      transform: translateY(-180px);
    }
    28.5% {
      transform: translateY(-180px); /* Pause 1 second */
    }
    33% {
      transform: translateY(-240px);
    }
    38% {
      transform: translateY(-240px); /* Pause 1 second */
    }
    42.5% {
      transform: translateY(-300px);
    }
    47.5% {
      transform: translateY(-300px); /* Pause 1 second */
    }
    52% {
      transform: translateY(-360px);
    }
    57% {
      transform: translateY(-360px); /* Pause 1 second */
    }
    61.5% {
      transform: translateY(-420px);
    }
    66.5% {
      transform: translateY(-420px); /* Pause 1 second */
    }
    71% {
      transform: translateY(-480px);
    }
    76% {
      transform: translateY(-480px); /* Pause 1 second */
    }
    80.5% {
      transform: translateY(-540px);
    }
    95% {
      transform: translateY(-540px); /* Pause before loop */
    }
    100% {
      transform: translateY(-540px);
    }
  }
  
  @keyframes scrollUpPause {
    0% {
      transform: translateY(-540px);
    }
    4.5% {
      transform: translateY(-480px);
    }
    9.5% {
      transform: translateY(-480px); /* Pause 1 second */
    }
    14% {
      transform: translateY(-420px);
    }
    19% {
      transform: translateY(-420px); /* Pause 1 second */
    }
    23.5% {
      transform: translateY(-360px);
    }
    28.5% {
      transform: translateY(-360px); /* Pause 1 second */
    }
    33% {
      transform: translateY(-300px);
    }
    38% {
      transform: translateY(-300px); /* Pause 1 second */
    }
    42.5% {
      transform: translateY(-240px);
    }
    47.5% {
      transform: translateY(-240px); /* Pause 1 second */
    }
    52% {
      transform: translateY(-180px);
    }
    57% {
      transform: translateY(-180px); /* Pause 1 second */
    }
    61.5% {
      transform: translateY(-120px);
    }
    66.5% {
      transform: translateY(-120px); /* Pause 1 second */
    }
    71% {
      transform: translateY(-60px);
    }
    76% {
      transform: translateY(-60px); /* Pause 1 second */
    }
    80.5% {
      transform: translateY(0);
    }
    95% {
      transform: translateY(0); /* Pause before loop */
    }
    100% {
      transform: translateY(0);
    }
  }
}

@media (max-width: 480px) {
  .dual-scroll-animation {
    gap: 0.5rem;
  }
  
  .dual-scroll-animation__column--left,
  .dual-scroll-animation__column--right {
    min-width: 120px;
  }
}

/* Loading state */
.dual-scroll-animation:not(.initialized) .dual-scroll-animation__words {
  animation-play-state: paused;
}

.dual-scroll-animation.initialized .dual-scroll-animation__words {
  animation-play-state: running;
}

/* Smooth rendering */
.dual-scroll-animation {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}