/* ============================================================
   诺图创想 nitercreation — Immersive Dark Redesign (dogstudio-inspired)
   设计引擎：深色沉浸剧场风
   美学：近黑底 + 白字 + VI 青绿点缀 + 情绪爆点(珊瑚红，极少量)
        全屏 WebGL 品牌符号(六边形晶体) + 全屏编号菜单 + 幽灵大字案例列表
   ============================================================ */

/* ---------- 字体 ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* 深色沉浸调色板 */
  --bg: #0b0f12;
  --bg-2: #0f1419;
  --bg-3: #151b21;
  --panel: #12181e;
  --ink: #eef3f5;
  --ink-2: #93a1a8;          /* 辅助灰蓝 */
  --ink-3: #5b686f;          /* 更暗 */
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.16);

  --accent: #5ec6cf;         /* VI 亮青 — 主强调/CTA */
  --accent-2: #2f9aa6;       /* 深青 */
  --accent-ink: #06282d;     /* 青底深字 */
  --hot: #ff6b5e;            /* 情绪爆点(珊瑚红，极少量) */

  --font: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 140px;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity; /* 每页磁吸：滚动接近时自动吸附满整页 */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }

main { position: relative; z-index: 1; }
/* 每页磁吸：各屏区块滚动接近时自动吸附到顶部（scroll-snap-type: y proximity 在 html） */
.hero, .statement, .section, .footer { scroll-snap-align: start; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.section--alt { background: rgba(15,20,25,.72); }   /* 半透明，露出全局晶体 */
.section--ink { background: rgba(21,27,33,.82); color: var(--ink); }

/* ---------- 眉标 / 标题 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--accent); }

.sec-head { max-width: 760px; }
.sec-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.02; font-weight: 700; letter-spacing: -.02em;
  margin: var(--s4) 0 var(--s4);
}
.sec-sub { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--ink-2); max-width: 60ch; margin: 0; }

/* ---------- 导航（极简常驻） ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent; /* 首页顶部导航全透明，不遮猛犸象主视觉 */
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav.scrolled {
  background: transparent; /* 滚动后导航也保持全透明（不出现背景/毛玻璃） */
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; display: block; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(94,198,207,.35)); }
/* 首页导航：完整组合 logo（放大）+ 隐藏文字（logo 自带字标） */
.nav .brand-mark { width: auto; height: 54px; } /* 首页 logo 放大 */
.nav .brand-mark img { width: auto; height: 100%; } /* 不用 drop-shadow：headless/低配 GPU 对 filter+透明PNG 合成有兼容问题，且深色导航上原色已够清晰 */
.nav .brand-name { display: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name b { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.brand-name small { font-size: .6rem; letter-spacing: .2em; color: var(--ink-2); text-transform: uppercase; }

/* 桌面隐藏常驻链接，导航全部走全屏菜单 */
.nav-links { display: none; }
/* 语言切换（无边框，纯文字 + 当前语言青绿下划线） */
.lang { display: inline-flex; align-items: center; gap: 4px; }
.lang button {
  position: relative;
  border: 0; background: transparent; color: var(--ink-3);
  font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  padding: 6px 8px; cursor: pointer;
  transition: color .25s var(--ease);
}
.lang button:hover { color: var(--ink); }
.lang button.on { color: var(--accent); }
.lang button.on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px;
  height: 1.5px; background: var(--accent); border-radius: 1px;
}

/* 汉堡按钮（全屏菜单触发器） */
.burger {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  height: 40px; padding: 0 16px; border-radius: 2px; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.burger .bars { display: inline-flex; flex-direction: column; gap: 4px; }
.burger .bars span { width: 18px; height: 2px; background: var(--ink); display: block; transition: .3s var(--ease); }
.burger:hover { border-color: var(--accent); color: var(--accent); }
.burger:hover .bars span { background: var(--accent); }

/* ---------- 全屏覆盖菜单 ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(22px) saturate(120%);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gut);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.menu-overlay.open { opacity: 1; visibility: visible; transform: none; }
.menu-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 80% 20%, rgba(94,198,207,.14), transparent 60%);
  pointer-events: none;
}
.menu-top { position: absolute; top: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gut); }
.menu-close {
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  height: 40px; padding: 0 16px; border-radius: 2px; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.menu-close:hover { border-color: var(--accent); color: var(--accent); }
.menu-list { list-style: none; margin: 0; padding: 0; max-width: var(--maxw); margin-inline: auto; width: 100%; }
.menu-item { border-top: 1px solid var(--line); }
.menu-item a {
  display: flex; align-items: baseline; gap: var(--s5);
  padding: clamp(16px, 2.4vw, 30px) 0;
  font-size: clamp(2rem, 7vw, 5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1;
  color: var(--ink); transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.menu-item a:hover { color: var(--accent); padding-left: var(--s5); }
.menu-item .mi-n { font-size: .9rem; font-weight: 600; letter-spacing: .12em; color: var(--accent); transform: translateY(-.6em); }
.menu-item .mi-en { margin-left: auto; font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.menu-foot { max-width: var(--maxw); margin: var(--s8) auto 0; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); color: var(--ink-3); font-size: .86rem; }
.menu-foot a { color: var(--ink-2); }
.menu-foot a:hover { color: var(--accent); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 600; letter-spacing: .02em;
  padding: 15px 28px; border-radius: 2px; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #7ad8e0; transform: translateY(-2px); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--line:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- HERO（全屏 + 全局常驻 WebGL 品牌符号） ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden; padding-top: 72px;
  background: transparent; /* 露出贯穿整页的全局晶体 */
}
/* 全局常驻：固定全屏 WebGL 背景层 */
.hero-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.hero-canvas canvas { display: block; }
/* .hero::after 半透明压暗层已移除：首屏不再遮挡，猛犸完整呈现（dogstudio 式无遮挡 hero） */
.hero .wrap { position: relative; z-index: 2; width: 100%; max-width: none; padding-inline: clamp(1rem, 6vw, 8rem); }
.hero-copy { max-width: clamp(300px, 46vw, 640px); text-align: right; } /* 文字块收窄放左，块内右对齐（dogstudio 式） */
.hero-eyebrow { display: none; } /* 英文小字去掉 */
.hero h1 {
  font-family: inherit; /* sans */
  font-size: clamp(3.2rem, 8vw, 6.4rem); /* 整体放大 */
  line-height: 1.04; font-weight: 800;
  letter-spacing: -.005em;
  text-align: right; /* dogstudio 式：右对齐 */
  margin: 0 0 var(--s5); max-width: none;
}
.hero h1 > span { display: block; }
.hero h1 .hl { color: var(--accent); font-style: normal; }
.hero-lead { display: none; } /* 小字去掉 */
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

/* ---------- 每屏向下提示箭头（点击切下一屏） ---------- */
.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 5; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(11,15,18,.45); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  animation: hintfloat 2.4s var(--ease) infinite;
}
.scroll-hint svg { width: 18px; height: 18px; }
.scroll-hint:hover { color: var(--accent); background: rgba(94,198,207,.18); }
@keyframes hintfloat {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 9px); }
}

