/* Roles Section — video-reference orbital role showcase */
.roles-section {
    position: relative;
    width: 100%;
    min-height: var(--roles-height, 620px);
    height: var(--roles-height, 620px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 75% 12%, color-mix(in srgb, var(--roles-g2, #6d2cff) 80%, transparent) 0%, transparent 28%),
        radial-gradient(circle at 20% 42%, color-mix(in srgb, var(--roles-g1, #0f2b4a) 85%, transparent) 0%, transparent 42%),
        linear-gradient(135deg, var(--roles-bg, #071424), var(--roles-g3, #071424));
    color: #fff;
}

.roles-section,
.roles-section * {
    box-sizing: border-box;
}

.roles-bg-noise {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02), transparent);
    background-size: 32px 32px, 100% 100%;
    mix-blend-mode: screen;

    /* 👇 Adds a smooth fade-out towards the edges */
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

.roles-header {
    position: relative;
    z-index: 2;
    width: min(980px, calc(100% - 40px));
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
}

.roles-header span {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    font: 700 12px/1 Inter, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.roles-header h2 {
    margin: 12px 0 0;
    font: 800 clamp(28px, 4vw, 52px)/.98 Inter, Arial, sans-serif;
    /*letter-spacing: -.055em;*/
    font-family: var(--lumana-header-font);
}

.roles-header p {
    margin: 10px auto 0;
    max-width: 620px;
    font: 500 14px/1.55 Inter, Arial, sans-serif;
    color: rgba(255,255,255,.72);
}

.roles-stage {
    position: relative;
    z-index: 2;
    width: min(1000px, 100%);
    height: 100%;
    margin: 0 auto;
}

.roles-header + .roles-stage {
    height: calc(100% - 150px);
}

.roles-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.roles-orbit-avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--roles-avatar-size, 58px);
    height: var(--roles-avatar-size, 58px);
    padding: 0;
    border: 2px solid var(--roles-avatar-border, rgba(255,255,255,.62));
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,.14);
    box-shadow: 0 18px 42px rgba(0,0,0,.35);
    
    /* Hardware acceleration for ultra-smooth movement */
    will-change: transform, opacity;
    transform: translate(calc(-50% + var(--roles-x, 0px)), calc(-50% + var(--roles-y, 0px))) scale(var(--roles-scale, 1));
    opacity: var(--roles-opacity, 1);
    
    /* Tuned cubic-bezier for snappy start and soft stop */
    transition:
        transform var(--roles-duration, 760ms) cubic-bezier(0.25, 1, 0.5, 1),
        opacity var(--roles-duration, 760ms) ease,
        border-color var(--roles-duration, 760ms) ease,
        box-shadow var(--roles-duration, 760ms) ease;
        
    pointer-events: auto;
    cursor: pointer;
}

.roles-orbit-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.roles-orbit-avatar.is-active {
    width: var(--roles-active-avatar-size, 78px);
    height: var(--roles-active-avatar-size, 78px);
    border-color: #fff;
    box-shadow: 0 22px 56px rgba(0,0,0,.42), 0 0 0 8px rgba(255,255,255,.08);
    z-index: 6;
}

.roles-card {
   position: absolute;
    left: 50%;
    top: 50%;
    width: var(--roles-card-width, 250px);
    min-height: 242px;
    transform: translate(-50%, -50%);
    border-radius: var(--roles-card-radius, 18px);
    background: var(--roles-card-bg, #fff);
    color: var(--roles-text, #111827);
    box-shadow: 0 24px 72px rgba(0,0,0,.28);
    padding: 54px 18px 16px;
    text-align: center;
    overflow: visible;
    
    will-change: transform, opacity;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
    opacity: 1;
}

.roles-card.is-switching {
    transform: translate(-50%, -50%) scale(.965);
    opacity: .72;
}

.roles-card-avatar {
    position: absolute;
    left: 50%;
    top: -39px;
    width: var(--roles-active-avatar-size, 78px);
    height: var(--roles-active-avatar-size, 78px);
    transform: translateX(-50%);
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--roles-card-bg, #fff);
    background: #ddd;
    box-shadow: 0 16px 38px rgba(0,0,0,.24);
}

.roles-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .24s ease, transform .42s cubic-bezier(.22,.9,.24,1);
}

.roles-card-body h3 {
    margin: 0;
    color: var(--roles-text, #111827);
    font-family:var(--lumana-header-font);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.035em;
}

.roles-job {
    margin: 5px 0 0;
    color: var(--roles-muted, #6b7280);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 650;
}

.roles-desc {
    min-height: 48px;
    margin: 13px auto 0;
    color: var(--roles-muted, #6b7280);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 500;
}

.roles-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 15px;
}

.roles-social {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--roles-text, #111827);
    text-decoration: none;
    border: 1px solid #e5e7eb;
    font-size: 0;
    background: #fff;
}

.roles-social::before {
    content: "↗";
    font: 700 14px/1 Inter, Arial, sans-serif;
}

.roles-connect {
    flex: 1;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    color: var(--roles-btn-text, #fff);
    background: var(--roles-btn-bg, #111);
    font: 800 11px/1 Inter, Arial, sans-serif;
}

.roles-connect span {
    font-size: 13px;
}

.roles-dots {
    position: absolute;
    left: 50%;
    bottom: clamp(54px, 9vh, 84px);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 10;
}

.roles-dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--roles-dot, rgba(255,255,255,.45));
    cursor: pointer;
    transition: width .26s ease, opacity .26s ease, background .26s ease;
}

.roles-dot.is-active {
    width: 12px;
    border-radius: 99px;
    background: var(--roles-active-dot, #fff);
}

@media (max-width: 860px) {
    .roles-section {
        min-height: max(560px, var(--roles-height, 620px));
        height: max(560px, var(--roles-height, 620px));
    }

    .roles-stage {
        width: 100%;
    }

    .roles-card {
        width: min(var(--roles-card-width, 250px), 187px);
        padding: 40px 10px 3px;
        min-height: auto;
    }
    .roles-card-body h3{
        font-size: 12px ;
    }
    .roles-job{
        font-size:10px;
    }
    .roles-desc{
        font-size: 9px;
    }

    .roles-orbit-avatar {
        width: calc(var(--roles-avatar-size, 58px) * .86);
        height: calc(var(--roles-avatar-size, 58px) * .86);
    }

    .roles-orbit-avatar.is-active {
        width: calc(var(--roles-active-avatar-size, 78px) * .86);
        height: calc(var(--roles-active-avatar-size, 78px) * .86);
    }
}

@media (max-width: 560px) {
    .roles-section {
        min-height: 560px;
        height: 560px;
    }

    .roles-header {
        padding-top: 24px;
    }

    .roles-header h2 {
        font-size: 30px;
    }

    .roles-header p {
        font-size: 12px;
    }

    /*.roles-card {*/
    /*    width: 215px;*/
    /*    min-height: 232px;*/
    /*    padding-left: 14px;*/
    /*    padding-right: 14px;*/
    /*}*/

    .roles-desc {
        font-size: 10.5px;
    }

    .roles-dots {
        bottom: 46px;
    }
    
}


/* =========================================================
   Roles Section Header Enabled Navigation Fix
   When "Show title above animation" is enabled, keep the
   dotted navigation at the bottom instead of between card/avatar.
   ========================================================= */

/*.roles-header + .roles-stage {*/
/*    height: calc(100% - 170px) !important;*/
/*    padding-bottom: 54px;*/
/*}*/

/*.roles-header + .roles-stage .roles-dots {*/
/*    bottom: 20px !important;*/
/*    z-index: 20;*/
/*}*/

/* Reduce vertical orbit only when header is visible, so the bottom avatar
   stays above the dotted navigation instead of overlapping/in-between it. */
.roles-header + .roles-stage .roles-orbit-avatar {
    --roles-y-compress: .88;
}

.roles-header + .roles-stage .roles-orbit-avatar {
    transform: translate(
        calc(-50% + var(--roles-x, 0px)),
        calc(-50% + (var(--roles-y, 0px) * var(--roles-y-compress, 1)))
    ) scale(var(--roles-scale, 1)) !important;
}

@media (max-width: 860px) {
    .roles-header + .roles-stage {
        height: calc(100% - 155px) !important;
        padding-bottom: 48px;
    }

    .roles-header + .roles-stage .roles-dots {
        bottom: 16px !important;
    }

    .roles-header + .roles-stage .roles-orbit-avatar {
        --roles-y-compress: .72;
    }
}

@media (max-width: 560px) {
    .roles-header + .roles-stage {
        height: calc(100% - 164px) !important;
        padding-bottom: 44px;
    }

    .roles-header + .roles-stage .roles-dots {
        bottom: 14px !important;
    }

    .roles-header + .roles-stage .roles-orbit-avatar {
        --roles-y-compress: 1.3;
    }
}


/* =========================================================
   Roles Header Enabled Active Avatar Overlap Fix
   When the header is enabled, the active orbit avatar was
   overlapping the card avatar. The card already shows the
   active profile image, so hide only the duplicate active
   orbit avatar in header-enabled layout.
   ========================================================= */

.roles-header + .roles-stage .roles-orbit-avatar.is-active {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(
        calc(-50% + var(--roles-x, 0px)),
        calc(-50% + (var(--roles-y, 0px) * var(--roles-y-compress, 1)) - 34px)
    ) scale(.72) !important;
}

/* Keep the main card avatar cleanly above the card */
.roles-header + .roles-stage .roles-card-avatar {
    z-index: 12;
}

/* Push central card slightly lower when header is visible, so the card avatar
   gets enough breathing space below the title block. */
.roles-header + .roles-stage .roles-card {
    top: 53% !important;
}

@media (max-width: 860px) {
    .roles-header + .roles-stage .roles-card {
        top: 54% !important;
    }
}

@media (max-width: 560px) {
    .roles-header + .roles-stage .roles-card {
        top: 55% !important;
    }
}