/* ==========================================
   SPECIALTIES WHEEL
========================================== */

.specialities{

    padding:120px 0;
    background:#0b0f15;

}

.wheel-info{

    text-align:center;
    max-width:700px;
    margin:0 auto 90px;

}

.section-label{

    display:inline-block;
    color:#3aa8ff;
    letter-spacing:4px;
    font-size:13px;
    font-weight:700;
    margin-bottom:15px;

}

#wheel-title{

    font-size:54px;
    margin-bottom:20px;
    transition:.35s ease;

}

#wheel-description{

    color:#b8c3cf;
    font-size:18px;
    line-height:1.8;
    transition:.35s ease;

}

/* ==========================================
   WHEEL WRAPPER
========================================== */

.wheel-wrapper{

    position:relative;
    width:540px;
    height:540px;
    margin:40px auto auto;

    --wheel-radius:200px;

}

/* Arrow */

.wheel-arrow{

    position:absolute;
    top:-28px;
    left:50%;

    width:0;
    height:0;

    transform:translateX(-50%);

    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-top:26px solid #3aa8ff;

    filter:drop-shadow(0 0 12px rgba(58,168,255,.7));

    z-index:100;

}

/* ==========================================
   ROTATING WHEEL
========================================== */

.career-wheel{

    position:absolute;

    inset:0;

    z-index:30;

    border-radius:50%;

    transition:
        transform .8s cubic-bezier(.25,1,.35,1);

}

/* ==========================================
   SEGMENTS
========================================== */

.wheel-segment{

    position:absolute;

    width:190px;
    height:120px;

    left:50%;
    top:50%;
    margin:0;

    border:none;

    cursor:pointer;

    background:linear-gradient(
        180deg,
        #232b36,
        #171c24
    );

    color:white;

    border-radius:18px;

    font-weight:700;

    font-size:18px;

    letter-spacing:.5px;

    --angle:0deg;

    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(calc(var(--wheel-radius) * -1));

    transform-origin:center center;

    transition:
        transform .8s cubic-bezier(.25,1,.35,1),
        background .35s,
        box-shadow .35s;

    box-shadow:
        0 10px 25px rgba(0,0,0,.35);

}

/* Fake trapezoid */

.wheel-segment::before{

    content:"";

    position:absolute;
    inset:0;

    background:inherit;

    clip-path:polygon(
        12% 0,
        88% 0,
        100% 100%,
        0 100%
    );

    border-radius:18px;

    z-index:-1;

}

.wheel-segment span{

    position:absolute;
    left:50%;
    top:50%;

    /* counter-rotate so the label stays upright regardless of the segment's own angle */
    transform:
        translate(-50%,-50%)
        rotate(calc(var(--angle) * -1));

    transition:transform .8s cubic-bezier(.25,1,.35,1);

    white-space:nowrap;

}

/* Hover */

.wheel-segment:hover{

    background:linear-gradient(
        180deg,
        #2c3947,
        #1b2430
    );

    box-shadow:
        0 0 35px rgba(58,168,255,.3);

}

/* Active */

.wheel-segment.active{

    background:linear-gradient(
        180deg,
        #3aa8ff,
        #0078d4
    );

    box-shadow:
        0 0 45px rgba(58,168,255,.65);

}

/* ==========================================
   CENTRE
========================================== */

.wheel-centre{

    position:absolute;

    width:180px;
    height:180px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:linear-gradient(
        180deg,
        #1b222b,
        #11161d
    );

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

    z-index:60;
    pointer-events:none;

    box-shadow:

        inset 0 0 25px rgba(255,255,255,.05),

        0 0 45px rgba(58,168,255,.2);

}

.centre-inner{

    width:135px;
    height:135px;

    border-radius:50%;

    border:2px solid rgba(58,168,255,.35);

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

}

.centre-inner span{

    font-size:48px;
    font-weight:800;
    letter-spacing:4px;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .wheel-wrapper{

        width:340px;
        height:340px;
        margin-top:70px;

        --wheel-radius:135px;

    }

    .wheel-info{

        margin-bottom:50px;

    }

    .wheel-centre{

        width:120px;
        height:120px;

    }

    .centre-inner{

        width:90px;
        height:90px;

    }

    .centre-inner span{

        font-size:28px;

    }

    .wheel-segment{

        width:130px;
        height:80px;

        font-size:14px;

    }

    #wheel-title{

        font-size:36px;

    }

}