*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.roles-section{

    width:100%;
    height:100vh;

    position:relative;

    overflow:hidden;

    background:#050816;
}

/* ===========================
   BACKGROUND IMAGE
=========================== */

.role-background{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;
}

#roleBgImage{

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:.85;

    transition:1s;

    animation:
    bgZoom 15s ease-in-out infinite;
}

@keyframes bgZoom{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}

/* Dark Overlay */

.role-background::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to right,
    rgba(5,8,22,.95) 0%,
    rgba(5,8,22,.7) 35%,
    rgba(5,8,22,.45) 100%
    );

    z-index:1;
}

/* ===========================
   CONTENT
=========================== */

.role-content{

    width:90%;
    height:100%;

    margin:auto;

    display:flex;

    align-items:center;
    justify-content:space-between;

    position:relative;

    z-index:5;
}

/* ===========================
   TEXT
=========================== */

.role-text{

    width:45%;
}

.role-text span{

    color:#8dbfff;

    letter-spacing:5px;

    font-size:14px;

    text-transform:uppercase;
}

#roleName{

    font-size:8rem;

    color:white;

    margin-top:15px;

    text-transform:uppercase;

    transition:.6s;

    font-family:"Black Ops One",system-ui;
}

.line{

    width:120px;
    height:5px;

    border-radius:30px;

    margin:25px 0;

    background:#ff2e2e;
}

#roleDesc{

    max-width:550px;

    color:#d7d7d7;

    font-size:18px;

    line-height:1.9;

    font-family:"Chelsea Market",system-ui;
}

/* ===========================
   BUTTON
=========================== */

.role-btn{

    margin-top:35px;

    padding:15px 40px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    transition:.4s;

    background:white;

    color:#050816;
}

.role-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 20px white;
}

/* ===========================
   CHARACTER SIDE
=========================== */

.role-image-container{

    width:50%;
    height:100%;

    display:flex;

    justify-content:center;
    align-items:center;

    position:relative;
}

/* Glow */

.glow{

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.7;

    z-index:1;

    animation:
    pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }
}

/* Ring */

.energy-ring{

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    border:2px solid
    rgba(255,255,255,.08);

    z-index:2;

    animation:
    rotateRing 25s linear infinite;
}

.energy-ring::before{

    content:"";

    position:absolute;

    inset:20px;

    border-radius:50%;

    border:1px dashed
    rgba(255,255,255,.08);
}

@keyframes rotateRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* Character */

#roleImage{

    height:88%;

    position:relative;

    z-index:3;

    transition:.8s;

    filter:
    drop-shadow(0 0 30px rgba(255,255,255,.2));

    animation:
    floatCharacter 5s ease-in-out infinite;
}

@keyframes floatCharacter{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0);
    }
}

/* ===========================
   FADE EFFECT
=========================== */

.fade-out{

    opacity:0;

    transform:scale(.9);

    filter:blur(10px);
}

.fade-in{

    opacity:1;

    transform:scale(1);

    filter:blur(0);
}

/* ===========================
   DOTS
=========================== */

.role-dots{

    position:absolute;

    right:60px;
    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:18px;

    z-index:50;
}

.dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#555;

    cursor:pointer;

    transition:.4s;
}

.dot:hover{

    transform:scale(1.3);
}

.dot.active{

    background:white;

    transform:scale(1.5);

    box-shadow:
    0 0 20px white,
    0 0 40px white;
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1000px){

    .role-content{

        flex-direction:column;

        justify-content:center;

        text-align:center;
    }

    .role-text{

        width:100%;
    }

    .role-image-container{

        width:100%;
        height:55%;
    }

    #roleName{

        font-size:4rem;
    }

    #roleImage{

        height:70%;
    }

    .energy-ring{

        width:350px;
        height:350px;
    }

    .glow{

        width:300px;
        height:300px;
    }

    .role-dots{

        right:20px;
    }
}