/* RoughCut homepage — "One take"
   A calm stage for the ONE TAKE cast. One idea per screen; the only bold moment is
   the interactive first pass. Amber belongs to Slash and the App Store action. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
}

@font-face {
  font-family: "Spline Sans";
  src: url("/assets/fonts/spline-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --night: #120e22;
  --night-2: #17112b;
  --night-3: #211a3d;
  --line: rgba(169, 130, 245, 0.2);
  --cream: #fff5e2;
  --text: #ece6f8;
  --muted: #b7acd2;
  --faint: #9489b8;
  --violet: #7a4bd8;
  --violet-2: #a982f5;
  --amber: #fdb233;
  --amber-hot: #fff1c9;
  --keep: #43d789;
  --ink: #1d1636;
  --clip: #4a86d8;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Spline Sans", "Helvetica Neue", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(88px, 10vw, 144px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  background: var(--night);
  color-scheme: dark;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(70rem 42rem at 50% -8rem, rgba(122, 75, 216, 0.34), transparent 70%),
    var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- type ---------- */

h1, h2 {
  color: var(--cream);
  font-family: var(--display);
  font-weight: 800;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, min(0.9rem + 5.6vw, 10vh), 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.038em;
}

h2 {
  font-size: clamp(2.25rem, 1rem + 3.9vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.032em;
}

.lede {
  max-width: 34ch;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.5;
  text-wrap: balance;
}

.fine {
  margin-top: 18px;
  color: var(--faint);
  font-size: 0.9375rem;
}
.fine a { color: var(--muted); text-underline-offset: 3px; white-space: nowrap; }
.fine a:hover { color: var(--cream); }

.js-only { display: none; }
.js .js-only { display: block; }

/* ---------- navigation ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 14, 34, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(169, 130, 245, 0.12);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - var(--gutter) * 2, 1180px);
  height: 64px;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand img { border-radius: 8px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  font-size: 0.9375rem;
}

.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--cream); }
.lang { font-size: 1rem; }

.nav-cta {
  padding: 8px 16px;
  white-space: nowrap;
  border: 1px solid rgba(253, 178, 51, 0.55);
  border-radius: 999px;
  color: var(--amber) !important;
  font-weight: 600;
}
.nav-cta:hover { background: rgba(253, 178, 51, 0.1); }
/* The Arabic nav button carries a short label too (see the 760px block). */
.nav-cta-short { display: none; }

/* ---------- actions ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: clamp(24px, 4vh, 36px);
}

.store {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 12px 40px -12px rgba(253, 178, 51, 0.55);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.store:hover { transform: translateY(-1px); box-shadow: 0 16px 48px -12px rgba(253, 178, 51, 0.7); }

.film-open {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}
.film-open .play {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255, 245, 226, 0.45);
  border-radius: 50%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.film-open .play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 13px;
  translate: 1.5px 0;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.film-open:hover .play { border-color: var(--cream); background: rgba(255, 245, 226, 0.08); }
.film-open .dur { color: var(--faint); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- the cast ---------- */
/* One atlas per character: every drawing of every act in one strip, all cropped to the same
   box so the feet sit on the same pixel in every frame (--fx, --fy). An act is a run of
   frames: --a (the first), --len (how many) and --fps. The strip slides on the compositor in
   steps, and the few drawings per act are the hand-drawn "boil" from the ad.
   home.js switches acts with data-act and pauses everything on request (.still). */

.cast {
  --k: 0.5;
  --a: 0;
  --len: 3;
  --fps: 5;
  --loops: infinite;
  --dir: normal;
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(var(--fw) * var(--k) * 1px);
  aspect-ratio: var(--fw) / var(--fh);
}
.cast::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--n) * 100%);
  background: var(--img) 0 0 / 100% 100% no-repeat;
  transform: translateX(calc(var(--a) / var(--n) * -100%));
  animation: act calc(var(--len) / var(--fps) * 1s) steps(var(--len), jump-none) var(--loops) var(--dir) both;
}
/* Two identical keyframe sets: home.js flips .alt to restart an act from its first drawing. */
.cast.alt::before { animation-name: act-alt; }
@keyframes act {
  from { transform: translateX(calc(var(--a) / var(--n) * -100%)); }
  to { transform: translateX(calc((var(--a) + var(--len) - 1) / var(--n) * -100%)); }
}
@keyframes act-alt {
  from { transform: translateX(calc(var(--a) / var(--n) * -100%)); }
  to { transform: translateX(calc((var(--a) + var(--len) - 1) / var(--n) * -100%)); }
}

/* The cast loads after the page (home.js adds .is-lit to each scene as it approaches), so the
   drawings never compete with the headline and fonts. The .js class is set in the page head,
   so without JavaScript every character loads as usual. */
.js :is(.hero, .pass, .proof, .questions, .finale):not(.is-lit) .cast::before { background-image: none; }
.js .stage .cast { opacity: 0; transition: opacity 0.6s ease; }
.js .is-lit .stage .cast { opacity: 1; }

