/* S3 · Never looks like an ad + reel rail (#never) — THE FEED homepage, design.md Part III.
   FINAL-SPEC §4 S3 / profile slide 3: a yellow corner slab carrying the عفوي mark, the
   headline whose red words stamp down after the caption pop, the body, the "we're a
   platform" statement beside the person-in-phone icon, then the rail of real reels. */

/* ── frame ── */
.never {
  --slab-h: calc(clamp(118px, 15vw, 250px) * var(--ui-zoom));
  --slab-w: calc(var(--slab-h) * 1.34);
  /* the text column always starts below the slab: no text ever sits on yellow
     (the ink flips light in dark mode) */
  padding-block-start: calc(var(--slab-h) + var(--s-5));
}
@media (min-width: 900px) {
  .never {
    padding-block-start: max(
      var(--band-pad),
      calc(var(--slab-h) * 0.85 + var(--s-4))
    );
  }
}

.never__slab {
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--slab-w);
  block-size: var(--slab-h);
  background: var(--yellow);
  color: var(--on-yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
.never__slab:dir(rtl) {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.never__slab-mark {
  position: absolute;
  inset-block-start: 20%;
  inset-inline-start: 12%;
  inline-size: 30%;
}
.never__slab-mark svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.js-motion .never__slab {
  transition: clip-path var(--d-xl) var(--ease-wipe);
}
.js-motion .never__slab:not(.in) {
  clip-path: polygon(0 0, 0 0, 0 0);
}
.js-motion .never__slab:dir(rtl):not(.in) {
  clip-path: polygon(100% 0, 100% 0, 100% 0);
}

/* ── grid ── */
.never__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
}
.never__head,
.never__rule,
.never__body {
  grid-column: 1 / -1;
}
.never__icon {
  grid-column: 1;
  grid-row: 4;
  align-self: start;
  inline-size: 72px;
  margin-block-start: var(--s-6);
}
.never__stmt {
  grid-column: 2;
  grid-row: 4;
  margin-block-start: var(--s-6);
}

@media (min-width: 900px) {
  .never__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
  }
  .never__rule {
    grid-column: 1 / -1;
  }
  .never__body {
    grid-column: 1 / 9;
    grid-row: 3;
  }
  .never__stmt {
    grid-column: 1 / 10;
    grid-row: 4;
    margin-block-start: var(--s-7);
  }
  .never__icon {
    grid-column: 10 / -1;
    grid-row: 3 / 5;
    justify-self: end;
    align-self: center;
    inline-size: clamp(116px, 11vw, 168px);
    margin-block-start: 0;
  }
}

/* ── headline ── */
.never__head {
  display: grid;
  gap: var(--s-3);
}
.page-home .never__h2:lang(en) {
  font-size: calc(var(--fs-h2) * 0.84);
  line-height: 0.98;
}
@media (min-width: 900px) {
  .page-home .never__h2:lang(en) {
    font-size: calc(var(--fs-h2) * 0.78);
  }
}
.never__h2 .w.is-red {
  position: relative;
  color: var(--red-text);
}
/* the stamp: after the words land, the red pair slams down… */
.js-motion .never__h2 .w.is-red {
  transition:
    opacity 380ms var(--ease-pop),
    transform 380ms var(--ease-pop);
  transition-delay: calc(var(--wi, 0) * var(--cap-stagger, 55ms) + 420ms);
}
.js-motion .never__h2:not(.in) .w.is-red {
  opacity: 0;
  transform: scale(1.6) rotate(-6deg);
}
/* …and leaves a printed-ink ghost that fades (one shot) */
.never__h2 .w.is-red[data-ink]::after {
  content: attr(data-ink);
  position: absolute;
  inset: 0;
  translate: calc(2px * var(--dir)) 2px;
  color: var(--red-text);
  opacity: 0;
  pointer-events: none;
}
.js-motion .never__h2.in .w.is-red[data-ink]::after {
  animation: never-ink 600ms var(--ease-out) both;
  animation-delay: calc(var(--wi, 0) * var(--cap-stagger, 55ms) + 760ms);
}
@keyframes never-ink {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0;
  }
}
/* the pair wrapped onto two lines: the pill steps aside and each red word
   carries the same yellow underline as the static state (s03-never.ts) */
.never__h2.is-split .cap-pill {
  opacity: 0;
}
.never__h2 .w.is-red.is-ul {
  text-decoration: underline var(--yellow);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}
/* narrow phones wrap the red pair: a little more leading so an underline
   never grazes the caps of the next line */
