/* =====================================================================
   13 — EXPERIENCE TIMELINE + SKILLS POLISH
   ---------------------------------------------------------------------
   Werkt bovenop bestaande regels in style.css. Geen file edits in style.css.
   Verwacht include na style.css zodat cascade voorrang geeft.

   Scope:
   - Timeline: fading guideline, hollow→filled dots met current-pulse,
     glass cards met hover translateX + right-edge glow, date pills,
     company external-link arrow, mono tag chips met dot delimiters,
     in-view fade cascade.
   - Skills: category icon-boxes per-categorie tint, glass dark chips,
     subtle hover glow, responsive auto-fit grid, optionele data-level
     mini progress dots.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   0. Tokens — scoped, geen :root pollution
   ───────────────────────────────────────────────────────────────────── */
#experience,
#skills {
    --tl-mint: var(--accent-primary, #2EF2A0);
    --tl-mint-rgb: var(--accent-rgb, 46, 242, 160);
    --tl-glass-bg: rgba(2, 8, 18, 0.42);
    --tl-glass-border: rgba(255, 255, 255, 0.06);
    --tl-glass-border-hot: rgba(var(--tl-mint-rgb), 0.42);
    --tl-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body.light-theme #experience,
body.light-theme #skills {
    --tl-glass-bg: rgba(255, 255, 255, 0.72);
    --tl-glass-border: rgba(15, 23, 42, 0.08);
    --tl-glass-border-hot: rgba(var(--accent-strong-rgb), 0.45);
}


/* ─────────────────────────────────────────────────────────────────────
   1. Timeline rail — fading vertical guideline
   ───────────────────────────────────────────────────────────────────── */
#experience .timeline {
    position: relative;
    border-left: 0;                  /* vervang harde border met gradient pseudo */
    padding-left: 2.25rem;
}

#experience .timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        rgba(var(--tl-mint-rgb), 0.85) 0%,
        rgba(var(--tl-mint-rgb), 0.35) 50%,
        rgba(var(--tl-mint-rgb), 0) 100%
    );
    border-radius: 2px;
    pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────────
   2. Dots — hollow ring base, filled mint, pulse op current
   ───────────────────────────────────────────────────────────────────── */
#experience .timeline-item::before {
    /* override van bestaande regel (style.css regel 810) */
    left: calc(-2.25rem - 5px);      /* aligned met rail */
    top: 0.45rem;
    width: 12px;
    height: 12px;
    background: var(--bg-color, #050a14);
    border: 2px solid rgba(var(--tl-mint-rgb), 0.55);
    box-shadow: none;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Verleden = solid mint fill */
#experience .timeline-item:not(:first-child)::before {
    background: var(--tl-mint);
    border-color: var(--tl-mint);
    box-shadow: 0 0 0 3px rgba(var(--tl-mint-rgb), 0.08);
}

/* Current = hollow + pulse */
#experience .timeline-item:first-child::before {
    background: var(--bg-color, #050a14);
    border-color: var(--tl-mint);
    animation: tl13-pulse 2.4s ease-in-out infinite;
}

@keyframes tl13-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(var(--tl-mint-rgb), 0.55),
            0 0 8px rgba(var(--tl-mint-rgb), 0.45);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(var(--tl-mint-rgb), 0),
            0 0 12px rgba(var(--tl-mint-rgb), 0.6);
    }
}


/* ─────────────────────────────────────────────────────────────────────
   3. Date pills — mono badge bovenop card
   ───────────────────────────────────────────────────────────────────── */
#experience .timeline-date {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(var(--tl-mint-rgb), 0.4);
    border-radius: 999px;
    background: rgba(var(--tl-mint-rgb), 0.06);
    color: var(--tl-mint);
    font-family: var(--tl-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.light-theme #experience .timeline-date {
    color: var(--accent-strong);
    border-color: rgba(var(--accent-strong-rgb), 0.3);
    background: rgba(var(--accent-strong-rgb), 0.06);
}


/* ─────────────────────────────────────────────────────────────────────
   4. Cards — glass dark, hover shift + right-edge mint glow
   ───────────────────────────────────────────────────────────────────── */
#experience .timeline-content.glow-card {
    background: var(--tl-glass-bg);
    border: 1px solid var(--tl-glass-border);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.4s ease,
        background 0.3s ease;
}

/* Right-edge mint glow on hover — overschrijft bestaande ::before (links) */
#experience .timeline-content.glow-card::before {
    content: '';
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        180deg,
        rgba(var(--tl-mint-rgb), 0),
        var(--tl-mint) 35%,
        var(--tl-mint) 65%,
        rgba(var(--tl-mint-rgb), 0)
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