/* Without JavaScript there is no pause button, so the cast moves for a few seconds and then
   holds its pose, inside the five-second limit for motion that starts on its own. */
html:not(.js) .cast::before { animation-iteration-count: 3; }
html:not(.js) .stage-hero [data-at="snooze"],
html:not(.js) .faq-think,
html:not(.js) .zzz i { animation-iteration-count: 1; }
html:not(.js) .zzz i:nth-child(2) { animation-delay: 0.6s; }
html:not(.js) .zzz i:nth-child(3) { animation-delay: 1.2s; }
html:not(.js) .motion { display: none; }

/* Offscreen scenes, and the whole page once motion is paused, hold still. */
.is-off .cast,
.is-off .cast::before,
.is-off .zzz i,
.still .cast,
.still .cast::before,
.still .zzz i { animation-play-state: paused; }

.cast[data-char="dash"] { --img: url("/assets/cast/dash.webp"); --n: 24; --fw: 348; --fh: 318; --fx: 134; --fy: 283; }
.cast[data-char="gus"] { --img: url("/assets/cast/gus.webp"); --n: 14; --fw: 352; --fh: 419; --fx: 167; --fy: 406; }
.cast[data-char="snooze"] { --img: url("/assets/cast/snooze.webp"); --n: 12; --fw: 353; --fh: 221; --fx: 194; --fy: 27; }
.cast[data-char="twins"] { --img: url("/assets/cast/twins.webp"); --n: 7; --fw: 374; --fh: 319; --fx: 187; --fy: 302; }
.cast[data-char="umms"] { --img: url("/assets/cast/umms.webp"); --n: 4; --fw: 288; --fh: 205; --fx: 143; --fy: 196; }
.cast[data-char="umm"] { --img: url("/assets/cast/umm.webp"); --n: 7; --fw: 148; --fh: 149; --fx: 70; --fy: 138; }

.cast[data-char="dash"][data-act="stand"] { --a: 0; --len: 3; --fps: 5; }
.cast[data-char="dash"][data-act="talk"] { --a: 3; --len: 4; --fps: 8; }
.cast[data-char="dash"][data-act="cheer"] { --a: 7; --len: 3; --fps: 6; }
.cast[data-char="dash"][data-act="crouch"] { --a: 10; --len: 3; --fps: 6; }
.cast[data-char="dash"][data-act="run"] { --a: 13; --len: 6; --fps: 12; }
.cast[data-char="dash"][data-act="trip"] { --a: 19; --len: 2; --fps: 8; --loops: 1; }
.cast[data-char="dash"][data-act="rise"] { --a: 19; --len: 2; --fps: 8; --loops: 1; --dir: reverse; }
.cast[data-char="dash"][data-act="plant"] { --a: 21; --len: 3; --fps: 5; }
.cast[data-char="gus"][data-act="stand"] { --a: 0; --len: 3; --fps: 5; }
.cast[data-char="gus"][data-act="waddle"] { --a: 3; --len: 8; --fps: 10; }
.cast[data-char="gus"][data-act="plead"] { --a: 11; --len: 3; --fps: 6; }
.cast[data-char="snooze"][data-act="hang"] { --a: 0; --len: 4; --fps: 2.5; }
.cast[data-char="snooze"][data-act="yawn"] { --a: 4; --len: 5; --fps: 4; --loops: 1; }
.cast[data-char="snooze"][data-act="awake"] { --a: 9; --len: 3; --fps: 5; }
.cast[data-char="twins"][data-act="talk"] { --a: 0; --len: 4; --fps: 7; }
.cast[data-char="twins"][data-act="shock"] { --a: 4; --len: 3; --fps: 6; }
.cast[data-char="umms"][data-act="bob"] { --a: 0; --len: 4; --fps: 5; }
.cast[data-char="umm"][data-act="bob"] { --a: 0; --len: 4; --fps: 6; }
.cast[data-char="umm"][data-act="think"] { --a: 4; --len: 3; --fps: 4; }

/* Snooze's sleep: three letters drift up from the silent stretch and fade. */
.zzz { position: absolute; width: 60px; height: 70px; }
.zzz i {
  position: absolute;
  bottom: 0;
  color: var(--violet-2);
  font: 800 1.125rem/1 var(--display);
  font-style: normal;
  opacity: 0;
  animation: doze 3.6s ease-out infinite;
}
.zzz i:nth-child(1) { left: 0; }
.zzz i:nth-child(2) { left: 16px; font-size: 1.375rem; animation-delay: 1.2s; }
.zzz i:nth-child(3) { left: 34px; font-size: 1.625rem; animation-delay: 2.4s; }
@keyframes doze {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(10px, -54px) rotate(10deg); }
}
.zzz.is-hushed i { animation: none; opacity: 0; }

