/* Centre-flip card - the slot, the moving card, its two faces and the scrim. Motion lives in part.js.
   The card moves with a transform from inside its slot, so keep its ancestors free of overflow clipping, transforms
   and z-index stacking (a plain grid is fine). */
.cfc, .cfc-scrim {
  --cfc-perspective: 1200px;
  --cfc-scrim: rgba(22, 62, 53, .4);   /* dim colour behind the card */
  --cfc-scrim-blur: 4px;               /* backdrop blur */
  --cfc-scrim-in: 0ms;                 /* source: the scrim is simply there (try 200ms for a fade) */
  --cfc-scrim-out: 200ms;              /* fades away as the close starts */
  --cfc-z: 1000;                       /* scrim z-index; the centred card sits one above */
  --cfc-radius: 20px;                  /* match your faces' corners so the focus ring follows them */
}
.cfc { min-width: 0; align-self: start; }
.cfc__card {
  position: relative;
  width: 100%;
  perspective: var(--cfc-perspective);
  cursor: pointer;
  transform-origin: 50% 50%;
  border-radius: var(--cfc-radius);
  -webkit-tap-highlight-color: transparent;
}
.cfc__card.is-centred { z-index: calc(var(--cfc-z) + 1); }
.cfc__card:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.cfc__inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}
.cfc__face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cfc__front { position: relative; transform: rotateY(0deg) translateZ(0); }
.cfc__back { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(0); }

.cfc-scrim {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: var(--cfc-z);
  background: var(--cfc-scrim);
  -webkit-backdrop-filter: blur(var(--cfc-scrim-blur));
  backdrop-filter: blur(var(--cfc-scrim-blur));
  opacity: 0;
  transition: opacity var(--cfc-scrim-out) cubic-bezier(.4, 0, .2, 1);
}
.cfc-scrim.is-on { opacity: 1; transition-duration: var(--cfc-scrim-in); }

@media (prefers-reduced-motion: reduce) {
  .cfc-scrim, .cfc-scrim.is-on { transition: none; }
}