/*
===============================================================================
VERGECLOUD CSS OPTIMIZATION TEST
===============================================================================

PURPOSE

This stylesheet is intentionally:

1. Unminified
2. Verbose
3. Heavily commented
4. Spaced across many lines
5. Written using expanded CSS declarations
6. Filled with safe additional styling rules

This makes it easier to verify whether VergeCloud CSS Optimization is
actually modifying and reducing the CSS response.

EXPECTED RESULT BEFORE OPTIMIZATION

The response should contain:

- These comments
- Many line breaks
- Indentation
- Long property declarations
- Human-readable formatting

EXPECTED RESULT AFTER OPTIMIZATION

A CSS optimizer may:

- Remove comments
- Remove unnecessary whitespace
- Remove line breaks
- Collapse values
- Combine declarations
- Produce a significantly smaller response

IMPORTANT

The appearance and animation should continue working after optimization.

===============================================================================
*/


/*
-------------------------------------------------------------------------------
SECTION 01
MAIN TEST CARD
-------------------------------------------------------------------------------
*/

.opt-test-card {

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 28px;

    margin-left: 0px;


    padding-top: 24px;

    padding-right: 24px;

    padding-bottom: 24px;

    padding-left: 24px;


    background-color: #19211f;


    color: #ffffff;


    border-top-width: 1px;

    border-right-width: 1px;

    border-bottom-width: 1px;

    border-left-width: 1px;


    border-top-style: solid;

    border-right-style: solid;

    border-bottom-style: solid;

    border-left-style: solid;


    border-top-color: #43514e;

    border-right-color: #43514e;

    border-bottom-color: #43514e;

    border-left-color: #43514e;


    border-top-left-radius: 8px;

    border-top-right-radius: 8px;

    border-bottom-right-radius: 8px;

    border-bottom-left-radius: 8px;


    box-shadow:
        0px
        8px
        24px
        rgba(0, 0, 0, 0.18);


    transition-property:
        background-color,
        border-color,
        box-shadow,
        transform;

    transition-duration:
        250ms,
        250ms,
        250ms,
        250ms;

    transition-timing-function:
        ease,
        ease,
        ease,
        ease;
}


/*
Main card hover state.
*/

.opt-test-card:hover {

    background-color: #1e2826;

    border-top-color: #53625e;

    border-right-color: #53625e;

    border-bottom-color: #53625e;

    border-left-color: #53625e;


    box-shadow:
        0px
        12px
        30px
        rgba(0, 0, 0, 0.24);
}


/*
-------------------------------------------------------------------------------
SECTION 02
COPY AREA
-------------------------------------------------------------------------------
*/

.opt-test-copy {

    display: block;

    width: 100%;

    position: relative;

    z-index: 1;
}


.opt-test-copy h3 {

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 6px;

    margin-left: 0px;


    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 0px;


    color: #ffffff;


    font-size: 18px;

    font-weight: 600;

    font-style: normal;

    line-height: 1.3;

    letter-spacing: -0.01em;
}


.opt-test-copy p {

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    margin-left: 0px;


    color: #b8c0be;


    font-size: 14px;

    font-weight: 400;

    font-style: normal;

    line-height: 1.6;

    letter-spacing: 0em;
}


/*
-------------------------------------------------------------------------------
SECTION 03
ANIMATION STAGE
-------------------------------------------------------------------------------
*/

.opt-animation-stage {

    position: relative;


    width: 100%;

    height: 100px;


    margin-top: 20px;

    margin-right: 0px;

    margin-bottom: 20px;

    margin-left: 0px;


    overflow-x: hidden;

    overflow-y: hidden;


    background-color: #111716;


    border-top-width: 1px;

    border-right-width: 1px;

    border-bottom-width: 1px;

    border-left-width: 1px;


    border-top-style: solid;

    border-right-style: solid;

    border-bottom-style: solid;

    border-left-style: solid;


    border-top-color: #35403e;

    border-right-color: #35403e;

    border-bottom-color: #35403e;

    border-left-color: #35403e;


    border-top-left-radius: 6px;

    border-top-right-radius: 6px;

    border-bottom-right-radius: 6px;

    border-bottom-left-radius: 6px;


    box-shadow:
        inset
        0px
        0px
        30px
        rgba(0, 0, 0, 0.20);
}


