/**
 * BigCat Codeworks Scroll to Bottom Prompt Component
 * Cyberpunk-themed scroll indicator with glitch effects and responsive positioning
 * 
 * Import order: tokens.css → base.css → layout.css → components/scroll-prompt.css
 */

/* ===== SCROLL PROMPT CONTAINER ===== */

.scroll-to-bottom-prompt {
  position: fixed;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: #F0F0F0;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #FF00AA;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease-out;
  z-index: 1000;
  box-shadow: 
    0 4px 20px rgba(255, 0, 170, 0.3),
    0 0 0 0 rgba(255, 0, 170, 0.7);
  opacity: 1; /* Start visible */
  transform: translateY(0);
  backdrop-filter: blur(10px);
}

/* ===== SCROLL PROMPT ICON ===== */

.scroll-prompt__icon {
  width: 20px;
  height: 20px;
  color: #F0F0F0;
  transition: all 0.3s ease-out;
  filter: drop-shadow(0 0 4px rgba(255, 0, 170, 0.5));
}

/* ===== SCROLL PROMPT TEXT ===== */

.scroll-prompt__text {
  position: relative;
  white-space: nowrap;
}

.scroll-prompt__text::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #FF00AA, #FF66FF);
  transition: width 0.3s ease-out;
  box-shadow: 0 0 8px rgba(255, 0, 170, 0.6);
}

/* ===== HOVER EFFECTS ===== */

.scroll-to-bottom-prompt:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: #FF66FF;
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(255, 0, 170, 0.4),
    0 0 0 0 rgba(255, 0, 170, 0.9);
}

.scroll-to-bottom-prompt:hover .scroll-prompt__icon {
  animation: glitchFlicker 0.3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 0, 170, 0.8));
}

.scroll-to-bottom-prompt:hover .scroll-prompt__text::after {
  width: 100%;
}

/* ===== FOCUS STATES ===== */

.scroll-to-bottom-prompt:focus {
  outline: none;
  box-shadow: 
    0 0 0 3px rgba(255, 0, 170, 0.3),
    0 8px 25px rgba(255, 0, 170, 0.4),
    0 0 0 0 rgba(255, 0, 170, 0.9);
}

.scroll-to-bottom-prompt:focus-visible {
  border-color: #FF66FF;
}

/* ===== ACTIVE STATES ===== */

.scroll-to-bottom-prompt:active {
  transform: translateY(0);
  box-shadow: 
    0 4px 15px rgba(255, 0, 170, 0.3),
    0 0 0 0 rgba(255, 0, 170, 0.7);
}

/* ===== POSITIONING - DESKTOP ===== */

@media (min-width: 768px) {
  .scroll-to-bottom-prompt {
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    min-width: auto;
  }
}

/* ===== POSITIONING - MOBILE ===== */

@media (max-width: 767px) {
  .scroll-to-bottom-prompt {
    bottom: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--spacing-8));
    min-height: 44px;
    justify-content: center;
    font-size: var(--font-size-lg);
    padding: var(--spacing-3) var(--spacing-4);
  }
  
  .scroll-to-bottom-prompt:hover {
    transform: translateX(-50%) translateY(-2px);
  }
  
  .scroll-to-bottom-prompt:active {
    transform: translateX(-50%) translateY(0);
  }
}

/* ===== HIDDEN STATE ===== */

.scroll-to-bottom-prompt.hidden {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(20px);
}

/* ===== ANIMATIONS ===== */

@keyframes glitchFlicker {
  0%, 90%, 100% {
    opacity: 1;
    transform: translateX(0);
  }
  5%, 85% {
    opacity: 0.8;
    transform: translateX(-1px);
  }
  10%, 80% {
    opacity: 0.9;
    transform: translateX(1px);
  }
  15%, 75% {
    opacity: 0.7;
    transform: translateX(-1px);
  }
  20%, 70% {
    opacity: 0.8;
    transform: translateX(1px);
  }
  25%, 65% {
    opacity: 0.9;
    transform: translateX(-1px);
  }
  30%, 60% {
    opacity: 0.6;
    transform: translateX(1px);
  }
  35%, 55% {
    opacity: 0.8;
    transform: translateX(-1px);
  }
  40%, 50% {
    opacity: 0.7;
    transform: translateX(1px);
  }
  45% {
    opacity: 0.9;
    transform: translateX(-1px);
  }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  .scroll-to-bottom-prompt {
    transition: none;
  }
  
  .scroll-to-bottom-prompt:hover .scroll-prompt__icon {
    animation: none;
  }
  
  .scroll-to-bottom-prompt:hover .scroll-prompt__text::after {
    transition: none;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .scroll-to-bottom-prompt {
    display: none;
  }
}

/* ===== HIGH CONTRAST MODE ===== */

@media (prefers-contrast: high) {
  .scroll-to-bottom-prompt {
    background: #000000;
    border-color: #FFFFFF;
    color: #FFFFFF;
  }
}