/******************************************************************************/
/*  CASCADING STYLE SHEET ASSETS                                              */
/*----------------------------------------------------------------------------*/
/*  Copyright (C) 2020 MINEVERSAL                                             */
/*  Licensed material of MINEVERSAL                                           */
/*----------------------------------------------------------------------------*/
/*  Object              : CSSA (CASCADING STYLE SHEET ASSETS)                 */
/*  Outline             : CSSA (CASCADING STYLE SHEET ASSETS)                 */
/*  File ID             : Zulma-CSSA-7                                        */
/*----------------------------------------------------------------------------*/
/*  Author              : Joe                                                 */
/*  Revision Author     : Joe                                                 */
/*  Created Time        : 2023/12/30 09:48 (UTC+07:00)                        */
/*  Modification Time   : 2026/08/12 09:00 (UTC+07:00)                        */
/*  Version             : 1 (Number of Version)                               */
/*  Revision            : 1 (Number of Revision)                              */
/*  Revision Note       : Fixed "#loader { position: center }" (invalid CSS   */
/*                        value; the rule was silently ignored, so the        */
/*                        loader never actually overlaid the page). Now a     */
/*                        proper fixed full-viewport overlay, centered with   */
/*                        flexbox instead of the old %-margin hack, with a    */
/*                        fade-out transition + .loader-hidden state driven   */
/*                        by content-loader.js once content.json has loaded.  */
/******************************************************************************/

/******************************************************************************/
/*        GOOGLE BOUNCE LOADING STYLE                                         */
/******************************************************************************/
:root {
    --color-red: #ea4335;
    --color-blue: #4285f4;
    --color-yellow: #fbbc05;
    --color-green: #34a853;
}

#loader {
    position: fixed;   /* Sit on top, full viewport */
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb; /* matches bg-gray-50 (light theme default) */
    transition: opacity .4s ease, visibility .4s ease;
}

#main-theme.dark #loader {
    background-color: #212134; /* matches .bg-dark-theme */
}

/* Toggled by content-loader.js once assets/api/content.json has loaded */
#loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bounce {
    display: flex;
    align-items: flex-end;
}

.loader-bounce {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    margin: .4rem;
    animation: loader-bounce 1.4s infinite ease-in-out;
}

.bounce-blue {
    background-color: var(--color-blue);
}

.bounce-red {
    background-color: var(--color-red);
    animation-delay: .2s;
}

.bounce-yellow {
    background-color: var(--color-yellow);
    animation-delay: .4s;
}

.bounce-green {
    background-color: var(--color-green);
    animation-delay: .6s;
}

@media (max-width: 767.98px) {
    .loader-bounce {
        width: 1.1rem;
        height: 1.1rem;
        margin: .3rem;
    }
}

/******************************************************************************/
/*        GOOGLE BOUNCE LOADING ANIMATION                                     */
/******************************************************************************/
@keyframes loader-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-1.2rem);
    }
}

/******** END OF FILE *********************************************************/