/*
-------------------------------------------------------------------------------
SECTION 04
TRACK
-------------------------------------------------------------------------------
*/

.opt-animation-track {

    position: absolute;


    top: 50%;

    left: 20px;

    right: 20px;


    height: 2px;


    transform:
        translateY(-50%);


    background-color: #35403e;


    opacity: 1;
}


/*
Additional decorative track layer.

This does not change the functionality of the animation.
*/

.opt-animation-track::before {

    content: "";


    position: absolute;


    top: -1px;

    left: 0px;


    width: 100%;

    height: 1px;


    background-color:
        rgba(255, 255, 255, 0.04);
}


/*
-------------------------------------------------------------------------------
SECTION 05
ANIMATED BALL
-------------------------------------------------------------------------------
*/

.opt-animation-ball {

    position: absolute;


    top: 29px;

    left: 20px;


    width: 42px;

    height: 42px;


    min-width: 42px;

    min-height: 42px;


    background-color: #f05a28;


    border-top-left-radius: 50%;

    border-top-right-radius: 50%;

    border-bottom-right-radius: 50%;

    border-bottom-left-radius: 50%;


    box-shadow:
        0px
        0px
        0px
        7px
        rgba(240, 90, 40, 0.07),

        0px
        0px
        30px
        rgba(240, 90, 40, 0.28);


    animation-name:
        vergecloudMove;

    animation-duration:
        3s;

    animation-delay:
        0s;

    animation-timing-function:
        ease-in-out;

    animation-iteration-count:
        infinite;

    animation-direction:
        alternate;

    animation-fill-mode:
        both;

    animation-play-state:
        running;


    will-change:
        left,
        transform;
}


/*
Fast animation state.

The JavaScript applies this class.
*/

.opt-animation-ball.fast {

    animation-duration:
        0.7s;
}


/*
Paused animation state.

The JavaScript applies this class.
*/

.opt-animation-ball.paused {

    animation-play-state:
        paused;
}


/*
-------------------------------------------------------------------------------
SECTION 06
PRIMARY CSS ANIMATION
-------------------------------------------------------------------------------
*/

@keyframes vergecloudMove {

    0% {

        left:
            20px;

        transform:
            rotate(0deg)
            scale(1);
    }


    25% {

        transform:
            rotate(90deg)
            scale(1.04);
    }


    50% {

        transform:
            rotate(180deg)
            scale(0.96);
    }


    75% {

        transform:
            rotate(270deg)
            scale(1.04);
    }


    100% {

        left:
            calc(100% - 62px);

        transform:
            rotate(360deg)
            scale(1);
    }

}


/*
-------------------------------------------------------------------------------
SECTION 07
ACTION AREA
-------------------------------------------------------------------------------
*/

.opt-test-actions {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;


    align-items: center;

    justify-content: flex-start;


    gap: 16px;


    width: 100%;


    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    margin-left: 0px;
}


/*
-------------------------------------------------------------------------------
SECTION 08
BUTTON
-------------------------------------------------------------------------------
*/

.opt-test-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;


    min-height: 40px;


    padding-top: 10px;

    padding-right: 16px;

    padding-bottom: 10px;

    padding-left: 16px;


    background-color: #f05a28;


    color: #111111;


    border-top-width: 0px;

    border-right-width: 0px;

    border-bottom-width: 0px;

    border-left-width: 0px;


    border-top-left-radius: 6px;

    border-top-right-radius: 6px;

    border-bottom-right-radius: 6px;

    border-bottom-left-radius: 6px;


    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1;


    cursor:
        pointer;


    transition-property:
        background-color,
        transform,
        filter,
        box-shadow;

    transition-duration:
        180ms,
        180ms,
        180ms,
        180ms;

    transition-timing-function:
        ease,
        ease,
        ease,
        ease;
}


.opt-test-button:hover {

    background-color:
        #ff6b37;


    filter:
        brightness(1.05);


    box-shadow:
        0px
        6px
        18px
        rgba(240, 90, 40, 0.20);
}


.opt-test-button:active {

    transform:
        scale(0.97);
}


.opt-test-button:focus {

    outline:
        none;
}