.ribbon {
  position: absolute;
  height: 60px;
  background: var(--violet) url("/assets/cast/wave.svg") repeat-x 0 50% / auto 100%;
  border-block: 3px solid var(--ink);
  box-shadow: 0 -3px 0 var(--cream), 0 3px 0 var(--cream), 0 40px 90px -40px rgba(122, 75, 216, 0.9);
}
.ribbon-flat {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--violet) url("/assets/cast/wave-flat.svg") repeat-x 0 50% / auto 100%;
}

.slash {
  position: absolute;
  width: 22px;
  height: 128px;
  background: url("/assets/cast/slash.svg") center / 100% 100% no-repeat;
  rotate: 17.3deg;
  filter: drop-shadow(0 0 10px rgba(253, 178, 51, 0.6));
  pointer-events: none;
}

.speech {
  position: absolute;
  padding: 10px 18px 11px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #6c42c9;
  box-shadow: 0 0 0 3px var(--cream);
  color: var(--cream);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.speech s {
  position: relative;
  text-decoration: none;
}
.speech s::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: var(--amber);
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(40px, 7vh, 112px);
  text-align: center;
}

.hero-copy { width: min(100% - var(--gutter) * 2, 1180px); margin-inline: auto; }
.hero .lede { max-width: 58ch; }

.stage {
  position: relative;
  overflow-x: clip;
  pointer-events: none;
}

/* A character stands with its feet at --ground (measured from the stage floor) and --dx from
   the centre line; the bubble centres on --dx. */
