/* 时钟问候组件 v1.0.4 —— 依赖 AeroCore 主题 CSS 变量，全部带兜底值 */

.aero-clock-component {
    position: relative;
    background: var(--bg-secondary, #f5f6f8);
    border-radius: var(--border-radius, 12px);
    padding: 18px 20px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 标题完全复用主题 widget-title 体系，随后台「小工具标题样式」联动 */
.aero-clock-title-scope {
    display: block;
}

/* 左圆面 + 右信息区 */
.aero-clock-body {
    display: flex;
    align-items: center;
    gap: 20px;
}

.aero-clock-face {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    /* 直径≈数字字号×4.9，让"17:21:44"这类 8 字符时间撑到接近圆周 */
    width: clamp(100px, calc(var(--clock-size, 26px) * 4.9), 220px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card, #fff);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.1);
    font-size: var(--clock-size, 26px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #1f2937);
    letter-spacing: 0.01em;
    line-height: 1;
}

/* 点缀：外框呼吸灯 —— 描边光环 + 向外扩散的柔光，只在圆外发亮不遮挡钟面 */
.aero-clock-face::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgba(79, 110, 247, 0.5),
        0 0 16px 5px rgba(79, 110, 247, 0.28);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--theme-color, #4f6ef7) 50%, transparent),
        0 0 16px 5px color-mix(in srgb, var(--theme-color, #4f6ef7) 28%, transparent);
    animation: clock-breath 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes clock-breath {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.995);
        filter: blur(0.3px);
    }
    50% {
        opacity: 1;
        transform: scale(1.035);
        filter: blur(0);
    }
}

.aero-clock-component[data-blink="1"] .aero-clock-sep {
    animation: aero-clock-blink 2s steps(1, end) infinite;
}

@keyframes aero-clock-blink {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0.25; }
    100% { opacity: 1; }
}

.aero-clock-info {
    flex: 1 1 auto;
    min-width: 0;
}

.aero-clock-period {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2px;
}

.aero-clock-date {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2px;
}

.aero-clock-greeting {
    font-size: 21px;
    font-weight: 700;
    color: #2ecc71;
    line-height: 1.4;
}

.aero-clock-tip {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary, #6b7280);
    min-height: 1.75em;
}

/* 居中布局：钟面与信息区上下堆叠 */
.aero-clock-component.align-center .aero-clock-body {
    flex-direction: column;
    gap: 14px;
}

.aero-clock-component.align-center .aero-clock-info {
    text-align: center;
}

@media (max-width: 768px) {
    .aero-clock-component {
        padding: 14px 16px;
    }

    .aero-clock-body {
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aero-clock-component[data-blink="1"] .aero-clock-sep {
        animation: none;
    }

    .aero-clock-face::before {
        animation: none;
        opacity: 0.6;
    }
}