/* =========================================================
   ANIMATIONS
   ========================================================= */


/* =========================================================
   GENERAL PAGE TRANSITIONS
   ========================================================= */

@keyframes pageFadeIn {

    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   VIEW TRANSITIONS
   ========================================================= */

.view-transition {
    animation:
        view-enter
        360ms
        cubic-bezier(.22,.8,.2,1)
        forwards;
}

.view-exit {
    animation:
        view-exit
        220ms
        cubic-bezier(.4,0,1,1);
}

@keyframes view-enter {

    from {
        opacity: 0;

        transform:
            translateY(10px)
            scale(.995);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes view-exit {

    from {
        opacity: 1;

        transform:
            translateY(0);
    }

    to {
        opacity: 0;

        transform:
            translateY(-6px);
    }
}


/* =========================================================
   SPINNERS
   ========================================================= */

@keyframes spin {

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


/* =========================================================
   SCREENSHOT LOADING
   ========================================================= */

.screenshot-loading {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 15px;

    padding: 14px 16px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-sm);

    color: var(--text-muted);

    font-size: 13px;
}

.screenshot-loading small {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 11px;
}

.screenshot-spinner {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    border:
        2px solid rgba(255,255,255,.09);

    border-top-color:
        var(--accent);

    border-radius: 50%;

    animation:
        spin .8s linear infinite;
}


/* =========================================================
   SCREENSHOT RESULT
   ========================================================= */

.screenshot-result {
    margin-top: 18px;
}

.screenshot-result h3 {
    margin:
        0 0 14px;

    color: var(--text-soft);

    font-size: 15px;
    font-weight: 600;
}

.screenshot-result img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin-top: 10px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    box-shadow:
        0 20px 55px rgba(0,0,0,.35);
}


/* =========================================================
   SCREENSHOT ERROR
   ========================================================= */

.screenshot-error {
    margin-top: 15px;

    padding: 13px 14px;

    background:
        rgba(255,70,70,.06);

    border:
        1px solid rgba(255,100,100,.16);

    border-radius:
        var(--radius-sm);

    color: var(--danger);
}

.screenshot-error-detail {
    margin-top: 7px;

    color: var(--text-muted);

    font-size: 12px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }
}