/* 自定义补丁 + 老站风格动画 / 调色板 */

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── 主色：天蓝 ───────────────────────────────────────── */
:root {
  --brand: #0ea5e9;       /* sky-500 */
  --brand-dark: #0284c7;  /* sky-600 */
  --brand-light: #e0f2fe; /* sky-100 */
  --ink: #0f172a;         /* slate-900 */
  --ink-soft: #475569;    /* slate-600 */
  --footer-bg: #0b2030;   /* 深海军蓝 */
}

/* ─── 进入动画：fade-up ───────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  animation: fadeUp .8s ease-out forwards;
}
.fade-up-delay-1 { animation-delay: .15s; }
.fade-up-delay-2 { animation-delay: .3s; }
.fade-up-delay-3 { animation-delay: .45s; }
.fade-up-delay-4 { animation-delay: .6s; }

/* IntersectionObserver 触发：默认隐藏，进入视口后加 .reveal-in */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.reveal-on-scroll.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 浮动 (subtle hero accents) ─────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float-anim { animation: floatY 6s ease-in-out infinite; }

/* ─── 渐变背景慢动 ───────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-anim {
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}

/* ─── 卡片 hover 通用 ──────────────────────────── */
.card-hover {
  transition: transform .35s ease, box-shadow .35s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(14, 165, 233, .35);
}

/* ─── 按钮 pulse (CTA) ────────────────────────── */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(14, 165, 233, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}
.btn-pulse { animation: pulseRing 2.4s infinite; }

/* ─── 老站风格 hero 渐变背景 ────────────────────── */
.hero-bg {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(56, 189, 248, .25), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(14, 165, 233, .15), transparent 60%),
    linear-gradient(180deg, #f0f9ff 0%, #ffffff 60%);
}

/* ─── 链接下划线动画 ───────────────────────────── */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--brand);
  transition: width .3s ease;
}
.link-underline:hover::after { width: 100%; }