#experience .timeline-content.glow-card:hover {
    transform: translateX(4px);
    border-color: var(--tl-glass-border-hot);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(var(--tl-mint-rgb), 0.10),
        -1px 0 0 0 rgba(var(--tl-mint-rgb), 0.05) inset;
}

#experience .timeline-content.glow-card:hover::before {
    opacity: 1;
}

body.light-theme #experience .timeline-content.glow-card:hover {
    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.08),
        0 0 28px rgba(var(--accent-strong-rgb), 0.08);
}


/* ─────────────────────────────────────────────────────────────────────
   5. Company — subtle external arrow ↗ (alleen op <a class="company">)
   ───────────────────────────────────────────────────────────────────── */
#experience .company {
    transition: color 0.2s ease;
}

#experience a.company {
    text-decoration: none;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

#experience a.company::after {
    content: '↗';
    font-family: var(--tl-mono);
    font-size: 0.85em;
    color: rgba(var(--tl-mint-rgb), 0.6);
    transition: transform 0.25s ease, color 0.2s ease;
}

#experience a.company:hover {
    color: var(--text-primary);
}

#experience a.company:hover::after {
    transform: translate(2px, -2px);
    color: var(--tl-mint);
}


/* ─────────────────────────────────────────────────────────────────────
   6. Card tags — mono mini-chips met dot delimiter
   ───────────────────────────────────────────────────────────────────── */
#experience .timeline-content .tags {
    gap: 0;
    margin-top: 1.25rem;
    align-items: center;
    row-gap: 0.4rem;
    flex-wrap: wrap;
}

#experience .timeline-content .tags span {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    background: transparent;
    border: 1px solid rgba(var(--tl-mint-rgb), 0.22);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: var(--tl-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

#experience .timeline-content .tags span + span {
    margin-left: 0.55rem;
    position: relative;
}

#experience .timeline-content .tags span + span::before {
    content: '·';
    position: absolute;
    left: -0.42rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(var(--tl-mint-rgb), 0.45);
    font-weight: 700;
    pointer-events: none;
}

#experience .timeline-content .tags span:hover {
    border-color: rgba(var(--tl-mint-rgb), 0.55);
    color: var(--tl-mint);
    background: rgba(var(--tl-mint-rgb), 0.06);
}


/* ─────────────────────────────────────────────────────────────────────
   7. In-view fade cascade — werkt met JS observer of staat altijd aan
   Hookable via observer die [data-in-view] op .timeline-item zet.
   ───────────────────────────────────────────────────────────────────── */
#experience .timeline-item {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

#experience .timeline-item[data-in-view],
#experience .timeline-item.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Cascade delay per index */
#experience .timeline-item:nth-child(1) { transition-delay: 0ms; }
#experience .timeline-item:nth-child(2) { transition-delay: 80ms; }
#experience .timeline-item:nth-child(3) { transition-delay: 160ms; }
#experience .timeline-item:nth-child(4) { transition-delay: 240ms; }
#experience .timeline-item:nth-child(5) { transition-delay: 320ms; }
#experience .timeline-item:nth-child(6) { transition-delay: 400ms; }

/* Failsafe: als er geen observer draait, na 800ms zichtbaar maken */
@media (prefers-reduced-motion: no-preference) {
    #experience .timeline-item {
        animation: tl13-failsafe-show 0.7s 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    #experience .timeline-item[data-in-view],
    #experience .timeline-item.in-view {
        animation: none;
    }
}

@keyframes tl13-failsafe-show {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduced motion: geen cascade, gewoon tonen */
@media (prefers-reduced-motion: reduce) {
    #experience .timeline-item {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
    #experience .timeline-item:first-child::before {
        animation: none;
    }
}


/* =====================================================================
   SKILLS
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   8. Grid — auto-fit responsive, 240px min
   ───────────────────────────────────────────────────────────────────── */
#skills .skills-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 1fr;
    align-items: stretch !important;
    gap: 1.25rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#skills .skill-category {
    height: 100% !important;
}

#skills .skill-category,
#skills .skill-category:nth-child(4),
#skills .skill-category:nth-child(5) {
    grid-column: auto !important;
    height: auto;
    max-width: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1024px) {
    #skills .skills-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    #skills .skills-container {
        grid-template-columns: 1fr !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   9. Category cards — glass + per-category accent
   ───────────────────────────────────────────────────────────────────── */
#skills .skill-category {
    background: var(--tl-glass-bg);
    border: 1px solid var(--tl-glass-border);
    border-radius: 12px;
    padding: 1.4rem 1.4rem 1.5rem;
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    backdrop-filter: blur(6px) saturate(1.05);
    position: relative;
    transition:
        border-color 0.3s ease,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s ease;
}

