/* ===========================================
   FLOWBRAIN — Global Effects
   Scroll progress, cursor glow, section dividers,
   magnetic buttons, aurora interactions
   =========================================== */

/* ---- Scroll Progress Bar ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--gradient-aurora);
  z-index: var(--z-scroll-progress, 51);
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  /* Subtle glow underneath the bar */
  box-shadow: 0 0 8px rgba(0, 200, 150, 0.4),
              0 0 20px rgba(99, 102, 241, 0.15);
}

/* ---- Cursor Aurora Glow ---- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 200, 150, 0.06) 0%,
    rgba(99, 102, 241, 0.035) 35%,
    rgba(168, 85, 247, 0.015) 55%,
    transparent 70%
  );
  pointer-events: none;
  z-index: var(--z-cursor-glow, 0);
  transform: translate(-50%, -50%);
  will-change: transform;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cursor-glow.is-active {
  opacity: 1;
}

/* Hide on touch devices */
@media (pointer: coarse) {
  .cursor-glow {
    display: none !important;
  }
}

/* ---- Section Wave Dividers ---- */
.section-divider {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
  line-height: 0;
  z-index: 2;
  margin-top: -1px;
  margin-bottom: -1px;
  pointer-events: none;
}

.section-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

.section-divider--sm {
  height: 50px;
}

.section-divider--lg {
  height: 120px;
}

.section-divider--flip {
  transform: scaleY(-1);
}

/* ---- Magnetic Button Enhancement ---- */
.btn {
  will-change: transform;
}

/* ---- Reduced Motion & Mobile ---- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
  .cursor-glow {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .section-divider {
    height: 40px;
  }
  .section-divider--lg {
    height: 60px;
  }
  .cursor-glow {
    display: none !important;
  }
}