/* ============================================================
   Baseline — case study
   Figma: IG Post – Second Set, frame 990:13 (1400 x 7310)
   Reproduced exactly; motion data from get_motion_context
   (one 8.05s looping timeline, 14 animated nodes).
   ============================================================ */

.case-bl {
  --baseline-black: #060608;
  --bl-heat:   #99242b;
  --bl-ink:    #060608;
  --bl-paper:  #ffffff;
  --bl-signal: #c44926;
  --bl-badge:  #bce89a;

  --font-editorial: "PP Editorial New", "Instrument Serif", Georgia, serif;
  --font-shedry: "Shedry", "Instrument Serif", Georgia, serif;
  --font-inter: "Inter", var(--font-sans);

  --h: 7540;
  background: var(--baseline-black);
  /* clip, not hidden — hidden would make this a scroll container and the
     sticky panel would never stick. */
  overflow: clip;
}

.case-bl .t { margin: 0; line-height: normal; word-break: break-word; color: #fff; }
.case-bl .t-ed { font-family: var(--font-editorial); }
.case-bl .t-sh { font-family: var(--font-shedry); }
.case-bl .t-in { font-family: var(--font-sans); font-variation-settings: "wdth" 100; }
.case-bl .t-inter { font-family: var(--font-inter); }
.case-bl .t.abs { height: auto; }
.case-bl .on-black { color: #000; }

/* ---------- Left panel: pinned while the cards scroll past ----------
   Figma lays the four MARK steps out at fixed y positions with every body
   expanded, which leaves large gaps once they collapse. Here the panel is
   viewport height, sticks in place, and the steps stack so closed ones take
   no room. ------------------------------------------------------------ */
.bl-panel {
  position: sticky;
  top: calc(40 * var(--px));
  z-index: 2;
  margin-left: calc(24 * var(--px));
  width: calc(470 * var(--px));
  /* Sized by its content so a closed step leaves no empty panel, capped so a
     fully open one still fits on screen. */
  height: auto;
  max-height: calc(100vh - (80 * var(--px)));
  background: var(--baseline-black);
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(40 * var(--px));
  padding: calc(33 * var(--px)) calc(30 * var(--px)) calc(30 * var(--px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bl-panel-head { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; }
.bl-logo { width: calc(144 * var(--px)); height: calc(37 * var(--px)); object-fit: contain; }
.bl-year {
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(20 * var(--px)); color: #fff; line-height: 1.2;
}

.bl-intro {
  margin: calc(24 * var(--px)) 0 0;
  width: calc(300 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(20 * var(--px)); line-height: 1.25; color: #fff;
  flex: 0 0 auto;
}

/* One step is open at a time, so this sizes to its content. The scroll is a
   safety net for very short windows — with a visible bar, so nothing can be
   silently cut off. */
.bl-acc-list {
  margin-top: calc(36 * var(--px));
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.bl-acc-list::-webkit-scrollbar { width: calc(4 * var(--px)); }
.bl-acc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: calc(4 * var(--px)); }
.bl-item + .bl-item { margin-top: calc(22 * var(--px)); }

.bl-acc {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%; margin: 0; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px));
  letter-spacing: calc(-0.72 * var(--px)); line-height: 1.2; color: #fff;
  transition: color 180ms ease, opacity 180ms ease;
}
.bl-acc:hover { color: var(--octodraws-icon-purple); }
.bl-acc:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(6 * var(--px)); }
.bl-acc .sign { flex: 0 0 auto; margin-left: calc(16 * var(--px)); }

/* 0fr -> 1fr collapses to nothing, so closed steps leave no gap. */
.bl-body {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  transition: grid-template-rows 380ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bl-body > div { overflow: hidden; }
.bl-body p {
  margin: 0;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(19 * var(--px));
  letter-spacing: calc(-0.38 * var(--px));
  line-height: 1.35; color: #fff;
  opacity: 0; transition: opacity 220ms ease;
}
.bl-body p + p { margin-top: calc(12 * var(--px)); }
.bl-body.is-open { grid-template-rows: 1fr; padding-top: calc(14 * var(--px)); }
.bl-body.is-open p { opacity: 1; transition: opacity 280ms ease 110ms; }

.bl-next-row {
  flex: 0 0 auto;
  margin-top: calc(24 * var(--px));
  padding-top: calc(20 * var(--px));
  border-top: calc(1 * var(--px)) solid rgba(255,255,255,0.18);
  display: block; text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}
.bl-next-row:hover,
.bl-next-row:hover .bl-next-label { color: var(--octodraws-icon-purple); }
.bl-next-row:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(4 * var(--px)); }
.bl-next-label {
  display: block;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(22 * var(--px));
  letter-spacing: calc(-0.66 * var(--px)); color: #fff; line-height: 1.2;
}
.bl-next-line {
  display: flex; align-items: center; gap: calc(12 * var(--px));
  margin-top: calc(12 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(15 * var(--px)); color: #fff; line-height: 1.2;
}
.bl-badge {
  flex: 0 0 auto; position: relative;
  width: calc(21 * var(--px)); height: calc(23 * var(--px));
  background: var(--bl-badge); border-radius: calc(4 * var(--px));
  overflow: hidden;
}
/* The mark is one face lifted out of a 4x4 sprite sheet. Figma crops it with
   a 15x14 window inset at 3,5 and the percentages below are relative to that
   window, not to the tile — applied straight to the 21x23 tile they let the
   neighbouring faces bleed in and leave no green margin. */
.bl-badge-win {
  position: absolute; left: calc(3 * var(--px)); top: calc(5 * var(--px));
  width: calc(15 * var(--px)); height: calc(14 * var(--px));
  overflow: hidden;
}
.bl-badge img { position: absolute; max-width: none; left: -122.26%; top: -352.82%; width: 468.11%; height: 452.88%; }
.bl-next-name { font-weight: 500; }
.bl-next-type { opacity: 0.75; }
.bl-next-year { margin-left: auto; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .bl-body, .bl-body p { transition: none; }
}
/* ---------- Card shell ---------- */
.bl-card { border: calc(2 * var(--px)) solid #000; border-radius: calc(40 * var(--px)); overflow: hidden; }
.bl-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bl-crop img { position: absolute; max-width: none; }

/* 1 — wordmark */
.bl-c1 { --l: 540; --t: 41; --w: 805; --h: 390; background: #fff; }
.bl-c1-img { --l: 118; --t: 121; --w: 569; --h: 147; }
.bl-c1-img img { width: 100%; height: 100%; object-fit: cover; }

/* 2 — products */
.bl-c2 { --l: 540; --t: 459; --w: 445; --h: 390; }
.bl-c2-in { --l: -12; --t: -2; --w: 455; --h: 390; }
.bl-c2-in img { left: 0.34%; top: -24.82%; width: 102.4%; height: 160%; }

/* 3 — typography specimen */
.bl-c3 { --l: 1012; --t: 459; --w: 333; --h: 390; background: #fff; }
.bl-c3-top { --l: -2; --t: -2;  --w: 333; --h: 195; background: #fff; }
.bl-c3-bot { --l: -2; --t: 193; --w: 333; --h: 195; background: #060608; }
.bl-c3 p { position: absolute; margin: 0; font-family: var(--font-editorial); }
.bl-t1 { --l: 18;  --t: 20;  --w: 124; --h: 53; font-size: calc(24 * var(--px)); color: #000; }
.bl-t2 { --l: 210; --t: 98;  --w: 100; --h: 80; font-size: calc(81 * var(--px)); color: #000; text-align: right; }
.bl-t3 { --l: 205; --t: 282; --w: 105; --h: 91; font-size: calc(81 * var(--px)); color: #fff; font-family: var(--font-shedry); }
.bl-t4 { --l: 18;  --t: 82;  --w: 124; --h: 14; font-size: calc(11 * var(--px)); color: #000; }
.bl-t5 { --l: 234; --t: 20;  --w: 76;  --h: 14; font-size: calc(14 * var(--px)); color: #000; text-align: right; }
.bl-t6 { --l: 239; --t: 205; --w: 71;  --h: 22; font-size: calc(14 * var(--px)); color: #fff; text-align: right; font-family: var(--font-shedry); }
.bl-t7 { --l: 18;  --t: 268; --w: 124; --h: 14; font-size: calc(11 * var(--px)); color: #fff; }
.bl-t8 { --l: 18;  --t: 205; --w: 124; --h: 62; font-size: calc(24 * var(--px)); color: #fff; }

/* 4 — product range */
.bl-c4 { --l: 540; --t: 891; --w: 805; --h: 390; }
/* Figma sets size-full + object-bottom with no object-cover, so the image
   fills (stretches to) the box rather than being cropped. */
.bl-c4-in { --l: -2; --t: -30; --w: 805; --h: 449; border-radius: calc(40 * var(--px)); overflow: hidden; }
.bl-c4-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: bottom; border-radius: calc(40 * var(--px)); }

/* 5 — colour palette (animated) */
.bl-c5 { --l: 540; --t: 1323; --w: 386; --h: 422; }
.bl-c5-in { --l: -2; --t: -2; --w: 386; --h: 422; background: #000; overflow: hidden; }
.bl-strip {
  position: absolute; top: 0; height: 100%;
  overflow: hidden; white-space: nowrap;
  font-family: var(--font-editorial);
}
.bl-strip p { position: absolute; margin: 0; left: calc(12 * var(--px)); }
.bl-strip .k { top: calc(24 * var(--px)); font-size: calc(24 * var(--px)); }
.bl-strip .v { top: calc(384 * var(--px)); font-size: calc(15 * var(--px)); }

.bl-heat   { left: 0;                       background: var(--bl-heat);   color: #fbf9f9; animation: bl-heat   8.05s linear infinite; }
.bl-inkc   { left: calc(97 * var(--px));    background: var(--bl-ink);    color: #fff;    animation: bl-ink    8.05s linear infinite; }
.bl-paper  { left: calc(194 * var(--px));   background: var(--bl-paper);  color: #000;    animation: bl-paper  8.05s linear infinite; }
.bl-signal { left: calc(291 * var(--px));   background: var(--bl-signal); color: #fff;    animation: bl-signal 8.05s linear infinite; }

/* Figma authored these in a 1080-wide space; scaled by 386/1080 = 0.357407 */
@keyframes bl-heat {
  0%      { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); }
  8.696%  { width: calc(193 * var(--px)); }
  13.043% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(193 * var(--px)); }
  21.739% { width: calc(96.5 * var(--px)); }
  26.087% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); }
  34.783% { width: calc(64.33 * var(--px)); }
  39.13%  { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); }
  47.826% { width: calc(96.5 * var(--px)); }
  52.174% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); }
  60.87%  { width: calc(64.33 * var(--px)); }
  65.217% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); }
  73.913% { width: calc(96.5 * var(--px)); }
  78.261% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); }
  86.957% { width: calc(64.33 * var(--px)); }
  91.304% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); }
  100%    { width: calc(96.5 * var(--px)); }
}
@keyframes bl-ink {
  0%      { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  8.696%  { width: calc(64.33 * var(--px)); translate: calc(96.5 * var(--px)) 0; }
  13.043% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(96.5 * var(--px)) 0; }
  21.739% { width: calc(96.5 * var(--px)); translate: 0 0; }
  26.087% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  34.783% { width: calc(193 * var(--px)); translate: calc(-32.17 * var(--px)) 0; }
  39.13%  { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(193 * var(--px)); translate: calc(-32.17 * var(--px)) 0; }
  47.826% { width: calc(96.5 * var(--px)); translate: 0 0; }
  52.174% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  60.87%  { width: calc(64.33 * var(--px)); translate: calc(-32.17 * var(--px)) 0; }
  65.217% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(-32.17 * var(--px)) 0; }
  73.913% { width: calc(96.5 * var(--px)); translate: 0 0; }
  78.261% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  86.957% { width: calc(64.33 * var(--px)); translate: calc(-32.17 * var(--px)) 0; }
  91.304% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(-32.17 * var(--px)) 0; }
  100%    { width: calc(96.5 * var(--px)); translate: 0 0; }
}
@keyframes bl-paper {
  0%      { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  8.696%  { width: calc(64.33 * var(--px)); translate: calc(64.33 * var(--px)) 0; }
  13.043% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(64.33 * var(--px)) 0; }
  21.739% { width: calc(96.5 * var(--px)); translate: 0 0; }
  26.087% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  34.783% { width: calc(64.33 * var(--px)); translate: calc(64.33 * var(--px)) 0; }
  39.13%  { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(64.33 * var(--px)) 0; }
  47.826% { width: calc(96.5 * var(--px)); translate: 0 0; }
  52.174% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  60.87%  { width: calc(193 * var(--px)); translate: calc(-64.33 * var(--px)) 0; }
  65.217% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(193 * var(--px)); translate: calc(-64.33 * var(--px)) 0; }
  73.913% { width: calc(96.5 * var(--px)); translate: 0 0; }
  78.261% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  86.957% { width: calc(64.33 * var(--px)); translate: calc(-64.33 * var(--px)) 0; }
  91.304% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(-64.33 * var(--px)) 0; }
  100%    { width: calc(96.5 * var(--px)); translate: 0 0; }
}
@keyframes bl-signal {
  0%      { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  8.696%  { width: calc(64.33 * var(--px)); translate: calc(32.17 * var(--px)) 0; }
  13.043% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(32.17 * var(--px)) 0; }
  21.739% { width: calc(96.5 * var(--px)); translate: 0 0; }
  26.087% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  34.783% { width: calc(64.33 * var(--px)); translate: calc(32.17 * var(--px)) 0; }
  39.13%  { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(32.17 * var(--px)) 0; }
  47.826% { width: calc(96.5 * var(--px)); translate: 0 0; }
  52.174% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  60.87%  { width: calc(64.33 * var(--px)); translate: calc(32.17 * var(--px)) 0; }
  65.217% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(64.33 * var(--px)); translate: calc(32.17 * var(--px)) 0; }
  73.913% { width: calc(96.5 * var(--px)); translate: 0 0; }
  78.261% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(96.5 * var(--px)); translate: 0 0; }
  86.957% { width: calc(193 * var(--px)); translate: calc(-96.5 * var(--px)) 0; }
  91.304% { animation-timing-function: cubic-bezier(.76,0,.24,1); width: calc(193 * var(--px)); translate: calc(-96.5 * var(--px)) 0; }
  100%    { width: calc(96.5 * var(--px)); translate: 0 0; }
}

/* 6 — Instagram post card */
.bl-c6 { --l: 959; --t: 1323; --w: 386; --h: 422; }
.bl-post {
  --l: 57.9; --t: 63.3; --w: 270.2; --h: 295.4;
  background: #fff;
  border: calc(1 * var(--px)) solid #e5e7eb;
  border-radius: calc(14 * var(--px));
  box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) calc(-8 * var(--px)) rgba(0,0,0,.05);
  padding: calc(10 * var(--px));
  display: flex; flex-direction: column; gap: calc(8 * var(--px));
  overflow: hidden;
}
.bl-post * { font-family: var(--font-inter); }
.bl-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.bl-row--head { height: calc(24 * var(--px)); flex: 0 0 auto; }
.bl-head-l { display: flex; align-items: center; gap: calc(12 * var(--px)); }
.bl-avatar { position: relative; width: calc(24 * var(--px)); height: calc(24 * var(--px)); border-radius: 50%; overflow: hidden; background: #fff; flex: 0 0 auto; }
.bl-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-avatar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-editorial); font-weight: 800; font-size: calc(12 * var(--px)); color: #000; }
.bl-handle { margin: 0; font-weight: 600; font-size: calc(10 * var(--px)); color: #111827; }
.bl-ico { width: calc(12 * var(--px)); height: calc(12 * var(--px)); display: block; }
.bl-ico--lg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.bl-post-img { flex: 1 1 auto; position: relative; border-radius: calc(16 * var(--px)); overflow: hidden; min-height: 0; }
.bl-post-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Nested crop that carries the actual post photo (995:741). */
.bl-post-inner { position: relative; flex: 0 0 auto; width: calc(366 * var(--px)); height: calc(327 * var(--px)); overflow: hidden; }
.bl-post-inner img {
  position: absolute; max-width: none;
  left: -0.65%; top: -20.43%; width: 69.42%; height: 69.42%;
}
.bl-actions { display: flex; align-items: center; gap: calc(16 * var(--px)); }
.bl-caption { display: flex; flex-direction: column; gap: calc(8 * var(--px)); width: 100%; }
.bl-caption p { margin: 0; font-size: calc(8 * var(--px)); color: #111827; line-height: 1.5; }
.bl-caption .likes { font-weight: 500; }
.bl-caption .who { font-weight: 600; }
.bl-caption .more { color: #6b7280; font-weight: 500; text-decoration: underline; }
.bl-comment {
  background: #f9fafb; border: calc(1 * var(--px)) solid #e5e7eb;
  border-radius: calc(22 * var(--px)); height: calc(24 * var(--px));
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: calc(16 * var(--px)); flex: 0 0 auto;
}
.bl-comment p { margin: 0; font-size: calc(8 * var(--px)); }
.bl-comment .ph { color: #6b7280; }
.bl-comment .post { color: #111827; font-weight: 600; }

/* 7 — editorial IG post */
/* The still editorial post has been replaced by its motion version. The card
   keeps the column's 805 width and borrows card 8's 620 height so the stack
   keeps its rhythm; the film is 3:4, so it is centred by flex rather than
   positioned, and it can never reach past the card's own box. The card is
   filled with the page black so the space either side of a portrait film
   reads as the background rather than as letterboxing. */
.bl-c7 {
  --l: 540; --t: 1787; --w: 805; --h: 620;
  background: var(--baseline-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-c7-film {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 8 — billboard */
.bl-c8 { --l: 540; --t: 2449; --w: 805; --h: 620; }
.bl-c8-in { --l: -2; --t: -2; --w: 805; --h: 620; }
.bl-c8-in img { left: -0.2%; top: -35.31%; width: 100.63%; height: 175%; }

/* 9 — packaging */
.bl-c9 { --l: 540; --t: 3111; --w: 805; --h: 390; }
.bl-c9-in { --l: -11; --t: -39; --w: 824.492; --h: 464; }
.bl-c9-in img { left: -1.19%; top: -71.95%; width: 102.52%; height: 244%; }

/* 10 — brand motion */
.bl-c10 { --l: 540; --t: 3542; --w: 805; --h: 414; }
.bl-c10-in { --l: 0; --t: -2; --w: 805; --h: 390; background: #fff; overflow: hidden; }
.bl-mcard { --w: 777; --h: 118; --l: 14; border-radius: calc(14 * var(--px)); overflow: hidden; }
.bl-mcard-1 { --t: 14;  }
.bl-mcard-2 { --t: 146; }
.bl-mcard-3 { --t: 278; }
.bl-mcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(40 * var(--px)); }
.bl-mover { position: absolute; inset: 0; background: #000; opacity: 0; }
.bl-mlabel {
  position: absolute; left: 0; width: 100%;
  top: calc(33.5 * var(--px));
  margin: 0; text-align: center;
  font-family: var(--font-editorial);
  font-size: calc(26 * var(--px)); color: #fff; opacity: 0;
}
.bl-mover-1 { animation: bl-ov1 8.05s linear infinite; }
.bl-mover-2 { animation: bl-ov2 8.05s linear infinite; }
.bl-mover-3 { animation: bl-ov3 8.05s linear infinite; }
.bl-mlabel-1 { animation: bl-lb1 8.05s linear infinite; }
.bl-mlabel-2 { animation: bl-lb2 8.05s linear infinite; }
.bl-mlabel-3 { animation: bl-lb3 8.05s linear infinite; }

@keyframes bl-ov1 {
  0% { opacity: 0; }
  4.348%  { animation-timing-function: cubic-bezier(.33,0,.15,1); opacity: 0; }
  9.938%  { opacity: .4; }
  19.876% { animation-timing-function: cubic-bezier(.4,0,.2,1); opacity: .4; }
  26.087% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes bl-ov2 {
  0% { opacity: 0; }
  28.571% { animation-timing-function: cubic-bezier(.33,0,.15,1); opacity: 0; }
  34.783% { opacity: .4; }
  43.478% { animation-timing-function: cubic-bezier(.4,0,.2,1); opacity: .4; }
  49.689% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes bl-ov3 {
  0% { opacity: 0; }
  52.174% { animation-timing-function: cubic-bezier(.33,0,.15,1); opacity: 0; }
  58.385% { opacity: .4; }
  100% { opacity: .4; }
}
@keyframes bl-lb1 {
  0% { opacity: 0; translate: 0 calc(8 * var(--px)); }
  6.211%  { animation-timing-function: cubic-bezier(.33,0,.15,1); opacity: 0; translate: 0 calc(8 * var(--px)); }
  12.422% { opacity: 1; translate: 0 0; }
  19.876% { animation-timing-function: cubic-bezier(.4,0,.2,1); opacity: 1; translate: 0 0; }
  26.087% { opacity: 0; translate: 0 0; }
  100% { opacity: 0; translate: 0 0; }
}
@keyframes bl-lb2 {
  0% { opacity: 0; translate: 0 calc(8 * var(--px)); }
  31.056% { animation-timing-function: cubic-bezier(.33,0,.15,1); opacity: 0; translate: 0 calc(8 * var(--px)); }
  37.267% { opacity: 1; translate: 0 0; }
  43.478% { animation-timing-function: cubic-bezier(.4,0,.2,1); opacity: 1; translate: 0 0; }
  49.689% { opacity: 0; translate: 0 0; }
  100% { opacity: 0; translate: 0 0; }
}
@keyframes bl-lb3 {
  0% { opacity: 0; translate: 0 calc(8 * var(--px)); }
  54.658% { animation-timing-function: cubic-bezier(.33,0,.15,1); opacity: 0; translate: 0 calc(8 * var(--px)); }
  60.87%  { opacity: 1; translate: 0 0; }
  100% { opacity: 1; translate: 0 0; }
}

/* 11 — poster */
.bl-c11 { --l: 540; --t: 3997; --w: 805; --h: 663; border-radius: calc(40 * var(--px)); }
.bl-c11 img { left: -20.78%; top: -19.18%; width: 141.66%; height: 160%; }

/* 12 — iphone */
.bl-c12 { --l: 540; --t: 4702; --w: 805; --h: 532; border-radius: calc(40 * var(--px)); }
.bl-c12 img { left: -7.5%; top: -6.38%; width: 115.1%; height: 130%; }

/* 13 — app screens (animated) */
.bl-c13 { --l: 540; --t: 5276; --w: 803; --h: 1337; background: #aaa; }
.bl-scr { overflow: hidden; }
/* Figma runs this at the page's 8.05s master cycle; played at half that so
   the three screens land without the long dead hold at the end. */
.bl-scr-3 { --l: 84; --t: 283; --w: 633; --h: 739;  animation: bl-s3 4.025s linear infinite; }
.bl-scr-2 { --l: 74; --t: 54;  --w: 653; --h: 1197; animation: bl-s2 4.025s linear infinite; }
.bl-scr-1 { --l: 36; --t: 56;  --w: 728; --h: 1223; animation: bl-s1 4.025s linear infinite; }
.bl-scr-3 img { left: -8.18%; top: -3.38%; width: 116.36%; height: 115.06%; }
.bl-scr-2 img { left: -8.78%; top: -0.02%; width: 117.56%; height: 107.39%; }
.bl-scr-1 img { left: -7.43%; top: -0.05%; width: 115.99%; height: 107.87%; }
@keyframes bl-s3 {
  0%      { animation-timing-function: ease; opacity: 0; scale: .9; }
  9.938%  { opacity: 1; scale: 1; }
  100%    { opacity: 1; scale: 1; }
}
@keyframes bl-s2 {
  0%      { opacity: 0; scale: .9; }
  12.422% { animation-timing-function: ease; opacity: 0; scale: .9; }
  22.36%  { opacity: 1; scale: 1; }
  100%    { opacity: 1; scale: 1; }
}
@keyframes bl-s1 {
  0%      { opacity: 0; scale: .9; }
  24.845% { animation-timing-function: ease; opacity: 0; scale: .9; }
  34.783% { opacity: 1; scale: 1; }
  100%    { opacity: 1; scale: 1; }
}

/* 14 — closing */
.bl-c14 { --l: 540; --t: 6655; --w: 798; --h: 844; }
.bl-c14-in { --l: -2; --t: -117; --w: 799; --h: 1071; }
.bl-c14-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Figma carries a flicker on the next-project badge (1167:55), but it is not
   animated here: the badge holds the state the frame renders, fully opaque. */

@media (prefers-reduced-motion: reduce) {
  .case-bl * { animation: none !important; }
  .bl-mover-3, .bl-mlabel-3, .bl-scr-1, .bl-scr-2, .bl-scr-3 { opacity: 1; }
}

/* The next-project label sets its own colour, so it needs the hover
   transition too or it would snap while the row around it eases. */
.bl-next-label { transition: color 180ms ease; }