/* Birdfeed Games — Rive */

/* Sections: tighter rhythm */
.bfg .case-section { gap: 14px; }
.bfg .bfg-process { gap: 29px; }

.bfg-sec h2 { width: 100%; font: 500 28px/1.15em "Satoshi", sans-serif; letter-spacing: -.01em; color: var(--ink); text-align: left; text-wrap: balance; }
.bfg-sec h3 { width: 100%; font: 500 20px/1.2em "Satoshi", sans-serif; color: var(--ink); }
/* text in a line of at most 760px, on the left edge */
.bfg-sec p { width: 100%; max-width: 760px; font: 400 16px/1.45em "Satoshi", sans-serif; color: var(--ink); }
.bfg-step > p { align-self: flex-start; }

/* One blank line between paragraphs */
.bfg-copy { width: 100%; }
.bfg-copy p + p { margin-top: 1em; }
.bfg-cta { margin-top: 12px; }

.bfg-step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; overflow: hidden; }

/* Rows of Rive embeds; wider rows overflow evenly and get clipped */
.bfg-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; overflow: hidden; }
.bfg-row .rive { flex: none; }
.bfg-trio .rive { width: 370px; height: 370px; }
.bfg-boxes .rive { width: 384px; height: 374px; }
.bfg-rats { gap: 614px; }
.bfg-rats .rive { width: 200px; height: 200px; }

.bfg-cloud { flex: none; width: 370px; height: 370px; }
.bfg-wordmark { flex: none; width: 882px; height: 200px; }

/* Hero: as wide as the text and the sections under it */
.bfg-hero {
  position: relative;
  width: calc(100% - 40px);
  height: 340px;
  background: #ffc6ff;
  border-radius: 10px;
  overflow: hidden;
  will-change: transform;
}
.bfg-sky { position: absolute; left: -11px; right: -8px; bottom: -100px; height: 275px; }
.bfg-ufo { position: absolute; top: calc(50.5882% - 167px); left: calc(49.7286% - 237.5px); width: 475px; height: 334px; }

/* Before / after slider */
.bfg-cmp-box { width: 100%; }
.bfg-cmp {
  --pos: 50%;
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #e4e6f1;
  color: #000;
}
.bfg-cmp img, .bfg-cmp video { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; }
/* The animation right of the handle: its frame slides right by --pos and the film inside slides back as far, so
   only transforms change while dragging (no repaint of the playing video, no layout) */
.bfg-cmp-after { position: absolute; inset: 0; z-index: 1; overflow: hidden; transform: translateX(var(--pos)); will-change: transform; }
.bfg-cmp-after > video { position: absolute; inset: 0; transform: translateX(calc(-1 * var(--pos))); will-change: transform; }
.bfg-cmp-range {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  z-index: 2;
  width: calc(100% + 2px);
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  touch-action: auto;
}
/* The handle: a full-width track moved by --pos, its line and knob centred on the track's left edge */
.bfg-cmp-handle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateX(var(--pos));
  will-change: transform;
  pointer-events: none;
}
.bfg-cmp-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, .4);
  transform: translateX(-50%);
}
.bfg-cmp-handle i {
  position: relative;
  flex: none;
  margin-left: -32px;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
}
/* Chevrons < > (content-box: the 2px borders add to the 8px arms) */
.bfg-cmp-handle i::before,
.bfg-cmp-handle i::after {
  content: "";
  position: absolute;
  top: 50%;
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  border-left: 2px solid;
  border-top: 2px solid;
  transform-origin: 0 0;
}
.bfg-cmp-handle i::before { left: 18px; transform: rotate(-45deg); }
.bfg-cmp-handle i::after { right: 8px; transform: rotate(135deg); }
.bfg-cmp.is-jumping :is(.bfg-cmp-after, .bfg-cmp-after > video, .bfg-cmp-handle) { transition: transform .3s; }
.bfg-cmp-label {
  position: absolute;
  top: 24px;
  z-index: 3;
  display: flex;
  padding: 2px 16px;
  background: rgba(255, 255, 255, .48);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 6px;
  font: 500 14px/28px "Inter", sans-serif;
  color: #000;
  cursor: pointer;
}
.bfg-cmp-label.is-before { left: 24px; }
.bfg-cmp-label.is-after { right: 24px; }

/* Closing stack of boxes */
.bfg-stack { position: relative; flex: none; width: 445px; height: 260px; overflow: hidden; }
.bfg-stack .rive { position: absolute; width: 200px; height: 200px; }
.bfg-stack .is-6 { top: 0; left: 0; }
.bfg-stack .is-1 { top: 4px; left: 163px; }
.bfg-stack .is-4 { bottom: 0; left: 88px; }
.bfg-stack .is-3 { bottom: 5px; right: 0; }

@media (max-width: 1199.98px) {
  .bfg-trio .rive { width: 188px; height: 200px; }
  .bfg-rats { gap: 207px; }
  .bfg-wordmark { width: 736px; }
}

@media (max-width: 809.98px) {
  .bfg-hero { width: 100%; }
  .bfg-sec h2 { font-size: 24px; }
  .bfg-ufo { top: calc(50.5882% - 85.5px); left: calc(49.6667% - 96.5px); width: 193px; height: 171px; }

  .bfg-row { flex-direction: column; }
  .bfg-trio .rive { width: 370px; height: 370px; }
  .bfg-rats { gap: 89px; }
  .bfg-wordmark { width: 304px; }

  .bfg-stack { width: 345px; }
  .bfg-stack .rive { width: 145px; height: 56%; }
  .bfg-stack .is-6 { top: 38px; left: 7px; }
  .bfg-stack .is-1 { top: 17.1893%; left: 130px; }
  .bfg-stack .is-4 { bottom: 34px; left: 73px; }
  .bfg-stack .is-3 { bottom: 34px; left: 192px; right: auto; }
}