/* Skill Matrix for Elementor — Frontend Styles v1.1 */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap');

.sme-section {
    background: #0a0a0a;
    padding: 60px 40px;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
}

/* ── Track ── */
.sme-track {
    overflow: hidden;
    position: relative;
}

/* ── Inner flex row (manual / autoplay) ── */
.sme-inner {
    display: flex;
    gap: 12px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    align-items: flex-start;
}

/* ════════════════════════════════
   MARQUEE MODE
════════════════════════════════ */
.sme-marquee-track {
    overflow: hidden;
}

.sme-marquee-inner {
    display: flex;
    width: max-content;
    animation-name: sme-marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 20s;  /* overridden per-widget via inline <style> */
    animation-direction: normal;
}

/* Each duplicated set sits side-by-side */
.sme-marquee-inner .sme-inner {
    flex-shrink: 0;
    transition: none; /* no translate transition in marquee */
}

/* Pause on hover — JS adds/removes this class */
.sme-marquee-inner.sme-paused {
    animation-play-state: paused;
}

@keyframes sme-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ════════════════════════════════
   CARDS
════════════════════════════════ */
.sme-card {
    flex: 0 0 180px;
    background: #111111;
    border: 1px solid #222222;
    border-radius: 6px;
    padding: 28px 24px;
    cursor: default;
    transition:
        flex          0.45s cubic-bezier(0.4, 0, 0.2, 1),
        border-color  0.3s  ease,
        background    0.3s  ease;
    position: relative;
    overflow: hidden;
    min-height: 160px;
    box-sizing: border-box;
}

/* bottom accent line */
.sme-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: #00e5cc;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sme-card:hover::before,
.sme-card.sme-active::before { transform: scaleX(1); }

/* ── Card text ── */
.sme-card-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 6px;
    word-break: break-word;
}

.sme-card-sub {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #555555;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* ── Progress number ── */
.sme-progress-num {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0;
    transition: opacity 0.3s ease 0.15s;
}
.sme-card:hover .sme-progress-num,
.sme-card.sme-active .sme-progress-num { opacity: 1; }

/* ── Progress track ── */
.sme-progress-track {
    height: 2px;
    background: #1e1e1e;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* ── Progress fill — INACTIVE state (collapsed, not hovered) ── */
.sme-progress-fill {
    height: 100%;
    background: #333333;            /* inactive color — overridden per-widget */
    border-radius: 2px;
    width: 0%;
    transition: width 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
                background 0.3s ease;
}

/* Inactive cards still show a subtle partial fill at their set % */
.sme-card .sme-progress-fill {
    width: var(--sme-progress, 80%);
}

/* ── Progress fill — ACTIVE/HOVER state ── */
/* Color switch to accent is handled by per-widget inline <style> */
.sme-card:hover .sme-progress-fill,
.sme-card.sme-active .sme-progress-fill {
    width: var(--sme-progress, 80%);
}

/* ── Detail bullets ── */
.sme-details {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease 0.12s, max-height 0.4s ease 0.05s;
}
.sme-card:hover .sme-details,
.sme-card.sme-active .sme-details { opacity: 1; max-height: 300px; }

.sme-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888888;
    margin-bottom: 7px;
    font-weight: 400;
}
.sme-detail-item::before {
    content: '\2014';
    font-size: 10px;
    flex-shrink: 0;
}

/* ── Navigation ── */
.sme-nav {
    display: flex;
    gap: 10px;
    margin-top: 32px;
    justify-content: flex-end;
}

.sme-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #333333;
    background: transparent;
    color: #888888;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}
.sme-nav-btn:hover { border-color: #00e5cc; color: #00e5cc; }

@media (max-width: 768px) {
    .sme-section { padding: 40px 20px; }
}