/* ============================================
   SECTION TRANSITIONS - SEAMLESS LIGHT FLOW
   Light theme backgrounds that flow between sections
   IMPORTANT: Hero section (#hero-intro) is NOT modified
   ============================================ */

/* Page wrapper - light flowing background (skips hero) */
.page {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 100vh,
    rgba(255, 250, 245, 0.3) calc(100vh + 5%),
    rgba(255, 246, 235, 0.5) calc(100vh + 10%),
    rgba(255, 248, 240, 0.7) calc(100vh + 15%),
    #fffcf8 calc(100vh + 25%),
    #fff9f2 50%,
    #fffcf8 75%,
    rgba(255, 248, 240, 0.7) 85%,
    rgba(255, 246, 235, 0.5) 92%,
    rgba(255, 250, 245, 0.3) 96%,
    transparent 100%
  );
  position: relative;
}

/* Subtle texture overlay for depth - doesn't affect hero */
.page::before {
  content: '';
  position: fixed;
  top: 100vh;
  left: 0;
  width: 100%;
  height: calc(100% - 100vh);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 240, 220, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 235, 210, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 245, 230, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: subtleShift 20s ease-in-out infinite alternate;
}

@keyframes subtleShift {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* Make all sections (except hero) blend with light background */
.snap-panel:not(#hero-intro) {
  position: relative;
  background: transparent !important;
}

/* Apply technology-style background to ALL sections (except hero) */
.snap-panel:not(#hero-intro)::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 245, 0.9) 0%,
    rgba(255, 245, 235, 0.95) 10%,
    #fffaf5 20%,
    #fff8f0 50%,
    #fffaf5 80%,
    rgba(255, 245, 235, 0.95) 90%,
    rgba(255, 250, 245, 0.9) 100%
  ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Product sections - seamless light flow */
#products.snap-panel {
  background: transparent;
}

/* Step sections get transparent backgrounds (rely on page background) */
.snap-page[data-step] {
  background: transparent !important;
  position: relative;
}

/* Smooth divider between sections (not after hero) */
#hero-intro + .snap-panel::after,
.snap-panel:not(#hero-intro) + .snap-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 200, 150, 0.12) 25%,
    rgba(255, 180, 120, 0.2) 50%,
    rgba(255, 200, 150, 0.12) 75%,
    transparent 100%
  );
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.04);
  z-index: 100;
}

/* Make sure content is visible above backgrounds (except hero) */
.snap-panel:not(#hero-intro) > * {
  position: relative;
  z-index: 1;
}

/* All sections now use the same technology-style background applied above */

/* Responsive adjustments */
@media (max-width: 768px) {
  .snap-panel + .snap-panel::after {
    left: 5%;
    right: 5%;
  }
}

/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
  .page::before,
  .snap-panel::before {
    animation: none !important;
  }
}

/* ============================================
   SCROLL REVEAL - Products/About Section Transition
   Background stays visible, only content fades
   ============================================ */

/* Base transition for content containers */
.scroll-reveal-content {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
}

/* About content hidden state (fades in from below) */
.scroll-content-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(30px) !important;
}

/* Products content faded state (fades out upward) */
.scroll-content-faded {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-30px) !important;
}

/* Accessibility - reduce motion for scroll reveal */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-content {
    transition: opacity 0.3s ease-out !important;
  }

  .scroll-content-hidden,
  .scroll-content-faded {
    transform: none !important;
  }
}