/* KSWP ambient motion -- card and mark classes.
   Pairs with kswp-motion.js. Nothing is loaded from anywhere. */

.kswp-motion {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  /* The ground is set per card by mount(), from the chosen palette. */
}
.kswp-motion-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Without this a headline does not survive a lit scene. Invisible over the
   dark washes, so it costs nothing to leave on everywhere. */
.kswp-motion::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(6,8,10,.62));
  pointer-events: none;
}
.kswp-motion-copy {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 7%;
}
.kswp-motion-kicker {
  margin: 0;
  font: 700 clamp(9px, 2.7cqw, 14px)/1.3 inherit;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.kswp-motion-head {
  margin: 0;
  font: 700 clamp(18px, 8.2cqw, 44px)/1.08 Georgia, serif;
  color: #fff;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 14em;
}
.kswp-motion-sub {
  margin: 0;
  font-size: clamp(11px, 3.1cqw, 16px);
  color: rgba(255,255,255,.72);
}

/* A mark paints no background and assumes none. */
.kswp-mark {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.kswp-mark canvas { display: block; width: 100%; height: 100%; }