/* =========================================
   基础层：重置 / body / 全局过渡 / 壁纸系统 / 玻璃效果 / 主布局 / 时间显示
   —— 不含任何组件样式
   ========================================= */

/* HarmonyOS Sans SC：优先使用本地已安装字体，否则从 jsDelivr npm CDN 加载 woff2 */
@font-face {
    font-family: "HarmonyOS Sans SC";
    src: local("HarmonyOS Sans SC Light"),
         url("https://cdn.jsdelivr.net/npm/@ayahub/webfont-harmony-sans-sc@1.0.0/fonts/HarmonyOS_Sans_SC_Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "HarmonyOS Sans SC";
    src: local("HarmonyOS Sans SC Regular"), local("HarmonyOS Sans SC"),
         url("https://cdn.jsdelivr.net/npm/@ayahub/webfont-harmony-sans-sc@1.0.0/fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "HarmonyOS Sans SC";
    src: local("HarmonyOS Sans SC Medium"),
         url("https://cdn.jsdelivr.net/npm/@ayahub/webfont-harmony-sans-sc@1.0.0/fonts/HarmonyOS_Sans_SC_Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "HarmonyOS Sans SC";
    src: local("HarmonyOS Sans SC Bold"),
         url("https://cdn.jsdelivr.net/npm/@ayahub/webfont-harmony-sans-sc@1.0.0/fonts/HarmonyOS_Sans_SC_Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--custom-font, "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text-primary);
    background: var(--gradient-page);
    background-attachment: fixed;
    transition:
        --wp-solid var(--time-slow) ease,
        color var(--time-normal) ease;
}

/* 强制所有元素继承字体设置 */
*, *::before, *::after {
    font-family: inherit;
}

/* 全局主题切换过渡 */
.glass-effect,
.shortcut-icon,
.search-box,
.settings-btn,
.settings-drawer,
.modal,
.option-btn,
.upload-btn,
.data-btn,
.add-shortcut-btn,
.shortcut-list-item,
.text-input,
.tab-btn,
.setting-label,
.section-title,
.setting-hint,
.shortcut-name,
.search-engine-indicator,
.search-icon,
.font-preset-btn,
.danger-btn {
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-duration: var(--time-normal);
    transition-timing-function: var(--easing-standard);
}

::selection {
    background: color-mix(in srgb, var(--accent-color) 35%, transparent);
    color: inherit;
}

img {
    -webkit-user-drag: none;
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    color: inherit;
}

input {
    font-family: inherit;
    border: none;
    outline: none;
    background: transparent;
}

/* =========================================
   壁纸系统：渐变光斑层（优化性能）
   ========================================= */
.wallpaper-layer {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    /* 用类型化颜色/角度分量构建渐变，使颜色变化可被 CSS 插值过渡 */
    background: linear-gradient(var(--wp-angle), var(--wp-c1), var(--wp-c2));
    /* 壁纸模式/颜色切换的淡入淡出（用 opacity 而非 display，使过渡可动画） */
    opacity: 1;
    transition:
        --wp-c1 var(--time-slow) ease,
        --wp-c2 var(--time-slow) ease,
        --wp-angle var(--time-slow) ease,
        opacity var(--time-slow) ease;
    contain: strict;
}

.wallpaper-layer::before,
.wallpaper-layer::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    animation: blob-float 22s ease-in-out infinite;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.wallpaper-layer::before {
    transition: --blob-c1-strong var(--time-slow) ease;
}

.wallpaper-layer::after {
    transition: --blob-c2-strong var(--time-slow) ease;
}

.wallpaper-layer::before {
    width: 65vmax;
    height: 65vmax;
    background: radial-gradient(circle, var(--blob-c1-strong, rgba(45,136,240,0.5)) 0%, transparent 65%);
    top: 28%;
    left: 48%;
}

.wallpaper-layer::after {
    width: 60vmax;
    height: 60vmax;
    background: radial-gradient(circle, var(--blob-c2-strong, rgba(171,138,255,0.5)) 0%, transparent 65%);
    top: 32%;
    left: 52%;
    animation-delay: -7s;
}

.wallpaper-layer .blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    animation: blob-float 22s ease-in-out infinite;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.wallpaper-layer .blob-1 {
    width: 40vmax;
    height: 40vmax;
    background: radial-gradient(circle, var(--blob-c1-soft, rgba(100,194,220,0.38)) 0%, transparent 60%);
    top: 25%;
    left: 45%;
    animation-delay: -3s;
    transition: --blob-c1-soft var(--time-slow) ease;
}

.wallpaper-layer .blob-2 {
    width: 35vmax;
    height: 35vmax;
    background: radial-gradient(circle, var(--blob-c2-soft, rgba(140,200,255,0.38)) 0%, transparent 60%);
    top: 30%;
    left: 55%;
    animation-delay: -14s;
    transition: --blob-c2-soft var(--time-slow) ease;
}

@keyframes blob-float {
    0%, 100% {
        transform: translate3d(-50%, -50%, 0) scale(0.7) rotate(0deg);
    }
    25% {
        transform: translate3d(-45%, -55%, 0) scale(0.8) rotate(8deg);
    }
    50% {
        transform: translate3d(-55%, -45%, 0) scale(0.75) rotate(-6deg);
    }
    75% {
        transform: translate3d(-48%, -52%, 0) scale(0.85) rotate(4deg);
    }
}

/* 壁纸系统：图片层 */
.wallpaper-image {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    filter: blur(var(--wallpaper-image-blur, 0px));
    transition:
        opacity var(--time-slow) ease,
        filter var(--time-normal) ease;
}

/* 壁纸系统：遮罩层（保证图片壁纸上文字可读） */
.wallpaper-mask {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--wallpaper-mask-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--time-slow) ease;
}

/* 壁纸模式切换（用 opacity 淡入淡出，而非 display 瞬切） */
body[data-wallpaper="image"] .wallpaper-layer { opacity: 0; }
body[data-wallpaper="image"] .wallpaper-image { opacity: 1; }
body[data-wallpaper="image"] .wallpaper-mask { opacity: var(--wallpaper-mask-opacity, 0.5); }

body[data-wallpaper="bing"] .wallpaper-layer { opacity: 0; }
body[data-wallpaper="bing"] .wallpaper-image { opacity: 1; }
body[data-wallpaper="bing"] .wallpaper-mask { opacity: var(--wallpaper-mask-opacity, 0.5); }

body[data-wallpaper="solid"] .wallpaper-layer { opacity: 0; }
body[data-wallpaper="solid"] {
    background-image: none;
    background-color: var(--wp-solid);
}

/* 拖动颜色/角度时禁用壁纸过渡（避免迟滞），点击预设/恢复默认时移除该类以启用平滑过渡。
   作用域仅限壁纸相关元素，不影响 UI 按钮等其它过渡。
   同时覆盖图片层/遮罩层，消除图片壁纸切换/首屏时的淡入动画（三层防线第 3 层）。 */
body.wp-instant,
body.wp-instant .wallpaper-layer,
body.wp-instant .wallpaper-layer::before,
body.wp-instant .wallpaper-layer::after,
body.wp-instant .wallpaper-layer .blob,
body.wp-instant .wallpaper-image,
body.wp-instant .wallpaper-mask {
    transition: none !important;
}

/* =========================================
   玻璃效果
   ========================================= */
.glass-effect {
    background-color: var(--bg-primary);
    backdrop-filter: saturate(var(--saturation-amount)) blur(var(--blur-amount));
    -webkit-backdrop-filter: saturate(var(--saturation-amount)) blur(var(--blur-amount));
    border: var(--border-glass);
    opacity: var(--glass-opacity);
    --enter-target-opacity: var(--glass-opacity);
}

/* =========================================
   主布局（黄金分割比例）
   ========================================= */
.main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 20px;
    padding-top: calc(100vh * var(--content-position) / 100);
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
}

/* .center-content 不再设置 max-width，快捷方式区域可按用户设定的 --icon-max-width 自由铺开
   时间与搜索栏各自有合适的宽度约束，依然居中对齐 */

/* 入场动画（用 keyframes，与交互动画分离） */
@keyframes enter-fade-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: var(--enter-target-opacity, 1);
        transform: translateY(0);
    }
}

/* =========================================
   时间显示
   ========================================= */
.time-display {
    text-align: center;
    opacity: 0;
    animation: enter-fade-up var(--time-slow) var(--easing-enter) forwards;
    animation-delay: 0.15s;
    /* 时钟区域后方柔和阴影，增强层次感 */
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.16));
}

.time {
    display: block;
    font-size: var(--clock-size);
    font-family: var(--clock-font, "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--clock-color);
    text-shadow: var(--text-shadow-strong);
    font-variant-numeric: tabular-nums;
    transition: color var(--time-normal) var(--easing-standard);
}

.date {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--date-color);
    margin-top: 14px;
    text-shadow: var(--text-shadow-strong);
    transition: color var(--time-normal) var(--easing-standard);
}