/* Organic asymmetric section transitions. Decorative only; no layout impact. */
main {
  overflow-x: clip;
}

main > section {
  position: relative;
}

main > section::before,
main > section::after {
  pointer-events: none !important;
}

/* Two translucent echoes of the next section colour soften the hard boundary. */
main > section::before {
  filter:
    drop-shadow(0 -11px 0 var(--curve-layer-1, rgba(246, 241, 235, .12)))
    drop-shadow(0 -23px 0 var(--curve-layer-2, rgba(246, 241, 235, .06))) !important;
}

/* Alternating Bézier silhouettes: deliberately asymmetric, never a repeated wave. */
main > section:nth-of-type(3n + 1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 71 C96 22 224 75 354 51 C492 25 571 4 691 37 C806 69 898 18 1000 29 L1000 100 L0 100 Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 71 C96 22 224 75 354 51 C492 25 571 4 691 37 C806 69 898 18 1000 29 L1000 100 L0 100 Z'/%3E%3C/svg%3E") !important;
}

main > section:nth-of-type(3n + 2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 27 C141 3 247 58 401 33 C548 9 632 64 752 52 C855 42 919 9 1000 16 L1000 100 L0 100 Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 27 C141 3 247 58 401 33 C548 9 632 64 752 52 C855 42 919 9 1000 16 L1000 100 L0 100 Z'/%3E%3C/svg%3E") !important;
}

main > section:nth-of-type(3n)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 48 C83 66 174 13 308 29 C452 47 531 78 664 44 C788 12 878 54 1000 35 L1000 100 L0 100 Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 48 C83 66 174 13 308 29 C452 47 531 78 664 44 C788 12 878 54 1000 35 L1000 100 L0 100 Z'/%3E%3C/svg%3E") !important;
}

/* Layer colours follow the section that flows in next. */
main > section:nth-of-type(1),
main > section:nth-of-type(3),
main > section:nth-of-type(4),
main > section:nth-of-type(5),
main > section:nth-of-type(6),
main > section:nth-of-type(7),
main > section:nth-of-type(8),
main > section:nth-of-type(9),
main > section:nth-of-type(10),
main > section:nth-of-type(11),
main > section:nth-of-type(12) {
  --curve-layer-1: rgba(246, 241, 235, .13);
  --curve-layer-2: rgba(246, 241, 235, .065);
}

main > section:nth-of-type(2),
main > section:nth-of-type(13) {
  --curve-layer-1: rgba(7, 17, 26, .14);
  --curve-layer-2: rgba(7, 17, 26, .07);
}

main > section:nth-of-type(14) {
  --curve-layer-1: rgba(255, 101, 76, .15);
  --curve-layer-2: rgba(255, 101, 76, .075);
}

@media (max-width: 768px) {
  main > section::before {
    height: 54px !important;
    filter:
      drop-shadow(0 -7px 0 var(--curve-layer-1, rgba(246, 241, 235, .11)))
      drop-shadow(0 -14px 0 var(--curve-layer-2, rgba(246, 241, 235, .055))) !important;
  }
}

@media (max-width: 390px) {
  main > section::before {
    height: 44px !important;
    filter:
      drop-shadow(0 -5px 0 var(--curve-layer-1, rgba(246, 241, 235, .1)))
      drop-shadow(0 -11px 0 var(--curve-layer-2, rgba(246, 241, 235, .05))) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  main > section::before,
  main > section::after {
    animation: none !important;
    transition: none !important;
  }
}