/* Enhanced Section Transitions */

/* Improved section transitions with modern effects */
.section-reveal {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Make sure footer is always visible regardless of animation state */
footer.section-reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Staggered animation for child elements */
.stagger-animation > * {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-animation.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* Configure child animation delays */
.stagger-animation.revealed > *:nth-child(1) { transition: all 0.5s ease 0.0s; }
.stagger-animation.revealed > *:nth-child(2) { transition: all 0.5s ease 0.1s; }
.stagger-animation.revealed > *:nth-child(3) { transition: all 0.5s ease 0.2s; }
.stagger-animation.revealed > *:nth-child(4) { transition: all 0.5s ease 0.3s; }
.stagger-animation.revealed > *:nth-child(5) { transition: all 0.5s ease 0.4s; }
.stagger-animation.revealed > *:nth-child(6) { transition: all 0.5s ease 0.5s; }
.stagger-animation.revealed > *:nth-child(n+7) { transition: all 0.5s ease 0.6s; }

/* Modern section dividers */
.divider-wave {
  position: absolute;
  width: 100%;
  height: 100px;
  fill: var(--bg-primary);
}

.divider-wave-top {
  top: 0;
  transform: rotate(180deg);
}

.divider-wave-bottom {
  bottom: 0;
}

/* Enhanced skewed section divider */
.section-divider-skew {
  position: relative;
  height: 100px;
  overflow: hidden;
  z-index: 5;
}

.section-divider-skew::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-primary);
  transform: skewY(-3deg);
  transform-origin: top left;
}

/* Section transition with masked reveal */
.masked-section {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.masked-section.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Enhanced section background parallax */
.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  z-index: -1;
  will-change: transform;
}

/* Mobile optimizations for transitions */
@media (max-width: 768px) {
  .section-reveal {
    transform: translateY(20px); /* Smaller transform distance on mobile */
  }
  
  .section-divider {
    height: 60px; /* Smaller dividers on mobile */
    margin-top: -30px;
    margin-bottom: -30px;
  }
  
  .section-divider-skew {
    height: 60px;
  }
}

/* Disable complex animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section-reveal,
  .stagger-animation > *,
  .masked-section {
    transition: none;
    transform: none;
    opacity: 1;
    clip-path: none;
  }
}