/*==============================
    RPM VFX SERVICES
===============================*/

.services-section {
    background: #0d1117;
    position: relative;
    overflow: hidden;
    padding: 90px 0;
}

    .services-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle,#2962ff33,transparent 70%);
        top: -220px;
        left: -220px;
    }

    .services-section::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: radial-gradient(circle,#7b2ff733,transparent 70%);
        bottom: -220px;
        right: -220px;
    }
.white{
    color:white;
}
/*==============================
        SERVICE CARD
===============================*/
.service-card {
    position: relative;
    height: 100%;
    padding: 35px 25px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    transition: .45s;
    overflow: hidden;
    text-align: center;
}

    .service-card:hover {
        transform: translateY(-12px);
        border-color: #00d7ff;
        box-shadow: 0 0 35px rgba(0,215,255,.18), 0 15px 45px rgba(0,0,0,.35);
    }

    .service-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, transparent, rgba(0,215,255,.04), transparent);
        opacity: 0;
        transition: .4s;
    }

    .service-card:hover::before {
        opacity: 1;
    }

    .service-card h4 {
        color: #fff;
        margin: 28px 0 18px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .service-card p {
        color: #c7c7c7;
        font-size: 15px;
        line-height: 1.8;
    }

/*==============================
        SVG SIZE
===============================*/

.service-icon {
    width: 95px;
    height: 95px;
    margin: auto;
}

    .service-icon svg {
        width: 100%;
        height: 100%;
    }

/*====================================================
        ROTOSCOPING
====================================================*/

.reel-ring {
    fill: none;
    stroke: #00d7ff;
    stroke-width: 3;
}

.hole {
    fill: #00d7ff;
}

.center {
    fill: #2962ff;
}

.mask-path {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
}

/* Rotate reel */

.reel-svg {
    animation: reelRotate 8s linear infinite;
}

/* Draw roto mask */

.mask-path {
    animation: drawMask 2.8s ease-in-out infinite;
}

/* Hover */

.service-card:hover .reel-svg {
    animation-duration: 2.5s;
}

.service-card:hover .mask-path {
    stroke: #00ffd5;
}

/*==============================
        PAINT & PREP
===============================*/

.face {
    fill: none;
    stroke: #7b2ff7;
    stroke-width: 2.5;
}

.wrinkle {
    stroke: #f107a3;
    stroke-width: 2;
    animation: wrinkleFade 3s infinite;
}

.scan {
    fill: #00d7ff;
    animation: scanFace 3s linear infinite;
    filter: drop-shadow(0 0 8px #00d7ff);
}

@keyframes scanFace {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(66px);
    }
}

@keyframes wrinkleFade {
    0%,40% {
        opacity: 1;
    }

    60%,100% {
        opacity: 0;
    }
}
/*==============================
        ANIMATIONS
===============================*/

@keyframes reelRotate {

    from {
        transform: rotate(0deg);
    }

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

@keyframes drawMask {

    0% {
        stroke-dashoffset: 140;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -140;
    }
}

@keyframes brushMove {

    0% {
        transform: rotate(-18deg);
    }

    50% {
        transform: rotate(18deg);
    }

    100% {
        transform: rotate(-18deg);
    }
}

@keyframes paintReveal {

    0% {
        stroke-dashoffset: 120;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -120;
    }
}
/*====================================================
            MATCHMOVE
====================================================*/

.track-box {
    fill: none;
    stroke: #00d7ff;
    stroke-width: 2.5;
    stroke-dasharray: 6 4;
    rx: 4;
}

.track-dot {
    fill: #00ffd5;
    filter: drop-shadow(0 0 6px #00ffd5);
    animation: trackMove 4s linear infinite;
}

.scan-line {
    stroke: #00d7ff;
    stroke-width: 2;
    opacity: .7;
    animation: scanMove 2.5s ease-in-out infinite;
}

.track-svg {
    overflow: visible;
}

.service-card:hover .track-box {
    stroke: #8b5cf6;
    animation: trackPulse 1.2s infinite;
}

.service-card:hover .track-dot {
    filter: drop-shadow(0 0 14px #00ffd5);
    animation-duration: 1.8s;
}


/*====================================================
            COMPOSITING
====================================================*/

.layer1,
.layer2,
.layer3 {
    fill: none;
    stroke: #ff9800;
    stroke-width: 2.2;
    rx: 4;
}

.layer1 {
    opacity: .35;
    animation: layerOne 2.5s infinite ease-in-out;
}

.layer2 {
    opacity: .65;
    animation: layerTwo 2.5s infinite ease-in-out;
}

.layer3 {
    opacity: 1;
    animation: layerThree 2.5s infinite ease-in-out;
}

.service-card:hover .layer1 {
    stroke: #7b2ff7;
}

.service-card:hover .layer2 {
    stroke: #00d7ff;
}

.service-card:hover .layer3 {
    stroke: #00ffd5;
}


/*====================================================
            CARD HOVER GLOW
====================================================*/

.service-card::after {
    content: "";
    position: absolute;
    left: -40%;
    top: -100%;
    width: 70%;
    height: 300%;
    background: linear-gradient( rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));
    transform: rotate(25deg);
    opacity: 0;
    transition: .5s;
}

.service-card:hover::after {
    left: 120%;
    opacity: 1;
}


/*====================================================
        ICON SCALE
====================================================*/

.service-card:hover .service-icon {
    transform: scale(1.08);
    transition: .4s;
}


/*====================================================
            KEYFRAMES
====================================================*/

@keyframes trackMove {

    0% {
        cx: 25;
        cy: 25;
    }

    25% {
        cx: 75;
        cy: 25;
    }

    50% {
        cx: 75;
        cy: 75;
    }

    75% {
        cx: 25;
        cy: 75;
    }

    100% {
        cx: 25;
        cy: 25;
    }
}

@keyframes scanMove {

    0% {
        transform: translateY(-28px);
    }

    50% {
        transform: translateY(28px);
    }

    100% {
        transform: translateY(-28px);
    }
}

@keyframes trackPulse {

    0%,100% {
        stroke-width: 2.5;
    }

    50% {
        stroke-width: 4;
    }
}

@keyframes layerOne {

    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-6px,-6px);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes layerTwo {

    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(4px,-4px);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes layerThree {

    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(8px,8px);
    }

    100% {
        transform: translate(0,0);
    }
}


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

@media(max-width:991px) {

    .service-card {
        margin-bottom: 30px;
    }

    .service-icon {
        width: 80px;
        height: 80px;
    }
}

@media(max-width:576px) {

    .service-card {
        padding: 28px 20px;
    }

        .service-card h4 {
            font-size: 18px;
        }
}
.service-icon {
    transition: .35s ease;
    transform-style: preserve-3d;
}

.mouse-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(0,215,255,.18), rgba(123,47,247,.10), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
}

.service-card:hover .mouse-glow {
    opacity: 1;
}

.service-card {
    overflow: hidden;
}