#skills .skill-category:hover {
    transform: translateY(-3px);
    border-color: var(--tl-glass-border-hot);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.25),
        0 0 28px rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.10);
}

/* Per-category tints — gebruik volgorde uit index.html */
#skills .skill-category:nth-child(1) { --cat-rgb: 46, 242, 160; }   /* Agentic — mint */
#skills .skill-category:nth-child(2) { --cat-rgb: 130, 180, 255; }  /* AI Eng — soft blue */
#skills .skill-category:nth-child(3) { --cat-rgb: 255, 184, 108; }  /* Dev — amber */
#skills .skill-category:nth-child(4) { --cat-rgb: 188, 140, 255; }  /* Cloud — violet */
#skills .skill-category:nth-child(5) { --cat-rgb: 255, 138, 196; }  /* Tools — pink */
#skills .skill-category:nth-child(6) { --cat-rgb: 120, 220, 220; }  /* spare — teal */


/* ─────────────────────────────────────────────────────────────────────
   10. Section header — icon-box per category, getint
   ───────────────────────────────────────────────────────────────────── */
#skills .skill-category h3 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin-bottom: 1.1rem;
    color: var(--text-primary);
}

#skills .skill-category h3 i {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    padding: 7px;
    box-sizing: content-box;
    background: rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.12);
    border: 1px solid rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.25);
    border-radius: 8px;
    color: rgb(var(--cat-rgb, var(--tl-mint-rgb)));
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

#skills .skill-category:hover h3 i {
    background: rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.2);
    border-color: rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.45);
    box-shadow: 0 0 20px rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.3);
    transform: scale(1.05);
}


/* ─────────────────────────────────────────────────────────────────────
   11. Chips — dark glass, mono, hover scale + glow
   ───────────────────────────────────────────────────────────────────── */
#skills .skill-tags {
    gap: 0.45rem;
}

#skills .skill-tags span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: auto;
    padding: 0.4rem 0.85rem;
    background: rgba(2, 8, 18, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--tl-mono);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.005em;
    cursor: default;
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s ease,
        color 0.2s ease;
}

body.light-theme #skills .skill-tags span {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.1);
    color: var(--text-primary);
}

#skills .skill-tags span:hover {
    border-color: rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.6);
    background: rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.08);
    color: rgb(var(--cat-rgb, var(--tl-mint-rgb)));
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(var(--cat-rgb, var(--tl-mint-rgb)), 0.2);
}


/* ─────────────────────────────────────────────────────────────────────
   12. Optionele data-level — mini progress dots (1-3)
   Usage in HTML: <span data-level="3">RAG Pipelines</span>
   ───────────────────────────────────────────────────────────────────── */
#skills .skill-tags span[data-level]::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 4px;
    margin-left: 0.25rem;
    background-repeat: no-repeat;
    background-size: 4px 4px;
    background-position: 0 center, 7px center, 14px center;
}

#skills .skill-tags span[data-level="1"]::after {
    background-image:
        radial-gradient(circle, rgb(var(--cat-rgb, var(--tl-mint-rgb))) 50%, transparent 51%),
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 50%, transparent 51%),
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 50%, transparent 51%);
}

#skills .skill-tags span[data-level="2"]::after {
    background-image:
        radial-gradient(circle, rgb(var(--cat-rgb, var(--tl-mint-rgb))) 50%, transparent 51%),
        radial-gradient(circle, rgb(var(--cat-rgb, var(--tl-mint-rgb))) 50%, transparent 51%),
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 50%, transparent 51%);
}

#skills .skill-tags span[data-level="3"]::after {
    background-image:
        radial-gradient(circle, rgb(var(--cat-rgb, var(--tl-mint-rgb))) 50%, transparent 51%),
        radial-gradient(circle, rgb(var(--cat-rgb, var(--tl-mint-rgb))) 50%, transparent 51%),
        radial-gradient(circle, rgb(var(--cat-rgb, var(--tl-mint-rgb))) 50%, transparent 51%);
}


/* ─────────────────────────────────────────────────────────────────────
   13. Mobile — minder shift, dot blijft zichtbaar
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    #experience .timeline {
        padding-left: 1.5rem;
    }
    #experience .timeline-item::before {
        left: calc(-1.5rem - 4px);
        width: 10px;
        height: 10px;
    }
    #experience .timeline-content.glow-card {
        padding: 1.2rem 1.25rem;
    }
    #experience .timeline-content.glow-card:hover {
        transform: none;
    }
    #skills .skills-container {
        grid-template-columns: 1fr;
    }
}