/**
 * Hetian Intro v0.3 —— 开屏动画 + 节日彩蛋
 *
 * 开屏：只呈现公司 logo，v0.3 起固定毛笔字版（?ht_logo=pinyin 仅调试回看），
 * 纯色块背景——light=纸白 #F5F4F0 + 黑墨（平时，老板定调黑字黑颗粒）；
 * red=纯红 #A6130D + 白墨（节日窗口）。不用任何渐变（老板拍板：渐变很 low）。
 * 毛笔字版动效：黑墨粒子先汇聚成「禾」再汇聚成「田」，笔触晕入接管（JS 驱动）。
 * 力量感（v0.3 加重，借鉴对马岛之魂重墨 UI）：飞行墨痕拖尾 + 硬刹缓动 +
 * 落墨晕染 + 落字飞溅墨点 + 加大顿挫。
 * 拼音版动效：整体自遮罩浮出 + 扫描线一道（保留 v0.1 已验证的语言）。
 * 纪律：#ht-intro 默认 display:none，引导脚本加 html.ht-intro-on 才显示；
 * 无 JS / 爬虫 / reduced-motion 全部直接看到完整页面。
 */

#ht-intro {
  /* light 主题（v0.3 默认，纸白底黑墨）：纯色块宣纸白，字与颗粒=石墨黑（VI 黑）；
     拼音 logo 走品牌红（原版浅底红标，与站头一致，v0.4 恢复混播时对齐） */
  --i-panel: #F5F4F0;
  --i-logo: #E61F18;
  --i-fg: #1B1B1D;
  --i-line: #1B1B1D;
  --i-bar-bg: rgba(27, 27, 29, .14);
  --i-accent: #E61F18;   /* 四角框留品牌红一线，黑字红角=纸上钤印 */
  --i-part-ease: cubic-bezier(.76, 0, .24, 1);

  display: none;
  position: fixed;
  inset: 0;
  z-index: 99995; /* 高于全页噪点 9990，低于 transition.js 幕布 99999 */
  overflow: hidden;
  pointer-events: auto;
  background: var(--i-panel); /* 纯色，无渐变 */
}

html.ht-intro-on #ht-intro { display: flex; }
html.ht-intro-on { overflow: hidden; }

/* ---- red 主题（红黑，节日窗口）：纯红块 + 白墨/黑标 ---- */
html.ht-intro-t-red #ht-intro {
  --i-panel: #A6130D;
  --i-logo: #17171A;
  --i-fg: #17171A;
  --i-line: #17171A;
  --i-bar-bg: rgba(0, 0, 0, .22);
  --i-accent: #17171A;
}

/* 开屏期间按住 hero 入场编排；ht-intro-out 一到即整体释放 */
html.ht-intro-on:not(.ht-intro-out) .ht-hero,
html.ht-intro-on:not(.ht-intro-out) .ht-hero * {
  animation-play-state: paused !important;
}

/* ---- 两片幕布（退场时上下分开，露出页面） ---- */
#ht-intro .ht-intro__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: var(--i-panel);
  z-index: 0;
  will-change: transform;
}
#ht-intro .ht-intro__panel--top { top: 0; }
#ht-intro .ht-intro__panel--bot { bottom: 0; }

/* ---- 四角工程定位框（纯几何，无文字） ---- */
#ht-intro .ht-intro__frame {
  position: absolute;
  inset: 20px;
  z-index: 2;
  pointer-events: none;
}
#ht-intro .ht-intro__frame i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--i-accent);
  opacity: 0;
  animation: ht-intro-corner .5s ease both;
}
#ht-intro .ht-intro__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; animation-delay: .08s; }
#ht-intro .ht-intro__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; animation-delay: .16s; }
#ht-intro .ht-intro__frame i:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; animation-delay: .24s; }
#ht-intro .ht-intro__frame i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; animation-delay: .32s; }
@keyframes ht-intro-corner {
  from { opacity: 0; }
  to   { opacity: .5; }
}

/* ---- 中央内容 ---- */
#ht-intro .ht-intro__core {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  text-align: center;
  padding: 0 24px;
}

