/* Corner-morph buttons (Tone Segurado's CTAs and photo frames, rewritten). Plain CSS: only border-radius
   transitions, so the shape changes while everything else (outline, bevel, colour) holds still.
   Three states: rest -> hover -> press, each its own radius. The trick is the over-sized resting radius:
   100px on a 127px-tall pill is past the 63.5px cap, so the first stretch of the tween is invisible and the
   corners hold, then square off (and on leave sit square, then round). */
.cm {
  --cm-rest: 100px; --cm-hover: 0px; --cm-press: 16px;
  --cm-dur: .5s; --cm-ease: ease;
  --cm-ink: #161616; --cm-line: 3px;
  border: var(--cm-line) solid var(--cm-ink);
  border-radius: var(--cm-rest);
  transition: border-radius var(--cm-dur) var(--cm-ease);
}
.cm:hover, .cm:focus-visible { border-radius: var(--cm-hover); }
.cm:active { border-radius: var(--cm-press); }

/* Pill CTA: chunky bevel (light top-left, dark bottom-right, both inset 2px) and a soft drop on the caps */
.cm--pill {
  --cm-bg: #14a4d8; --cm-hi: #b0d7ee; --cm-lo: #3b789e;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 25px 35px 30px; background: var(--cm-bg); color: #fff; cursor: pointer;
  font: 700 33px/33px var(--cm-font, inherit); letter-spacing: 1px; text-transform: uppercase; text-align: center; text-decoration: none;
  text-shadow: -2px 2px rgba(0, 0, 0, .11);
  box-shadow: inset -2px 2px var(--cm-hi), inset 2px -2px var(--cm-lo);
}
.cm--pill.cm--green { --cm-bg: #24b178; --cm-hi: #abf4d7; --cm-lo: #287956; }
.cm--pill.cm--sand { --cm-bg: #f8c785; --cm-hi: #f7dbb6; --cm-lo: #e4962e; color: var(--cm-ink); }
@media (max-width: 991px) { .cm--pill { font-size: 25px; line-height: 25px; } }
@media (max-width: 767px) { .cm--pill { font-size: 20px; line-height: 20px; } }

/* Photo frame: square at rest, rounds into a capsule on hover (200px, .2s) and goes old-photo sepia at once
   (the filter has no transition), 25px while pressed */
.cm--photo { --cm-rest: 0px; --cm-hover: 200px; --cm-press: 25px; --cm-dur: .2s; display: block; width: 100%; overflow: hidden; }
.cm--photo:hover { filter: sepia(1); }

/* Soft tile: a rounded square that tightens its corners on hover (100 -> 50px, .2s), square while pressed */
.cm--tile { --cm-rest: 100px; --cm-hover: 50px; --cm-press: 0px; --cm-dur: .2s; display: block; overflow: hidden; }

/* Snap: 0 -> 10000px in .2s. Past the cap almost at once, so it goes round the instant you arrive; on leave
   it stays round for most of the tween and drops square at the very end */
.cm--snap { --cm-rest: 0px; --cm-hover: 10000px; --cm-press: 10000px; --cm-dur: .2s; display: block; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .cm { transition: none; } }