/* ---------- STATEMENT（态度标语） ---------- */
.statement {
  position: relative;
  padding-block: clamp(72px, 10vw, 140px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 100vh; display: flex; align-items: center; /* 撑满一屏，磁吸时整页显示 */
}
.statement .wrap { max-width: var(--maxw); width: 100%; }
.statement-q {
  font-size: clamp(3rem, 6.5vw, 5.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  max-width: none;
}
.statement-q .rot { color: var(--accent); display: block; } /* 第二句独立成行（青绿） */
.statement-q .rot::after { content: ""; }
.statement-tag { display: none; }
/* 数据区标题弱化为副标题，与口号拉开主次 */
.statement .sec-title {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: var(--ink-3);
  font-weight: 600; letter-spacing: .08em;
}

/* ---------- STATS ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: rgba(11,15,18,.5); padding: var(--s6) var(--s5); }
.stat-n { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.stat-l { margin-top: var(--s3); font-size: .86rem; color: var(--ink-2); }

/* ---------- 服务支柱 ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); margin-top: var(--s8); }
.pillar { border-top: 2px solid var(--accent); padding-top: var(--s5); position: relative; transition: transform .4s var(--ease); }
.pillar:hover { transform: translateY(-6px); }
.pillar-n { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; color: var(--ink-3); line-height: 1; }
.pillar h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; margin: var(--s4) 0 var(--s3); letter-spacing: -.01em; }
.pillar p { color: var(--ink-2); margin: 0; font-size: .98rem; }

/* ---------- 能力矩阵 ---------- */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s8); }
.cap { background: rgba(11,15,18,.5); padding: var(--s6) var(--s5); transition: background .3s var(--ease); }
.cap:hover { background: rgba(21,27,33,.7); }
.cap h4 { margin: var(--s4) 0 var(--s2); font-size: 1.08rem; font-weight: 700; }
.cap p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.cap .ic { font-size: 1.4rem; color: var(--accent); }