@media (max-width: 359px) {
  .page-home .never__h2:lang(en) {
    line-height: 1.06;
  }
}
/* reduced motion / no JS: red words with a static yellow underline */
html:not(.js-motion) .never__h2 .w.is-red {
  text-decoration: underline var(--yellow);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

/* ── rule + body ── */
.never__rule {
  margin-block: clamp(24px, 3vw, 44px);
  border: 0;
  border-block-start: 1px solid var(--ink);
  inline-size: 100%;
}
.never__body {
  max-inline-size: 60ch;
}
.never__brand {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.never__brand:lang(ar) {
  letter-spacing: 0;
}

/* ── statement ── */
.never__stmt {
  --i: 1;
}
.never__stmt-text {
  margin: 0;
}
.never__stmt-a {
  display: block;
  font-family: var(--font-display);
  font-weight: 860;
  font-stretch: 120%;
  text-transform: uppercase;
  font-size: calc(var(--fs-h2) * 0.62);
  line-height: 1;
  letter-spacing: -0.005em;
}
.never__stmt-b {
  display: block;
  margin-block-start: var(--s-2);
  max-inline-size: 34ch;
  font-family: var(--font-display);
  font-weight: 560;
  font-stretch: 100%;
  font-size: var(--fs-h3);
  line-height: 1.22;
  text-wrap: pretty;
}
.page-home .never__stmt-text:lang(ar) .never__stmt-a,
.page-home:lang(ar) .never__stmt-a {
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-stretch: normal;
  font-size: calc(var(--fs-ar-h2) * 0.74);
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
.page-home:lang(ar) .never__stmt-b {
  font-family: var(--font-ar-display);
  font-weight: 600;
  font-stretch: normal;
  font-size: var(--fs-ar-h3);
  line-height: 1.5;
  max-inline-size: 36ch;
  text-wrap: balance;
}

/* ── the person-in-phone icon (profile slide 3) ── */
.never__icon {
  color: var(--ink);
}
.ic-pp {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}
.ic-pp__screen {
  fill: var(--yellow);
  stroke: none;
}
.ic-pp__person {
  color: var(--on-yellow);
}
.ic-pp__person,
.ic-pp__act,
.ic-pp__dots {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.js-motion .never__icon .ic-pp__screen {
  transition: opacity var(--d-md) var(--ease-out) 300ms;
}
.js-motion .never__icon .ic-pp__person {
  transition:
    opacity 420ms var(--ease-pop) 760ms,
    transform 420ms var(--ease-pop) 760ms;
}
.js-motion .never__icon .ic-pp__dots {
  transition: opacity var(--d-sm) var(--ease-out) 600ms;
}
.js-motion .never__icon .ic-pp__act {
  transition:
    opacity var(--d-sm) var(--ease-pop),
    transform var(--d-sm) var(--ease-pop);
  transition-delay: 1100ms;
}
.js-motion .never__icon .ic-pp__act--2 {
  transition-delay: 1190ms;
}
.js-motion .never__icon .ic-pp__act--3 {
  transition-delay: 1280ms;
}
.js-motion .never__icon:not(.in) .ic-pp__screen,
.js-motion .never__icon:not(.in) .ic-pp__dots {
  opacity: 0;
}
.js-motion .never__icon:not(.in) .ic-pp__person {
  opacity: 0;
  transform: translateY(14px) scale(0.9);
}
.js-motion .never__icon:not(.in) .ic-pp__act {
  opacity: 0;
  transform: scale(0.3);
}

/* ═══ the reel rail ═══════════════════════════════════════════════════════ */
.nrail {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(56px, 7vw, 112px);
}
.nrail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  margin-block-end: var(--s-3);
}
.nrail__label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  margin: 0;
  color: var(--ink);
}
.nrail__sep {
  color: var(--ink-muted);
}
.nrail__rec {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--red);
  animation: rail-rec 1s steps(2, jump-none) infinite;
  animation-play-state: var(--play, paused);
}
@keyframes rail-rec {
  to {
    opacity: 0.25;
  }
}
.nrail__all {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.page-home:lang(ar) .nrail__all {
  font-family: var(--font-ar-text);
  font-weight: 500;
  font-size: var(--fs-ar-ui);
}
/* the actions: pause toggle + "watch all" */
.nrail__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-4);
}
.nrail__pause {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-block: 0;
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nrail__pause[hidden] {
  display: none;
}
.nrail__pause-ic {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
}
.nrail__pause-play,
.nrail__pause-on {
  display: none;
}
/* paused: the button offers "Play videos" (its name changes with its state) */
.nrail.is-paused .nrail__pause {
  border-color: var(--ink);
}
.nrail.is-paused .nrail__pause-bars,
.nrail.is-paused .nrail__pause-off {
  display: none;
}
.nrail.is-paused .nrail__pause-play,
.nrail.is-paused .nrail__pause-on {
  display: inline;
}
/* paused: the REC dot stops blinking too */
.nrail.is-paused .nrail__rec {
  animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
  .nrail__pause:hover {
    border-color: var(--ink);
  }
}
.nrail__arrow {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  transform: scaleX(var(--dir));
  transition: translate var(--d-xs) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nrail__all:hover {
    text-decoration-color: var(--ink);
  }
  .nrail__all:hover .nrail__arrow {
    translate: calc(3px * var(--dir)) 0;
  }
}

/* the scroller */
.nrail__track {
  /* the first card lines up with the .wrap column; s03-never.ts measures the
     exact offset (this fallback is exact below the 4K zoom steps) */
  --rail-pad: max(var(--fg), (100% - 1360px) / 2);
  /* the track is full-bleed (outside .wrap), so it takes the 4K step itself */
  zoom: var(--ui-zoom);
  display: flex;
  gap: 14px;
  margin: 0;
  padding-block: var(--s-3) var(--s-4);
  padding-inline: var(--rail-pad);
  scroll-padding-inline: var(--rail-pad);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.nrail__track::-webkit-scrollbar {
  display: none;
}
.nrail__card {
  flex: none;
  inline-size: clamp(168px, 44vw, 240px);
  scroll-snap-align: start;
}
@media (min-width: 900px) {
  .nrail__track {
    gap: 18px;
  }
  .nrail__card {
    inline-size: clamp(200px, 19vw, 240px);
  }
}
.js-motion .nrail__card {
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js-motion .nrail__track:not(.in) .nrail__card {
  opacity: 0;
  transform: translateX(calc(24px * var(--dir)));
}

/* a card = a phone playing a real reel */
.nrail__link {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms var(--ease-out);
}
.nrail__phone,
.nrail__phone .phone__screen {
  display: block;
}
:root[data-theme="dark"] .nrail__phone {
  outline: 1px solid var(--line);
}
.nrail__phone .phone__screen {
  background: var(--slab);
}
.nrail__brand,
.nrail__dur {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--scrim);
  color: var(--on-slab);
  white-space: nowrap;
}
.nrail__brand {
  /* a block box (not flex) so text-overflow can draw the ellipsis on the
     text itself — an anonymous flex item is clipped mid-glyph instead */
  display: block;
  inset-block-end: 6%;
  inset-inline-start: 7%;
  max-inline-size: 86%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 11px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.nrail__brand:lang(ar),
.page-home:lang(ar) .nrail__brand {
  font-family: var(--font-ar-text);
  font-weight: 500;
}
.nrail__dur {
  inset-block-start: 9%;
  inset-inline-end: 7%;
  gap: 5px;
  padding: 3px 8px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.nrail__play {
  inline-size: 0;
  block-size: 0;
  border-block: 4px solid transparent;
  border-inline-start: 6px solid currentColor;
}

/* the last card: "Watch all N" */
.nrail__end {
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19.5;
  padding: clamp(16px, 9%, 24px);
  border-radius: var(--r-lg);
  background: var(--yellow);
  color: var(--on-yellow);
  box-shadow: var(--sh-2);
}
.nrail__end-kicker {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1;
  text-transform: uppercase;
}
.nrail__end-n {
  margin-block-start: var(--s-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(4rem, 3rem + 3vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
}
.nrail__end-sub {
  margin-block-start: var(--s-3);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.35;
}
.page-home:lang(ar) .nrail__end-kicker {
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-stretch: normal;
  line-height: 1.3;
  text-transform: none;
}
.page-home:lang(ar) .nrail__end-sub {
  font-family: var(--font-ar-text);
  font-weight: 500;
  font-size: var(--fs-ar-ui);
  line-height: 1.5;
}
.nrail__end-go {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-start: auto;
  border-radius: 50%;
  background: var(--on-yellow);
  color: var(--yellow);
}
.nrail__end-go svg {
  inline-size: 22px;
  block-size: 22px;
  transform: scaleX(var(--dir));
  transition: translate var(--d-xs) var(--ease-out);
}

/* hover (fine pointers) lifts a card; touch gets the press */
@media (hover: hover) and (pointer: fine) {
  .nrail__link:hover {
    transform: translateY(-6px);
  }
  .nrail__end:hover .nrail__end-go svg {
    translate: calc(4px * var(--dir)) 0;
  }
}
.nrail__link:active {
  transform: scale(0.98);
  transition-duration: 90ms;
}
.nrail__link:focus-visible {
  outline-offset: 4px;
}

.nrail__foot .scrub {
  margin-block-start: var(--s-2);
}

/* line drawing — class-based on purpose: Chrome does not re-match the
   `[pathLength]` attribute selector on SVG children when an ancestor's class
   changes, so the shared data-fx="draw" rule would leave the strokes undrawn */
.js-motion .never__icon .ic-draw {
  stroke-dasharray: 1;
  transition: stroke-dashoffset var(--d-xl) var(--ease-wipe);
}
.js-motion .never__icon:not(.in) .ic-draw {
  stroke-dashoffset: 1;
}

/* base.css gives every :lang(ar) element line-height 1.85; the caption words
   must inherit the headline's own leading instead */
.never__h2 .w {
  line-height: inherit;
}