/* FAAM Beweging: cases tonen hun website. Een laag over het portret van een kaartje (FAAM Cases), met het
   websitebeeld (browservenster + gsm op crème) dat traag voorbijschuift. Positie en maat zet het script,
   zodat de opmaak van FAAM Cases (ook op gsm) onaangeroerd blijft en er niets verspringt. */
.fc-kaart.fbw-ca-kaart { position: relative; }

.fbw-ca {
  --fbw-ca-inkt: var(--wp--preset--color--inkt, #1B1B18);
  --fbw-ca-lijn: var(--wp--preset--color--lijn, #DDD7CA);
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  z-index: 1;
  overflow: hidden;
  background: #EDEBE4; /* de crème van de mockups, zodat de wissel zacht blijft */
  opacity: 0;
  transition: opacity .55s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.fbw-ca.is-aan { opacity: 1; }

.fbw-ca img.fbw-ca-beeld {
  position: absolute; left: 0; top: 0;
  display: block; max-width: none; height: auto;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

.fbw-ca-label {
  position: absolute; left: .75rem; bottom: .75rem;
  font: 600 .75rem/1.2 var(--wp--preset--font-family--manrope, Manrope, system-ui, sans-serif);
  color: var(--fbw-ca-inkt);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--fbw-ca-lijn);
  border-radius: 999px;
  padding: .32rem .7rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease .25s, transform .4s cubic-bezier(.2, .7, .2, 1) .25s;
}
.fbw-ca.is-aan .fbw-ca-label { opacity: 1; transform: none; }

/* Rustige modus: het portret blijft gewoon staan. */
@media (prefers-reduced-motion: reduce) {
  .fbw-ca { display: none !important; }
}
.fbw-rustig .fbw-ca { display: none !important; }