/* ---------- 流程 ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s5); margin-top: var(--s8); }
.step { border-top: 1px solid var(--line-2); padding-top: var(--s4); }
.step .n { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.step h4 { margin: var(--s3) 0 var(--s2); font-size: 1.02rem; font-weight: 700; }
.step p { margin: 0; color: var(--ink-2); font-size: .88rem; }

/* ---------- 案例列表（白底三列网格，参考 Pentagram） ---------- */
.cases-list-inner { max-width: none; padding: 88px clamp(14px, 2.4vw, 40px) 0; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(8px, 1vw, 16px); row-gap: 96px; } /* 卡片间净空隙 96 + 下方文字区(~72) ≈ 图片到图片 168 */
.case { cursor: pointer; color: inherit; text-decoration: none; display: block; }
.case-media { position: relative; aspect-ratio: 480 / 320; overflow: hidden; background: #eef1f3; transition: box-shadow .35s var(--ease); }
.case:hover .case-media { box-shadow: 0 14px 40px rgba(11,15,18,.14); }
.case-media .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); }
.case:hover .case-media .img { transform: scale(1.05); }
.case-info { padding: 12px 2px 0; }
.case-title { margin: 0; font-size: 1rem; font-weight: 700; color: #14181b; line-height: 1.32; letter-spacing: -.01em; transition: color .25s var(--ease); }
.case:hover .case-title { color: var(--accent); }
.case-desc { margin: 8px 0 0; font-size: .82rem; color: #6b767d; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 案例卡片上浮动画：进入视口时从下浮入，左→中→右按列依次（--d 延迟） */
.case.case-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.case.case-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .case.case-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 客户 logo 墙（VI 文字占位） ---------- */
.clients {
  min-height: 100vh; display: flex; align-items: center;
  padding-block: clamp(60px, 8vw, 100px);
  border-bottom: 1px solid var(--line); position: relative;
}
.clients::before { /* 柔化猛犸，让前景 chips 文字可读 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,18,.4), rgba(11,15,18,.55));
  pointer-events: none;
}
.clients > .wrap { position: relative; z-index: 1; width: 100%; }
.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: var(--s7);
  padding-left: 0;
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
}
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(74px, 8vw, 96px);
  padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  background: rgba(255,255,255,.82); /* 半透明白色磨砂底，原色 logo 清晰且柔和 */
  backdrop-filter: blur(4px);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  cursor: default;
}
.logo-chip .lc-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  /* 保留 logo 原色 */
  filter: none;
  opacity: 1;
  transition: transform .35s var(--ease);
}
.logo-chip:hover {
  border-color: rgba(94,198,207,.7);
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.logo-chip:hover .lc-img { transform: scale(1.04); }

/* 竖/方版 logo 放大 30%（外框不变，相对普通显示放大；仅今麦郎用） */
.logo-chip--zoom .lc-img {
  max-height: 130%;
  max-width: 130%;
}

/* 横版 logo（如物产中大/今麦郎）：外框不变，仅让 logo 适度放大、不撑满不裁切 */
.logo-chip--wide {
  overflow: hidden;
}
.logo-chip--wide .lc-img {
  width: 80%; height: auto; max-width: 80%; max-height: 100%;
}

/* ---------- 联系（简化：信息墙，与页脚同一屏） ---------- */
#contact {
  position: relative;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(40px, 5vw, 64px);
}
#contact > .wrap { position: relative; z-index: 1; width: 100%; }
#contact .footer { margin-top: auto; padding-block: var(--s5) var(--s4); background: transparent; border-top: 0; } /* 极简页脚：透明、无线、贴底 */
#contact .footer .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-inline: clamp(1.5rem, 6vw, 6rem); }
#contact .foot-brand img { height: 40px; width: auto; display: block; }
#contact .foot-bottom { justify-content: flex-start; gap: 22px; margin-top: 0; padding-top: 0; border-top: 0; }
#contact .contact-grid { margin-bottom: clamp(48px, 7vh, 80px); } /* 联系信息与页脚明显区隔 */
#contact .footer a, #contact .footer h4, #contact .footer p, #contact .footer span { text-shadow: 0 1px 4px rgba(0,0,0,.85); } /* 透明底上的可读阴影 */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: var(--s7); }
.contact-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  background: transparent; /* 透明，露出猛犸 */
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.contact-card:hover { border-color: rgba(94,198,207,.55); background: rgba(94,198,207,.06); }
.contact-card .k { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.contact-card .v { font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 600; line-height: 1.5; word-break: break-word; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.contact-card a { color: var(--ink); }
.contact-card a:hover { color: var(--accent); }
.wechat-qr {
  width: 132px; height: 132px; margin-top: 4px;
  border-radius: 12px; background: #fff; padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  object-fit: contain;
}

/* ---------- 页脚 ---------- */
.footer { background: rgba(11,15,18,.82); color: var(--ink); padding-block: var(--s8) var(--s6); border-top: 1px solid var(--line); position: relative; z-index: 1; }
.foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); }
.foot-cols h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s4); font-weight: 700; }
.foot-cols a { display: block; color: var(--ink-2); padding: 5px 0; font-size: .9rem; transition: color .2s; }
.foot-cols a:hover { color: var(--accent); }
.foot-about { max-width: 34ch; color: var(--ink-2); font-size: .92rem; }
.foot-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s4); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); }
.foot-bottom a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; opacity: .85; transition: opacity .2s, color .2s; }
.foot-bottom a:hover { opacity: 1; color: var(--accent); }

