/* Swing flip card: a two-faced card that turns over on rotateY when its button (or its face) is clicked:
   0 -> 180deg shows the back, the next click carries on round to 360deg (front again), always the same way.
   Numbers from Webflow IX2 a-37 (reveal back, rotateY 180) / a-38 (back to front, rotateY 360): 1500ms, ease swingTo.
   swingTo(t) = (t-1)^2 * (2.70158*(t-1) + 1.70158) + 1 (Webflow's easing library, = Penner easeOutBack, s 1.70158).
   That curve is a cubic, so it is EXACTLY cubic-bezier(1/3, 1.567193, 2/3, 1): x = t when the x handles sit at
   1/3 and 2/3, y1 = f'(0)/3 = 4.70158/3, y2 = 1 because f'(1) = 0. It overshoots by 10.0% at t = 0.58
   (180 -> 198deg at 870ms) and settles back over the last 630ms. */
.sflip {
  --sflip-dur: 1500ms;
  --sflip-ease: cubic-bezier(.333333, 1.567193, .666667, 1);   /* Webflow swingTo, exact */
  --sflip-depth: none;            /* perspective on the card; the source has none (a flat, squashing turn) */
  --sflip-radius: 11px;
  --sflip-gap-btn: 1.25rem;       /* button inset from the face corner */

  position: relative;
  perspective: var(--sflip-depth);
}
.sflip__inner {
  --sflip-angle: 0deg;            /* set by part.js */
  display: grid;
  transform-style: preserve-3d;
  transform: rotateY(var(--sflip-angle));
  transition: transform var(--sflip-dur) var(--sflip-ease);
}
.sflip__face {
  grid-area: 1 / 1;               /* both faces share one cell: the card is as tall as the taller face */
  position: relative;
  border-radius: var(--sflip-radius);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sflip__back { transform: rotateY(180deg); }
.sflip.is-surface .sflip__face { cursor: pointer; }

.sflip__btn {
  position: absolute;
  z-index: 2;
  top: var(--sflip-gap-btn);
  left: var(--sflip-gap-btn);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  cursor: pointer;
}
.sflip__back .sflip__btn { left: auto; right: var(--sflip-gap-btn); }
.sflip__btn svg { width: 40%; height: 40%; stroke: var(--sflip-btn-ink, #fff); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.sflip__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sflip__inner { transition-duration: 0s; }
}