/* MIS → Wonde → BoomReader animation (homepage Wonde section).
   Staff, pupils and classes travel from the school's MIS, through Wonde, into BoomReader,
   where the accounts tick in. It loops while on screen (mis-flow.js adds .is-playing).
   Without it, or with reduced motion, the finished state shows. */
.mf { position: relative; width: 100%; max-width: 420px; margin: 0 auto; padding: 22px 22px 18px; border-radius: 26px; background: #fff; box-shadow: 0 24px 50px rgba(33, 39, 113, 0.14); font-family: "Red Hat Display", "Segoe UI", Arial, sans-serif; color: #2f3437; }
.mf-node { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid #e6e8ee; border-radius: 18px; background: #fff; }
.mf-node b { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.2; }
.mf-node small { display: block; margin-top: 2px; color: #6b7178; font-size: 0.84rem; line-height: 1.35; }
.mf-icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #eef0f6; color: #212771; }
.mf-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mf-node--wonde { border-color: #212771; background: #212771; color: #fff; }
.mf-node--wonde img { display: block; flex: none; width: 104px; height: auto; }
.mf-node--wonde small { color: rgba(255, 255, 255, 0.82); }

.mf-node--br { flex-direction: column; align-items: stretch; gap: 10px; border-color: transparent; background: linear-gradient(160deg, #bf3765 0%, #7a2c63 55%, #212771 100%); }
.mf-node--br img { display: block; width: 128px; height: auto; }
.mf-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mf-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #fff; font-size: 0.9rem; font-weight: 700; }
.mf-list li::before { content: "✓"; display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #667f1c; color: #fff; font-size: 0.8rem; }
.mf-list span { margin-left: auto; color: #6b7178; font-weight: 600; font-variant-numeric: tabular-nums; }

/* the pipes between the boxes, with the data travelling down them */
.mf-pipe { position: relative; height: 62px; margin: 0 auto; }
.mf-pipe::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 3px dashed #c9cde0; transform: translateX(-50%); }
.mf-chip { position: absolute; top: 50%; left: 50%; padding: 4px 10px; border-radius: 999px; background: #bf3765; color: #fff; font-size: 0.74rem; font-weight: 800; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); }
.mf-chip:nth-child(2) { background: #212771; }
.mf-chip:nth-child(3) { background: #667f1c; }

.mf-sync, #br-page .mf-sync { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; color: #6b7178; font-size: 0.84rem; font-weight: 700; }
.mf-sync svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the animation: a 10 second loop ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mf.is-playing .mf-chip { animation: mf-travel 10s linear infinite both; }
  .mf.is-playing .mf-pipe--1 .mf-chip:nth-child(1) { --lane: -58px; animation-delay: 0.6s; }
  .mf.is-playing .mf-pipe--1 .mf-chip:nth-child(2) { --lane: 0px;   animation-delay: 0.9s; }
  .mf.is-playing .mf-pipe--1 .mf-chip:nth-child(3) { --lane: 58px;  animation-delay: 1.2s; }
  .mf.is-playing .mf-pipe--2 .mf-chip:nth-child(1) { --lane: -58px; animation-delay: 3.2s; }
  .mf.is-playing .mf-pipe--2 .mf-chip:nth-child(2) { --lane: 0px;   animation-delay: 3.5s; }
  .mf.is-playing .mf-pipe--2 .mf-chip:nth-child(3) { --lane: 58px;  animation-delay: 3.8s; }
  .mf.is-playing .mf-node--mis { animation: mf-glow-mis 10s ease-in-out infinite; }
  .mf.is-playing .mf-node--wonde { animation: mf-glow-wonde 10s ease-in-out infinite; }
  .mf.is-playing .mf-node--br { animation: mf-glow-br 10s ease-in-out infinite; }
  .mf.is-playing .mf-list li { animation: mf-pop 10s ease-out infinite both; }
  .mf.is-playing .mf-list li:nth-child(1) { animation-delay: 5.4s; }
  .mf.is-playing .mf-list li:nth-child(2) { animation-delay: 5.8s; }
  .mf.is-playing .mf-list li:nth-child(3) { animation-delay: 6.2s; }
  .mf.is-playing .mf-sync svg { animation: mf-spin 10s ease-in-out infinite; }
}

/* a chip drops down its pipe, in its own lane */
@keyframes mf-travel {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--lane, 0px)), -170%); }
  3%   { opacity: 1; }
  17%  { opacity: 1; }
  20%  { opacity: 0; transform: translate(calc(-50% + var(--lane, 0px)), 70%); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--lane, 0px)), 70%); }
}
@keyframes mf-glow-mis   { 0%, 14%, 100% { box-shadow: none; } 4%, 8% { box-shadow: 0 0 0 5px rgba(33, 39, 113, 0.12); } }
@keyframes mf-glow-wonde { 0%, 22%, 40%, 100% { box-shadow: none; transform: none; } 28%, 34% { box-shadow: 0 0 0 6px rgba(33, 39, 113, 0.22); transform: scale(1.02); } }
@keyframes mf-glow-br    { 0%, 48%, 66%, 100% { box-shadow: none; } 54%, 60% { box-shadow: 0 0 0 6px rgba(191, 55, 101, 0.16); } }
@keyframes mf-pop {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: none; }
  88%  { opacity: 1; transform: none; }
  94%  { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes mf-spin { 0%, 70% { transform: rotate(0); } 80%, 100% { transform: rotate(360deg); } }

@media (max-width: 420px) {
  .mf { padding: 16px 14px 14px; }
  .mf-node { gap: 10px; padding: 12px; }
  .mf-node--wonde img { width: 86px; }
}