/* S12 · Let's get started (#start) — THE FEED homepage, design.md Part III.
   FINAL-SPEC §4 S12 "Go live" (profile slide 11). The fist photo is a
   transparent cut-out with the arm running off to the right; it bleeds off the
   page's inline-end edge (mirrored in RTL so the arm always leaves the page and
   the fist faces the copy). The figure's inside is pinned dir="ltr" so the
   burst/heart geometry is written once and mirrored as a whole. */

.start__grid {
  display: grid;
  /* minmax(0, 1fr): an auto track grows to its widest min-content child and
     the section's overflow clip then hides the overhang at 320–375 */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
.start__grid > * {
  min-inline-size: 0;
}

/* ── the fist ── */
.start__fist {
  position: relative;
  margin: 0;
  inline-size: 100%;
}
.start__fist-in {
  position: relative;
  container-type: inline-size;
  inline-size: 128%;
  margin-inline-start: 4%;
}
.start:dir(rtl) .start__fist-in {
  margin-inline-start: -32%;
  transform: scaleX(-1);
}
.start__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  filter: var(--cutout-shadow);
}

/* the like-badges (the IG "like" notification shape): parked around the fist.
   Final positions are CSS, so no-JS and reduced motion show the burst landed. */
.burst,
.float {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.like {
  --dx: 0cqi;
  --dy: 0cqi;
  --rot: 0deg;
  --s: 1;
  position: absolute;
  inset-block-start: 44%;
  inset-inline-start: 21%;
  display: grid;
  place-items: center;
  inline-size: max(26px, 5.4cqi);
  aspect-ratio: 1;
  margin-block-start: calc(max(26px, 5.4cqi) / -2);
  margin-inline-start: calc(max(26px, 5.4cqi) / -2);
  border-radius: 24%;
  background: var(--red);
  color: var(--on-slab);
  box-shadow: var(--sh-1);
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--s));
}
/* the speech-bubble tail */
.like::after {
  content: "";
  position: absolute;
  inset-block-end: -14%;
  inset-inline-start: 50%;
  inline-size: 30%;
  aspect-ratio: 1;
  margin-inline-start: -15%;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 0 0 18% 0;
}
.like svg {
  position: relative;
  z-index: 1;
  inline-size: 56%;
  block-size: 56%;
  fill: currentColor;
}
.like--1 {
  --dx: -15cqi;
  --dy: -17cqi;
  --rot: -22deg;
  --s: 1;
}
.like--2 {
  --dx: 6cqi;
  --dy: -21cqi;
  --rot: 12deg;
  --s: 0.9;
}
.like--3 {
  --dx: 21cqi;
  --dy: -12cqi;
  --rot: 20deg;
  --s: 1.1;
}
.like--4 {
  --dx: -19cqi;
  --dy: 3cqi;
  --rot: -10deg;
  --s: 0.8;
}
.like--5 {
  --dx: 31cqi;
  --dy: 2cqi;
  --rot: 16deg;
  --s: 0.95;
}
.like--6 {
  --dx: -13cqi;
  --dy: 18cqi;
  --rot: 8deg;
  --s: 1.05;
}
.like--7 {
  --dx: 12cqi;
  --dy: 21cqi;
  --rot: -18deg;
  --s: 0.85;
}
.like--8 {
  --dx: 41cqi;
  --dy: -8cqi;
  --rot: 25deg;
  --s: 0.75;
}
.like--9 {
  --dx: -6cqi;
  --dy: -27cqi;
  --rot: -6deg;
  --s: 0.8;
}
.like--10 {
  --dx: 27cqi;
  --dy: 17cqi;
  --rot: -12deg;
  --s: 1;
}
.like--2 {
  --n: 1;
}
.like--3 {
  --n: 2;
}
.like--4 {
  --n: 3;
}
.like--5 {
  --n: 4;
}
.like--6 {
  --n: 5;
}
.like--7 {
  --n: 6;
}
.like--8 {
  --n: 7;
}
.like--9 {
  --n: 8;
}
.like--10 {
  --n: 9;
}

