/* S6 · Why us (#why) — THE FEED homepage, design.md Part III.
   "Approved notifications" (FINAL-SPEC §4 S6, profile slide 6): the thinking
   statue + five phone notifications. The Arabic headline always sits on a
   yellow slab that bleeds off the right edge (its own start edge), as on the
   slide; the statue always sits on the left, facing the list. */

/* ── header ── */
.why__head {
  container-type: inline-size;
  display: grid;
  gap: var(--s-4);
  margin-block-end: clamp(32px, 16px + 3vw, 72px);
}
/* the Arabic line on its slab (both pages: the echo on /en, the h2 on /ar) */
.why__ar {
  position: relative;
  isolation: isolate;
  justify-self: self-start;
  padding-block: 0.06em 0.1em;
  padding-inline: 0 0.5em;
}
.why__ar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: calc(-1 * var(--s-5)) 0;
  inset-inline-start: -50vw;
  inset-inline-end: -0.35em;
  background: var(--yellow);
  /* the left edge slants down-right, like the slide's corner slab */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.8em 100%);
}
.why__echo.why__ar {
  color: var(--on-yellow);
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-size: var(--fs-ar-h2);
  line-height: 1.22;
}
.why__ar-in {
  display: inline-block;
}
.why__h2.why__ar {
  color: var(--on-yellow);
}
/* the English line on /ar: as big as the h2, in the display face */
.why__en {
  justify-self: self-start;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 860;
  font-stretch: 120%;
  font-size: var(--fs-h2);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* ── the statue ── */
.why__statue {
  position: relative;
  margin: 0;
  margin-block-end: var(--s-5);
  aspect-ratio: 4 / 3;
}
.why__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 0;
  /* the crop fades out under the laptop instead of cutting the robe */
  mask-image: linear-gradient(to bottom, var(--ink) 72%, transparent);
}
/* the thought bubble: three typing dots while the list arrives */
.why__typing {
  position: absolute;
  inset-block-start: 7%;
  inset-inline-start: 56%;
  display: none;
  gap: 5px;
  padding: 12px 15px;
  border-radius: var(--r-pill);
  background: var(--screen);
  box-shadow: var(--sh-1);
  transition: opacity 200ms linear;
}
.why__typing:dir(rtl) {
  inset-inline-start: auto;
  inset-inline-end: 56%;
}
.why__typing::before,
.why__typing::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--screen);
  box-shadow: var(--sh-1);
}
.why__typing::before {
  inline-size: 12px;
  block-size: 12px;
  inset-block-end: -10px;
  inset-inline-start: 2px;
}
.why__typing::after {
  inline-size: 7px;
  block-size: 7px;
  inset-block-end: -20px;
  inset-inline-start: -6px;
}
.why__typing:dir(rtl)::before {
  inset-inline-start: auto;
  inset-inline-end: 2px;
}
.why__typing:dir(rtl)::after {
  inset-inline-start: auto;
  inset-inline-end: -6px;
}
.why__typing i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--slab);
  animation: why-type 1.1s ease-in-out infinite;
  animation-play-state: var(--play);
}
.why__typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.why__typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes why-type {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
.js-motion .why__typing {
  display: inline-flex;
}
.why__typing.is-done {
  opacity: 0;
}

/* ── the notifications ── */
.notifs {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.notif {
  min-inline-size: 0;
}
.notif__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s-4);
  min-block-size: 64px;
  padding-block: var(--s-4);
  padding-inline: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: transform 180ms var(--ease-out);
}
:root[data-theme="dark"] .notif__card {
  background: var(--surface-2);
}
.notif__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--sh-2);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .notif__card:hover {
    transform: translateY(-2px);
  }
  .notif__card:hover::after {
    opacity: 1;
  }
}
.notif__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-sm);
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 1.375rem;
  line-height: 1;
}
.notif__body {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}
.notif__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.page-home:lang(ar) .notif__meta {
  font-family: var(--font-ar-text);
  font-size: 0.8125rem;
  line-height: 1.4;
}
/* a counted number stays on the line of the word or dash after it (an inline-block
   odometer is otherwise a break opportunity even before a no-break space) */
.notif__nb {
  white-space: nowrap;
}
.notif__title,
.notif__alt {
  margin: 0;
  text-wrap: pretty;
}
.notif__title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
  line-height: 1.4;
  color: var(--ink);
}
.page-home:lang(ar) .notif__title {
  font-family: var(--font-ar-text);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.65;
}
/* item 4's odometers sit in the sentence: same face as the title, one line-box
   tall, top-aligned, so their digits share the sentence's baseline exactly */
