@use '../config' as *;

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

//
// Sections
//
.section {
  --section-bg: transparent;
  position: relative;
  padding: 5rem 0;
  background: var(--section-bg);
}

.section-sm {
  padding: 4rem 0;
}

.section-white {
  --section-bg: var(--bg-surface);
}

.section-light {
  --section-bg: var(--bg-surface-secondary);
}

.section-primary {
  --section-bg: var(--primary);
  color: $white;
}

.section-dark {
  --section-bg: var(--dark);
  color: $white;
}

.section-header {
  max-width: 45rem;
  margin: 0 auto 5rem;
  text-align: center;

  @at-root .section-sm & {
    margin-bottom: 4rem;
  }
}

.section-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.section-title-lg {
  font-size: 2rem;
}

.section-description {
  margin-top: 1rem;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--secondary);
}

//
// Section divider
//
.section-divider {
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 5rem;
  pointer-events: none;

  path {
    fill: var(--section-bg);
  }

  .wave-1 {
    animation: move-forever1 30s linear infinite;
    animation-delay: -2s;
  }

  .wave-2 {
    opacity: 0.5;
    animation: move-forever2 24s linear infinite;
    animation-delay: -2s;
  }

  .wave-3 {
    opacity: 0.3;
    animation: move-forever3 18s linear infinite;
    animation-delay: -2s;
  }
}

.section-divider-auto {
  height: auto;
}