.opt-test-button:focus-visible {

    outline-width:
        2px;

    outline-style:
        solid;

    outline-color:
        #ffffff;

    outline-offset:
        3px;
}


/*
-------------------------------------------------------------------------------
SECTION 09
STATUS LABEL
-------------------------------------------------------------------------------
*/

.opt-test-status {

    display:
        inline-block;


    color:
        #9dd6b1;


    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.4;


    min-width:
        170px;
}


/*
-------------------------------------------------------------------------------
SECTION 10
COUNTER
-------------------------------------------------------------------------------
*/

.opt-test-counter {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;


    width:
        38px;

    height:
        38px;


    color:
        #ffffff;


    background-color:
        rgba(255, 255, 255, 0.04);


    border-top-width:
        1px;

    border-right-width:
        1px;

    border-bottom-width:
        1px;

    border-left-width:
        1px;


    border-top-style:
        solid;

    border-right-style:
        solid;

    border-bottom-style:
        solid;

    border-left-style:
        solid;


    border-top-color:
        #43514e;

    border-right-color:
        #43514e;

    border-bottom-color:
        #43514e;

    border-left-color:
        #43514e;


    border-top-left-radius:
        50%;

    border-top-right-radius:
        50%;

    border-bottom-right-radius:
        50%;

    border-bottom-left-radius:
        50%;


    font-size:
        13px;

    font-weight:
        700;
}


/*
===============================================================================
ADDITIONAL SAFE TEST RULES
===============================================================================

These rules intentionally increase the source size.

They are harmless and do not interfere with the main page.

They provide additional text, spacing and declarations for the CSS optimizer
to process.

===============================================================================
*/


.opt-test-card[data-state="ready"] {

    opacity:
        1;
}


.opt-test-card[data-state="fast"] {

    opacity:
        1;
}


.opt-test-card[data-state="paused"] {

    opacity:
        1;
}


.opt-test-card[data-state="normal"] {

    opacity:
        1;
}


.opt-test-card .opt-test-copy strong {

    color:
        #ffffff;

    font-weight:
        700;
}


.opt-test-card .opt-test-copy em {

    color:
        #d7ddda;

    font-style:
        italic;
}


.opt-test-card .opt-test-copy code {

    display:
        inline-block;


    padding-top:
        2px;

    padding-right:
        6px;

    padding-bottom:
        2px;

    padding-left:
        6px;


    background-color:
        rgba(255, 255, 255, 0.06);


    color:
        #ffffff;


    border-top-left-radius:
        4px;

    border-top-right-radius:
        4px;

    border-bottom-right-radius:
        4px;

    border-bottom-left-radius:
        4px;
}


/*
-------------------------------------------------------------------------------
OPTIONAL ANIMATION STATES
-------------------------------------------------------------------------------
*/

.opt-animation-stage.active {

    border-top-color:
        #53625e;

    border-right-color:
        #53625e;

    border-bottom-color:
        #53625e;

    border-left-color:
        #53625e;
}


.opt-animation-stage.inactive {

    border-top-color:
        #35403e;

    border-right-color:
        #35403e;

    border-bottom-color:
        #35403e;

    border-left-color:
        #35403e;
}


/*
-------------------------------------------------------------------------------
RESPONSIVE TEST RULES
-------------------------------------------------------------------------------
*/

@media screen and (max-width: 1000px) {

    .opt-test-card {

        padding-top:
            22px;

        padding-right:
            22px;

        padding-bottom:
            22px;

        padding-left:
            22px;
    }


    .opt-animation-stage {

        height:
            95px;
    }

}


@media screen and (max-width: 800px) {

    .opt-test-actions {

        flex-direction:
            row;

        flex-wrap:
            wrap;
    }


    .opt-test-status {

        min-width:
            auto;
    }

}


@media screen and (max-width: 600px) {

    .opt-test-card {

        padding-top:
            18px;

        padding-right:
            18px;

        padding-bottom:
            18px;

        padding-left:
            18px;
    }


    .opt-animation-stage {

        height:
            90px;
    }


    .opt-test-actions {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .opt-test-button {

        width:
            100%;
    }

}


/*
===============================================================================
END OF VERGECLOUD CSS OPTIMIZATION TEST
===============================================================================
*/