/*
 * 全站高级感与流畅度增强层
 * 叠加在预编译的 tailwind.css 之后加载，只做视觉与动效升级，不改动内容结构。
 * 滚动渐显 / 导航吸顶状态 / 移动端菜单等交互由 js/main.js 配合 class 实现。
 */

:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --navy: #0b1324;
    --gold: #c6a15b;
    --gold-light: #e9d6a6;
}

/* ---------- 基础排版与滚动 ---------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem; /* 锚点跳转时避开固定导航栏 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body { background-color: #f8fafc; }
h1, h2 { letter-spacing: -0.015em; }
h1 { text-wrap: balance; }
h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: #e0f2fe; color: #0c4a6e; }

/* 细窄滚动条 */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* 页面之间平滑淡入淡出（支持的浏览器） */
@view-transition { navigation: auto; }

/* ---------- 统一缓动曲线，让所有过渡更顺滑 ---------- */
.transition-all, .transition-colors, .transition-transform, .transition-shadow, .transition-opacity {
    transition-timing-function: var(--ease-out);
    transition-duration: .35s;
}

/* ---------- 更柔和、有层次的阴影 ---------- */
.shadow-sm { --tw-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px -2px rgba(15, 23, 42, .06); }
.shadow-md { --tw-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 10px 24px -8px rgba(15, 23, 42, .12); }
.shadow-lg:not([class*="shadow-sky"]) { --tw-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 18px 40px -16px rgba(15, 23, 42, .18); }
.shadow-xl:not([class*="shadow-sky"]) { --tw-shadow: 0 4px 8px rgba(15, 23, 42, .04), 0 28px 56px -20px rgba(15, 23, 42, .25); }
.shadow-2xl { --tw-shadow: 0 8px 16px rgba(15, 23, 42, .06), 0 40px 80px -24px rgba(15, 23, 42, .35); }

/* ---------- 导航栏 ---------- */
nav.fixed {
    background-color: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    --tw-shadow: 0 1px 0 rgba(15, 23, 42, .06);
    transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
nav.fixed.nav-scrolled {
    background-color: rgba(255, 255, 255, .94);
    --tw-shadow: 0 1px 0 rgba(15, 23, 42, .05), 0 12px 32px -16px rgba(15, 23, 42, .18);
}
nav.fixed img { transition: transform .5s var(--ease-out); }
nav.fixed a[href="/"]:hover img { transform: scale(1.03); }

/* 桌面导航链接：金色细下划线 */
nav .md\:flex > a.text-slate-600,
nav .md\:flex > .group > button {
    position: relative;
    letter-spacing: .01em;
}
nav .md\:flex > a.text-slate-600::after,
nav .md\:flex > .group > button::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .4s var(--ease-out);
}
nav .md\:flex > a.text-slate-600:hover::after,
nav .md\:flex > .group:hover > button::after { transform: scaleX(1); }
nav .md\:flex > .group > button .fa-chevron-down { transition: transform .35s var(--ease-out); }
nav .md\:flex > .group:hover > button .fa-chevron-down { transform: rotate(180deg); }

/* 服务下拉菜单：淡入 + 轻微上浮，替代生硬的显示/隐藏 */
nav .group > .absolute {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
nav .group:hover > .absolute,
nav .group:focus-within > .absolute {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
nav .group > .absolute a { transition: background-color .25s, color .25s, padding-left .3s var(--ease-out); }
nav .group > .absolute a:hover { padding-left: 1.6rem; }

/* 导航主按钮 */
nav a[href="/#contact"] {
    background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s;
}
nav a[href="/#contact"]:hover {
    background-image: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    transform: translateY(-1px);
}

/* ---------- 移动端菜单：淡入滑出 ---------- */
#mobile-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s;
    overflow-y: auto;
}
#mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
#mobile-menu > div > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
#mobile-menu.is-open > div > * { opacity: 1; transform: none; }
#mobile-menu.is-open > div > *:nth-child(2) { transition-delay: .04s; }
#mobile-menu.is-open > div > *:nth-child(3) { transition-delay: .08s; }
#mobile-menu.is-open > div > *:nth-child(4) { transition-delay: .12s; }
#mobile-menu.is-open > div > *:nth-child(5) { transition-delay: .16s; }
#mobile-menu.is-open > div > *:nth-child(6) { transition-delay: .2s; }
#mobile-menu.is-open > div > *:nth-child(7) { transition-delay: .24s; }
#mobile-sub-menu.flex { animation: fadeUp .4s var(--ease-out) both; }
#mobile-menu-icon { transition: transform .35s var(--ease-out); }

/* ---------- 首屏 Hero：背景缓慢推近 + 文字依次浮现 ---------- */
.hero-bg, .mm2h-hero-bg, .edu-hero-bg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero-bg::before, .mm2h-hero-bg::before, .edu-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: inherit;
    background-size: cover;
    background-position: center;
    transform-origin: 60% 40%;
    animation: heroZoom 18s var(--ease-out) both;
}
.hero-bg::after, .mm2h-hero-bg::after, .edu-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 15% 20%, rgba(14, 165, 233, .18), transparent 60%),
        radial-gradient(50% 60% at 90% 100%, rgba(198, 161, 91, .16), transparent 60%),
        linear-gradient(180deg, transparent 60%, rgba(11, 19, 36, .45));
}
.faq-hero {
    position: relative;
    z-index: 20; /* 让搜索联想下拉框浮在下方内容之上 */
    background-color: var(--navy);
    background-image:
        radial-gradient(55% 90% at 10% 0%, rgba(14, 165, 233, .22), transparent 60%),
        radial-gradient(45% 80% at 95% 100%, rgba(198, 161, 91, .18), transparent 60%);
}
.hero-content > * { animation: fadeUp .9s var(--ease-out) both; }
.hero-content > *:nth-child(2) { animation-delay: .1s; }
.hero-content > *:nth-child(3) { animation-delay: .2s; }
.hero-content > *:nth-child(4) { animation-delay: .3s; }
.hero-content h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }

