/* Theme. To restyle, set any --fx-* variable on :root (every feature on the site)
   or on .fx-ba (this feature only). The values here are the defaults. */
.fx-ba {
  --_accent: var(--fx-accent, #d4af37);
  --_accent-text: var(--fx-accent-text, #000);
  --_text: var(--fx-text, #f5f5f5);
  --_line: var(--fx-line, rgba(255,255,255,.15));
  --_divider: var(--fx-divider, #fff);
  --_missing-before: var(--fx-missing-before, #a3a3a3);
  --_missing-after: var(--fx-missing-after, #ccc);
  --_demo: var(--fx-demo, #9ad1ff);
  --_font-display: var(--fx-font-display, inherit);
  --_font-body: var(--fx-font-body, inherit);
  --_ratio: var(--fx-ratio, 16 / 9);
  --_ratio-desktop: var(--fx-ratio-desktop, 21 / 9);
  --_max-h: var(--fx-max-h, 340px);
  --_space: var(--fx-space, 16px);
  --_space-sm: calc(var(--_space) * .5);
  --_space-lg: calc(var(--_space) * 1.5);
  --_radius: var(--fx-radius, 6px);
  --_radius-sm: calc(var(--_radius) * .6);
  font-family: var(--_font-body);
}
/* Before and After */
.fx-ba { color: var(--_text); }
.fx-ba-title { margin: 0 var(--_space) .35em; font-family: var(--_font-display); text-transform: var(--fx-heading-case, uppercase); }
.fx-ba-stage { position: relative; margin-top: 12px; }
.fx-ba-pair { margin: 0; }
.fx-ba-pair[hidden] { display: none; }
.fx-ba-frame {
  --fx-pos: 50%;
  position: relative;
  aspect-ratio: var(--_ratio);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.fx-ba-photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--_missing-after);
  color: #444;
  font-size: .85rem;
  font-weight: 600;
}
.fx-ba-before { background: var(--_missing-before); color: #141414; clip-path: inset(0 calc(100% - var(--fx-pos)) 0 0); }
.fx-ba-missing { position: absolute; bottom: 10px; max-width: 42%; font-size: .8rem; line-height: 1.25; }
.fx-ba-before .fx-ba-missing { left: 12px; text-align: left; }
.fx-ba-after .fx-ba-missing { right: 12px; text-align: right; }
.fx-ba-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fx-ba-tag {
  position: absolute;
  top: 10px;
  padding: 2px var(--_space-sm);
  background: rgba(0,0,0,.6);
  color: #fff;
  border-radius: var(--_radius-sm);
  font-family: var(--_font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: var(--fx-heading-case, uppercase);
  pointer-events: none;
}
.fx-ba-tag-before { left: 10px; }
.fx-ba-tag-after { right: 10px; color: var(--_accent); }
.fx-ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fx-pos);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  margin-left: -22px;
}
.fx-ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--_divider); }
.fx-ba-handle:focus-visible { outline: 3px solid var(--_accent); outline-offset: -3px; }
.fx-ba-knob {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--_accent);
  color: var(--_accent-text);
  font-size: 1.2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.fx-ba-caption { min-height: 54px; padding: var(--_space) 232px 0 var(--_space); font-family: var(--_font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.1; text-transform: var(--fx-heading-case, uppercase); }
.fx-ba-nav { position: absolute; right: 16px; bottom: 0; display: flex; gap: 4px; }
.fx-ba-nav button {
  width: 40px;
  height: 44px;
  background: none;
  color: var(--_text);
  border: 1px solid var(--_line);
  border-radius: var(--_radius-sm);
  font-family: var(--_font-display);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}
.fx-ba-nav button:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.fx-ba-nav .fx-ba-num[aria-current="true"] { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-text); }

@media (min-width: 900px) {
  .fx-ba-title { margin: 0 calc(var(--_space) * 2) .35em; }
  .fx-ba-stage { max-width: 1440px; margin: var(--_space) auto 0; }
  .fx-ba-frame { aspect-ratio: var(--_ratio-desktop); max-height: var(--_max-h); width: 100%; }
  .fx-ba-caption { padding: 12px 260px 0 calc(var(--_space) * 2); font-size: 1.8rem; }
  .fx-ba-nav { right: 32px; }
}
.fx-ba .fx-demo {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  border: 1px dashed var(--_demo);
  border-radius: var(--_radius-sm);
  color: var(--_demo);
  font-family: var(--_font-body);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.fx-ba > .fx-demo { margin-left: var(--_space); }
@media (min-width: 900px) { .fx-ba > .fx-demo { margin-left: calc(var(--_space) * 2); } }