/* --- css/sections.css --- */
.section-title { font-size: 2rem; border-bottom: 2px solid var(--accent); display: inline-block; margin-bottom: 40px; padding-bottom: 5px; }

/* SKILLS */
.skills-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.skill-category { 
    flex: 1; min-width: 280px; background: var(--bg-card); 
    padding: 25px; border-radius: 12px; border-top: 3px solid var(--accent); 
    opacity: 0; transform: translateY(30px); /* Voor animatie */
}
.skill-category h3 { margin-top: 0; margin-bottom: 20px; color: white; border-bottom: 1px solid #333; padding-bottom: 10px; }

.circles-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.skill-item { width: 90px; text-align: center; }
.chart { width: 85px; height: 85px; position: relative; margin: 0 auto 10px; }
svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bg { stroke: #333; stroke-width: 8; fill: none; }
.progress { 
    stroke: var(--accent); stroke-width: 8; fill: none; 
    stroke-dasharray: 251; stroke-dashoffset: 251; /* Start leeg */
    stroke-linecap: round; 
    /* Transitie zit in animations.css */
}
.icon-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--accent); font-weight: bold; font-size: 13px; }
.skill-name { font-size: 0.8rem; color: #ccc; }

/* TIJDLIJN */
.timeline-item { 
    position: relative; padding-left: 35px; margin-bottom: 40px; border-left: 2px solid #333; 
    opacity: 0; transform: translateY(30px); /* Voor animatie */
}
.timeline-dot { position: absolute; left: -7px; top: 0; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; }
.timeline-date { color: var(--accent); font-weight: bold; font-size: 0.9rem; display: block; margin-bottom: 5px; }
.timeline-role { font-size: 1.2rem; margin: 0 0 5px 0; color: white; }
.timeline-company { font-style: italic; color: var(--text-muted); margin-bottom: 10px; }
.timeline-desc { font-size: 0.95rem; color: #bbb; margin: 0; line-height: 1.6; }