/* FAAM Beweging: de Google- en AI-check (FAAM Briefing) in beweging. Gebruikt de kleuren van de check zelf (--c-*),
   met de kleuren van faam.be als terugval. Alles hier hangt aan klassen die check.js tijdelijk zet en weer weghaalt. */

/* ---------- Tijdens het meten ---------- */
.faam-gac .fbw-ck-laden {
  display: block;
  margin-top: 14px;
  font-weight: 500;
  animation: fbw-ck-in .45s .3s both;
}
@keyframes fbw-ck-in { from { opacity: 0; } to { opacity: 1; } }

/* Een dunne balk die loopt: er gebeurt iets, zonder te doen alsof we weten hoe ver. */
.faam-gac .fbw-ck-balk {
  display: block; position: relative; overflow: hidden;
  height: 2px; border-radius: 2px;
  background: rgba(34, 51, 42, .12);
}
.faam-gac .fbw-ck-balk > span {
  position: absolute; top: 0; left: 0;
  width: 28%; height: 100%; border-radius: 2px;
  background: var(--c-donker, #2E5B4C);
  animation: fbw-ck-loop 1.9s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes fbw-ck-loop { from { transform: translateX(-100%); } to { transform: translateX(360%); } }

/* De vijf onderdelen: één voor één licht er een op, in een lus (5 x 1,5 s). */
.faam-gac .fbw-ck-namen {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  margin-top: 14px;
}
.faam-gac .fbw-ck-naam {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .875rem; line-height: 1.35;
  color: var(--c-zacht, #5E5B52);
  animation: fbw-ck-licht 7.5s infinite;
}
.faam-gac .fbw-ck-naam::before {
  content: ""; flex: none;
  width: 8px; height: 8px; margin-top: .38em; border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: fbw-ck-stip 7.5s infinite;
  animation-delay: inherit;
}
.faam-gac .fbw-ck-naam:nth-child(2) { animation-delay: 1.5s; }
.faam-gac .fbw-ck-naam:nth-child(3) { animation-delay: 3s; }
.faam-gac .fbw-ck-naam:nth-child(4) { animation-delay: 4.5s; }
.faam-gac .fbw-ck-naam:nth-child(5) { animation-delay: 6s; }
@keyframes fbw-ck-licht {
  0%, 24%, 100% { color: var(--c-zacht, #5E5B52); }
  4%, 19% { color: var(--c-diep, #1F3F35); }
}
@keyframes fbw-ck-stip {
  0%, 24%, 100% { background: transparent; box-shadow: 0 0 0 0 rgba(79, 107, 91, 0); }
  4%, 19% { background: var(--c-donker, #2E5B4C); box-shadow: 0 0 0 3px rgba(79, 107, 91, .18); }
}
@media (max-width: 600px) {
  .faam-gac .fbw-ck-namen { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Het resultaat ---------- */
/* De kaartjes: het witte vak staat er al, de inhoud schuift erin. */
.faam-gac .fbw-ck-raster .fc-blok > * {
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.faam-gac .fbw-ck-raster .fc-blok.fbw-ck-wacht > * { opacity: 0; transform: translateY(8px); }

/* De meter start op nul en loopt naar zijn echte breedte. De breedte in de markup blijft ongemoeid: enkel een schaal. */
.faam-gac .fbw-ck-raster .fc-meter span { transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.faam-gac .fbw-ck-raster .fc-blok.fbw-ck-nul .fc-meter span { transform: scaleX(0); }

/* De telling: de echte tekst blijft (voor schermlezers), een kopie telt erbovenop mee. */
.faam-gac .fbw-ck-raster .fc-niveau.fbw-ck-tel { position: relative; color: transparent; }
.faam-gac .fbw-ck-teller {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--c-zacht, #5E5B52);
}

/* "Hier begin je" en de okeren rand komen als laatste. */
.faam-gac .fbw-ck-raster .fc-blok.is-zwakst { transition: outline-color .5s ease; }
.faam-gac .fbw-ck-raster .fc-blok.is-zwakst.fbw-ck-stil { outline-color: transparent; }
.faam-gac .fbw-ck-raster .fc-blok.fbw-ck-stil > em { opacity: 0; transform: translateY(4px); }
.faam-gac .fc-blok.fbw-ck-boven { position: relative; z-index: 1; }

/* De werkpunten van een deel verschijnen na elkaar zodra het deel in beeld komt. */
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li {
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.faam-gac .gac-deel.fbw-ck-wacht > .gac-lijst > li { opacity: 0; transform: translateY(8px); }
.faam-gac .gac-deel.fbw-ck-wacht:focus-within > .gac-lijst > li { opacity: 1; transform: none; }
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li:nth-child(2) { transition-delay: 70ms; }
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li:nth-child(3) { transition-delay: 140ms; }
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li:nth-child(4) { transition-delay: 210ms; }
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li:nth-child(5) { transition-delay: 280ms; }
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li:nth-child(6) { transition-delay: 350ms; }
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li:nth-child(7) { transition-delay: 420ms; }
.faam-gac .gac-deel.fbw-ck-deel > .gac-lijst > li:nth-child(n+8) { transition-delay: 490ms; }

/* Minder beweging of afdrukken (Bewaar als pdf): alles meteen zichtbaar, geen lus. */
@media (prefers-reduced-motion: reduce) {
  .faam-gac .fbw-ck-laden { display: none; }
  .faam-gac .fbw-ck-raster .fc-blok > *, .faam-gac .gac-deel.fbw-ck-wacht > .gac-lijst > li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .faam-gac .fbw-ck-raster .fc-blok.fbw-ck-nul .fc-meter span { transform: none !important; }
}
@media print {
  .faam-gac .fbw-ck-laden { display: none; }
  .faam-gac .fbw-ck-raster .fc-blok > *, .faam-gac .gac-deel.fbw-ck-wacht > .gac-lijst > li { opacity: 1 !important; transform: none !important; }
  .faam-gac .fbw-ck-raster .fc-niveau.fbw-ck-tel { color: inherit; }
  .faam-gac .fbw-ck-teller { display: none; }
  .faam-gac .fbw-ck-raster .fc-blok.fbw-ck-nul .fc-meter span { transform: none !important; }
  .faam-gac .fbw-ck-raster .fc-blok.is-zwakst.fbw-ck-stil { outline-color: var(--c-oker, #D9A55A) !important; }
}