/* the burst: from the fist centre, scale 0 → its landing spot */
.js-motion .start__fist .like {
  transition:
    transform 760ms var(--ease-pop),
    opacity 200ms linear;
  transition-delay: calc(var(--n, 0) * 35ms + 120ms);
}
.js-motion .start__fist:not(.in) .like {
  opacity: 0;
  transform: translate(0, 0) scale(0);
}
.js-motion .start__fist.in .start__img {
  animation: start-squeeze 300ms var(--ease-out) both;
}
@keyframes start-squeeze {
  from {
    transform: scale(1.03);
  }
}

/* live hearts: float up from the fist while the section is in view.
   Static (no-JS / reduced motion): three hearts resting above the fist. */
.heart {
  --x0: 0cqi;
  --x1: 0cqi;
  position: absolute;
  inset-block-start: 6%;
  inset-inline-start: 20%;
  inline-size: max(18px, 3.2cqi);
  aspect-ratio: 1;
  color: var(--red);
  transform: translate(var(--x1), -6cqi);
}
.heart svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  fill: currentColor;
}
.heart--1 {
  --x0: -2cqi;
  --x1: -9cqi;
}
.heart--2 {
  --x0: 3cqi;
  --x1: 6cqi;
  inline-size: max(14px, 2.4cqi);
}
.heart--3 {
  --x0: 8cqi;
  --x1: 16cqi;
}
.heart--4,
.heart--5 {
  display: none;
}
.heart--4 {
  --x0: -6cqi;
  --x1: 2cqi;
}
.heart--5 {
  --x0: 11cqi;
  --x1: 4cqi;
}
.heart--2 {
  --hd: -0.64s;
}
.heart--3 {
  --hd: -1.28s;
}
.heart--4 {
  --hd: -1.92s;
}
.heart--5 {
  --hd: -2.56s;
}
.js-motion .heart {
  opacity: 0;
  animation: start-float 3.2s cubic-bezier(0.3, 0.6, 0.4, 1) infinite;
  animation-delay: var(--hd, 0s);
  animation-play-state: var(--play, paused);
}
@media (pointer: fine) {
  .js-motion .heart--4,
  .js-motion .heart--5 {
    display: block;
  }
}
@keyframes start-float {
  0% {
    opacity: 0;
    transform: translate(var(--x0), 14cqi) scale(0.6);
  }
  18% {
    opacity: 1;
  }
  75% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x1), -26cqi) scale(1.1);
  }
}

