/* ================================
   SMOOTH SCROLL & CUSTOM SCROLLBAR
   ================================ */

/* Global Smooth Scroll Setup */
html {
  scroll-behavior: auto; /* Let Lenis handle the smooth scrolling */
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ================================
   CUSTOM SCROLLBAR STYLING
   ================================ */

/* Modern Custom Scrollbar for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 10, 10, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(217, 255, 0, 0.4) 0%,
    rgba(217, 255, 0, 0.6) 50%,
    rgba(217, 255, 0, 0.4) 100%
  );
  border-radius: 6px;
  border: 2px solid rgba(10, 10, 10, 0.5);
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(217, 255, 0, 0.6) 0%,
    rgba(217, 255, 0, 0.8) 50%,
    rgba(217, 255, 0, 0.6) 100%
  );
  border-color: rgba(10, 10, 10, 0.3);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(217, 255, 0, 0.9);
}

/* Scrollbar Corner */
::-webkit-scrollbar-corner {
  background: rgba(10, 10, 10, 0.5);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 255, 0, 0.5) rgba(10, 10, 10, 0.5);
}

/* ================================
   SCROLL PROGRESS ENHANCEMENTS
   ================================ */

/* Make scroll progress bar more visible with smooth scroll */
.scroll-progress {
  transition: transform 0.1s ease-out;
}

/* ================================
   PREVENT SCROLL JANK
   ================================ */

/* ✅ P3: KHÔNG đặt will-change tĩnh trong CSS cho toàn bộ elements.
   Lý do: Browser sẽ tạo composite layer cho MỌI element match selector ngay từ đầu
   → lãng phí VRAM đáng kể trên trang có nhiều reveal elements.

   Chiến lược tốt hơn: JS animations.js set will-change động trong IntersectionObserver
   → Chỉ tạo composite layer đúng lúc cần, xóa ngay sau khi transition xong.

   Parallax elements vẫn giữ will-change vì chúng animate liên tục khi scroll. */

.parallax-slow,
.parallax-fast {
    will-change: transform;
}

/* .reveal và variants: will-change được JS quản lý động */


/* ================================
   SCROLL SNAP (Optional)
   ================================ */

/* Uncomment below for scroll snap behavior on sections */
/*
main {
    scroll-snap-type: y proximity;
}

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

/* ================================
   MOBILE OPTIMIZATIONS
   ================================ */

@media (max-width: 768px) {
  /* Thinner scrollbar on mobile */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border-width: 1px;
  }
}

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

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

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  ::-webkit-scrollbar-thumb {
    background: rgba(217, 255, 0, 1);
    border-color: rgba(0, 0, 0, 1);
  }
}

/* ================================
   LOADING STATE
   ================================ */

/* Hide scrollbar during page load */
body.loading {
  overflow: hidden;
}

/* ================================
   HOVER EFFECTS ON SCROLLABLE AREAS
   ================================ */

/* Add subtle glow to scrollable containers on hover */
.analytics-container:hover::-webkit-scrollbar-thumb,
.overflow-y-auto:hover::-webkit-scrollbar-thumb {
  box-shadow: 0 0 8px rgba(217, 255, 0, 0.3);
}