/* Hero 徽章：玻璃质感 */
#hero .hero-content > span:first-child {
    letter-spacing: .08em;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(233, 214, 166, .35);
    color: var(--gold-light);
}

/* ---------- 按钮 ---------- */
a.rounded-full.font-bold, button.rounded-full, button[type="submit"] {
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s, color .35s, border-color .35s;
}
a.bg-sky-500.rounded-full {
    background-image: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 10px 30px -10px rgba(14, 165, 233, .6);
}
a.bg-sky-500.rounded-full:hover { box-shadow: 0 16px 36px -10px rgba(14, 165, 233, .7); }
/* 用轻微上浮替代放大，更克制 */
a.rounded-full.hover\:scale-105:hover { --tw-scale-x: 1.02; --tw-scale-y: 1.02; --tw-translate-y: -2px; }
button[type="submit"]:hover { transform: translateY(-1px); }

/* ---------- 执照横幅：深海军蓝 + 金色 ---------- */
section.bg-sky-900 {
    background-color: var(--navy);
    background-image: linear-gradient(90deg, rgba(198, 161, 91, .08), transparent 30%, transparent 70%, rgba(198, 161, 91, .08));
    border-color: rgba(198, 161, 91, .25);
}
section.bg-sky-900 .fa-certificate { color: var(--gold); filter: drop-shadow(0 4px 12px rgba(198, 161, 91, .35)); }
section.bg-sky-900 .text-sky-300 { color: var(--gold-light); }
section.bg-sky-900 .bg-sky-700 { background-color: rgba(198, 161, 91, .3); }
section.bg-sky-900 button { border-color: rgba(233, 214, 166, .5); color: var(--gold-light); }
section.bg-sky-900 button:hover { background-color: rgba(198, 161, 91, .15); color: #fff; }

/* ---------- 区块标题：金色装饰 ---------- */
section .text-center > h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
section h3.uppercase.tracking-widest {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}
section h3.uppercase.tracking-widest::before,
.text-center > h3.uppercase.tracking-widest::after {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.text-center > h3.uppercase.tracking-widest::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* ---------- 卡片：顺滑上浮 + 图片缓慢放大 ---------- */
#services .grid > * {
    background-color: #fff;
    border-color: #eef2f7;
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
}
#services .grid > *:hover {
    transform: translateY(-6px);
    border-color: rgba(198, 161, 91, .35);
    --tw-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 48px -20px rgba(15, 23, 42, .22);
}
#services { background-color: #f8fafc; }

#team .flex-wrap > * { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
#team .flex-wrap > *:hover { --tw-shadow: 0 4px 8px rgba(15, 23, 42, .04), 0 32px 60px -24px rgba(15, 23, 42, .3); }
#team .flex-wrap > * > div:first-child { overflow: hidden; }
#team .flex-wrap > * img { transition: transform 1.2s var(--ease-out); }
#team .flex-wrap > *:hover img { transform: scale(1.06); }

#about .grid-cols-2 > div { transition: transform .4s var(--ease-out), background-color .4s; }
#about .grid-cols-2 > div:hover { transform: translateY(-3px); }

/* ---------- 表单 ---------- */
input, select, textarea {
    transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s;
}
form input:focus, form select:focus, form textarea:focus {
    border-color: #38bdf8;
    background-color: #fff;
}

/* ---------- FAQ 折叠：内容平滑展开 ---------- */
details[open] > .faq-answer-text { animation: fadeUp .45s var(--ease-out) both; }
.faq-item { transition: background-color .3s, box-shadow .4s var(--ease-out), border-color .3s; }
.faq-item[open] { background-color: #fff; border-color: #e2e8f0; box-shadow: 0 12px 32px -20px rgba(15, 23, 42, .25); }

/* ---------- 执照弹窗 ---------- */
#license-modal { animation: fadeIn .3s ease both; }
#license-modal > div { animation: modalIn .45s var(--ease-out) both; }

/* ---------- WhatsApp 悬浮按钮：柔和呼吸光圈替代跳动 ---------- */
a.fixed.animate-bounce[href*="wa.me"] {
    animation: none;
    background-image: linear-gradient(135deg, #2bd46b, #1ebe5a);
    box-shadow: 0 12px 28px -8px rgba(34, 197, 94, .6);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
a.fixed.animate-bounce[href*="wa.me"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(34, 197, 94, .45);
    z-index: -1;
    animation: pulseRing 2.6s var(--ease-out) infinite;
}
a.fixed.animate-bounce[href*="wa.me"]:hover { transform: translateY(-3px) scale(1.05); }

/* ---------- 滚动渐显（由 js/main.js 添加 class，无 JS 时内容照常显示） ---------- */
.reveal {
    opacity: 0;
    translate: 0 28px;
    transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* 懒加载图片：加载完成后淡入 */
img.img-fade { opacity: 0; transition: opacity .7s var(--ease-out); }
img.img-fade.is-loaded { opacity: 1; }

/* ---------- 关键帧 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes pulseRing {
    0% { transform: scale(1); opacity: .7; }
    70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- 尊重“减少动态效果”系统设置 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    @view-transition { navigation: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; translate: none; }
}