/* Allkin — custom animation & interaction styles.
   Kept separate so re-exporting the Figma CSS (ms.css etc.) does not wipe them. */

/* ---- button rollover: blue fill sweeps across on hover, white text (doc p1) ---- */
.ms-btnwrap { cursor: pointer; }
.ms-btnwrap > a { overflow: hidden; }
.ms-btnwrap > a::before {
  content: ""; position: absolute; inset: 0; background: #1a5edb;
  border-radius: inherit; transform: scaleX(0); transform-origin: left center;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}
.ms-btnwrap:hover > a::before { transform: scaleX(1); }
.ms-btnwrap > p { transition: color .25s ease; }
.ms-btnwrap:hover > p { color: #fff; }

/* Donate / Volunteer / Collaborate sit on a blue section, so the default #1a5edb
   rollover blends into the background. Use a darker blue so it stands out. (doc: NEW) */
.ms-bw-c1 > a::before, .ms-bw-c2 > a::before, .ms-bw-c3 > a::before { background: #0a2a72; }

/* ---- Discover: service rollover (doc p1: hover shows image, click enters page) ---- */
.s-discover .ms-svcrow { cursor: pointer; }
.s-discover .ms-svcrow > a { transition: transform .18s ease; }
.s-discover .ms-svcrow:hover > a,
.s-discover .ms-svcrow.is-active > a { transform: translateX(0.3rem); }  /* було 0.4rem: зі стрілкою найдовша назва підходила до картки впритул */
.s-discover .ms-svcrow > div { transition: filter .18s ease; }
.s-discover .ms-svcrow:hover > div,
.s-discover .ms-svcrow.is-active > div { filter: brightness(1.12); }

/* Клієнт: «не очевидно, що назви треба наводити й клікати». Сигнал має бути видно ДО
   наведення, тож біля кожної назви стоїть стрілка «перейти» — та сама, що в «Read more»
   на картках історій, але білим кольором тексту (маска з SVG, колір = currentColor).
   На десктопі стрілка 0.75em і без власного від'їзду: у трьох найдовших назвах праворуч
   починається фото-картка, і більша/рухома стрілка заходила під неї. Рух при наведенні
   тут і так дає зсув усього тексту разом зі стрілкою. */
.s-discover .ms-svcrow > a::after {
  content: ""; display: inline-block; flex: none;
  width: 0.75em; height: 0.75em; margin-left: 0.25em; vertical-align: 0;
  background: currentColor;
  -webkit-mask: url(../arrow-right.svg) no-repeat center / contain;
          mask: url(../arrow-right.svg) no-repeat center / contain;
}
.s-discover .ms-svcrow > a:focus-visible { outline: 0.125rem solid #fff; outline-offset: 0.3rem; border-radius: 0.2rem; }

/* Телефон і планшет: наведення немає, тож стрілка стоїть біля правого краю смуги, а
   посилання розтягнуте на весь рядок — тапати можна будь-де, не лише по тексту. */
@media (max-width: 1199.98px) {
  .s-discover .ms-svcrow > a {
    flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  }
  .s-discover .ms-svcrow > a::after { width: 1em; height: 1em; margin-left: 0; }
  .s-discover .ms-svcrow:active > div { filter: brightness(1.12); }
}

/* Discover preview slides vertically to line up with the hovered service */
.ms-photo-card { transition: transform .35s cubic-bezier(.4, 0, .2, 1); will-change: transform; }

/* keep the Discover preview above the following section (was being clipped) */
.s-discover { z-index: 3; }
.ms-photo-card { z-index: 2; }

/* ---- Report lanterns (doc p14): float + glow pulse ----
   The original glow was 3 dark->teal color-dodge layers that only read as a glow when
   blended against the page — impossible to move smoothly (transform isolates the blend
   into a dark disc; top/left stutters). So each lantern is now baked into a single
   transparent PNG (ms-firefly-*.png, glow composited over the report navy). With no
   blend mode it can be transform-animated freely — smooth drift + pulse in anim.js. */
.ms-bk { will-change: transform; }