/* ============================================================
   液态主题（Liquid Theme）内核 —— 全站视觉表现层基座
   版本：V9.3.0
   ------------------------------------------------------------
   设计目标
   1. 大量圆角：所有 rounded / rounded-xl / rounded-2xl 及卡片、控件统一放大，模拟液体自然形态；
   2. 动态渐变：主色 #165DFF 与辅色 #36CFC9 平滑流动（渐变位移 + 背景光斑漂移）；
   3. 柔和阴影与磨砂通透：卡片/按钮/导航统一采用带主色倾向的柔和投影与 backdrop-filter 模糊；
   4. 液态交互：可点击元素悬停弹性缩放（Spring 缓动）+ 波纹扩散，按压回弹；
   5. 只改视觉层：不改变任何布局结构、尺寸体系与响应式断点。

   使用方式
   - 各模块 CSS 顶部 @import 本文件，然后覆盖 --liquid-* 变量即可套用本主题；
   - 深色模块（如 fs-cloud）把 --liquid-bg-page 设为自身深色即可，光斑自动隐藏。
   ============================================================ */

:root {
    /* ---------- 品牌色板（全站统一） ---------- */
    --liquid-primary: #165DFF;
    --liquid-primary-deep: #0E42D2;
    --liquid-secondary: #36CFC9;
    --liquid-secondary-deep: #0E8A86;
    --liquid-dark: #1D2129;
    --liquid-gray: #5C6773;
    --liquid-gray-light: #86909C;
    --liquid-light: #F2F3F5;

    /* ---------- 液态渐变（三段色带 + 220% 位移，形成流动感） ---------- */
    --liquid-grad: linear-gradient(120deg, #0E42D2 0%, #165DFF 34%, #36CFC9 72%, #165DFF 100%);
    --liquid-grad-soft: linear-gradient(120deg, rgba(22, 93, 255, .12) 0%, rgba(54, 207, 201, .14) 100%);
    --liquid-grad-text: linear-gradient(100deg, #165DFF 10%, #2BB8B3 60%, #36CFC9 90%);

    /* ---------- 圆角体系（liquid radii） ---------- */
    --liquid-radius-sm: .625rem;   /* 10px 小控件 */
    --liquid-radius: 1.125rem;     /* 18px 常规卡片/控件 */
    --liquid-radius-lg: 1.625rem;  /* 26px 主卡片 */
    --liquid-radius-xl: 2.25rem;   /* 36px 大块容器 */
    --liquid-radius-pill: 999px;

    /* ---------- 柔和阴影（带主色倾向） ---------- */
    --liquid-shadow-sm: 0 2px 10px rgba(22, 93, 255, .07), 0 1px 3px rgba(29, 33, 41, .05);
    --liquid-shadow: 0 10px 28px -8px rgba(22, 93, 255, .16), 0 4px 12px rgba(29, 33, 41, .05);
    --liquid-shadow-lg: 0 22px 48px -14px rgba(22, 93, 255, .24), 0 10px 24px rgba(29, 33, 41, .07);
    --liquid-shadow-glow: 0 14px 34px -8px rgba(22, 93, 255, .38), 0 6px 18px rgba(54, 207, 201, .26);

    /* ---------- 磨砂玻璃 ---------- */
    --liquid-glass-bg: rgba(255, 255, 255, .68);
    --liquid-glass-bg-strong: rgba(255, 255, 255, .82);
    --liquid-glass-border: rgba(255, 255, 255, .55);
    --liquid-glass-blur: 18px;

    /* ---------- 页面底色与流动光斑 ---------- */
    --liquid-bg-page: linear-gradient(180deg, #F7FAFF 0%, #EAF3FF 42%, #F3FDFB 100%);
    --liquid-blob-1: rgba(22, 93, 255, .18);
    --liquid-blob-2: rgba(54, 207, 201, .18);
    --liquid-blob-3: rgba(22, 93, 255, .10);

    /* ---------- 弹性缓动（Spring / Liquid ease） ---------- */
    --liquid-spring: cubic-bezier(.34, 1.56, .64, 1);
    --liquid-ease: cubic-bezier(.22, .68, .36, 1);
    --liquid-duration: .42s;
}

/* ============================================================
   1. 动态渐变背景：页面底色 + 两团缓慢漂移的液态光斑
   ============================================================ */
html {
    background-color: #F5F9FF;
}

body {
    background-image: var(--liquid-bg-page);
    background-attachment: fixed;
}

/* 光斑：radial-gradient 无绘制区域，不会拦截任何鼠标事件 */
html::before,
html::after {
    content: "";
    position: fixed;
    inset: -25vmax;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    transition: opacity .6s ease;
}

html::before {
    background-image:
        radial-gradient(38vmax 30vmax at 14% 12%, var(--liquid-blob-1), rgba(22, 93, 255, 0) 68%),
        radial-gradient(34vmax 28vmax at 86% 78%, var(--liquid-blob-2), rgba(54, 207, 201, 0) 66%);
    animation: liquid-drift-a 26s ease-in-out infinite;
}

html::after {
    background-image:
        radial-gradient(30vmax 26vmax at 72% 22%, var(--liquid-blob-3), rgba(22, 93, 255, 0) 70%),
        radial-gradient(26vmax 22vmax at 26% 88%, var(--liquid-blob-2), rgba(54, 207, 201, 0) 68%);
    animation: liquid-drift-b 34s ease-in-out infinite;
}

@keyframes liquid-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    35%      { transform: translate3d(4vmax, -3vmax, 0) scale(1.06); }
    70%      { transform: translate3d(-3vmax, 2.5vmax, 0) scale(1.03); }
}

@keyframes liquid-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
    40%      { transform: translate3d(-5vmax, 3vmax, 0) scale(1); }
    75%      { transform: translate3d(3vmax, -2vmax, 0) scale(1.05); }
}

/* ============================================================
   2. 圆角体系：放大既有圆角档位（不改变元素尺寸与布局）
   ============================================================ */
:is(.rounded, .rounded-lg) {
    border-radius: var(--liquid-radius-sm);
}

:is(.rounded-xl) {
    border-radius: var(--liquid-radius);
}

:is(.rounded-2xl) {
    border-radius: var(--liquid-radius-lg);
}

:is(.rounded-3xl) {
    border-radius: var(--liquid-radius-xl);
}

/* .rounded-full 保持正圆 / 胶囊，不做改动 */

/* ============================================================
   3. 柔和阴影 + 通透质感：卡片类容器
   ============================================================ */
:is(.card, .glass-card, .liquid-card, .stat-card, .feature-card, .service-card, .info-card) {
    background: var(--liquid-glass-bg);
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--liquid-glass-blur)) saturate(1.4);
    border: 1px solid var(--liquid-glass-border);
    border-radius: var(--liquid-radius-lg);
    box-shadow: var(--liquid-shadow);
}