/* ---------- 案例详情页（case.html）v113 大图叠字 ---------- */
.case-detail { padding-top: 0; }

/* 首图：全屏大图 + 左下角标题/卖点 */
.case-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-bottom: 8px;
}
.case-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero-gradient {
  position: absolute; inset: 0; z-index: 1;
  /* 仅底部约 30% 保留极淡暗角以保证文字可读，上方照片主体完全透明清晰 */
  background: linear-gradient(to top, rgba(11,15,18,.55) 0%, rgba(11,15,18,.30) 15%, rgba(11,15,18,0) 32%);
}
.case-hero-inner { position: relative; z-index: 2; width: 100%; padding: var(--s8) 0 var(--s7); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s7); flex-wrap: wrap; }
/* 右下角常驻返回按钮：与左上 logo 同逻辑，始终悬浮在案例页，不随滚动消失 */
.case-float-back {
  position: fixed; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px);
  z-index: 200; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  color: #1b3a66; font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  background: rgba(255,255,255,.85); border: 1px solid rgba(27,58,102,.18);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); backdrop-filter: blur(6px);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.case-float-back:hover { background: var(--accent); color: #08222b; border-color: transparent; transform: translateY(-2px); }
.case-hero-main { flex: 1 1 320px; min-width: 260px; }
.case-hero-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; }
.case-hero-head h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; max-width: 18ch; }
.case-hero-expo { margin: 0 0 var(--s3); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; max-width: 18ch; }
.case-meta { display: flex; gap: var(--s5); flex-wrap: wrap; color: #fff; font-size: .92rem; margin: var(--s4) 0 var(--s3); }
.case-hero-lead { margin: var(--s3) 0 0; font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255,255,255,.9); line-height: 1.65; max-width: 56ch; }
.case-meta b { color: rgba(255,255,255,.72); font-weight: 600; }

