/**
 * Integrity Cleaning - Smooth Scrolling & Scroll Behavior
 * Modern scroll enhancements
 * @version 2026.02.19
 */

/* Smooth scrolling for entire page */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for fixed header */
}

/* Better scroll snap for carousels */
.scroll-snap-x {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  gap: 1rem;
}

.scroll-snap-x > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.scroll-snap-y {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-block: 1rem;
  gap: 1rem;
}

.scroll-snap-y > * {
  scroll-snap-align: start;
}

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

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

/* Custom scrollbar styling (when visible) */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--ic-gray-100, #f3f4f6);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--ic-gray-400, #9ca3af);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ic-gray-500, #6b7280);
}

/* Parallax scroll effect for hero sections */
.parallax-scroll {
  transform: translateY clamp(0px, var(--scroll-y, 0px) * 0.3, 100px);
}

/* Scroll reveal animations */
@keyframes scroll-reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  opacity: 0;
  animation: scroll-reveal 0.6s ease forwards;
}

.scroll-reveal.visible {
  opacity: 1;
}

/* Staggered animations for child elements */
.scroll-reveal-stagger > * {
  opacity: 0;
  animation: scroll-reveal 0.6s ease forwards;
}

.scroll-reveal-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.scroll-reveal-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.scroll-reveal-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.scroll-reveal-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.scroll-reveal-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.scroll-reveal-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* Intersection observer trigger classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Horizontal scroll sections */
.horizontal-scroll-section {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.horizontal-scroll-section > * {
  scroll-snap-align: center;
}

/* Back to top button smooth behavior */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: var(--ic-blue-primary, #3b82f6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.back-to-top:hover {
  background: var(--ic-blue-dark, #2563eb);
  transform: translateY(-4px);
}

/* Anchor link offset for fixed headers */
[id] {
  scroll-margin-top: 80px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .scroll-reveal,
  .scroll-reveal-stagger > *,
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    animation: none;
  }
}