/* S10 · Industries (#industries) — THE FEED homepage, design.md Part III; FINAL-SPEC §4 S10.
   The answer as burned-in subtitle cards; the industries as a static cloud of
   hashtag chips (phones, reduced motion, no-JS) that becomes two crossed hashtag
   tapes at ≥900 with motion — looping only while in view (.live), pausable
   (button + hover + focus, WCAG 2.2.2). */

/* ── head ── */
.ind__head {
  display: grid;
  gap: var(--s-3);
}
.ind__answer {
  margin-block-start: var(--s-2);
}

/* ── the two statements as burned-in subtitle cards ── */
.ind__subs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-7);
}
.ind__sub {
  inline-size: fit-content;
  max-inline-size: min(100%, 23em);
  margin: 0;
  padding: 0.4em 0.7em;
  border-radius: var(--r-sm);
  background: var(--slab);
  color: var(--on-slab);
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 108%;
  font-size: var(--fs-h3);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.page-home:lang(ar) .ind__sub {
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-stretch: normal;
  font-size: var(--fs-ar-h3);
  line-height: 1.5;
}
:root[data-theme="dark"] .ind__sub {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}
/* the second subtitle pops in after the first */
.js-motion .ind__sub--b .w {
  transition-delay: calc(160ms + var(--wi, 0) * var(--cap-stagger, 55ms));
}

/* ── industries: base = a static cloud of hashtag chips ── */
.ind-tapes {
  margin-block-start: var(--s-8);
}
.ind-tape--b,
.ind-tape__dup,
.ind-tapes__ctl {
  display: none;
}
.ind-tape__track {
  inline-size: min(100% - 2 * var(--fg), 1080px);
  margin-inline: auto;
}
.ind-tape__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind-tag {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
}
.page-home:lang(ar) .ind-tag {
  font-family: var(--font-ar-text);
  font-size: 1.0625rem;
}
.ind-tag__hash {
  margin-inline-end: 0.15em;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-weight: 500;
}
.js-motion .ind-tag__hash[data-fx="pop"] {
  display: inline-block;
}
.ind-tag__sep {
  display: none;
}

/* ── ≥900 + motion: two crossed tapes ── */
@keyframes ind-tape {
  to {
    transform: translateX(calc(-50% * var(--dir)));
  }
}
@media (min-width: 900px) {
  .js-motion .ind-tapes {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tape";
    align-items: center;
    padding-block: clamp(56px, 5vw, 96px) 0;
  }
  .js-motion .ind-tape {
    grid-area: tape;
    display: flex;
    align-items: center;
    inline-size: 130%;
    margin-inline-start: -15%;
    block-size: 72px;
    overflow: clip;
  }
  .js-motion .ind-tape--a {
    z-index: 2;
    background: var(--yellow);
    color: var(--on-yellow);
    transform: rotate(calc(-3deg * var(--dir)));
    box-shadow: var(--sh-2);
  }
  .js-motion .ind-tape--b {
    z-index: 1;
    background: var(--ink);
    color: var(--bg);
    transform: rotate(calc(3deg * var(--dir)));
  }
  .js-motion .ind-tape__track {
    display: flex;
    flex-wrap: nowrap;
    inline-size: max-content;
    margin: 0;
    animation: ind-tape 38s linear infinite;
    animation-play-state: var(--play);
  }
  .js-motion .ind-tape--b .ind-tape__track {
    animation-duration: 46s;
    animation-direction: reverse;
  }
  .js-motion .ind-tape__dup {
    display: flex;
  }
  .js-motion .ind-tape__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
  }
  .js-motion .ind-tag {
    min-block-size: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 112%;
    font-size: clamp(1.25rem, 1rem + 1.4vw, 2.75rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .js-motion .page-home:lang(ar) .ind-tag {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-stretch: normal;
    font-size: clamp(1.375rem, 1.05rem + 1.5vw, 3rem);
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
  }
  .js-motion .ind-tag__hash {
    color: inherit;
    opacity: 0.55;
    font-family: inherit;
  }
  /* a 9:16 vertical-video glyph between the tags */
  .js-motion .ind-tag__sep {
    display: inline-block;
    flex: none;
    inline-size: 0.3em;
    block-size: 0.54em;
    margin-inline: 0.8em;
    border-radius: 0.07em;
    background: currentColor;
  }
  .js-motion .ind-tape--b .ind-tag__sep {
    background: var(--yellow);
  }
  /* pause: the button (keyboard + pointer), or a pointer resting on a tape */
  .js-motion .ind-tapes.is-paused .ind-tape__track {
    animation-play-state: paused;
  }
  .js-motion .ind-tapes__ctl {
    display: flex;
    justify-content: flex-end;
    margin-block-start: clamp(56px, 5vw, 96px);
  }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .js-motion .ind-tape:hover .ind-tape__track,
  .js-motion .ind-tapes:has(.ind-tape:hover) .ind-tape__track {
    animation-play-state: paused;
  }
}
@media (min-width: 1280px) {
  .js-motion .ind-tape {
    block-size: 96px;
  }
}

/* the pause control */
.ind-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-inline: var(--s-4) var(--s-5);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.page-home:lang(ar) .ind-toggle {
  font-family: var(--font-ar-text);
  font-size: var(--fs-ar-ui);
  letter-spacing: 0;
  text-transform: none;
}
.ind-toggle__ico {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ind-toggle__play {
  display: none;
  fill: currentColor;
  stroke-width: 1.5;
}
.ind-toggle[aria-pressed="true"] .ind-toggle__pause {
  display: none;
}
.ind-toggle[aria-pressed="true"] .ind-toggle__play {
  display: inline;
}
@media (hover: hover) and (pointer: fine) {
  .ind-toggle:hover {
    border-color: var(--ink);
  }
}

/* ≥900: the head is one centred block */
@media (min-width: 900px) {
  .ind__head {
    justify-items: center;
    text-align: center;
  }
  .ind__head .echo,
  .ind__answer {
    text-align: center;
  }
  .ind__h2 {
    max-inline-size: 18ch;
  }
  .page-home:lang(ar) .ind__h2 {
    max-inline-size: none;
  }
}

/* the karaoke pill is placed from the heading's LEFT edge (runtime measures
   r.left - base.left), so in RTL it must be anchored on the left too */
.ind__sub:dir(rtl) .cap-pill {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
/* a little air so the pill never kisses the neighbouring words */
.ind__sub {
  word-spacing: 0.1em;
}
@media (min-width: 900px) {
  .js-motion .ind-tapes {
    margin-block-start: var(--s-6);
  }
  /* on a moving tape the hashtags are simply there (no per-glyph pop) */
  .js-motion .ind-tape .ind-tag__hash[data-fx="pop"],
  .js-motion .ind-tape .ind-tag__hash[data-fx="pop"]:not(.in) {
    opacity: 0.55;
    transform: none;
    transition: none;
  }
}
/* the marquee copy exists only on a moving tape (beats .ind-tape__list's flex) */
.ind-tapes .ind-tape__dup {
  display: none;
}
@media (min-width: 900px) {
  .js-motion .ind-tapes .ind-tape__dup {
    display: flex;
  }
}
/* static (no-JS / reduced motion): the marked key word gets a little room */
html:not(.js-motion) .ind__sub .w[data-key] {
  padding-inline: 0.14em;
  border-radius: 0.14em;
}
/* the caption card fades in with its words (never an empty black box); no
   transform — the karaoke pill measures the card once, mid-transition */
.js-motion .ind__sub {
  transition: opacity var(--d-xs) linear;
}
.js-motion .ind__sub--b {
  transition-delay: 160ms;
}
.js-motion .ind__sub:not(.in) {
  opacity: 0;
}