/* ============================================================
   EXANTE — Geanimeerde iconen v1.0
   CSS-only: geen JavaScript, geen SMIL
   ============================================================ */

/* ── Icoonkaart ── */
.icon-card {
  background: #ffffff;
  border: 1px solid rgba(26, 43, 74, 0.08);
  padding: 2.75rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  cursor: pointer;
  transition: background 0.4s ease, transform 0.25s ease, box-shadow 0.4s ease;
  box-shadow: 0 2px 16px rgba(26, 43, 74, 0.07);
  position: relative;
  border-radius: 0;
}

.icon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: #C9A84C;
  transition: height 0.35s ease;
}

.icon-card:hover::before { height: 100%; }

.icon-card:hover {
  background: #1A2B4A;
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(26, 43, 74, 0.24);
}

.icon-card svg {
  width: 80px;
  height: 80px;
  overflow: visible;
}

.icon-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: #1A2B4A;
  transition: color 0.4s ease;
  text-align: center;
}

.icon-card:hover .icon-label { color: #F4F5F7; }

/* ── SVG kleurklassen ── */
.im { fill: #1A2B4A; transition: fill 0.4s ease; }
.is { fill: #2A3F6B; transition: fill 0.4s ease; }
.ip { fill: #F4F5F7; transition: fill 0.4s ease; }
.ia { fill: #C9A84C; } /* goud — inverteert nooit */

/* ── Kleurwissel op hover ── */
.icon-card:hover .im { fill: #F4F5F7; }
.icon-card:hover .is { fill: #8C97A8; }
.icon-card:hover .ip { fill: #2A3F6B; }

/* ── Verkeerslicht — Nederlandse cyclus (altijd actief) ── */
@keyframes licht-rood {
  0%,  36%  { opacity: 1;   }
  37%, 43%  { opacity: 1;   }
  44%, 88%  { opacity: 0.1; }
  89%, 100% { opacity: 1;   }
}
@keyframes licht-oranje {
  0%,  36%  { opacity: 0.1; }
  37%, 43%  { opacity: 1;   }
  44%, 78%  { opacity: 0.1; }
  79%, 88%  { opacity: 1;   }
  89%, 100% { opacity: 0.1; }
}
@keyframes licht-groen {
  0%,  43%  { opacity: 0.1; }
  44%, 78%  { opacity: 1;   }
  79%, 100% { opacity: 0.1; }
}

.l-rood   { fill: #C9A84C; animation: licht-rood   6s infinite ease-in-out; }
.l-oranje { fill: #C9A84C; animation: licht-oranje 6s infinite ease-in-out; }
.l-groen  { fill: #C9A84C; animation: licht-groen  6s infinite ease-in-out; }

/* ── Rotonde — pijl roteert bij hover ── */
.rotonde-pijl { transform-origin: 12px 12px; }

.icon-card:hover .rotonde-pijl {
  animation: roteer 2.5s linear infinite;
}

@keyframes roteer {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Zebrapad — strepen verschijnen sequentieel bij hover ── */
.icon-card:hover .s1 { animation: streep-op 0.5s ease 0.00s both; }
.icon-card:hover .s2 { animation: streep-op 0.5s ease 0.13s both; }
.icon-card:hover .s3 { animation: streep-op 0.5s ease 0.26s both; }

@keyframes streep-op {
  from { opacity: 0.15; transform: scaleY(0.85); transform-origin: center bottom; }
  to   { opacity: 1;    transform: scaleY(1); }
}

/* ── Kruispunt — gouden kern pulseert bij hover ── */
.icon-card:hover .kern {
  animation: kern-puls 1.1s ease-in-out infinite;
  transform-origin: 12px 12px;
}

@keyframes kern-puls {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(1.55); opacity: 0.75; }
}

/* ── Juridisch-verkeerskundig — tekstregels schrijven bij hover ── */
.icon-card:hover .doc-line1 { animation: doc-schrijf 0.35s ease-out 0.04s both; }
.icon-card:hover .doc-line2 { animation: doc-schrijf 0.35s ease-out 0.14s both; }
.icon-card:hover .doc-line3 { animation: doc-schrijf 0.35s ease-out 0.24s both; }
.icon-card:hover .doc-line4 { animation: doc-schrijf 0.35s ease-out 0.34s both; }

@keyframes doc-schrijf {
  from { opacity: 0.15; transform: translateX(-4px); }
  to   { opacity: 1;    transform: translateX(0); }
}

/* ── Visualisatie & detachering — bars groeien bij hover ── */
/* transform-origin per bar: center-x van de bar, y=21 (onderkant grafiek) */
.icon-card:hover .viz-b1 { animation: bar-op 0.4s ease-out 0.00s both; transform-origin: 7.5px 21px; }
.icon-card:hover .viz-b2 { animation: bar-op 0.4s ease-out 0.10s both; transform-origin: 13px  21px; }
.icon-card:hover .viz-b3 { animation: bar-op 0.4s ease-out 0.20s both; transform-origin: 18.5px 21px; }

@keyframes bar-op {
  from { transform: scaleY(0.12); opacity: 0.3; }
  to   { transform: scaleY(1);    opacity: 1; }
}

/* ── Icoon grid ── */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}