/**
 * 999DEX MOBILE SCROLL OPTIMIZATION
 *
 * Optimized scrolling behavior for mobile devices
 * - Momentum scrolling
 * - Smooth scroll behavior
 * - Overscroll containment
 * - Snap scrolling for cards
 * - Sticky headers
 * - Back-to-top button
 *
 * @version 1.0.0
 * @author Agent 24 - Mobile Optimization
 * @date November 3, 2025
 */

/* ============================================
   GLOBAL SCROLL BEHAVIOR
   ============================================ */

html {
  /* Smooth scrolling */
  scroll-behavior: smooth;

  /* Prevent bounce on iOS */
  overscroll-behavior-y: none;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  /* Prevent horizontal scroll */
  overflow-x: hidden;
  max-width: 100vw;

  /* Prevent overscroll bounce */
  overscroll-behavior: contain;
}

/* ============================================
   MOMENTUM SCROLLING (iOS)
   ============================================ */

.scroll-container,
.scrollable,
[data-scroll="true"] {
  /* Enable momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;

  /* Smooth inertial scrolling */
  scroll-behavior: smooth;

  /* Prevent overscroll */
  overscroll-behavior: contain;
}

/* ============================================
   CUSTOM SCROLLBAR (Desktop & Mobile Chrome)
   ============================================ */

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================
   SNAP SCROLLING (Token Cards)
   ============================================ */

.scroll-snap-container {
  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing-md);
  display: flex;
  overflow-x: auto;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  -webkit-overflow-scrolling: touch;
}

.scroll-snap-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-shrink: 0;
}

/* Horizontal scroll container for mobile */
.mobile-horizontal-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--spacing-md);
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin: 0 -16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mobile-horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-horizontal-scroll > * {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 280px;
}

@media (min-width: 768px) {
  .mobile-horizontal-scroll {
    overflow-x: visible;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    scroll-snap-type: none;
  }

  .mobile-horizontal-scroll > * {
    width: auto;
  }
}

/* Scroll indicators for horizontal scrolls */
.horizontal-scroll-wrapper {
  position: relative;
}

.horizontal-scroll-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.horizontal-scroll-wrapper:hover .horizontal-scroll-indicator {
  opacity: 1;
  pointer-events: all;
}

.horizontal-scroll-indicator.left {
  left: 8px;
}

.horizontal-scroll-indicator.right {
  right: 8px;
}

.horizontal-scroll-indicator:active {
  transform: translateY(-50%) scale(0.95);
}

/* ============================================
   STICKY HEADERS
   ============================================ */

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  transition: box-shadow 200ms ease;
}

.sticky-header.scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* Sticky header with safe area */
@supports (top: env(safe-area-inset-top)) {
  .sticky-header-safe {
    top: env(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }
}

/* Sticky section headers */
.sticky-section-header {
  position: sticky;
  top: 64px; /* Below main header */
  z-index: 90;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  padding: var(--spacing-base) var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: rgba(168, 85, 247, 0.9);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-purple);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  transition: var(--transition-all-medium);
  z-index: 999;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.5);
}

.back-to-top:active {
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* Safe area support */
@supports (bottom: env(safe-area-inset-bottom)) {
  .back-to-top {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* Mobile: smaller button */
@media (max-width: 768px) {
  .back-to-top {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   INFINITE SCROLL OPTIMIZATION
   ============================================ */

.infinite-scroll-container {
  position: relative;
  min-height: 100vh;
}

/* Loading indicator for infinite scroll */
.infinite-scroll-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  transition: opacity 300ms ease;
}

.infinite-scroll-loading.active {
  opacity: 1;
}

.infinite-scroll-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-purple);
  border-radius: var(--radius-full);
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Sentinel element for intersection observer */
.infinite-scroll-sentinel {
  height: 1px;
  pointer-events: none;
}

/* ============================================
   SCROLL INDICATORS
   ============================================ */

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  z-index: 9999;
  transition: width 100ms ease-out;
  will-change: width;
}

/* Scroll fade effect (content fades at edges) */
.scroll-fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 40px);
}

.scroll-fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 40px);
  mask-image: linear-gradient(to top, transparent 0%, black 40px);
}

.scroll-fade-both {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 40px,
    black calc(100% - 40px),
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 40px,
    black calc(100% - 40px),
    transparent 100%
  );
}

/* ============================================
   SMOOTH ANCHOR SCROLLING
   ============================================ */

/* Offset for fixed headers */
:target {
  scroll-margin-top: 80px;
}

/* Smooth scroll for anchor links */
a[href^="#"] {
  scroll-behavior: smooth;
}

/* ============================================
   OVERSCROLL BEHAVIOR
   ============================================ */

/* Prevent elastic bounce on iOS */
.no-overscroll {
  overscroll-behavior: contain;
}

/* Allow overscroll for pull-to-refresh */
.allow-overscroll {
  overscroll-behavior: auto;
}

/* Prevent overscroll in specific directions */
.no-overscroll-x {
  overscroll-behavior-x: contain;
}

.no-overscroll-y {
  overscroll-behavior-y: contain;
}

/* ============================================
   SCROLL SNAPPING FOR SECTIONS
   ============================================ */

.scroll-snap-sections {
  scroll-snap-type: y proximity;
  scroll-padding-top: 64px;
}

.scroll-snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* ============================================
   VIRTUAL SCROLLING CONTAINER
   ============================================ */

.virtual-scroll-container {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.virtual-scroll-content {
  position: relative;
  will-change: transform;
}

.virtual-scroll-spacer {
  pointer-events: none;
}

/* ============================================
   SCROLL LOCK (Disable Scrolling)
   ============================================ */

body.scroll-locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for smooth scrolling */
.scroll-optimized {
  will-change: scroll-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce repaints during scroll */
.scroll-item {
  contain: layout style paint;
  content-visibility: auto;
}

/* ============================================
   MOBILE-SPECIFIC SCROLL ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Smaller scroll padding on mobile */
  .scroll-snap-container {
    scroll-padding: var(--spacing-sm);
    gap: var(--spacing-base);
    padding: var(--spacing-base);
  }

  /* Adjust sticky header top on mobile */
  .sticky-section-header {
    top: 56px;
  }

  /* Adjust target scroll margin on mobile */
  :target {
    scroll-margin-top: 64px;
  }

  /* Tighter scroll containers on mobile */
  .mobile-scroll-tight {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }
}

/* ============================================
   SCROLL RESTORATION
   ============================================ */

/* Preserve scroll position on navigation */
@supports (scroll-behavior: smooth) {
  .scroll-restore {
    scroll-behavior: auto;
  }
}

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

/* Focus visible during keyboard navigation */
.scroll-container:focus-visible {
  outline: 2px solid var(--accent-purple);
  outline-offset: 2px;
}

/* Keyboard scrolling hint */
.scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  opacity: 1;
  animation: fadeOut 3s ease forwards;
  pointer-events: none;
}

@keyframes fadeOut {
  0%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.scroll-hint svg {
  width: 16px;
  height: 16px;
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  html,
  .scroll-container,
  .scrollable,
  [data-scroll="true"] {
    scroll-behavior: auto !important;
  }

  .scroll-snap-container {
    scroll-snap-type: none !important;
  }

  .back-to-top {
    transition: opacity 0ms !important;
  }

  .scroll-hint svg {
    animation: none !important;
  }
}