/* S1 · Cover (#cover) — THE FEED homepage, FINAL-SPEC §4 S1 (profile slide 1).
 *
 * The first frame: aerial-plaza photo (the LCP, never faded) + the dark slab
 * (all text sits ON the slab, never on the photo) + the hero phone playlist.
 * Static-first: everything below the "intro" block is the finished frame; the
 * load choreography exists only under html.js-motion:not(.no-cover-intro) and
 * animates decorative layers only (slab edge line, wordmark write-on, the UGC
 * flash, the phone rise) — the h1, echo and CTAs are visible from first paint.
 * M1 (scroll hand-off) reads --p, written on #cover by the runtime driver.
 */

/* ═══ Frame ═══════════════════════════════════════════════════════════════ */
.cover {
  --nav-room: 56px;
  --tail: 30vw; /* the slab's diagonal drop on phones */
  --edge-w: 5px;
  --phone-w: clamp(200px, 54vw, 360px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(240px, 1fr);
  min-block-size: max(620px, 100svh);
  overflow: clip;
  background: var(--slab);
  color: var(--on-slab);
}
@media (min-width: 600px) {
  .cover {
    --nav-room: 64px;
    --tail: 26vw;
  }
}

/* ── the photo (LCP) ── */
.cover__photo {
  grid-row: 2 / -1;
  grid-column: 1;
  z-index: 0;
  position: absolute;
  inset: calc(-1 * var(--tail)) 0 0;
  display: block;
  overflow: clip;
  translate: 0 calc(var(--p, 0) * 12%);
}
.cover__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 70% 0%;
}
/* the plaza mirrors with the slab in Arabic (no text in the photo) */
.cover__img:dir(rtl) {
  transform: scaleX(-1);
}
:root[data-theme="dark"] .cover__img {
  filter: brightness(0.86);
}

/* ── the dark slab ── */
.cover__slab {
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  position: relative;
  margin-block-end: calc(-1 * var(--tail));
  background: var(--slab);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tail)), 0 100%);
}
.cover__slab:dir(rtl) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--tail)));
}
/* the yellow line riding the slab's edge (the only line that draws on load) */
.cover__edge {
  position: absolute;
  inset: 0;
  clip-path: inset(0);
}
.cover__edge > i {
  position: absolute;
  inset: 0;
  background: var(--yellow);
  clip-path: polygon(
    0 calc(100% - var(--edge-w)),
    100% calc(100% - var(--tail) - var(--edge-w)),
    100% calc(100% - var(--tail)),
    0 100%
  );
}
.cover__edge:dir(rtl) > i {
  clip-path: polygon(
    0 calc(100% - var(--tail) - var(--edge-w)),
    100% calc(100% - var(--edge-w)),
    100% 100%,
    0 calc(100% - var(--tail))
  );
}
.cover__ghost {
  display: none;
}

/* ═══ Content ═════════════════════════════════════════════════════════════ */
/* below 900 the wrap dissolves into the cover's grid (zoom only applies ≥2000) */
.cover__in {
  display: contents;
}
.cover__text {
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  /* as wide as its widest line, so the echo ends where the h1 ends */
  justify-self: start;
  inline-size: fit-content;
  max-inline-size: 100%;
  padding-block: calc(var(--nav-room) + var(--s-5)) var(--s-5);
  padding-inline: var(--fg);
  opacity: calc(1 - var(--p, 0) * 1.6);
}

/* ── the lockup: calligraphy + AFAWY · للمحتوى العفوي ── */
.cover__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.cover__mark {
  display: block;
  inline-size: clamp(150px, 46vw, 260px);
  color: var(--on-slab);
}
.cover__mark svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}
.cover__mark .mk-2,
.cover__mark .mk-3,
.cover__mark .mk-4 {
  transform-box: fill-box;
  transform-origin: center;
}
.cover__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  margin: 0;
}
.cover__tag-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 0.9375rem;
  line-height: 1.4;
}
/* tracked by layout, not letter-spacing (the :lang(ar) base layer zeroes
   letter-spacing on every descendant of an Arabic page) */
.cover__letters {
  display: inline-flex;
  gap: 0.5em;
}
.cover__tag-ar {
  font-family: var(--font-ar-text);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
  opacity: 0.8;
}

