/* ============================================
   墨坊官网首页 V1.0.13 — 样式文件
   独立 CSS，由 墨坊官网首页V1.0.13.html 引用
   ============================================ */

:root {
  --paper: #F6F3EC;
  --ink: #1C1917;
  --ink-soft: #6F6A61;
  --ink-faint: #9A948A;
  --line: #E0DCD2;
  --line-deep: #C9C3B6;
  --card: #FFFFFF;
  --shadow: rgba(28, 25, 23, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }

/* 纸张噪点质感 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ===== 背景：整屏水墨山水（PNG） + 流动水墨（Canvas） ===== */
.landscape {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: url("landscape.png") center / cover no-repeat;
  opacity: 0.42;   /* 背景图透明度再加 20%（0.62→0.42），更通透 */
}
#ink-canvas,
#bird-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#bird-canvas { z-index: 1; }

/* ===== 主体：LOGO · 字标 ===== */
.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 44px 24px 40px;
}
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* LOGO：去白框，直接浮于背景；可点击跳转 */
.logo-card {
  padding: 0;
  will-change: transform;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(7px);
  animation: card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}
@keyframes card-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.logo-card a {
  display: block;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.logo-card a:hover { transform: scale(1.015); }
.logo-card a:active { transform: scale(0.99); }
.logo-card a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
  border-radius: 4px;
}
.logo-card img {
  display: block;
  width: clamp(200px, 36vw, 400px);
  height: auto;
}

/* 分隔细线与品牌字标 */
.divider {
  width: 0;
  height: 1px;
  margin: 26px auto 16px;
  background: var(--line-deep);
  animation: line-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.52s forwards;
}
@keyframes line-grow { to { width: 64px; } }
.mark {
  display: inline-block;
  background: #1C1917;
  color: #F6F3EC;
  font-size: 11px;
  letter-spacing: 0.3em;
  padding: 9px 20px 9px 24px;   /* 右侧补 4px，抵消末字符间距 */
  margin-right: -4px;
  opacity: 0;
  transform: translateY(8px);
  animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.64s forwards;
}
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 底部：公司名称与备案号 ===== */
.footer {
  position: relative;
  z-index: 1;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.76s forwards;
}
.footer .company {
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.12em;
  margin-right: -0.12em;
}
.footer .icp {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer .icp:hover { color: var(--ink); }
.footer .icp:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== 响应式：窄屏 & 矮屏 ===== */
@media (max-width: 480px) {
  .hero { padding: 36px 20px 32px; }
  .logo-card img { width: clamp(180px, 60vw, 280px); }
  .divider { margin-top: 22px; }
  .mark { font-size: 9.5px; letter-spacing: 0.18em; padding: 8px 14px 8px 18px; margin-right: -3px; }
  .footer { padding: 20px 16px 24px; }
  .footer .company { font-size: 13px; letter-spacing: 0.08em; margin-right: -0.08em; }
}
@media (max-height: 700px) {
  .hero { padding: 24px 20px 24px; }
  .logo-card img { width: clamp(180px, 30vw, 320px); }
  .divider { margin: 18px auto 12px; }
  .footer { padding: 18px 16px 20px; }
}