/* scallop-edge - a section edge drawn as a row of semicircles, pure CSS (one radial-gradient tile, repeated).
   <div class="scallop" data-scallop-side="top|bottom" [data-scallop-bites] [data-scallop-attach] [data-scallop-outline="none"]></div>
   side = which side of its colour block the edge sits on: "top" bumps point UP (the block is below), "bottom" bumps hang DOWN.
   bites = inverted: semicircles of the page bitten out of a solid strip, leaving points between them.
   attach = absolutely placed just outside the parent's top/bottom edge (parent needs position: relative); default is in flow. */
.scallop {
  --scallop-color: #fc411f;        /* the block's colour */
  --scallop-d: 96px;               /* bump width (= repeat pitch) */
  --scallop-depth: .5;             /* bump height / width: .5 = true semicircles (48px at 96px); less = shallower arcs
                                      with angled cusps (the source footer's hills measure ~.37 at 143px) */
  --scallop-line: 1px;             /* outline width (outline="none" for a plain edge) */
  --scallop-ink: #000;             /* outline colour */
  --scallop-repeat: round;         /* round = always whole bumps, stretched a hair to fit; repeat = exact d, cut at the ends */
  --scallop-x: 0%;                 /* row anchor (use 50% with repeat to centre it) */
  --_aa: .6px;                     /* edge feather so the arcs don't stair-step */
  /* each bump is an arc of a circle of radius R whose chord is the tile width d and whose height is h = d * depth:
     R/d = (1/4 + depth^2) / (2 depth); the circle's centre sits (R - h) beyond the strip's base. All as % of the tile,
     so 'round' can stretch the tile and the arc stretches with it. */
  --_r: calc((0.25 + var(--scallop-depth) * var(--scallop-depth)) / (2 * var(--scallop-depth)));
  --_rx: calc(var(--_r) * 100%);
  --_ry: calc(var(--_r) / var(--scallop-depth) * 100%);
  --_off: calc((var(--_r) / var(--scallop-depth) - 1) * 100%);
  --_at: 50% calc(100% + var(--_off));
  display: block;
  position: relative;
  width: 100%;
  height: calc(var(--scallop-d) * var(--scallop-depth));
  pointer-events: none;
  background-repeat: var(--scallop-repeat) no-repeat;
  background-size: var(--scallop-d) 100%;
  background-position: var(--scallop-x) 0;
  /* bumps: fill inside the arc, outline ring, transparent outside */
  background-image: radial-gradient(ellipse var(--_rx) var(--_ry) at var(--_at),
    var(--scallop-color) calc(100% - var(--scallop-line) - var(--_aa)),
    var(--scallop-ink) calc(100% - var(--scallop-line)),
    var(--scallop-ink) calc(100% - var(--_aa)),
    transparent 100%);
}
.scallop[data-scallop-side="bottom"] { --_at: 50% calc(0% - var(--_off)); }

/* bites: transparent inside, outline ring, fill outside; the circle's centre moves beyond the strip's OUTER edge */
.scallop[data-scallop-bites] {
  --_at: 50% calc(0% - var(--_off));
  background-image: radial-gradient(ellipse var(--_rx) var(--_ry) at var(--_at),
    transparent calc(100% - var(--_aa)),
    var(--scallop-ink) 100%,
    var(--scallop-ink) calc(100% + var(--scallop-line)),
    var(--scallop-color) calc(100% + var(--scallop-line) + var(--_aa)));
}
.scallop[data-scallop-bites][data-scallop-side="bottom"] { --_at: 50% calc(100% + var(--_off)); }

.scallop[data-scallop-outline="none"] { --scallop-line: 0px; --scallop-ink: var(--scallop-color); }

/* attached: sits just outside the parent's edge, adds no height to the layout */
.scallop[data-scallop-attach] { position: absolute; left: 0; right: 0; }
.scallop[data-scallop-attach][data-scallop-side="top"],
.scallop[data-scallop-attach]:not([data-scallop-side]) { bottom: calc(100% - 1px); }   /* 1px overlap hides any seam */
.scallop[data-scallop-attach][data-scallop-side="bottom"] { top: calc(100% - 1px); }

/* optional scroll slide-in (part.js): a coloured band + its edge slides in from behind a clip */
.scallop-clip { overflow: hidden; position: relative; }
[data-scallop-slide] { will-change: transform; }