/* ── echo + h1 ── */
.cover .cover__echo {
  align-self: stretch;
  color: var(--on-slab);
  opacity: 0.74;
  font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.5rem);
}
.cover .cover__echo:lang(ar) {
  font-size: clamp(1.1875rem, 0.95rem + 1vw, 1.75rem);
  line-height: 1.45;
}
.cover__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 880;
  font-stretch: 125%;
  font-size: clamp(2.4rem, 12.6vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--on-slab);
}
/* the h1 is never masked (visible from first paint), so its lines never clip
   — Arabic dots below the baseline stay whole */
.cover__h1 .line {
  overflow: visible;
  padding-block-end: 0.04em;
}
.cover__h1 .cover__sub {
  margin-block-start: 0.32em;
  font-weight: 700;
  font-size: 0.3em;
  line-height: 1.1;
  letter-spacing: 0.34em;
}
/* the key word (UGC / عفوي) is yellow on the always-dark slab (11:1) */
.cover__h1 .w[data-key] {
  position: relative;
  isolation: isolate;
  color: var(--yellow);
}
.cover__h1 .w[data-key]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0.04em 0.02em;
  inset-inline: -0.08em;
  border-radius: 0.08em;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
}
.cover__h1 .w[data-key]:dir(rtl)::before {
  transform-origin: right center;
}
.page-home:lang(ar) .cover__h1 {
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-stretch: normal;
  font-size: clamp(2.4rem, 14vw, 5.75rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
/* the :lang(ar) base layer sets line-height on EVERY Arabic element, so the
   h1's inner spans must inherit the h1's own leading explicitly */
.cover__h1 .line,
.cover__h1 .line > span,
.cover__h1 .w {
  line-height: inherit;
}
.page-home:lang(ar) .cover__h1 .line {
  padding-block: 0.04em 0.1em;
}
.page-home:lang(ar) .cover__h1 .cover__sub {
  margin-block-start: 0.3em;
  font-family: var(--font-ar-text);
  font-weight: 500;
  font-size: 0.36em;
  letter-spacing: 0;
}

/* ── CTAs ── */
.cover__ctas {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}
.cover__ctas .btn {
  min-block-size: 52px;
}
@media (min-width: 600px) {
  .cover__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }
}

/* ═══ The hero phone (a 3-reel story playlist) ═══════════════════════════ */
/* phones: it peeks from below the slab, half below the fold, fading out */
.cover__phone {
  grid-row: 2;
  grid-column: 1;
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-block-start: var(--s-6);
  overflow: clip;
  /* the phone never sizes the row: it peeks out of what the slab leaves */
  contain: size;
  mask-image: linear-gradient(var(--slab) 72%, transparent);
}
.phone--hero {
  inline-size: var(--phone-w);
  flex: none;
  translate: 0 calc(var(--p, 0) * -18%);
}
/* Phones + small tablets (founder, 28-10-2026: the half-hidden phone read as a
   broken page). The cover grows to fit, so the whole phone shows, unfaded,
   sitting on the plaza with a little room below it. */
@media (max-width: 899px) {
  .cover__phone {
    padding-block-end: var(--s-6);
    overflow: visible;
    contain: none;
    mask-image: none;
  }
}
.cover__ghostphone {
  display: none;
}
.phone--hero .phone__screen {
  isolation: isolate;
}
.phone__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--on-yellow);
}
.phone__fallback svg {
  inline-size: 58%;
  block-size: auto;
}
.phone--hero .phone__reel {
  opacity: 0;
  transition: opacity 300ms linear;
}
.phone--hero .phone__reel.is-on {
  opacity: 1;
}
.phone__shade {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 26%;
  background: linear-gradient(var(--scrim), transparent);
  pointer-events: none;
}
.phone__story {
  position: absolute;
  inset-block-start: 7.6%;
  inset-inline: 5.5%;
  display: flex;
  gap: 1.4cqi;
}
.phone__seg {
  flex: 1;
  block-size: max(2px, 0.9cqi);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--on-slab) 38%, transparent);
  overflow: hidden;
}
.phone__seg > i {
  display: block;
  block-size: 100%;
  background: var(--on-slab);
  transform: scaleX(0);
  transform-origin: left center;
}
.phone__seg:dir(rtl) > i {
  transform-origin: right center;
}
.phone__seg.is-done > i {
  transform: scaleX(1);
}
.phone__seg.is-run > i {
  animation: cover-seg var(--seg-dur, 6s) linear forwards;
  animation-play-state: var(--seg-play, running);
}
.phone--hero.is-held {
  --seg-play: paused;
}
@keyframes cover-seg {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.phone__brands {
  position: absolute;
  inset-block-start: 10.4%;
  inset-inline: 5.5%;
}
.phone__brand {
  display: none;
  align-items: center;
  gap: 2.4cqi;
  max-inline-size: 100%;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: max(11px, 4.6cqi);
  line-height: 1.2;
  color: var(--on-slab);
}
.phone__brand.is-on {
  display: inline-flex;
}
.phone__brand bdi {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone__avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 9cqi;
  block-size: 9cqi;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.4cqi;
  box-shadow: 0 0 0 0.6cqi var(--slab);
}
/* WCAG 2.2.2 pause toggle (revealed by s01-cover.ts only when the playlist
   runs); sits above the link, at the brand row's inline-end */
.phone--hero {
  --pause-size: max(40px, 12cqi);
}
.phone--hero .phone__brands {
  inset-inline-end: calc(5.5% + var(--pause-size) + 2cqi);
}
.phone__pause {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(10.4% - 2cqi);
  inset-inline-end: 4%;
  display: grid;
  place-items: center;
  inline-size: var(--pause-size);
  block-size: var(--pause-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--on-slab);
  cursor: pointer;
}
.phone__pause[hidden] {
  display: none;
}
.phone__pause-ico {
  inline-size: 46%;
  block-size: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.phone__pause-play {
  display: none;
  fill: currentColor;
  stroke-width: 1.5;
}
.phone__pause[aria-pressed="true"] .phone__pause-bars {
  display: none;
}
.phone__pause[aria-pressed="true"] .phone__pause-play {
  display: inline;
}
.phone__pause:focus-visible {
  outline: 2px solid var(--on-slab);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
@media (hover: hover) and (pointer: fine) {
  .phone__pause:hover {
    background: var(--slab);
  }
}
.phone__link {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-block-end: 9%;
  border-radius: inherit;
  color: var(--on-slab);
  text-decoration: none;
}
.phone__link:focus-visible {
  outline-offset: -5px;
  box-shadow: inset 0 0 0 8px var(--focus-halo);
}
.phone__play {
  position: absolute;
  inset-block-start: 40%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 2cqi;
  padding-block: 3cqi;
  padding-inline: 4cqi 5.4cqi;
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 110%;
  font-size: max(12px, 4.8cqi);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--sh-2);
}
.phone__play:dir(rtl) {
  translate: 50% -50%;
}
.phone__play svg {
  inline-size: 7cqi;
  block-size: 7cqi;
}
.page-home:lang(ar) .phone__play {
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-stretch: normal;
  text-transform: none;
}
/* while the playlist runs, the overlay steps aside for the reel */
.phone--hero.is-playing .phone__play {
  opacity: 0;
  scale: 0.9;
  transition:
    opacity var(--d-sm) var(--ease-out),
    scale var(--d-sm) var(--ease-out);
}
.phone__all {
  display: inline-flex;
  align-items: center;
  gap: 2cqi;
  padding-block: 2.2cqi;
  padding-inline: 4.4cqi 2.4cqi;
  border-radius: var(--r-pill);
  background: var(--scrim);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: max(11px, 4.2cqi);
  line-height: 1.2;
  white-space: nowrap;
}
.page-home:lang(ar) .phone__all {
  font-family: var(--font-ar-text);
  font-weight: 500;
}
.phone__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 8cqi;
  padding-inline: 1.6cqi;
  block-size: 8cqi;
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--on-yellow);
  font-size: 0.92em;
  font-weight: 800;
}
@media (hover: hover) and (pointer: fine) {
  .phone__link:hover .phone__all {
    background: var(--slab);
  }
}