/* 已有阴影工具类统一替换为“液态投影” */
:is(.shadow-sm, .shadow) {
    box-shadow: var(--liquid-shadow-sm);
}

:is(.shadow-md) {
    box-shadow: var(--liquid-shadow);
}

:is(.shadow-lg) {
    box-shadow: var(--liquid-shadow);
}

:is(.shadow-xl, .shadow-2xl) {
    box-shadow: var(--liquid-shadow-lg);
}

/* ============================================================
   4. 液态悬停：弹性缩放 + 波纹扩散 + 按压回弹
   ============================================================ */
@keyframes liquid-spring-in {
    0%   { transform: scale(.94); }
    60%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* 波纹扩散（.liquid-ripple 由 main.js 自动挂到主操作元素上） */
@keyframes liquid-ripple {
    0%   { transform: scale(0); opacity: .5; }
    100% { transform: scale(1); opacity: 0; }
}

/* 可点击元素：按钮 / 链接 / 卡片 */
:is(button, a, .btn, .card, .card-hover, .category, .advantage, .tech-item, .stat-item, .stat-card, .job-card, .result-item) {
    transition:
        transform var(--liquid-duration) var(--liquid-spring),
        box-shadow var(--liquid-duration) var(--liquid-ease),
        background-color .3s var(--liquid-ease),
        background-position .6s var(--liquid-ease),
        border-color .3s var(--liquid-ease),
        color .25s ease,
        opacity .3s ease;
}

/* 悬停：轻微上浮 + 弹性放大 */
:is(a, button, .btn, .card, .card-hover):hover {
    transform: translateY(-3px) scale(1.025);
    will-change: transform;
}

/* 按压：回弹收缩，模拟液体受压 */
:is(a, button, .btn):active {
    transform: translateY(0) scale(.97);
    transition-duration: .12s;
}

/* 波纹层：仅对显式带 .liquid-ripple 的元素生效（避免误伤布局） */
.liquid-ripple {
    overflow: hidden;
    isolation: isolate;
}

.liquid-ripple::after {
    content: "";
    position: absolute;
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
    width: var(--ripple-size, 220px);
    height: var(--ripple-size, 220px);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, currentColor 40%, rgba(0, 0, 0, 0) 72%);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.liquid-ripple:hover::after {
    animation: liquid-ripple .78s var(--liquid-ease);
}

/* 表单控件：圆角 + 聚焦光环 */
:is(input, textarea, select) {
    border-radius: var(--liquid-radius-sm);
    transition: box-shadow .3s var(--liquid-ease), border-color .3s var(--liquid-ease), background-color .3s var(--liquid-ease);
}

:is(input, textarea, select):focus {
    outline: none;
    border-color: rgba(22, 93, 255, .55);
    box-shadow: 0 0 0 4px rgba(22, 93, 255, .14), 0 6px 18px rgba(22, 93, 255, .12);
}

/* ============================================================
   5. 动态渐变基座：主色 / 渐变 / 渐变文字 / 玻璃
   ============================================================ */
.bg-primary {
    background-color: var(--liquid-primary);
}

/* 液态渐变：background-size 拉伸后位移，实现平滑流动 */
.hero-gradient,
.liquid-gradient {
    background-image: var(--liquid-grad);
    background-size: 220% 220%;
    background-position: 0% 50%;
    animation: liquid-flow 14s ease-in-out infinite;
}

@keyframes liquid-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 液态文字 */
.liquid-text {
    background-image: var(--liquid-grad-text);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: liquid-flow 10s ease-in-out infinite;
}

/* 磨砂玻璃工具类 */
.glass,
.liquid-glass {
    background: var(--liquid-glass-bg);
    border: 1px solid var(--liquid-glass-border);
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(1.5);
    backdrop-filter: blur(var(--liquid-glass-blur)) saturate(1.5);
    box-shadow: var(--liquid-shadow-sm);
}

/* 浅色分区（.bg-light）改为半透明渐变，让环境光斑与页面渐变透出，增强流动感 */
.bg-light {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(22, 93, 255, .045) 0%, rgba(54, 207, 201, .07) 100%);
}

