/* Argon: optional motion polish. Keep typography, palette, spacing and layout intact. */
html[data-argon-motion] {
    --argon-reveal-distance: 15px;
    --argon-reveal-duration: 570ms;
    --argon-hover-distance: -4px;
    --argon-hover-duration: 250ms;
}
html[data-argon-motion="soft"] {
    --argon-reveal-distance: 8px;
    --argon-reveal-duration: 390ms;
    --argon-hover-distance: -2px;
    --argon-hover-duration: 200ms;
}
html[data-argon-motion="expressive"] {
    --argon-reveal-distance: 24px;
    --argon-reveal-duration: 730ms;
    --argon-hover-distance: -6px;
    --argon-hover-duration: 310ms;
}

/* Reveals are added only to BELOW-the-fold elements after JS has started.
   If JS, the observer or motion is unavailable, everything remains visible. */
@media (prefers-reduced-motion: no-preference) {
    html[data-argon-motion]:not([data-argon-motion="off"]) [data-argon-reveal] {
        transition: opacity var(--argon-reveal-duration) cubic-bezier(.2,.75,.3,1),
                    translate var(--argon-reveal-duration) cubic-bezier(.2,.75,.3,1);
        transition-delay: var(--argon-reveal-delay, 0ms);
    }
    html[data-argon-motion]:not([data-argon-motion="off"]) [data-argon-reveal="waiting"] {
        opacity: 0;
        translate: 0 var(--argon-reveal-distance);
    }
    html[data-argon-motion]:not([data-argon-motion="off"]) [data-argon-reveal="visible"] {
        opacity: 1;
        translate: 0 0;
    }

}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
        /* Individual translate/scale CSS properties do not overwrite the
           theme's PJAX transform, button transform or masonry calculation. */
        html[data-argon-motion]:not([data-argon-motion="off"]) #main.article-list > article.post:not(.post-pjax-loading) {
            transition: translate var(--argon-hover-duration) ease,
                        box-shadow var(--argon-hover-duration) ease;
        }
        html[data-argon-motion]:not([data-argon-motion="off"]) #main.article-list > article.post:not(.post-pjax-loading):hover {
            translate: 0 var(--argon-hover-distance);
        }
        html[data-argon-motion]:not([data-argon-motion="off"]) #main.article-list > article.post .post-header-with-thumbnail .post-thumbnail {
            transition: opacity .3s ease, transform .65s cubic-bezier(.2,.7,.25,1);
        }
        html[data-argon-motion]:not([data-argon-motion="off"]) #main.article-list > article.post:not(.post-pjax-loading):hover .post-header-with-thumbnail .post-thumbnail {
            transform: scale(1.035);
        }
        html[data-argon-motion]:not([data-argon-motion="off"]) .post-tags .badge,
        html[data-argon-motion]:not([data-argon-motion="off"]) .post-tags .tag {
            transition: translate .2s ease, box-shadow .2s ease;
        }
        html[data-argon-motion]:not([data-argon-motion="off"]) .post-tags .badge:hover,
        html[data-argon-motion]:not([data-argon-motion="off"]) .post-tags .tag:hover {
            translate: 0 -2px;
        }
        html[data-argon-motion]:not([data-argon-motion="off"]) button.btn:not(:disabled):active,
        html[data-argon-motion]:not([data-argon-motion="off"]) a.btn:not(.disabled):active {
            scale: .97;
        }
}

/* Clear keyboard focus; subtle by design and independent of motion setting. */
@supports selector(:focus-visible) {
    #primary a:focus-visible,
    #toolbar a:focus-visible,
    #toolbar button:focus-visible,
    #float_action_buttons button:focus-visible,
    #primary button:focus-visible {
        outline: 2px solid var(--themecolor, #5e72e4);
        outline-offset: 3px;
    }
}

/* New effects and the theme's card entrance respect user motion preferences. */
@media (prefers-reduced-motion: reduce) {
    html [data-argon-reveal],
    html [data-argon-reveal="waiting"],
    html [data-argon-reveal="visible"] {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
    html .card {
        animation: none !important;
    }
}

/* Inter is the default UI face. Preserve icon and code fonts and legacy serif toggle. */
html:not(.use-serif) body,
html:not(.use-serif) .navbar,
html:not(.use-serif) .btn,
html:not(.use-serif) .form-control,
html:not(.use-serif) .dropdown-menu,
html:not(.use-serif) .tooltip,
html:not(.use-serif) .popover {
    font-family: var(--font);
}