/* ═══ Corner labels (slide 1) ════════════════════════════════════════════ */
.cover__corners {
  display: none;
}
/* below 900 the labels would collide with the peeking phone; they repeat in
   the footer */
@media (min-width: 900px) {
  .cover__corners {
    position: absolute;
    z-index: 3;
    inset-inline: var(--fg);
    inset-block-end: var(--s-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-4);
    pointer-events: none;
  }
}
.cover__corner {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding-block: var(--s-2);
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--scrim);
  color: var(--on-slab);
}
.page-home .cover__corner.ui {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cover__corner-ar {
  font-family: var(--font-ar-text);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.cover__dot {
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--yellow);
}
.cover__corner--end {
  gap: var(--s-3);
  text-align: end;
}
.cover__powered {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-display);
  font-stretch: 112%;
  text-transform: uppercase;
  line-height: 1.15;
}
.cover__powered-by {
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  opacity: 0.8;
}
.cover__powered-name {
  font-weight: 760;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}
.cover__rule {
  inline-size: 1px;
  align-self: stretch;
  background: currentColor;
  opacity: 0.5;
}
.cover__corner--end .baker-mark {
  inline-size: 34px;
  block-size: auto;
}

/* ═══ ≥900: the slide-1 composition (grid 7/5, profile diagonal) ═════════ */
@media (min-width: 900px) {
  .cover {
    --slab-top: 62%;
    --slab-bot: 44%;
    /* the same edge as plain numbers, for the text-room guard below */
    --slab-top-n: 0.62;
    --slab-bot-n: 0.44;
    --edge-w: 6px;
    --phone-w: max(
      220px,
      min(300px, (100svh - 240px) * 0.4615 / var(--ui-zoom))
    );
    grid-template-rows: minmax(0, 1fr);
    min-block-size: max(640px, 100svh);
  }
  .cover__photo {
    grid-area: 1 / 1 / -1 / -1;
    inset: 0;
  }
  .cover__img {
    object-position: 70% 12%;
  }
  /* an oversized slab (160% wide, its start 60% off-canvas) with a FIXED
     polygon: M1 slides it toward inline-end with a transform, never by
     interpolating the polygon. Box x = (section x + 60%) / 1.6. */
  .cover__slab {
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    inline-size: 160%;
    margin: 0;
    clip-path: polygon(
      0 0,
      calc((var(--slab-top) + 60%) / 1.6) 0,
      calc((var(--slab-bot) + 60%) / 1.6) 100%,
      0 100%
    );
    /* M1 hand-off: the slab's BOTTOM edge is the seam with #skip, so it
       settles onto S2's corner-triangle width (--slab-meet, = .skip__corner's
       38% inline-size ≥900 in s02-skip.css) while the upper slab leans toward
       inline-end (skew about the bottom edge) — the dark shape flows across
       the seam into S2's triangle (exactly from p≈.6, when the seam
       reaches mid-screen). Box % = section % / 1.6. */
    --slab-meet: 38%;
    transform-origin: 50% 100%;
    translate: calc(
        min(1, var(--p, 0) * 1.6) * (var(--slab-meet) - var(--slab-bot)) / 1.6 *
          var(--dir)
      )
      0;
    transform: skewX(calc(var(--p, 0) * -10deg * var(--dir)));
  }
  .cover__slab:dir(rtl) {
    clip-path: polygon(
      calc(100% - (var(--slab-top) + 60%) / 1.6) 0,
      100% 0,
      100% 100%,
      calc(100% - (var(--slab-bot) + 60%) / 1.6) 100%
    );
  }
  .cover__edge > i {
    clip-path: polygon(
      calc((var(--slab-top) + 60%) / 1.6 - var(--edge-w)) 0,
      calc((var(--slab-top) + 60%) / 1.6) 0,
      calc((var(--slab-bot) + 60%) / 1.6) 100%,
      calc((var(--slab-bot) + 60%) / 1.6 - var(--edge-w)) 100%
    );
  }
  .cover__edge:dir(rtl) > i {
    clip-path: polygon(
      calc(100% - (var(--slab-top) + 60%) / 1.6) 0,
      calc(100% - (var(--slab-top) + 60%) / 1.6 + var(--edge-w)) 0,
      calc(100% - (var(--slab-bot) + 60%) / 1.6 + var(--edge-w)) 100%,
      calc(100% - (var(--slab-bot) + 60%) / 1.6) 100%
    );
  }

  /* positioned, so the corner labels align with the content column */
  .cover__in {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    align-items: center;
    padding-block: calc(var(--nav-room) + var(--s-5)) calc(var(--s-6) + 64px);
  }
  .cover__text {
    grid-row: 1;
    grid-column: 1 / span 6;
    justify-self: start;
    inline-size: fit-content;
    max-inline-size: 100%;
    gap: var(--s-4);
    padding: 0;
  }
  /* the line rides the slab edge below the nav bar only */
  .cover__edge {
    inset-block-start: calc(var(--nav-room) + var(--s-2));
  }
  .cover__edge > i {
    inset-block-start: calc(-1 * (var(--nav-room) + var(--s-2)));
  }
  .cover__mark {
    inline-size: clamp(180px, 17vw, 280px);
  }
  .cover__h1 {
    font-size: clamp(3.5rem, 6.2vw, 5.25rem);
  }
  .page-home:lang(ar) .cover__h1 {
    font-size: clamp(3.75rem, 6.4vw, 6rem);
  }
  .cover__ctas {
    margin-block-start: var(--s-3);
  }
  .cover__phone {
    grid-row: 1;
    grid-column: 8 / -1;
    padding: 0;
    align-items: center;
    overflow: visible;
    contain: none;
    mask-image: none;
  }
  .phone--hero {
    rotate: calc(-4deg * var(--dir));
  }
  .cover__corners {
    inset-inline: 0;
    inset-block-end: var(--s-6);
  }
}

