/* Maiden Gully Cleaning Company - Scroll Animations & Transitions */

html {
  scroll-behavior: smooth;
}

/* 1. Top Reading Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--mgc-primary, #34BCBC) 0%, var(--mgc-secondary, #FCD094) 100%);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.08s ease-out;
  box-shadow: 0 0 10px rgba(52, 188, 188, 0.7);
}

/* 2. Scroll Reveal Animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Directional & Special Variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(35px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 3. Navbar Elevated on Scroll */
.navbar {
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.navbar.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px -2px rgba(19, 56, 59, 0.12);
  border-bottom-color: rgba(52, 188, 188, 0.25);
  padding: 10px 0;
}

/* 4. Floating Back-to-Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--mgc-primary-dark, #13383B);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.back-to-top-btn:hover {
  background-color: var(--mgc-primary, #34BCBC);
  transform: translateY(0) scale(1.1);
  box-shadow: 0 12px 20px -3px rgba(52, 188, 188, 0.35);
}

.back-to-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 5. Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .scroll-reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}