/* 两个 logo 版本：引导脚本随机抽中一个加 ht-logo-brush / ht-logo-pinyin */
#ht-intro .ht-intro__logo { display: none; }
#ht-intro.ht-logo-pinyin .ht-intro__logo--pinyin { display: block; }
#ht-intro.ht-logo-brush  .ht-intro__logo--brush  { display: block; }

/* ===== 拼音版：遮罩浮出 + 扫描线 ===== */
#ht-intro .ht-intro__logo--pinyin {
  position: relative;
  width: min(300px, 68vw);
  overflow: hidden;
}
#ht-intro .ht-intro__logo-svg {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(112%);
  animation: ht-intro-rise .85s cubic-bezier(.19, .8, .22, 1) .18s forwards;
}
#ht-intro .ht-intro__logo-svg path { fill: var(--i-logo); }
#ht-intro .ht-intro__logo--pinyin::after {
  content: "";
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: 0;
  width: 2px;
  background: var(--i-accent);
  opacity: 0;
  box-shadow: 0 0 12px var(--i-accent);
  animation: ht-intro-scan .95s cubic-bezier(.6, .05, .3, 1) .34s both;
}
@keyframes ht-intro-scan {
  0%   { left: 0; opacity: 0; }
  12%  { opacity: .8; }
  88%  { opacity: .8; }
  100% { left: calc(100% - 2px); opacity: 0; }
}
@keyframes ht-intro-rise { to { transform: none; } }

/* ===== 毛笔字版：黑墨粒子汇聚成字（先「禾」后「田」）→ 笔触晕入接管 ===== */
#ht-intro .ht-intro__logo--brush {
  position: relative;
  width: min(420px, 82vw);
}
/* 纸白底黑字：素材是白字 webp，直接反色成石墨黑（alpha 不动，边缘平滑）；
   节日红底主题单独翻回白字 */
#ht-intro .ht-intro__logo--brush img:first-child {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
  /* v0.4 浸染感：1.5s 起从 10px 湿墨晕里 0.72s 收干成型（与二期粒子落地交叠） */
  animation: ht-intro-ink-in .72s cubic-bezier(.2, .65, .25, 1) 1.5s both;
}
@keyframes ht-intro-ink-in {
  0%   { opacity: 0; filter: invert(1) blur(10px); transform: scale(1.045); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: invert(1) blur(0); transform: none; }
}
html.ht-intro-t-red #ht-intro .ht-intro__logo--brush img:first-child {
  filter: none;
  animation-name: ht-intro-ink-in-raw;
}
@keyframes ht-intro-ink-in-raw {
  0%   { opacity: 0; filter: blur(10px); transform: scale(1.045); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
/* 每字聚齐瞬间整体一沉（顿挫，JS 在 820/1150ms 加 ht-thud）——v0.3 加重：
   6px 砸落 + 微挤压 + 半像素回弹，落定如钤印 */
#ht-intro .ht-intro__logo--brush.ht-thud {
  animation: ht-intro-thud .24s cubic-bezier(.2, 0, .3, 1);
}
@keyframes ht-intro-thud {
  0%   { transform: none; }
  30%  { transform: translateY(6px) scale(1.025, .972); }
  62%  { transform: translateY(-1px) scale(.998, 1.004); }
  100% { transform: none; }
}
/* 粒子画布：盖在笔触图上，汇聚完成后随字淡出并由 JS 移除 */
#ht-intro .ht-intro__morph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 进度线（两种版本共用） */
#ht-intro .ht-intro__bar {
  display: block;
  width: 210px;
  height: 2px;
  margin-top: 30px;
  background: var(--i-bar-bg);
  overflow: hidden;
}
#ht-intro .ht-intro__bar i {
  display: block;
  height: 100%;
  background: var(--i-line);
  transform: scaleX(0);
  transform-origin: left center;
  animation: ht-intro-load 1.55s cubic-bezier(.3, .6, .2, 1) .25s both;
}
@keyframes ht-intro-load { to { transform: scaleX(1); } }