/* ═══ ≥1280: bigger phone + its ghost, the giant "UGC" behind the slab ═══ */
@media (min-width: 1280px) {
  .cover {
    --slab-top: 60%;
    --slab-bot: 42%;
    --slab-top-n: 0.6;
    --slab-bot-n: 0.42;
    --phone-w: max(
      240px,
      min(360px, (100svh - 240px) * 0.4615 / var(--ui-zoom))
    );
  }
  .cover__ghost {
    position: absolute;
    display: block;
    inset-block-start: 50%;
    inset-inline-start: 37.5%;
    translate: calc(-16% * var(--dir)) -54%;
    font-family: var(--font-display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: 42vw;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--yellow);
    opacity: 0.09;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
  .cover__ghostphone {
    position: absolute;
    display: block;
    inline-size: var(--phone-w);
    opacity: 0.5;
    transform: translate(calc(-30% * var(--dir)), 4%) scale(0.86)
      rotate(calc(-12deg * var(--dir)));
    translate: 0 calc(var(--p, 0) * -8%);
  }
  .cover__ghostphone img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

/* ═══ 900–1999: the text never crosses the diagonal ═══════════════════════
   On short or narrow viewports the h1's long line and the CTA row sit low
   enough that the slanting slab edge reaches them (1280×720 EN: "PLATFORM" and
   the ghost CTA crossed by ~12px). The diagonal's x at a fraction f of the
   cover's height is (top + (bot − top)·f)·100vw; minus the column's start and
   a gap, that is the room each block may use. The h1 scales to fit its widest
   line (EN "PLATFORM" ≈ 7.2em, AR "منصة محتوى" ≈ 6em); the CTA row wraps.
   (≥2000 the .wrap is zoomed and its clearance is ample — measured 60px+.) */
@media (min-width: 900px) and (max-width: 1999px) {
  .cover {
    --wrap-start: calc((100vw - min(100vw - 2 * var(--fg), 1360px)) / 2);
    --room-h1: calc(
      (var(--slab-top-n) + (var(--slab-bot-n) - var(--slab-top-n)) * 0.75) *
        100vw - var(--wrap-start) - var(--s-5)
    );
    --room-cta: calc(
      (var(--slab-top-n) + (var(--slab-bot-n) - var(--slab-top-n)) * 0.86) *
        100vw - var(--wrap-start) - var(--s-5)
    );
  }
  .cover__h1 {
    font-size: min(clamp(3.5rem, 6.2vw, 5.25rem), var(--room-h1) / 7.2);
  }
  .page-home:lang(ar) .cover__h1 {
    font-size: min(clamp(3.75rem, 6.4vw, 6rem), var(--room-h1) / 6);
  }
  .cover__ctas {
    max-inline-size: var(--room-cta);
  }
}

/* ═══ Page-load sequence (§3.4) — decorative layers only ═════════════════
   CSS-timed from first paint; skipped on anchor/back navigation
   (html.no-cover-intro) and absent without js-motion (reduced motion, no-JS,
   or the bundle-failure safety net), which all get the finished frame. */
html.js-motion:not(.no-cover-intro) .cover__edge {
  animation: cover-edge-x 700ms var(--ease-wipe) 120ms both;
}
html.js-motion:not(.no-cover-intro) .cover__edge:dir(rtl) {
  animation-name: cover-edge-x-rtl;
}
@keyframes cover-edge-x {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes cover-edge-x-rtl {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes cover-edge-y {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}
@media (min-width: 900px) {
  html.js-motion:not(.no-cover-intro) .cover__edge,
  html.js-motion:not(.no-cover-intro) .cover__edge:dir(rtl) {
    animation-name: cover-edge-y;
  }
}

/* the عفوي write-on: the calligraphy writes right → left in both languages;
   the strokes wipe, the dots stamp */
html.js-motion:not(.no-cover-intro) .cover__mark .mk-0 {
  animation: cover-mk-wipe 460ms cubic-bezier(0.65, 0, 0.35, 1) 300ms both;
}
html.js-motion:not(.no-cover-intro) .cover__mark .mk-1 {
  animation: cover-mk-wipe 460ms cubic-bezier(0.65, 0, 0.35, 1) 720ms both;
}
html.js-motion:not(.no-cover-intro) .cover__mark .mk-2 {
  animation: cover-mk-dot 280ms var(--ease-pop) 700ms both;
}
html.js-motion:not(.no-cover-intro) .cover__mark .mk-3 {
  animation: cover-mk-dot 280ms var(--ease-pop) 1120ms both;
}
html.js-motion:not(.no-cover-intro) .cover__mark .mk-4 {
  animation: cover-mk-dot 280ms var(--ease-pop) 1200ms both;
}
@keyframes cover-mk-wipe {
  from {
    clip-path: inset(-6% -2% -6% 100%);
  }
  to {
    clip-path: inset(-6% -2% -6% -2%);
  }
}
@keyframes cover-mk-dot {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* the UGC flash: a caption pill sweeps behind the key word, holds, leaves */
html.js-motion:not(.no-cover-intro) .cover__h1 .w[data-key] {
  animation: cover-key-ink 640ms steps(1, end) 1300ms both;
}
html.js-motion:not(.no-cover-intro) .cover__h1 .w[data-key]::before {
  animation: cover-key-pill 640ms var(--ease-out) 1300ms both;
}
@keyframes cover-key-ink {
  0% {
    color: var(--on-slab);
  }
  22% {
    color: var(--on-yellow);
  }
  78% {
    color: var(--yellow);
  }
}
@keyframes cover-key-pill {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  24% {
    transform: scaleX(1);
    opacity: 1;
  }
  74% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* the hero phone rises in (the photo itself never fades — it is the LCP) */
html.js-motion:not(.no-cover-intro) .phone--hero {
  animation: cover-phone 800ms var(--ease-out) 900ms both;
}
@keyframes cover-phone {
  from {
    opacity: 0;
    transform: translateY(40px) rotate(calc(-4deg * var(--dir)));
  }
}
html.js-motion:not(.no-cover-intro) .cover__ghostphone {
  animation: cover-fade 900ms var(--ease-out) 1150ms both;
}
@keyframes cover-fade {
  from {
    opacity: 0;
  }
}
@media (min-width: 900px) {
  html.js-motion:not(.no-cover-intro) .cover__img {
    animation: cover-settle 1800ms var(--ease-out) both;
  }
  html.js-motion:not(.no-cover-intro) .cover__img:dir(rtl) {
    animation-name: cover-settle-rtl;
  }
}
@keyframes cover-settle {
  from {
    transform: scale(1.06);
  }
}
@keyframes cover-settle-rtl {
  from {
    transform: scaleX(-1) scale(1.06);
  }
}

/* reduced motion: the finished frame, nothing moves (belt and braces) */
@media (prefers-reduced-motion: reduce) {
  .cover__photo,
  .cover__slab,
  .phone--hero,
  .cover__ghostphone {
    translate: none;
  }
  .cover__slab {
    transform: none;
  }
  .cover__text {
    opacity: 1;
  }
}