/* ============================================
   SMOOTH & SLOW EXPORT BANNER CSS
   ============================================ */

@keyframes slide {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

#export-notice-banner {
  width: 100%;
  background: linear-gradient(90deg, #2d3748 0%, #374151 50%, #2d3748 100%);
  color: white;
  padding: 9px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1051;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  position: relative;
  overflow: hidden;
}

.banner-text {
  animation: slide 80s linear infinite;
  animation-delay: 0s;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: inline-block;
  color: #e0e7ff;
}

  .banner-text strong {
    color: #fbbf24;
    font-weight: 700;
    font-size: 13px;
    margin-right: 6px;
  }

.banner-icon {
  animation: pulse 2.5s ease-in-out infinite;
  animation-delay: 0s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  margin-right: 8px;
  margin-left: 2px;
}

.banner-close {
  position: absolute;
  right: 15px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
  transition: all 0.3s ease;
  z-index: 10;
  font-weight: bold;
}

  .banner-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.15);
  }

/* ANIMATION START TIME CONTROLS */

/* Change these values to delay when animation starts */
/* animation-delay: 0s = starts immediately */
/* animation-delay: 2s = waits 2 seconds before starting */

.banner-text {
  animation: slide 80s linear infinite;
  animation-delay: 0s; /* ← CHANGE THIS: 0s = start immediately, 2s = delay 2 seconds */
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: inline-block;
  color: #e0e7ff;
}

.banner-icon {
  animation: pulse 2.5s ease-in-out infinite;
  animation-delay: 0s; /* ← CHANGE THIS: 0s = start immediately, 1s = delay 1 second */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  margin-right: 8px;
  margin-left: 2px;
}

@media (max-width: 1024px) {
  .banner-text {
    font-size: 12px;
    animation: slide 75s linear infinite;
  }

    .banner-text strong {
      font-size: 12px;
    }

  .banner-icon {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  #export-notice-banner {
    padding: 8px 0;
  }

  .banner-wrapper {
    padding: 0 45px;
  }

  .banner-text {
    font-size: 11px;
    animation: slide 70s linear infinite;
  }

    .banner-text strong {
      font-size: 11px;
    }

  .banner-icon {
    font-size: 13px;
    margin-right: 4px;
  }

  .banner-close {
    right: 10px;
    padding: 3px 8px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .banner-wrapper {
    padding: 0 40px;
  }

  .banner-text {
    font-size: 10px;
    animation: slide 65s linear infinite;
  }

    .banner-text strong {
      font-size: 10px;
    }

  .banner-icon {
    font-size: 12px;
  }
}

/* ============================================
   ANIMATION SPEEDS EXPLANATION
   ============================================

SMOOTH & SLOW SPEEDS:
- Desktop: 80s (very smooth and slow)
- Tablet: 75s (slightly faster)
- Mobile: 70s (adjusted for width)
- Icon Pulse: 2.5s (slow breathing effect)

CHANGE ANIMATION SPEED:
- Increase seconds for slower animation (e.g., 100s)
- Decrease seconds for faster animation (e.g., 60s)
- Icon pulse can be adjusted similarly

EXAMPLES:
- 100s = Ultra slow
- 80s = Very slow (current)
- 60s = Slow
- 40s = Normal

============================================ */