/* ========================================
   RIBBON ELEMENTS
   ======================================== */

.ribbon {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.ribbon-svg {
  overflow: visible;
}

.ribbon-stroke {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ribbon-fill {
  fill: var(--accent);
  opacity: 0.06;
}

/* ========================================
   SECTION DIVIDER / RIBBON
   ======================================== */

.section-ribbon {
  position: relative;
  height: 80px;
  overflow: visible;
}

.section-ribbon svg {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 100%;
  animation: ribbon-wave 5s ease-in-out infinite;
}

.section-ribbon:nth-of-type(2n) svg {
  animation-direction: reverse;
}

@keyframes ribbon-wave {
  0% { transform: translateX(-2%); }
  50% { transform: translateX(2%); }
  100% { transform: translateX(-2%); }
}