/* The Fold intro: .txt, .md, .docx and .pdf start apart, merge into one page, and the
   page folds its corner over to become the mark. Drawn on a fixed 1200 × 675 stage
   (scaled to fit by whoever shows it), so every frame is the same in the page and the video.
   Page geometry is the mark's (web/src/ui/bits.tsx): the page spans 6–94 of its 100-unit box,
   the fold runs from (64, 6) to (94, 36), corners are r12 and the folded one r8. */

.fi-stage {
  --ink: #0e0e0e;
  --paper: #f4f1e8;
  --lime: #d4ff3f;
  --pink: #ff7ad9;
  --s: 200px; /* one page; fold-intro.js sets it from the same number */
  position: relative;
  width: 1200px;
  height: 675px;
  overflow: hidden;
  background: var(--ink);
  transform-origin: 0 0;
  font-family: 'Bricolage Grotesque Variable', 'Inter Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* everything gathers to the centre of the stage */
.fi-stack { position: absolute; left: 600px; top: 337.5px; width: 0; height: 0; }

.fi-card,
.fi-page {
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
}
.fi-card {
  --r: calc(var(--s) * 0.1364); /* r12 of the mark's 88-unit page */
  --rf: calc(var(--s) * 0.0909); /* r8, the corner that folds */
  background: var(--c);
  color: var(--ink);
  border-radius: var(--r) var(--rf) var(--r) var(--r);
}
.fi-ext {
  position: absolute;
  left: calc(var(--s) * 0.105);
  top: calc(var(--s) * 0.09);
  font-weight: 800;
  font-size: calc(var(--s) * 0.26);
  line-height: 1;
  letter-spacing: -0.05em;
}
.fi-lines { position: absolute; left: calc(var(--s) * 0.12); right: calc(var(--s) * 0.27); bottom: calc(var(--s) * 0.15); display: grid; gap: calc(var(--s) * 0.053); }
.fi-lines i { display: block; height: calc(var(--s) * 0.047); border-radius: 99px; background: currentColor; opacity: 0.24; }
.fi-lines i:nth-child(1) { width: 92%; }
.fi-lines i:nth-child(2) { width: 68%; }
.fi-lines i:nth-child(3) { width: 82%; }

/* the merged page: a body with its corner cut away, and the corner itself, which folds */
.fi-page { opacity: 0; perspective: 640px; }
.fi-body {
  position: absolute;
  inset: 0;
  background: var(--lime);
  border-radius: calc(var(--s) * 0.1364) 0 calc(var(--s) * 0.1364) calc(var(--s) * 0.1364);
  /* Only the diagonal clips: the other edges sit outside the box (an edge exactly on the box
     shaves half a pixel there but not along the rounded corners, which shows as a step).
     The diagonal sits a pixel into the corner, so no hairline shows while the corner lies flat. */
  clip-path: polygon(-1px -1px, 65.909% -1px, calc(100% + 1px) 34.091%, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px));
}
/* the shadow the lifting corner throws on the page, where the flap will land */
/* (the blur sits on the parent: a clip-path on the same element would cut the blur off) */
.fi-cast { position: absolute; inset: 0; filter: blur(9px); opacity: 0; }
.fi-cast i { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(61% 0, 61% 39%, 100% 39%); }
.fi-corner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 82.955% 17.045%; /* the middle of the fold line */
}
.fi-face {
  position: absolute;
  inset: 0;
  border-top-right-radius: calc(var(--s) * 0.0909);
  clip-path: polygon(calc(65.909% - 1px) -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(34.091% + 1px));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fi-front { background: var(--lime); }
/* turned over along the corner's own line of symmetry, so it shares the corner's spot,
   facing away; once the corner folds, it is the pink flap */
.fi-back {
  background: var(--pink);
  transform-origin: 82.955% 17.045%;
  transform: rotate3d(1, -1, 0, 180deg);
}
.fi-shade { position: absolute; inset: 0; background: var(--ink); opacity: 0; }

/* the wordmark: "fold" with the mark as its full stop up top, like the app's header */
.fi-lockup {
  position: absolute;
  left: 600px;
  top: 337.5px;
  display: flex;
  align-items: flex-start;
  gap: 0.02em;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 230px;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--paper);
}
.fi-word { display: block; padding-right: 0.02em; }
.fi-slot { display: block; width: 0.6em; height: 0.6em; margin-top: -0.07em; }