/* ==========================================================================
   ROUNDED SECTION — container with rounded top corners that overlaps the
   previous block. data-prev-theme paints the corners with the colour of
   the section above. js/modules/rounded-sections.js scales it from 0.9 to 1
   while it scrolls into view (desktop/tablet only).
   ========================================================================== */

.rounded-section {
  --prev-bg: var(--white);
  position: relative;
  background: linear-gradient(to bottom, var(--prev-bg) 50%, var(--bg1) 50%);
}

.rounded-section[data-prev-theme="grey"]  { --prev-bg: var(--ink-100); }
.rounded-section[data-prev-theme="black"] { --prev-bg: var(--ink-950); }
.rounded-section[data-prev-theme="white"] { --prev-bg: var(--white); }

.rounded-section__scale {
  position: relative;
  overflow: clip;
  border-top-left-radius: var(--radius-section);
  border-top-right-radius: var(--radius-section);
  background: var(--bg1);
  transform-origin: top center;
}

.rounded-section + .rounded-section {
  margin-top: calc(var(--rounded-margin) * -1);
}

.rounded-section:has(+ .rounded-section) {
  padding-bottom: calc(var(--section-margin) + var(--rounded-margin));
}