.stage [data-at] { position: absolute; left: calc(50% + var(--dx, 0px)); translate: -50% 0; }
.stage .cast {
  --ground: 0px;
  translate: calc(var(--fx) / var(--fw) * -100%) 0;
  bottom: calc(var(--ground) - (var(--fh) - var(--fy)) * var(--k) * 1px);
  transform-origin: calc(var(--fx) / var(--fw) * 100%) 100%;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
/* Facing the other way: Gus turns round at each end of his walk. */
.stage .cast.is-turned { scale: -1 1; }

.stage-hero {
  --rb: 84px;
  --rh: 60px;
  --top: calc(var(--rb) + var(--rh) + 3px);
  height: 340px;
  margin-top: clamp(20px, 3vw, 40px);
}
.stage-hero .ribbon { left: 0; right: 0; bottom: var(--rb); height: var(--rh); }
.stage-hero .ribbon-flat { left: calc(50% - 400px); width: 210px; }
/* Snooze hangs from the underside of the silent stretch: --fy is where his claws grip, and he
   sways from there. */
.stage-hero [data-at="snooze"] { --k: 0.5; --dx: -296px; bottom: calc(var(--rb) + 2px - (var(--fh) - var(--fy)) * var(--k) * 1px); animation: sway 4.8s ease-in-out infinite; }
.stage .cast[data-char="snooze"],
.flag .cast[data-char="snooze"] { transform-origin: calc(var(--fx) / var(--fw) * 100%) calc(var(--fy) / var(--fh) * 100%); }
@keyframes sway {
  0%, 100% { rotate: -1.8deg; }
  50% { rotate: 1.8deg; }
}
.stage-hero [data-at="zzz"] { --dx: -236px; bottom: calc(var(--rb) - 70px); translate: 0 0; }
.stage-hero [data-at="dash"] { --k: 0.58; --dx: 0px; --ground: calc(var(--top) - 10px); }
/* Gus wanders off along the ribbon and back: home.js walks him between --dx and --dx plus
   --walk. The walk rides on translate (applied outermost) so the flip, a scale about his
   feet, never reverses it. */
.stage-hero [data-at="gus"] { --k: 0.48; --dx: 250px; --ground: calc(var(--top) - 12px); --walk: 170px; transition: translate 2.8s linear, opacity 0.6s ease; }
.stage .cast.is-away { translate: calc(var(--fx) / var(--fw) * -100% + var(--walk)) 0; }
.stage-hero [data-at="speech"] { --dx: 150px; bottom: calc(var(--top) + 158px); }
.stage-hero [data-at="speech"]::after,
.stage-finale [data-at="speech"]::after {
  content: "";
  position: absolute;
  left: 44px;
  bottom: -14px;
  width: 18px;
  height: 14px;
  background: #6c42c9;
  border: 3px solid var(--ink);
  border-top: 0;
  clip-path: polygon(0 0, 100% 0, 10% 100%);
}

/* The flub: the amber cut runs through "ba—" as Dash goes down, and the line fades while he
   is on the floor. Without JavaScript the bubble shows the cut already made. */
.stage [data-at="speech"] { transition: opacity 0.3s ease, scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.speech s::after { transform-origin: left center; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .stage-hero .speech:not(.is-cut) s::after { transform: scaleX(0); }
.stage-hero .speech.is-gone { opacity: 0; }

/* Pause and play for everything that moves on its own (WCAG 2.2.2). */
.motion {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--faint);
  cursor: pointer;
  pointer-events: auto;
}
.motion::before {
  content: "";
  width: 34px;
  height: 34px;
  grid-area: 1 / 1;
  border: 1px solid rgba(169, 130, 245, 0.32);
  border-radius: 50%;
  background: rgba(18, 14, 34, 0.6);
  transition: border-color 0.2s ease;
}
.motion::after {
  content: "";
  grid-area: 1 / 1;
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}
.motion[aria-pressed="true"]::after {
  width: 10px;
  height: 12px;
  translate: 1px 0;
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html[dir="rtl"] .motion[aria-pressed="true"]::after { translate: -1px 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.motion:hover { color: var(--cream); }
.motion:hover::before { border-color: rgba(255, 245, 226, 0.5); }
.hero { position: relative; }
/* The stages are drawn the same way in both languages, so their toggles use physical sides:
   clear of Snooze in the hero, and clear of the bubble in the finale. */
.stage-hero + .motion { bottom: 18px; right: max(var(--gutter), calc(50% - 590px)); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- sections ---------- */

.pass, .proof, .questions, .finale {
  padding-top: var(--section);
  text-align: center;
}

.pass h2, .proof h2, .finale h2 { width: min(100% - var(--gutter) * 2, 1000px); margin-inline: auto; }
.pass .lede, .proof .lede, .finale .lede { width: min(100% - var(--gutter) * 2, 40ch); }

/* ---------- the first pass (interactive) ---------- */

.demo {
  width: min(100% - var(--gutter) * 2, 1120px);
  margin: clamp(40px, 6vw, 72px) auto 0;
}

/* Each flag is a column over its stretch of the recording. Its character stands on the
   ribbon (feet 12px into it) and its label and verdict sit just above the head (--head). */
.track {
  --rt: 292px;
  --rh: 60px;
  position: relative;
  height: 446px;
}

.track .ribbon { left: 0; right: 0; top: var(--rt); height: var(--rh); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 0 0 3px var(--cream), 0 40px 90px -40px rgba(122, 75, 216, 0.9); }
.track .ribbon-flat { left: 6%; width: 12%; }

.flags { position: absolute; inset: 0; padding: 0; list-style: none; }

.flag {
  --label: calc(var(--rt) + 12px - var(--head) - 84px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: var(--w);
}
.flag[data-cat="silence"] { --x: 6%; --w: 12%; --cat: #a59fb4; --head: 12px; }
.flag[data-cat="filler"] { --x: 23%; --w: 10%; --cat: #b07cf0; --head: 92px; }
.flag[data-cat="false-start"] { --x: 40%; --w: 12%; --cat: #f2e45e; --head: 136px; }
.flag[data-cat="retake"] { --x: 57%; --w: 13%; --cat: #ff7f50; --head: 126px; }
.flag[data-cat="tangent"] { --x: 76%; --w: 14%; --cat: #d94fc4; --head: 181px; }

.flag button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pill {
  position: absolute;
  left: 50%;
  top: var(--label);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border: 1px solid rgba(169, 130, 245, 0.32);
  border-radius: 999px;
  background: var(--night-3);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.25s ease;
}
.pill i { width: 4px; height: 14px; border-radius: 2px; background: var(--cat); }

/* The verdict reads as a toggle: a slash for removed, a tick for kept. */
.verdict {
  position: absolute;
  left: 50%;
  top: calc(var(--label) + 40px);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 5px;
  border: 1px solid rgba(253, 178, 51, 0.45);
  border-radius: 999px;
  background: rgba(253, 178, 51, 0.08);
  color: var(--amber);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.verdict::before {
  content: "";
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: currentColor;
  rotate: 17deg;
}
.v-keep { display: none; }
.flag[data-state="keep"] .v-remove { display: none; }
.flag[data-state="keep"] .v-keep { display: inline; }
.flag[data-state="keep"] .verdict { border-color: rgba(67, 215, 137, 0.5); background: rgba(67, 215, 137, 0.08); color: var(--keep); }
.flag[data-state="keep"] .verdict::before {
  width: 9px;
  height: 5px;
  margin-top: -3px;
  border-left: 2px solid;   /* physical, not inline-start: in RTL that edge flips and the tick becomes a chevron */
  border-bottom: 2px solid;
  border-radius: 0;
  background: none;
  rotate: -45deg;
}
.flag[data-state="idle"] .verdict { opacity: 0; }

.flag .cast {
  --k: 0.46;
  position: absolute;
  left: 50%;
  translate: calc(var(--fx) / var(--fw) * -100%) 0;
  bottom: calc(100% - var(--rt) - 10px - (var(--fh) - var(--fy)) * var(--k) * 1px);
  transform-origin: calc(var(--fx) / var(--fw) * 100%) 100%;
  transition: opacity 0.35s ease, filter 0.35s ease, translate 0.2s ease;
}
/* Snooze hangs under the silence, the Umms sit on the filler, the rest stand on the take. */
.flag[data-cat="silence"] .cast { --k: 0.44; top: calc(var(--rt) + var(--rh) + 2px - var(--fy) * var(--k) * 1px); bottom: auto; }
.flag[data-cat="filler"] .cast { --k: 0.46; bottom: calc(100% - var(--rt) - 2px - (var(--fh) - var(--fy)) * var(--k) * 1px); }
.flag[data-cat="false-start"] .cast { --k: 0.46; }
.flag[data-cat="retake"] .cast { --k: 0.44; }
.flag[data-cat="tangent"] .cast { --k: 0.45; }

/* Removed characters fade to grey. Gus stays in colour while he pleads to be kept. */
.flag[data-state="remove"] .cast { opacity: 0.5; filter: grayscale(1); }
.flag[data-state="remove"][data-cat="tangent"] .cast { opacity: 1; filter: none; }

.strike {
  position: absolute;
  left: 6%;
  right: 6%;
  top: calc(var(--rt) + var(--rh) / 2 - 4px);
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--amber), var(--amber-hot), var(--amber));
  box-shadow: 0 0 16px rgba(253, 178, 51, 0.75);
  transform-origin: left center;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.flag[data-state="idle"] .strike,
.flag[data-state="keep"] .strike { transform: scaleX(0); }
.flag[data-state="keep"] .strike { transform-origin: right center; }

.bubble {
  position: absolute;
  right: calc(50% + 30px);
  top: calc(var(--rt) + 30px - var(--head));
  padding: 6px 12px 7px;
  border: 2px solid var(--ink);
  border-radius: 14px 14px 4px 14px;
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--cream);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  scale: 0.6;
  transform-origin: 100% 100%;
  transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.flag[data-state="remove"] .bubble { opacity: 1; scale: 1; transition-delay: 0.25s; }

/* Between 981 and 1100px the flags sit closer together; lift the plea clear of the Twins. */
@media (min-width: 981px) and (max-width: 1100px) {
  .bubble { top: calc(var(--rt) + 16px - var(--head)); }
}

.flag button:hover .pill { background: #2b2250; }
.flag button:hover .verdict { background: rgba(253, 178, 51, 0.16); }
.flag[data-state="keep"] button:hover .verdict { background: rgba(67, 215, 137, 0.16); }
.flag button:hover .cast { translate: calc(var(--fx) / var(--fw) * -100%) -4px; }
.flag button:focus-visible { outline-offset: -2px; }

.runner {
  display: none;
  left: 0;
  top: calc(var(--rt) - 120px);
  opacity: 0;
  translate: -40px 0;
}
/* Slash exists only while he runs; parked off the start edge he would widen an RTL page. */
.demo.is-sweeping .runner { display: block; animation: sweep 1.6s linear forwards; }
@keyframes sweep {
  0% { opacity: 0; translate: -40px 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; translate: calc(var(--run) + 40px) 0; }
}

/* Final Cut Pro timeline: the take, minus whatever you removed */
.fcp {
  display: flex;
  height: 52px;
  margin-top: 20px;
  padding: 6px;
  border: 1.5px dashed rgba(169, 130, 245, 0.28);
  border-radius: 12px;
  background: rgba(23, 17, 43, 0.7);
}
.clip {
  flex: 0 0 calc(var(--w) - 3px);
  margin-right: 3px;
  border-radius: 5px;
  background:
    url("/assets/cast/wave.svg") repeat-x 0 70% / auto 60%,
    linear-gradient(#5b97e6, #3f76c6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  opacity: 0.95;
  transition: flex-basis 0.55s cubic-bezier(0.3, 0, 0.2, 1), margin 0.55s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.3s ease;
}
.clip[data-seg="a"] { --w: 6%; }
.clip[data-seg="silence"] { --w: 12%; }
.clip[data-seg="b"] { --w: 5%; }
.clip[data-seg="filler"] { --w: 10%; }
.clip[data-seg="c"] { --w: 7%; }
.clip[data-seg="false-start"] { --w: 12%; }
.clip[data-seg="d"] { --w: 5%; }
.clip[data-seg="retake"] { --w: 13%; }
.clip[data-seg="e"] { --w: 6%; }
.clip[data-seg="tangent"] { --w: 14%; }
.clip[data-seg="f"] { --w: 10%; }

.demo:has([data-cat="silence"][data-state="remove"]) [data-seg="silence"],
.demo:has([data-cat="filler"][data-state="remove"]) [data-seg="filler"],
.demo:has([data-cat="false-start"][data-state="remove"]) [data-seg="false-start"],
.demo:has([data-cat="retake"][data-state="remove"]) [data-seg="retake"],
.demo:has([data-cat="tangent"][data-state="remove"]) [data-seg="tangent"] {
  flex-basis: 0;
  margin-right: 0;
  opacity: 0;
}

.fcp-caption {
  margin-top: 16px;
  color: var(--faint);
  font-size: 0.9375rem;
}
.fcp-caption strong { color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }

.try {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 4px;
  color: var(--amber);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.try:hover { color: var(--amber-hot); }

/* ---------- proof ---------- */

.shot {
  position: relative;
  width: min(100% - var(--gutter) * 2, 1080px);
  margin: clamp(40px, 6vw, 72px) auto 0;
}
.shot img {
  width: 100%;
  height: auto;
  border-radius: clamp(10px, 2.2vw, 24px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 140px -50px rgba(122, 75, 216, 0.75);
}
.shot .cast {
  --k: 0.46;
  position: absolute;
  left: calc(100% + 18px);
  bottom: calc(-4px - (var(--fh) - var(--fy)) * var(--k) * 1px);
  scale: -1 1;
}
@media (max-width: 1439px) {
  .shot .cast { display: none; }
}

/* The same decisions, seen from Final Cut Pro: a quieter second beat under the review screen. */
.also {
  width: min(100% - var(--gutter) * 2, 46ch);
  margin: clamp(72px, 10vw, 128px) auto 0;
}
.also h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
html[lang="ar"] .also h3 { letter-spacing: 0; }
.also p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.also a { color: var(--cream); text-underline-offset: 4px; white-space: nowrap; }
.shot-fcp { margin-top: clamp(32px, 4vw, 48px); }

/* ---------- questions ---------- */

.questions h2,
html[lang="ar"] .questions h2 {
  margin-bottom: clamp(24px, 4vw, 40px);
  font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem);
}

.faq {
  width: min(100% - var(--gutter) * 2, 760px);
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
  text-align: start;
}

.faq details { border-top: 1px solid var(--line); }

.faq summary {
  position: relative;
  padding-block: 24px;
  padding-inline: 0 48px;
  color: var(--cream);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--muted);
  transition: rotate 0.25s ease, opacity 0.25s ease;
}
.faq summary::after { rotate: 90deg; }
.faq details[open] summary::after { rotate: 0deg; opacity: 0; }

.faq details p {
  max-width: 62ch;
  padding: 0 0 26px;
  color: var(--muted);
  font-size: 1.0625rem;
}

.more { margin-top: 28px; color: var(--faint); }
.more a { color: var(--muted); text-underline-offset: 3px; }
.more a:hover { color: var(--cream); }

/* ---------- finale ---------- */

.finale { padding-bottom: clamp(96px, 12vw, 160px); }

.stage-finale {
  --rb: 20px;
  --rh: 48px;
  --top: calc(var(--rb) + var(--rh) + 3px);
  height: 300px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.stage-finale .ribbon { left: 0; right: 0; bottom: var(--rb); height: var(--rh); }
.stage-finale [data-at="dash"] { --k: 0.58; --dx: 34px; --ground: calc(var(--top) - 10px); }
/* Gus waddles in from the left the first time the finale is seen. */
.stage-finale [data-at="gus"] { --k: 0.46; --dx: -120px; --ground: calc(var(--top) - 12px); --walk: -300px; transition: translate 2s linear, opacity 0.6s ease; }
.stage-finale [data-at="speech"] { --dx: 150px; bottom: calc(var(--top) + 160px); transform-origin: 20% 100%; }
.stage-finale [data-at="speech"]::after { left: 38px; }
.js .stage-finale:not(.is-played) [data-at="speech"] { opacity: 0; scale: 0.6; }
.finale { position: relative; }
.stage-finale + .motion { top: calc(var(--section) + 4px); left: max(var(--gutter), calc(50% - 590px)); }

/* ---------- film ---------- */

.film {
  padding-top: clamp(56px, 7vw, 104px);
  text-align: center;
}
.film-frame {
  position: relative;
  width: min(100% - var(--gutter) * 2, 1080px);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(12px, 2vw, 22px);
  background: #0c0918;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 140px -50px rgba(122, 75, 216, 0.75);
}
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
.film-frame video::cue {
  background: rgba(18, 14, 34, 0.8);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 600;
}

/* One large play button over the poster; the native controls take over once it plays. */
.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(to top, rgba(18, 14, 34, 0.35), transparent 45%);
  cursor: pointer;
}
.film-play::before {
  content: "";
  grid-area: 1 / 1;
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6);
  transition: scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.film-play::after {
  content: "";
  grid-area: 1 / 1;
  width: clamp(18px, 2.2vw, 26px);
  aspect-ratio: 0.86;
  translate: 12% 0;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.film-play:hover::before { scale: 1.06; }
.film-play:focus-visible { outline-offset: -6px; border-radius: inherit; }
.film.is-playing .film-play { display: none; }

.film-caption {
  width: min(100% - var(--gutter) * 2, 60ch);
  margin: 18px auto 0;
  color: var(--faint);
  font-size: 0.9375rem;
}
.film-caption strong { color: var(--cream); font-weight: 600; }
.film-caption a { color: var(--muted); text-underline-offset: 3px; }
.film-caption a:hover { color: var(--cream); }

/* ---------- questions: an Umm sits on the list and thinks along ---------- */

.faq { position: relative; }
.faq-umm {
  --k: 0.5;
  position: absolute;
  bottom: calc(100% - 2px - (var(--fh) - var(--fy)) * var(--k) * 1px);
  inset-inline-end: 18px;
  transform-origin: calc(var(--fx) / var(--fw) * 100%) 100%;
}
html[dir="rtl"] .faq-umm { scale: -1 1; }
/* Its thought: a small bubble with a question mark, trailing off towards its head. */
.faq-think {
  position: absolute;
  bottom: calc(100% + 62px);
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--cream);
  color: var(--ink);
  font: 800 1rem/1 var(--display);
  pointer-events: none;
  animation: ponder 3.2s ease-in-out infinite;
}
.faq-think::before,
.faq-think::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--ink);
}
.faq-think::before { width: 9px; height: 9px; bottom: -12px; inset-inline-start: 4px; }
.faq-think::after { width: 5px; height: 5px; bottom: -20px; inset-inline-start: 0; }
@keyframes ponder {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
.is-off .faq-think, .still .faq-think { animation-play-state: paused; }
.js .questions:not(.is-lit) .faq-think { opacity: 0; }
.faq-think { transition: opacity 0.6s ease; }

/* ---------- footer ---------- */

footer { border-top: 1px solid rgba(169, 130, 245, 0.12); }
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 22px;
  width: min(100% - var(--gutter) * 2, 1180px);
  margin-inline: auto;
  padding: 32px 0 40px;
  color: var(--faint);
  font-size: 0.875rem;
}
.foot-inner a { padding-block: 10px; color: var(--faint); text-decoration: none; }
.foot-inner a:hover { color: var(--cream); }
.footer-social { width: 100%; }
.social-links { display: flex; justify-content: center; gap: 6px; padding: 6px 0 0; list-style: none; }
.social-links a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; opacity: 0.7; }
.social-links a:hover { opacity: 1; }
.social-links img { width: auto; max-height: 18px; }

/* ---------- Arabic ---------- */
/* Latin words keep the Latin brand faces; Arabic falls through to Cairo and IBM Plex Sans
   Arabic (declared in ar.css). Arabic is a connected script, so it is never tracked, and its
   taller letterforms need more leading than the Latin scale. */

html[lang="ar"] {
  --display: "Bricolage Grotesque", "Cairo", "Avenir Next", system-ui, sans-serif;
  --body: "Spline Sans", "IBM Plex Sans Arabic", "Helvetica Neue", system-ui, sans-serif;
}
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] h1 {
  font-size: clamp(2.4rem, min(0.8rem + 4.8vw, 8.6vh), 5rem);
  line-height: 1.22;
  letter-spacing: 0;
}
html[lang="ar"] h2 {
  font-size: clamp(2rem, 0.9rem + 3.3vw, 3.7rem);
  line-height: 1.3;
  letter-spacing: 0;
}
html[lang="ar"] .lede { line-height: 1.8; }
html[lang="ar"] .faq summary { line-height: 1.6; }
html[lang="ar"] .speech { line-height: 1.5; padding-block: 6px 8px; }

/* ---------- smaller screens ---------- */

@media (max-width: 980px) {
  .stage-hero [data-at="snooze"] { --dx: -250px; }
  .stage-hero [data-at="zzz"] { --dx: -190px; }
  .stage-hero .ribbon-flat { left: calc(50% - 350px); width: 200px; }
  .stage-hero [data-at="gus"] { --dx: 220px; --walk: 70px; }
  .stage-hero [data-at="speech"] { --dx: 120px; }
}

/* Below 980px the columns are too narrow for the characters, so the first pass becomes the
   app's review list: one row per flag, character, label, then the verdict at the end. */
@media (max-width: 980px) {
  .track { height: auto; }
  .track .ribbon, .strike, .runner { display: none; }
  .flags { position: static; display: grid; gap: 10px; max-width: 560px; margin-inline: auto; }
  .fcp { max-width: 560px; margin-inline: auto; }
  .flag { position: relative; left: auto; width: auto; }
  .flag button {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
    min-height: 92px;
    padding-block: 10px;
    padding-inline: 10px 14px;
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--amber);
    border-radius: 16px;
    background: var(--night-2);
    text-align: start;
    transition: border-color 0.25s ease;
  }
  .flag[data-state="keep"] button { border-inline-start-color: var(--keep); }
  .flag[data-state="idle"] button { border-inline-start-color: var(--line); }
  .pill, .verdict, .bubble { position: static; translate: none; }
  .pill { grid-column: 2; grid-row: 1 / span 2; justify-self: start; }
  .verdict { grid-column: 3; grid-row: 1 / span 2; }
  .flag[data-cat="tangent"] .pill { grid-row: 1; align-self: end; }
  .bubble { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; border-radius: 12px; }
  .flag .cast,
  .flag[data-cat="silence"] .cast,
  .flag[data-cat="filler"] .cast {
    --k: 0.22;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    /* centre the feet, not the frame */
    translate: calc((0.5 - var(--fx) / var(--fw)) * 100%) 0;
  }
  .flag[data-cat="false-start"] .cast { --k: 0.24; }
  .flag[data-cat="retake"] .cast { --k: 0.21; }
  .flag[data-cat="tangent"] .cast { --k: 0.19; }
  .flag button:hover .cast { translate: calc((0.5 - var(--fx) / var(--fw)) * 100%) -3px; }
}

/* On a phone the verdict moves under the label, and Gus's plea sits at the end of his row. */
@media (max-width: 600px) {
  .flag button { grid-template-columns: 84px minmax(0, 1fr); }
  .pill,
  .flag[data-cat="tangent"] .pill { grid-row: 1; align-self: end; justify-self: start; }
  .verdict { grid-column: 2; grid-row: 2; align-self: start; justify-self: start; }
  .bubble { position: absolute; inset-inline-end: 12px; top: 50%; translate: 0 -50%; }
}

@media (max-width: 760px) {
  .nav-quiet { display: none; }
  /* «الحصول على RoughCut» crowds a phone bar and repeats the name beside the logo, so the
     button says «احصل عليه», the words the page's other App Store buttons open with. Only the
     shown label is in the accessibility tree, so the button's name matches what it says. */
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }

  .stage-hero { --rb: 70px; --rh: 48px; height: 300px; }
  .stage-hero [data-at="snooze"] { --k: 0.39; --dx: -150px; }
  .stage-hero [data-at="zzz"] { --dx: -104px; bottom: calc(var(--rb) - 64px); }
  .stage-hero .ribbon-flat { left: calc(50% - 222px); width: 150px; }
  .stage-hero [data-at="dash"] { --k: 0.49; --dx: 6px; }
  .stage-hero [data-at="gus"] { --k: 0.39; --dx: 138px; --walk: 0px; }
  .stage-hero + .motion { bottom: 10px; }
  .stage-hero [data-at="speech"] { --dx: 18px; bottom: calc(var(--top) + 138px); font-size: 0.9375rem; }
  .stage-hero [data-at="speech"]::after { left: 50%; margin-left: -12px; }

  /* On a phone the full window is too small to read, so a crop of the review list
     stands in, fading out where its lines run past the edge. */
  .shot img {
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 90%);
    mask-image: linear-gradient(to right, #000 55%, transparent 90%);
  }
  html[dir="rtl"] .shot img {
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 90%);
    mask-image: linear-gradient(to left, #000 55%, transparent 90%);
  }
  /* The Final Cut Pro screen is shown whole: its point is the colour row, not the text. */
  .shot-fcp img,
  html[dir="rtl"] .shot-fcp img { -webkit-mask-image: none; mask-image: none; }

  .stage-finale { height: 250px; }
  .stage-finale [data-at="dash"] { --k: 0.49; --dx: 30px; }
  .stage-finale [data-at="gus"] { --k: 0.39; --dx: -84px; --walk: -220px; }
  .stage-finale [data-at="speech"] { --dx: 40px; bottom: calc(var(--top) + 136px); font-size: 0.9375rem; }
  .stage-finale [data-at="speech"]::after { left: 42%; }

  .faq-umm { --k: 0.36; }
}

/* Below 460px the phone positions would push Snooze and Gus past the edges; pull them in. */
@media (max-width: 459px) {
  .stage-hero [data-at="snooze"] { --dx: -116px; }
  .stage-hero [data-at="gus"] { --dx: 124px; }
  .stage-hero [data-at="zzz"] { --dx: -84px; }
}

@media (max-width: 400px) {
  .actions { gap: 18px; }
}

/* Narrower phones: the three hero characters shrink in two steps so none is cut off at the edges. */
@media (max-width: 389px) {
  .stage-hero [data-at="snooze"] { --k: 0.36; --dx: -106px; }
  .stage-hero [data-at="zzz"] { --dx: -74px; }
  .stage-hero [data-at="dash"] { --k: 0.46; }
  .stage-hero [data-at="gus"] { --k: 0.36; --dx: 108px; }
}
@media (max-width: 359px) {
  /* Below 360px the name beside the logo no longer fits in either language; the logo carries it. */
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .stage-hero [data-at="snooze"] { --k: 0.33; --dx: -92px; }
  .stage-hero [data-at="zzz"] { --dx: -60px; }
  .stage-hero [data-at="dash"] { --k: 0.42; }
  .stage-hero [data-at="gus"] { --k: 0.33; --dx: 97px; }
}

/* Without JavaScript nothing can pause the cast, so it holds its first drawing. With
   JavaScript, home.js starts the page paused for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html:not(.js) .cast, html:not(.js) .cast::before, html:not(.js) .zzz i, html:not(.js) .faq-think { animation: none; }
  .store, .strike, .clip, .bubble, .cast, .pill, .speech, .speech s::after { transition: none !important; }
  .demo.is-sweeping .runner { animation: none; }
}