/* Minimal asymmetric transitions between adjacent sections. */
main > section {
  --curve-next: #f6f1eb;
  --curve-accent: rgba(255, 101, 76, 0.14);
  isolation: isolate;
}

/* The colour always continues the following section into the current one. */
main > section:nth-of-type(1)  { --curve-next: #f6f1eb; }
main > section:nth-of-type(2)  { --curve-next: #07111a; }
main > section:nth-of-type(3)  { --curve-next: #e9e3dc; }
main > section:nth-of-type(4)  { --curve-next: #f6f1eb; }
main > section:nth-of-type(5)  { --curve-next: #f6f1eb; }
main > section:nth-of-type(6)  { --curve-next: #f6f1eb; }
main > section:nth-of-type(7)  { --curve-next: #e9e3dc; }
main > section:nth-of-type(8)  { --curve-next: #f6f1eb; }
main > section:nth-of-type(9)  { --curve-next: #f6f1eb; }
main > section:nth-of-type(10) { --curve-next: #f6f1eb; }
main > section:nth-of-type(11) { --curve-next: #f6f1eb; }
main > section:nth-of-type(12) { --curve-next: #f6f1eb; }
main > section:nth-of-type(13) { --curve-next: #07111a; }
main > section:nth-of-type(14) { --curve-next: #ff654c; }

/* Base organic shape. It sits inside the section and occupies no layout space. */
main > section:not(.hero):not(:last-of-type)::before,
main > section:not(.hero):not(:last-of-type)::after,
main > .hero::before,
main > .hero .hero-image::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: -1px !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 84px !important;
  margin: 0 !important;
  pointer-events: none !important;
}

main > section:not(.hero):not(:last-of-type)::before,
main > .hero::before {
  z-index: 1 !important;
  background: var(--curve-next) !important;
  opacity: 1 !important;
  -webkit-mask: 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 62 C115 18 238 74 377 43 C525 10 646 61 758 33 C850 10 925 16 1000 7 L1000 100 L0 100 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: 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 62 C115 18 238 74 377 43 C525 10 646 61 758 33 C850 10 925 16 1000 7 L1000 100 L0 100 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* A quiet overlapping layer gives depth without becoming an illustration. */
main > section:not(.hero):not(:last-of-type)::after,
main > .hero .hero-image::before {
  z-index: 2 !important;
  height: 68px !important;
  background: linear-gradient(100deg, transparent 4%, var(--curve-next) 40%, var(--curve-accent) 72%, transparent 100%) !important;
  opacity: 0.14 !important;
  filter: blur(7px) !important;
  -webkit-mask: 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 31 C154 5 258 65 424 28 C578 -6 695 55 822 24 C901 5 952 18 1000 39 L1000 100 L0 100 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: 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 31 C154 5 258 65 424 28 C578 -6 695 55 822 24 C901 5 952 18 1000 39 L1000 100 L0 100 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Alternate directions and amplitudes so adjacent transitions are not identical. */
main > section:nth-of-type(3n + 2):not(.hero):not(:last-of-type)::before {
  height: 76px !important;
  transform: scaleX(-1);
}

main > section:nth-of-type(3n + 2):not(.hero):not(:last-of-type)::after {
  height: 58px !important;
  transform: translateX(2.5%) scaleX(-1.04);
}

main > section:nth-of-type(3n):not(.hero):not(:last-of-type)::before {
  height: 92px !important;
  -webkit-mask-position: 7% 0;
  mask-position: 7% 0;
}

main > section:nth-of-type(3n):not(.hero):not(:last-of-type)::after {
  height: 72px !important;
  transform: translateX(-3%) scaleX(1.06);
  opacity: 0.1 !important;
}

/* First boundary: dark hero flows into the following light section. */
main > .hero::before {
  z-index: 2 !important;
  height: 104px !important;
  filter: drop-shadow(0 -12px 22px rgba(246, 241, 235, 0.08));
}

main > .hero .hero-image::before {
  background: linear-gradient(96deg, rgba(246, 241, 235, 0.02), rgba(246, 241, 235, 0.18) 56%, rgba(255, 101, 76, 0.08)) !important;
  opacity: 0.16 !important;
}

@media (max-width: 768px) {
  main > section:not(.hero):not(:last-of-type)::before,
  main > .hero::before {
    height: 48px !important;
  }

  main > section:not(.hero):not(:last-of-type)::after,
  main > .hero .hero-image::before {
    height: 36px !important;
    opacity: 0.1 !important;
    filter: blur(4px) !important;
  }

  main > .hero::before {
    height: 58px !important;
  }
}

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