@font-face {
  font-family: 'Chakra Petch', sans-serif;
  font-family: 'Kelly Slab', cursive;
  font-family: 'Quantico', sans-serif;
  font-family: 'Orbitron', sans-serif;
}


.scroller-area {
  position: relative;
  height: 400px;
  width: 2544px;
  bottom: -115px; /* ← Adjust this if needed */
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 40px;
  pointer-events: none; /* optional: prevent mouse clicks */
}

/* Blue mirror ground */
.blue-ground {
  top: 180px;
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: #0066ff49;
  z-index: 0;
}

/* Scroll tracks */
.scroller-track,
.reflection-track {
  position: absolute;
  width: 200%;
  overflow: hidden;
  z-index: 2;
}

.scroller-track {
  top: 160px;
}

.reflection-track {
  top: 195px;
  transform: scaleY(-1);
  z-index: 1;
}

/* Scrolling text style */
.scroller,
.reflection {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: bold;
  font-family: 'Orbitron', sans-serif;
  color: #00ffff;
  padding-top: 12px;
  padding-bottom: 8px;
  animation: scrollText 20s linear infinite, colorCycle 14s linear infinite;
  }

  

/* Characters: wave + color animation */
.scroller span,
.reflection span {
  display: inline-block;
  animation: wave 1s infinite ease-in-out;
}

/* Reflection dimmed */
.reflection {
  opacity: 0.3;
}

/* Smooth left-right scrolling */
@keyframes scrollText {
  0%   { transform: translateX(50%); }
  100% { transform: translateX(-140%); }
}

/* Character bounce */
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Full rainbow color cycle */
@keyframes colorCycle {
  0%   { color: #ff0000; }  /* Red */
  10%  { color: #ff7f00; }  /* Orange */
  20%  { color: #ffff00; }  /* Yellow */
  30%  { color: #7fff00; }  /* Lime Green */
  40%  { color: #00ff00; }  /* Green */
  50%  { color: #00ffff; }  /* Cyan */
  60%  { color: #0000ff; }  /* Blue */
  70%  { color: #4b0082; }  /* Indigo */
  80%  { color: #8b00ff; }  /* Violet */
  90%  { color: #ff1493; }  /* Pink */
  100% { color: #ff0000; }  /* Back to Red */
}