/* 项目简介：放在首图与第二张图之间，白底黑字 */
.case-intro { padding: var(--s7) var(--s4); display: flex; justify-content: flex-end; background: #fff; }
.case-intro p {
  font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.6; font-weight: 400; color: #111;
  border-left: 3px solid var(--accent); padding-left: var(--s5); padding-right: 0; max-width: 700px; text-align: left;
}

/* 卖点大图区：卖点标题叠在图上，图片之间白底保底 */
.case-media-section {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #fff;
  margin-bottom: 14px;
}
.case-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-media-gradient {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11,15,18,.88) 0%, rgba(11,15,18,.2) 55%, transparent 100%);
}
.case-media-inner {
  position: absolute; z-index: 2;
  width: 100%; max-width: 900px;
  padding: var(--s8) var(--s7) var(--s7);
}
/* 文字位置：左下 / 右下 / 左中 / 右中 / 底中，每张图随机 */
.case-media-inner.pos-lb { left: 0; bottom: 0; text-align: left; }
.case-media-inner.pos-rb { right: 0; bottom: 0; text-align: right; }
.case-media-inner.pos-lc { left: 0; top: 42%; transform: translateY(-50%); max-width: 520px; text-align: left; }
.case-media-inner.pos-rc { right: 0; top: 42%; transform: translateY(-50%); max-width: 520px; text-align: right; }
.case-media-inner.pos-bc { left: 50%; bottom: 0; transform: translateX(-50%); max-width: 760px; text-align: center; }
/* 对应渐变方向，保证文字可读 */
.case-media-section:has(.pos-rb) .case-media-gradient { background: linear-gradient(to top left, rgba(11,15,18,.9) 0%, rgba(11,15,18,.18) 60%, transparent 100%); }
.case-media-section:has(.pos-lc) .case-media-gradient { background: linear-gradient(to right, rgba(11,15,18,.9) 0%, rgba(11,15,18,.18) 60%, transparent 100%); }
.case-media-section:has(.pos-rc) .case-media-gradient { background: linear-gradient(to left, rgba(11,15,18,.9) 0%, rgba(11,15,18,.18) 60%, transparent 100%); }
.case-media-section:has(.pos-bc) .case-media-gradient { background: linear-gradient(to top, rgba(11,15,18,.92) 0%, rgba(11,15,18,.25) 55%, transparent 100%); }
.case-media-label { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--accent); margin-bottom: var(--s3); }
.case-media-title { margin: 0; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; max-width: 28ch; }
.case-media-inner.pos-bc .case-media-title,
.case-media-inner.pos-rb .case-media-title,
.case-media-inner.pos-rc .case-media-title { margin-left: auto; margin-right: auto; }
.case-media-inner.pos-rb .case-media-title,
.case-media-inner.pos-rc .case-media-title { margin-right: 0; }
.case-media-lead { font-size: clamp(.95rem, 1.2vw, 1.05rem); color: rgba(245,247,250,.92); max-width: 56ch; line-height: 1.65; margin-top: var(--s2); text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.case-media-inner.pos-bc .case-media-lead { margin-left: auto; margin-right: auto; }
.case-media-inner.pos-rb .case-media-lead,
.case-media-inner.pos-rc .case-media-lead { margin-left: auto; }

/* 文字上浮动画（进入视口时触发）：主图文案 + 各图优点文字依次浮入 */
.case-media-label, .case-media-title, .case-media-lead,
.case-hero-expo, .case-hero-head h1, .case-meta, .case-hero-lead {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.case-media-section.is-in .case-media-label,
.case-media-section.is-in .case-media-title,
.case-media-section.is-in .case-media-lead,
.case-hero.is-in .case-hero-expo,
.case-hero.is-in .case-hero-head h1,
.case-hero.is-in .case-meta,
.case-hero.is-in .case-hero-lead {
  opacity: 1;
  transform: none;
}
/* 错落延迟：编号 → 标题 → 副文 依次浮现 */
.case-media-section.is-in .case-media-title { transition-delay: .09s; }
.case-media-section.is-in .case-media-lead { transition-delay: .18s; }
.case-hero.is-in .case-hero-head h1 { transition-delay: .06s; }
.case-hero.is-in .case-meta { transition-delay: .15s; }
.case-hero.is-in .case-hero-lead { transition-delay: .24s; }

/* 两图之间的文字说明 */
.case-text-block { padding: var(--s9) var(--s4); display: flex; justify-content: center; background: var(--bg); }
.case-text-block p { color: var(--ink-2); line-height: 1.85; max-width: 64ch; font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* 上下篇 */
.case-nav { display: flex; justify-content: space-between; gap: var(--s5); margin-top: var(--s9); border-top: 1px solid var(--line); padding-top: var(--s6); flex-wrap: wrap; }
.case-nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.case-nav a:hover { color: var(--accent); }
.case-nav .cn-sub { font-size: .76rem; color: var(--ink-3); font-weight: 400; display: block; margin-bottom: 4px; }
.case-nav .cn-next { text-align: right; }

/* 案例详情页底部导航：白底黑字，与深色首页区分 */
.case-nav-section { background: #fff; color: #111; padding-block: var(--s9) var(--s7); }
.case-nav-section .case-nav { margin-top: 0; border-top-color: rgba(0,0,0,.1); }
.case-nav-section .case-nav a { color: #111; }
.case-nav-section .case-nav a:hover { color: var(--accent-2); }
.case-nav-section .case-nav .cn-sub { color: #6b767d; }

/* 案例详情页页脚：白底黑字 */
body[data-page="case"] .footer { background: #fff; color: #111; border-top-color: rgba(0,0,0,.1); }
body[data-page="case"] .foot-bottom { border-top-color: rgba(0,0,0,.1); color: #6b767d; }
/* 案例详情页整页底色改为白：图片之间的缝隙（margin 区）与页脚之上不再透出深色 body */
body[data-page="case"] { background: #fff; }

.case-empty { padding: var(--s9) 0; text-align: center; color: var(--ink-2); }

/* ---------- 案例导航（第三屏：左半文字列表，右半留给猛犸） ---------- */
.cases-nav { min-height: 100vh; display: flex; align-items: center; position: relative; }
.cases-nav::before { /* 轻微柔化猛犸，保证文字可读但不过度遮挡 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,15,18,.55), rgba(11,15,18,.12) 55%, transparent 75%);
  pointer-events: none;
}
.cases-nav .wrap { position: relative; z-index: 1; width: 100%; max-width: none; padding-inline: clamp(1rem, 6vw, 8rem); }
.cases-nav-title { margin-bottom: clamp(18px, 2.6vh, 34px); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.region-list { list-style: none; margin: 0; padding: 0; width: clamp(320px, 52vw, 760px); }
.region-list li + li { margin-top: clamp(6px, 1vw, 12px); }
.region-list a {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline; gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(6px, 1.1vw, 12px) 10px;
  border-radius: 12px;
  font-size: clamp(1.2rem, 2.3vw, 1.85rem); font-weight: 800; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none;
  transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.region-list .rg-no { font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .12em; align-self: center; }
.region-list .rg-en { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); align-self: center; white-space: nowrap; }
.region-list a:hover {
  color: var(--accent); background: rgba(94,198,207,.06);
  transform: translateX(14px);
}
.region-list a:hover .rg-en { color: var(--accent); }

/* 区域列表页（cases.html）白底（对齐案例详情页） */
body[data-page="cases"] { background: #fff; }
body[data-page="cases"] .cases-list-head,
body[data-page="cases"] .cases-list-body { background: #fff; color: #14181b; }
body[data-page="cases"] .sec-title { color: #14181b; }
body[data-page="cases"] .case-back { color: var(--accent); }
body[data-page="cases"] .region-tab { color: #5a646b; border-color: rgba(0,0,0,.14); }
body[data-page="cases"] .region-tab:hover { color: #14181b; border-color: var(--accent); }
body[data-page="cases"] .region-empty { color: #6b767d; }
body[data-page="cases"] .footer { background: #fff; color: #111; border-top-color: rgba(0,0,0,.1); }
body[data-page="cases"] .footer .foot-bottom { border-top-color: rgba(0,0,0,.1); color: #6b767d; }
body[data-page="cases"] .foot-brand { display: none; } /* 案例页底部去掉 logo */
.cases-list-head { padding-top: 92px; padding-bottom: 0; } /* 仅避让 72px 顶部导航 + 余量 */
.cases-list-head .wrap { padding-inline: clamp(14px, 2.4vw, 40px); } /* 与图片网格左侧对齐 */
.cases-list-head .region-tabs { margin-bottom: 0; }
.cases-list-head .sec-title { margin-bottom: 0; }
.cases-list-body { padding-block: 0; }
.cases-list-body .case-grid { margin-top: 0; }
.region-empty { padding: var(--s9) 0; text-align: center; color: var(--ink-2); font-size: 1.1rem; }

/* 底部超大品牌字母 NITERCREATION（加载页字母 PNG 拼成，logo 渐变色，白底） */
.mega-footer { background: #fff; overflow: hidden; padding: clamp(48px, 8vw, 100px) 0 clamp(24px, 4vw, 48px); }
.mega-letters { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(2px, .3vw, 6px); line-height: 0; }
.mega-letter {
  display: inline-block;
  height: clamp(2.2rem, 8vw, 6rem);
  width: auto;
  opacity: 0;
  transform: translateY(40px) scale(.92);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  transition-delay: var(--d, 0s);
}
.mega-letter.is-in { opacity: 1; transform: translateY(0) scale(1); }

/* 区域分类导航栏（cases.html 顶部：当前区高亮，点击切换） */
.region-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--s5) 0 var(--s4);
}
.region-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .88rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.region-tab .rt-no { font-size: .72rem; font-weight: 700; color: var(--accent); }
.region-tab:hover { color: var(--ink); border-color: var(--accent); }
.region-tabs .region-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.region-tabs .region-tab.on .rt-no { color: #fff; }

/* ---------- 滚动揭示动效 ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; gap: var(--s6); }
  .caps { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .chapter-body { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 640px) {
  .chapter-media { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; }
  .menu-item .mi-en { display: none; }
  .case-grid { grid-template-columns: 1fr; }
}

/* ---------- 手机端适配（≤767px） ---------- */
@media (max-width: 767px) {
  /* 磁吸彻底关闭：html 关 snap + 所有对齐元素 scroll-snap-align:none（双保险，手机无任何吸附） */
  html { scroll-snap-type: none; }
  .hero, .statement, .section, .clients, .cases-nav, #contact, .footer { scroll-snap-align: none; }

  /* 首屏保持全屏（品牌首屏）；其余屏取消强制一屏高度，内容按自然高度排布，屏间更紧凑 */
  .hero { min-height: 100vh; min-height: 100dvh; }
  .statement, .clients, .cases-nav, #contact { min-height: auto; }

  /* 导航：压高 + logo 46px（约定）+ 刘海安全区 */
  .nav-inner { height: 60px; padding-top: env(safe-area-inset-top); }
  .nav .brand-mark { height: 46px; }
  .burger { height: 38px; padding: 0 13px; }

  .hero { padding-top: 60px; }
  .hero .wrap { padding-inline: 20px; }
  .hero-copy { max-width: 100%; } /* 窄屏占满宽度，块内保持右对齐 */
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); margin-bottom: var(--s4); }
  .hero-cta { gap: 10px; }
  .btn { width: 100%; justify-content: center; padding: 14px 20px; } /* 全宽按钮，拇指好点 */
  .scroll-hint { display: none; } /* 触摸滚动不需要向下箭头 */

  .section { padding-block: 52px; } /* 紧凑：桌面 72-150px → 手机 52px */
  .statement { padding-block: 52px; }
  .statement .sec-head { margin-top: var(--s6); } /* 数据区标题上移，减少屏内空隙 */
  .statement-q { font-size: clamp(1.9rem, 8.5vw, 2.9rem); }

  .menu-top { height: 60px; }
  .menu-item a { font-size: clamp(1.7rem, 8vw, 2.6rem); gap: 14px; padding: 14px 0; }
  .menu-item .mi-n { font-size: .78rem; transform: translateY(-.4em); }
  .menu-foot { margin-top: var(--s6); font-size: .8rem; gap: var(--s3); }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: var(--s5) var(--s4); }

  .logo-wall { grid-template-columns: repeat(2, 1fr); max-width: 460px; } /* 手机两列，深色玻璃底原色 */
  .logo-chip { width: auto; height: 72px; padding: 14px 10px; backdrop-filter: none; }

  .contact-card .v { font-size: 1rem; }
  .wechat-qr { width: 116px; height: 116px; }

  .case-hero { height: 92vh; min-height: 480px; }
  .case-hero-inner { padding: var(--s6) 0 var(--s5); flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .case-hero-head h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .case-hero-expo { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .case-meta { gap: var(--s3); font-size: .84rem; }
  .case-intro { padding: var(--s6) var(--s4); }
  .case-intro p { font-size: 1.05rem; padding-left: var(--s4); padding-right: 0; text-align: left; }
  .case-media-section { min-height: 80vh; }
  .case-media-inner { padding: var(--s6) 0 var(--s5); }
  .case-media-title { font-size: clamp(1.25rem, 5vw, 1.7rem); }
  .case-media-lead { font-size: .92rem; }
  .case-text-block { padding: var(--s7) var(--s4); }

  .region-list { width: 100%; }
  .region-list .rg-en { display: none; } /* 手机省空间 */
  .region-list a { grid-template-columns: 30px 1fr; gap: 10px; font-size: 1.15rem; }

  /* 区域分类导航栏手机紧凑 */
  .region-tabs { gap: 6px; margin: var(--s4) 0 var(--s3); }
  .region-tab { padding: 8px 13px; font-size: .8rem; gap: 6px; }
  .region-tab .rt-no { font-size: .66rem; }

  /* 屏与屏之间、屏内板块间距紧凑化 */
  .clients { padding-block: 56px; }
  .cases-nav { padding-block: 64px 72px; }
  #contact { padding-block: 48px; }
  .pillars, .caps, .process, .case-grid, .logo-wall { margin-top: var(--s6); }
  .contact-grid { margin-top: var(--s5); }

  .preloader-ring { width: 96px; height: 96px; }
  .preloader-mammoth { width: 72px; }
  .preloader-text { font-size: .66rem; margin-top: 20px; }
}

/* 触摸设备：点击瞬间的 hover 位移不生效，避免点按跳动 */
@media (hover: none) {
  .pillar:hover, .logo-chip:hover, .contact-card:hover,
  .btn--primary:hover, .btn--line:hover, .region-list a:hover { transform: none; }
  .case:hover .case-media .img { transform: none; }
}

/* ---------- 筛选器 ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s6); }
.filter-btn {
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; padding: 8px 16px; border-radius: 999px;
  transition: all .25s var(--ease);
}
.filter-btn:hover { color: var(--ink); border-color: var(--accent); }
.filter-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.filter-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.filter-label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }

/* 态度轮播过渡 */
.statement-q { transition: opacity .5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .case-media .img, .hero-scroll .line, .pillar { transition: none; }
  .case-media-label, .case-media-title, .case-media-lead,
  .case-hero-expo, .case-hero-head h1, .case-meta, .case-hero-lead {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---------- 加载动画 v105：VI 青绿纯色底 + 逐字变换 + logo 放大 ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5ec6cf; /* VI 青绿纯色底 */
  overflow: hidden;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
/* 非首次访问：<head> 内联脚本在首屏绘制前给 <html> 加 .preloader-hidden，本规则让 preloader 从第一帧起隐藏，消除「返回」时的青绿闪现 */
.preloader-hidden #preloader { display: none !important; }
.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader-letter-img {
  height: clamp(34px, 4.2vw, 44px); /* 固定高度，让 I 与其他字母视觉等高，不再被宽度拉变形 */
  width: auto;
  user-select: none;
  will-change: opacity;
  transition: opacity .12s ease; /* 快速切换，参考 phamilypharma 的高速字母轮播 */
}
/* 字母切换：仅淡出，不做位移/缩放 */
.preloader-letter-img.flip {
  opacity: 0;
}
.preloader-logo {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  width: clamp(75px, 19vw, 170px); /* logo 缩小一倍 */
  height: auto;
  transform: translateY(20px); /* 起始略下沉，浮入到位 */
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); /* 柔和浮入，放慢更有仪式感 */
}
/* logo 阶段：字母隐去，logo 浮入 */
.preloader.logo-phase .preloader-letter-img { opacity: 0; }
.preloader.logo-phase .preloader-logo {
  opacity: 1;
  transform: translateY(0); /* 从下方轻柔上浮到位 */
}
/* 白光从中心柔和扩散：矢量径向渐变 + scale 放大，边缘羽化无锯齿 */
.preloader-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 52%, rgba(255,255,255,0) 78%);
  opacity: 0;
  transform: scale(.3);
  z-index: 3;
  pointer-events: none;
}
.preloader.flash .preloader-flash {
  animation: flashSpread 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes flashSpread {
  0%   { opacity: 0; transform: scale(.3); }
  18%  { opacity: 1; }
  100% { opacity: 1; transform: scale(4); }
}
@media (prefers-reduced-motion: reduce) {
  .preloader-letter { transition: opacity .12s ease; }
  .preloader.flash .preloader-flash { animation-duration: .5s; }
}