/* 簡單沙漏動畫 - 純 Emoji 版本 */

.simple-hourglass {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.hourglass-icon-simple {
    font-size: 3rem;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transform-origin: center 55%; /* 旋轉中心稍微往下 */
}

/* 組合動畫：靜止 ↔ 旋轉 交替（每次旋轉360度） */
.hourglass-icon-simple.combined {
    animation: hourglass-combined 4s linear infinite;
}

@keyframes hourglass-combined {
    /* 第1段：靜止 1秒 (0-25%) */
    0%, 25% {
        transform: rotate(0deg);
    }
    
    /* 第2段：平滑旋轉 360度 1秒 (25-50%) */
    50% {
        transform: rotate(360deg);
    }
    
    /* 第3段：靜止 1秒 (50-75%) */
    50.01%, 75% {
        transform: rotate(360deg);
    }
    
    /* 第4段：平滑旋轉 360度 1秒 (75-100%) */
    100% {
        transform: rotate(720deg);
    }
}

/* 1. 沙漏不動（靜態） */
.hourglass-icon-simple.static {
    /* 不加任何動畫 */
}

/* 2. 上下鏡像（垂直翻轉） */
.hourglass-icon-simple.flip-vertical {
    animation: flip-vertical 2s ease-in-out infinite;
}

@keyframes flip-vertical {
    0%, 45% {
        transform: scaleY(1);
    }
    50%, 95% {
        transform: scaleY(-1);
    }
    100% {
        transform: scaleY(-1);
    }
}

/* 3. 中間180度旋轉（水平翻轉） */
.hourglass-icon-simple.flip-horizontal {
    animation: flip-horizontal 2s ease-in-out infinite;
}

@keyframes flip-horizontal {
    0%, 45% {
        transform: rotate(0deg);
    }
    50%, 95% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

/* 文字脈衝 */
.hourglass-text-simple {
    color: var(--text-light, #888);
    font-size: 0.95rem;
    animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* 尺寸變化 */
.simple-hourglass.small .hourglass-icon-simple {
    font-size: 1.5rem;
}

.simple-hourglass.small .hourglass-text-simple {
    font-size: 0.85rem;
}

.simple-hourglass.large .hourglass-icon-simple {
    font-size: 4rem;
}

.simple-hourglass.large .hourglass-text-simple {
    font-size: 1.1rem;
}

/* 純圖示模式 */
.simple-hourglass.icon-only .hourglass-text-simple {
    display: none;
}