/* ── the copy ── */
.start__copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--s-4);
}
.start__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--slab);
  color: var(--on-slab);
}
.start__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--red);
}
.start__h2 {
  margin: 0;
  max-inline-size: 18ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  /* capped: the vw ramp is multiplied again by the 4K zoom on .wrap */
  font-size: min(var(--fs-h2), 5.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.start:lang(ar) .start__h2 {
  max-inline-size: 16ch;
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-stretch: normal;
  font-size: min(var(--fs-ar-h2), 5.5rem);
  line-height: 1.3;
  letter-spacing: 0;
}
/* the echo spans the copy column, so the Arabic echo on /en ends flush at the
   column's end edge like every other section's echo (a ch cap left it
   floating mid-line) */
.start__copy > .echo {
  justify-self: stretch;
}

/* "خلها عفوية!" — the display line (Arabic on both locales) */
.start__display-wrap {
  justify-self: start;
  inline-size: max-content;
  max-inline-size: 100%;
  display: grid;
  gap: var(--s-1);
  margin-block: var(--s-2);
}
.start__display {
  margin: 0;
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-size: min(calc(var(--fs-ar-mega) * 0.7), 6rem);
  line-height: 1.2;
  color: var(--ink);
  text-align: start;
  -webkit-text-stroke: 10px var(--surface);
  paint-order: stroke fill;
}
.js-motion .start__display[data-fx="wipe"] {
  transition-duration: 700ms;
  transition-delay: 300ms;
}
.start__display-echo {
  text-align: start;
}
/* on /en the Arabic display line is right-aligned (Arabic right, English
   left): the wrap spans the column so "خلها عفوية!" hugs the end edge and
   its English gloss stays on the left */
.start:dir(ltr) .start__display-wrap {
  justify-self: stretch;
  inline-size: auto;
  max-inline-size: none;
}
/* the runtime measures the pill from the heading's LEFT edge (x from
   getBoundingClientRect), so in RTL it must be anchored left too */
.start__h2 .cap-pill:dir(rtl) {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* the app line as a push notification */
.push {
  justify-self: stretch;
  max-inline-size: 560px;
}
.push__in {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--sh-1);
}
.js-motion .push.in .push__in {
  animation: start-haptic 300ms linear 460ms 1;
}
@keyframes start-haptic {
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-2px);
  }
}
.push__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 11px;
  background: var(--yellow);
  color: var(--on-yellow);
}
.push__icon svg {
  inline-size: 34px;
  block-size: auto;
}
.push__body {
  display: grid;
  gap: var(--s-1);
  min-inline-size: 0;
}
.push__meta {
  margin: 0;
  color: var(--ink-muted);
}
.push__text {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.start:lang(ar) .push__text {
  font-family: var(--font-ar-text);
  font-size: var(--fs-ar-body);
  line-height: 1.8;
}

/* ── CTAs ── */
.start__ctas {
  justify-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}
.start__ctas .btn {
  min-block-size: 56px;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding-block: var(--s-2);
  /* the labels are long ("MESSAGE US ON WHATSAPP"): let them wrap on a
     320 phone instead of pushing the button past the gutter */
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}
.start__ctas .btn > span:not(.start__tc) {
  min-inline-size: 0;
}
.start__rec {
  background: var(--ink);
  color: var(--bg);
}
:root[data-theme="dark"] .start__rec {
  background: var(--yellow);
  color: var(--on-yellow);
}
.start__rec-dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--red);
  transition: border-radius 180ms var(--ease-out);
}
/* the REC timecode: appears above the button while hovered/focused */
.start__tc {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline: 0;
  inline-size: max-content;
  margin-inline: auto;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--slab);
  color: var(--on-slab);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity var(--d-xs) linear;
  pointer-events: none;
}
.start__rec:focus-visible .start__tc {
  opacity: 1;
}
.start__rec:focus-visible .start__rec-dot {
  border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .start__rec:hover .start__tc {
    opacity: 1;
  }
  .start__rec:hover .start__rec-dot {
    border-radius: 3px;
  }
}
.start__wa {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  border-width: 1.5px;
}
.start__wa-ico {
  inline-size: 22px;
  block-size: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

@media (min-width: 600px) {
  .start__ctas {
    display: flex;
    flex-wrap: wrap;
  }
  .start__fist-in {
    inline-size: 112%;
    margin-inline-start: 10%;
  }
  .start:dir(rtl) .start__fist-in {
    margin-inline-start: -22%;
  }
}

/* ≥900: copy on cols 1–7, the fist on 8–12 bleeding off the end edge; the
   display line runs out over the fist's wrist with a --surface halo. */
@media (min-width: 900px) {
  .start__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
  }
  .start__copy {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  /* cols 8–12, never sharing a column with the copy: the hearts and the
     like-badges must not land under the headline/echo (text never on a busy
     cut-out). The extra margin keeps >= --s-6 between copy and art; the
     inner box is scaled up so the fist keeps its size. */
  .start__fist {
    grid-column: 8 / -1;
    grid-row: 1;
    align-self: center;
    inline-size: auto;
    margin-inline-start: var(--s-6);
  }
  /* the figure is pinned dir="ltr", so its own logical margins are LTR: on
     /ar the copy sits on its right */
  .start:dir(rtl) .start__fist {
    margin-inline: 0 var(--s-6);
  }
  .start__fist-in {
    inline-size: 236%;
    margin-inline-start: 0;
  }
  .start:dir(rtl) .start__fist-in {
    margin-inline-start: -136%;
  }
  .start__display-wrap {
    max-inline-size: calc(100% * 9 / 7);
  }
}
@media (min-width: 1280px) {
  .start__fist-in {
    inline-size: 216%;
  }
  .start:dir(rtl) .start__fist-in {
    margin-inline-start: -116%;
  }
}