/* ==========================================
   RING BASE
========================================== */

.ring{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;

    /* Base circle - very subtle */
    border:1px solid rgba(255,106,0,.08);

    opacity:.25;

    transition:
        opacity 1.8s ease,
        border-color 1.8s ease,
        box-shadow 1.8s ease;
}

/* Active Ring */

.ring.active{

    opacity:.9;

    border-color:rgba(255,106,0,.55);

    /* Reduced Glow */
    box-shadow:
        0 0 8px rgba(255,106,0,.08),
        0 0 20px rgba(255,106,0,.05);

}