.notif__title .count {
  vertical-align: top;
  font-weight: 800;
}
.page-home:lang(ar) .notif__title .count {
  font-weight: 700;
}
.notif__title .count,
.notif__title .count * {
  line-height: 1.4;
}
.page-home:lang(ar) .notif__title .count,
.page-home:lang(ar) .notif__title .count * {
  line-height: 1.65;
}
.notif__title .odo__d,
.notif__title .odo__strip > span {
  block-size: 1lh;
}
.notif__title .count.in .odo__strip {
  transform: translateY(calc(var(--d, 0) * -1lh));
}
.notif__alt {
  margin: 0;
  text-wrap: pretty;
}
.notif__title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
  line-height: 1.4;
  color: var(--ink);
}
.page-home:lang(ar) .notif__title {
  font-family: var(--font-ar-text);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.65;
}
.notif__title .count {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  vertical-align: bottom;
}
.notif__title .odo__d,
.notif__title .odo > span {
  block-size: 1.2em;
  line-height: 1.2;
}
.notif__title .odo__strip > span {
  block-size: 1.2em;
  line-height: 1.2;
}
.notif__title .count.in .odo__strip {
  transform: translateY(calc(var(--d, 0) * -1.2em));
}
.notif__alt {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
  text-align: start;
}
.notif__alt:lang(en) {
  font-family: var(--font-text);
  font-weight: 500;
}
.notif__alt:lang(ar) {
  font-family: var(--font-ar-text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}
/* item 1's rubber stamp */
.notif__stamp {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-end: var(--s-6);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 3px;
  padding-inline: 7px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--r-xs);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  rotate: -4deg;
}
.notif__stamp:dir(rtl) {
  rotate: 4deg;
}
.page-home:lang(ar) .notif__stamp {
  font-family: var(--font-ar-text);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.notif__stamp svg {
  inline-size: 14px;
  block-size: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.js-motion .notif__stamp[data-fx="stamp"] {
  transition-delay: 450ms;
}

/* the cards drop in like notifications, 140ms apart (laid out final; only
   transform/opacity move) */
.js-motion .notifs .notif {
  transition:
    opacity 420ms var(--ease-pop),
    transform 420ms var(--ease-pop);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.js-motion .notifs:not(.in) .notif {
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
}

/* ── tablet / desktop ── */
@media (min-width: 900px) {
  .why__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    align-items: start;
  }
  .why__head {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .why__head > .why__h2 {
    grid-column: 1;
    grid-row: 1;
  }
  .why__head > .why__echo {
    grid-column: 2;
    grid-row: 1;
  }
  .why__echo.why__ar {
    font-size: var(--fs-ar-h2);
  }
  .why__statue {
    grid-column: 1 / 6;
    grid-row: 2;
    position: sticky;
    inset-block-start: 96px;
    margin: 0;
    aspect-ratio: auto;
  }
  .why__statue:dir(rtl) {
    grid-column: 8 / 13;
  }
  .why__img {
    block-size: auto;
    mask-image: none;
    filter: var(--cutout-shadow);
  }
  .why__typing {
    inset-block-start: 4%;
  }
  .notifs {
    grid-column: 6 / 13;
    grid-row: 2;
    gap: var(--s-4);
    padding-block-start: var(--s-6);
  }
  .notifs:dir(rtl) {
    grid-column: 1 / 8;
  }
  .notif__card {
    padding-block: var(--s-5);
    padding-inline: var(--s-5) var(--s-6);
    column-gap: var(--s-5);
  }
  .notif__icon {
    inline-size: 48px;
    block-size: 48px;
    font-size: 1.625rem;
  }
}
@media (min-width: 1280px) {
  /* mega, capped so "WHY US?" + the Arabic slab always share one row */
  .why__h2:not(.why__ar) {
    font-size: min(var(--fs-mega), 8rem, 9cqi);
  }
  .why__h2.why__ar {
    font-size: min(var(--fs-ar-mega), 8.5rem);
  }
  /* the slide's cascade: ragged toward the statue (left), flush on the right */
  .notif:nth-child(2),
  .notif:nth-child(4) {
    margin-inline-start: 8%;
  }
  .notif:nth-child(3) {
    margin-inline-start: 14%;
  }
  .notif:nth-child(5) {
    margin-inline-start: 18%;
  }
  .notif:dir(rtl) {
    margin-inline-start: 0;
  }
  .notif:nth-child(2):dir(rtl),
  .notif:nth-child(4):dir(rtl) {
    margin-inline-end: 8%;
  }
  .notif:nth-child(3):dir(rtl) {
    margin-inline-end: 14%;
  }
  .notif:nth-child(5):dir(rtl) {
    margin-inline-end: 18%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .why__statue {
    position: relative;
  }
}

/* base.css gives every :lang(ar) element line-height 1.85 — keep the numbers'
   <bdi> on their sentence's line-height so the line box doesn't grow */
.notif__alt bdi,
.notif__title bdi {
  line-height: inherit;
}