/* ===========================================
   ANIMATION EFFECTS & KEYFRAMES
   =========================================== */

/* Loading animations */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes logoFadeOut {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Gradient animation for icon_user_info */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Air quality notification animations */
@keyframes air_show {
    0%   { transform: translateX(calc(100% + 10px)); }
    20%  { transform: translateX(calc(100% + 10px)); }
    70%  { transform: translateX(-8px); }
    100% { transform: translateX(0); }
}

@keyframes air_hide {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(0); }
    100% { transform: translateX(calc(100% + 10px)); }
}

/* Notification box animations */
@keyframes box_notification_bottom {
    0%   { bottom: -180px; }
    50%  { bottom: -180px; }
    80%  { bottom: 10px; }
    100% { bottom: 0px; }
}

@keyframes box_notification_bottom_out {
    0%   { bottom: 0px; }
    100% { bottom: -200px; }
}

/* Close button animation */
@keyframes show_btn_close {
    0%   { bottom: 150px; }
    100% { bottom: 190px; opacity: 1; }
}

/* Background fade animations */
@keyframes bg_fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes bg_fade_out {
    0%   { opacity: 1; }
    100% { opacity: 0; display: none; z-index: -2000; }
}

/* Other user icon animations */
@keyframes fadeUpIconOtherUser {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ripple {
    0% { transform: translate(-50%,-50%) scale(0); opacity: 0.6; }
    100% { transform: translate(-50%,-50%) scale(14); opacity: 0; }
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Clock animations */
@keyframes fade_clock {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade_clock_in {
    0%   { opacity: 0; top: -100%; }
    80%  { top: 14%; }
    100% { opacity: 1; top: 12%; }
}

@keyframes fade_clock_hide {
    0%   { opacity: 1; }
    100% { opacity: 0; top: -100%; }
}

/* Text and filter animations */
@keyframes show_text_alert {
    0%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes filterfadein {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes filterfade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Logo and content animations */
@keyframes logo_show {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes title_show {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes title_hide {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes slogan_show {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes contain_show {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Dynamic icon animation */
@keyframes dynamic_animation {
    0%   { width: 50px; height: 50px; }
    100% { width: 400px; height: 800px; }
}

/* Click animation */
@keyframes click {
    0%   { top: 5px; }
    50%  { top: 30px; }
    100% { top: 5px; }
}

/* Profile picture hover animation */
@keyframes pic_ad {
    0%   { width: 36px; height: 36px; left: 2px; top: 2px; }
    100% { width: 80px; height: 80px; top: -52px; left: 18px; }
}

/* =================================================
   ANIMATIONS CSS - ใช้ร่วมกันทั้ง Dark & Light Mode
   ================================================= */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes logoFadeOut {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes fadeUpIconOtherUser {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ripple {
    0% { transform: translate(-50%,-50%) scale(0); opacity: 0.6; }
    100% { transform: translate(-50%,-50%) scale(14); opacity: 0; }
}

@keyframes slideUpFade {
    0% { opacity:0; transform: translateY(20px) scale(0.98); }
    100% { opacity:1; transform: translateY(0) scale(1); }
}

@keyframes show_text_alert {
    0%   {opacity:1;}
    75%  {opacity:1;}
    100% {opacity:0;}
}

@keyframes filterfade {
    0%   {opacity:0;}
    100% {opacity:1;}
}

@keyframes filterfadein {
    0%   {opacity:1;}
    100% {opacity:0;}
}

@keyframes fade_clock {
    0%   {opacity:0;}
    100% {opacity:1;}
}

@keyframes fade_clock_in {
    0%   {opacity:0; top:-100%;}
    80%  {top:14%;}
    100% {opacity:1; top:12%;}
}

@keyframes fade_clock_hide {
    0%   {opacity:1;}
    100% {opacity:0; top:-100%;}
}

@keyframes logo_show {
    0%   {opacity:0;}
    100% {opacity:1;}
}

@keyframes title_show {
    0%   {opacity:0;}
    100% {opacity:1;}
}

@keyframes title_hide {
    0%   {opacity:1;}
    100% {opacity:0;}
}

@keyframes contain_show {
    from   {opacity: 0;}
    to {opacity:1;}
}

@keyframes click {
    0%   {top:5px;}
    50%  {top:30px;}
    100% {top:5px;}
}

@keyframes bg_fade {
    0%   {opacity:0;}
    100% {opacity:1;}
}

@keyframes bg_fade_out {
    0%   {opacity:1;}
    100% {opacity:0;}
}