/* ---- 退场编排（html.ht-intro-out）：内容先收，幕布再上下分开 ---- */
html.ht-intro-out #ht-intro .ht-intro__frame {
  opacity: 0 !important;
  transition: opacity .22s ease;
}
html.ht-intro-out #ht-intro .ht-intro__core {
  opacity: 0;
  transform: translateY(-14px) scale(.985);
  transition: opacity .36s ease, transform .36s ease;
}
html.ht-intro-out #ht-intro .ht-intro__panel--top {
  transform: translateY(-101%);
  transition: transform .68s var(--i-part-ease) .16s;
}
html.ht-intro-out #ht-intro .ht-intro__panel--bot {
  transform: translateY(101%);
  transition: transform .68s var(--i-part-ease) .24s;
}

/* ============================================================
 * 节日彩蛋（右下角禾田印章徽标，独立于开屏）
 * ============================================================ */
#ht-egg {
  --egg-accent: #E61F18;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9985; /* 高于内容，低于开屏与切换幕布 */
  display: none;
  align-items: center;
  gap: 10px;
  max-width: min(340px, calc(100vw - 36px));
  padding: 10px 34px 10px 10px;
  background: #0B0B0D;
  border: 1px solid rgba(230, 31, 24, .35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  cursor: pointer;
  opacity: 0;
}
html.ht-egg-on #ht-egg { display: flex; }
/* 入场：等开屏结束（intro.js 加 ht-egg-go）或无开屏时由 js 兜底触发 */
html.ht-egg-go #ht-egg { animation: ht-egg-stamp .45s cubic-bezier(.2, 1.25, .3, 1) both; }
#ht-egg:hover { border-color: rgba(230, 31, 24, .7); }

#ht-egg .ht-egg__seal {
  flex: 0 0 auto;
  display: flex; /* 竖排「禾田」二字图居中钤印（传统两字印排法） */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: var(--egg-accent);
  cursor: pointer;
}
#ht-egg .ht-egg__seal img {
  display: block;
  width: 62%;
  height: auto;
}
#ht-egg .ht-egg__text {
  min-width: 0;
  font-family: 'Oswald', 'Inter', sans-serif;
  line-height: 1.35;
  text-align: left;
}
#ht-egg .ht-egg__text strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #EDEDEF;
}
#ht-egg .ht-egg__text span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(237, 237, 239, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ht-egg .ht-egg__close {
  position: absolute;
  top: 4px;
  right: 7px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: rgba(237, 237, 239, .4);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
/* v0.9.22 触达面积：可见 × 约 13×14，热区扩到约 40×40；× 位置与观感不动。
   外扩量以不吞左侧印章/文案的点击为限（× 贴胶囊右上角，热区仅向外溢 ≤7px）；
   点击优先级仍是 close 最高（intro.js 先判 close 再判 seal/text）。 */
#ht-egg .ht-egg__close::after {
  content: '';
  position: absolute;
  inset: -10px -14px -16px -13px;
}
#ht-egg .ht-egg__close:hover { color: #EDEDEF; }

/* 问候卡（点击徽标弹出） */
#ht-egg .ht-egg__pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 264px;
  padding: 14px 16px;
  background: #0B0B0D;
  border: 1px solid rgba(230, 31, 24, .45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#ht-egg.ht-egg-open .ht-egg__pop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#ht-egg .ht-egg__pop strong {
  display: block;
  margin-bottom: 6px;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--egg-accent);
}
#ht-egg .ht-egg__pop p {
  margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #EDEDEF;
}
#ht-egg .ht-egg__pop-local { color: rgba(237, 237, 239, .65) !important; font-size: 11px !important; }
#ht-egg .ht-egg__pop-sign {
  display: block;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(237, 237, 239, .4);
}

@keyframes ht-egg-stamp {
  from { opacity: 0; transform: scale(1.25) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 可访问性与兜底 ---- */
@media (prefers-reduced-motion: reduce) {
  html.ht-intro-on #ht-intro { display: none !important; }
  html.ht-egg-go #ht-egg { animation: none; opacity: 1; }
}
@media print {
  #ht-intro, #ht-egg { display: none !important; }
}

@media (max-width: 480px) {
  #ht-intro .ht-intro__logo--pinyin { width: 74vw; }
  #ht-intro .ht-intro__logo--brush { width: 86vw; }
  #ht-intro .ht-intro__bar { width: 160px; }
  #ht-intro .ht-intro__frame { inset: 14px; }
  #ht-egg { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  #ht-egg .ht-egg__pop { width: min(264px, calc(100vw - 48px)); }
}