/******************************************************************************
 * Which Is Bigger? — Start button accent — Version 0.2.11 Alpha
 ******************************************************************************/

#start-game-button{
    position:relative;
    overflow:visible;
}

#start-game-button > span{
    position:relative;
    z-index:1;
}

.start-button-trace{
    position:absolute;
    inset:-4px;
    width:calc(100% + 8px);
    height:calc(100% + 8px);
    overflow:visible;
    pointer-events:none;
}

.start-button-trace rect{
    fill:none;
    vector-effect:non-scaling-stroke;
    stroke-linecap:round;
}

.start-button-trace .trace-tail{
    stroke:#ffd84f;
    stroke-width:2.4;
    stroke-opacity:.28;
    stroke-dasharray:18 32 18 32;
    stroke-dashoffset:0;
    filter:drop-shadow(0 0 10px rgba(251,191,36,.45));
    animation:start-button-trace-tail 2.8s linear infinite;
}

.start-button-trace .trace-mid{
    stroke:#ffe36e;
    stroke-width:2.2;
    stroke-opacity:.62;
    stroke-dasharray:13.5 36.5 13.5 36.5;
    stroke-dashoffset:-2.25;
    filter:drop-shadow(0 0 7px rgba(251,191,36,.65));
    animation:start-button-trace-mid 2.8s linear infinite;
}

.start-button-trace .trace-core{
    stroke:#fff7c2;
    stroke-width:2;
    stroke-opacity:1;
    stroke-dasharray:9 41 9 41;
    stroke-dashoffset:-4.5;
    filter:
        drop-shadow(0 0 2px rgba(255,255,235,.95))
        drop-shadow(0 0 5px rgba(251,191,36,.9));
    animation:start-button-trace-core 2.8s linear infinite;
}

@keyframes start-button-trace-tail{
    from{
        stroke-dashoffset:0;
    }
    to{
        stroke-dashoffset:100;
    }
}

@keyframes start-button-trace-mid{
    from{
        stroke-dashoffset:-2.25;
    }
    to{
        stroke-dashoffset:97.75;
    }
}

@keyframes start-button-trace-core{
    from{
        stroke-dashoffset:-4.5;
    }
    to{
        stroke-dashoffset:95.5;
    }
}

@media(prefers-reduced-motion:reduce){
    .start-button-trace rect{
        animation:none;
        stroke-dasharray:100 0;
        stroke-dashoffset:0;
    }

    .start-button-trace .trace-tail,
    .start-button-trace .trace-mid{
        display:none;
    }

    .start-button-trace .trace-core{
        stroke:#ffe36e;
        stroke-width:2;
        filter:
            drop-shadow(0 0 2px rgba(255,255,220,.9))
            drop-shadow(0 0 7px rgba(251,191,36,.6));
    }
}