/* 液态阴影工具类 */
.shadow-liquid {
    box-shadow: var(--liquid-shadow);
}

.shadow-liquid-lg {
    box-shadow: var(--liquid-shadow-lg);
}

.shadow-liquid-glow {
    box-shadow: var(--liquid-shadow-glow);
}

/* 液态分隔线（替代生硬的 1px 实线） */
.liquid-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(22, 93, 255, 0) 0%, rgba(22, 93, 255, .22) 22%, rgba(54, 207, 201, .28) 78%, rgba(54, 207, 201, 0) 100%);
}

/* ============================================================
   5.5 液态页面加载器（Liquid Loader）—— 取代传统旋转圆圈
   结构：.page-loader > .loader-content > .loader-spinner + .loader-text
   视觉：白色“液态水球”缓慢形变 + 外圈柔和光晕扩散（通透呼吸感）
   采 !important 以统一覆盖各模块 / 内联页遗留的旧 .loader-spinner 旋转样式
   ============================================================ */
@keyframes liquid-morph {
    0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: scale(1); }
    30%      { border-radius: 62% 38% 34% 66% / 52% 34% 66% 48%; transform: scale(1.08); }
    60%      { border-radius: 38% 62% 57% 43% / 46% 63% 37% 54%; transform: scale(0.94); }
}

@keyframes liquid-halo {
    0%   { transform: scale(0.7); opacity: 0.75; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes liquid-breathe {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

.page-loader {
    background-image: var(--liquid-grad) !important;
    background-size: 220% 220% !important;
    animation: liquid-flow 6s ease-in-out infinite !important;
}

.loader-spinner {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto 1.4rem !important;
    border: none !important;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.72) 100%) !important;
    box-shadow: 0 12px 32px -6px rgba(22, 93, 255, 0.5), inset 0 0 14px rgba(54, 207, 201, 0.4) !important;
    border-radius: 46% 54% 52% 48% / 50% 46% 54% 50% !important;
    animation: liquid-morph 2.8s var(--liquid-ease) infinite !important;
}

.loader-spinner::before {
    content: "" !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    animation: liquid-halo 2.8s var(--liquid-ease) infinite !important;
}

.loader-content {
    color: #ffffff !important;
}

.loader-text {
    color: rgba(255, 255, 255, 0.92) !important;
    letter-spacing: 0.14em !important;
    animation: liquid-breathe 2.8s ease-in-out infinite !important;
}

/* ============================================================
   6. 无障碍：尊重系统“减少动态效果”偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html::before,
    html::after,
    .hero-gradient,
    .liquid-gradient,
    .liquid-text,
    .page-loader,
    .loader-spinner,
    .loader-spinner::before,
    .loader-text,
    .liquid-ripple:hover::after {
        animation: none !important;
    }

    :is(a, button, .btn, .card, .card-hover):hover,
    :is(a, button, .btn):active {
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}