/* >>> hero-brand 由 tools/gen_site_hero.py 生成，勿手改
   字号书写动画：56 帧 @ 18.32fps，总时长 3.06s，播完停在最后一帧。
   实现：雪碧图（12270×3144，每帧 1227×524）作为 mask，元素自身填品牌蓝 ——
   白底出蓝字，且字形取的是高清 wordmark，放大不失真。
   容器尺寸只靠 --w 决定（--h 按字标比例算），改大小只改 --w。 */
.hero-brand {
  width: var(--w);
  height: var(--h);
  background-color: #024ad8;
  -webkit-mask-image: url("hero-brand.png");
  mask-image: url("hero-brand.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--w) * 10) calc(var(--h) * 6);
  mask-size: calc(var(--w) * 10) calc(var(--h) * 6);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation: hero-brand-write 3.06s steps(1, end) forwards;
}

/* 减动效偏好：直接出终帧 */
@media (prefers-reduced-motion: reduce) {
  .hero-brand { animation: none; -webkit-mask-position: calc(var(--w) * -5) calc(var(--h) * -5); mask-position: calc(var(--w) * -5) calc(var(--h) * -5); }
}

@keyframes hero-brand-write {
  0% { -webkit-mask-position: 0 0; mask-position: 0 0; }
  1.8182% { -webkit-mask-position: calc(var(--w) * -1) 0; mask-position: calc(var(--w) * -1) 0; }
  3.6364% { -webkit-mask-position: calc(var(--w) * -2) 0; mask-position: calc(var(--w) * -2) 0; }
  5.4545% { -webkit-mask-position: calc(var(--w) * -3) 0; mask-position: calc(var(--w) * -3) 0; }
  7.2727% { -webkit-mask-position: calc(var(--w) * -4) 0; mask-position: calc(var(--w) * -4) 0; }
  9.0909% { -webkit-mask-position: calc(var(--w) * -5) 0; mask-position: calc(var(--w) * -5) 0; }
  10.9091% { -webkit-mask-position: calc(var(--w) * -6) 0; mask-position: calc(var(--w) * -6) 0; }
  12.7273% { -webkit-mask-position: calc(var(--w) * -7) 0; mask-position: calc(var(--w) * -7) 0; }
  14.5455% { -webkit-mask-position: calc(var(--w) * -8) 0; mask-position: calc(var(--w) * -8) 0; }
  16.3636% { -webkit-mask-position: calc(var(--w) * -9) 0; mask-position: calc(var(--w) * -9) 0; }
  18.1818% { -webkit-mask-position: 0 calc(var(--h) * -1); mask-position: 0 calc(var(--h) * -1); }
  20.0% { -webkit-mask-position: calc(var(--w) * -1) calc(var(--h) * -1); mask-position: calc(var(--w) * -1) calc(var(--h) * -1); }
  21.8182% { -webkit-mask-position: calc(var(--w) * -2) calc(var(--h) * -1); mask-position: calc(var(--w) * -2) calc(var(--h) * -1); }
  23.6364% { -webkit-mask-position: calc(var(--w) * -3) calc(var(--h) * -1); mask-position: calc(var(--w) * -3) calc(var(--h) * -1); }
  25.4545% { -webkit-mask-position: calc(var(--w) * -4) calc(var(--h) * -1); mask-position: calc(var(--w) * -4) calc(var(--h) * -1); }
  27.2727% { -webkit-mask-position: calc(var(--w) * -5) calc(var(--h) * -1); mask-position: calc(var(--w) * -5) calc(var(--h) * -1); }
  29.0909% { -webkit-mask-position: calc(var(--w) * -6) calc(var(--h) * -1); mask-position: calc(var(--w) * -6) calc(var(--h) * -1); }
  30.9091% { -webkit-mask-position: calc(var(--w) * -7) calc(var(--h) * -1); mask-position: calc(var(--w) * -7) calc(var(--h) * -1); }
  32.7273% { -webkit-mask-position: calc(var(--w) * -8) calc(var(--h) * -1); mask-position: calc(var(--w) * -8) calc(var(--h) * -1); }
  34.5455% { -webkit-mask-position: calc(var(--w) * -9) calc(var(--h) * -1); mask-position: calc(var(--w) * -9) calc(var(--h) * -1); }
  36.3636% { -webkit-mask-position: 0 calc(var(--h) * -2); mask-position: 0 calc(var(--h) * -2); }
  38.1818% { -webkit-mask-position: calc(var(--w) * -1) calc(var(--h) * -2); mask-position: calc(var(--w) * -1) calc(var(--h) * -2); }
  40.0% { -webkit-mask-position: calc(var(--w) * -2) calc(var(--h) * -2); mask-position: calc(var(--w) * -2) calc(var(--h) * -2); }
  41.8182% { -webkit-mask-position: calc(var(--w) * -3) calc(var(--h) * -2); mask-position: calc(var(--w) * -3) calc(var(--h) * -2); }
  43.6364% { -webkit-mask-position: calc(var(--w) * -4) calc(var(--h) * -2); mask-position: calc(var(--w) * -4) calc(var(--h) * -2); }
  45.4545% { -webkit-mask-position: calc(var(--w) * -5) calc(var(--h) * -2); mask-position: calc(var(--w) * -5) calc(var(--h) * -2); }
  47.2727% { -webkit-mask-position: calc(var(--w) * -6) calc(var(--h) * -2); mask-position: calc(var(--w) * -6) calc(var(--h) * -2); }
  49.0909% { -webkit-mask-position: calc(var(--w) * -7) calc(var(--h) * -2); mask-position: calc(var(--w) * -7) calc(var(--h) * -2); }
  50.9091% { -webkit-mask-position: calc(var(--w) * -8) calc(var(--h) * -2); mask-position: calc(var(--w) * -8) calc(var(--h) * -2); }
  52.7273% { -webkit-mask-position: calc(var(--w) * -9) calc(var(--h) * -2); mask-position: calc(var(--w) * -9) calc(var(--h) * -2); }
  54.5455% { -webkit-mask-position: 0 calc(var(--h) * -3); mask-position: 0 calc(var(--h) * -3); }
  56.3636% { -webkit-mask-position: calc(var(--w) * -1) calc(var(--h) * -3); mask-position: calc(var(--w) * -1) calc(var(--h) * -3); }
  58.1818% { -webkit-mask-position: calc(var(--w) * -2) calc(var(--h) * -3); mask-position: calc(var(--w) * -2) calc(var(--h) * -3); }
  60.0% { -webkit-mask-position: calc(var(--w) * -3) calc(var(--h) * -3); mask-position: calc(var(--w) * -3) calc(var(--h) * -3); }
  61.8182% { -webkit-mask-position: calc(var(--w) * -4) calc(var(--h) * -3); mask-position: calc(var(--w) * -4) calc(var(--h) * -3); }
  63.6364% { -webkit-mask-position: calc(var(--w) * -5) calc(var(--h) * -3); mask-position: calc(var(--w) * -5) calc(var(--h) * -3); }
  65.4545% { -webkit-mask-position: calc(var(--w) * -6) calc(var(--h) * -3); mask-position: calc(var(--w) * -6) calc(var(--h) * -3); }
  67.2727% { -webkit-mask-position: calc(var(--w) * -7) calc(var(--h) * -3); mask-position: calc(var(--w) * -7) calc(var(--h) * -3); }
  69.0909% { -webkit-mask-position: calc(var(--w) * -8) calc(var(--h) * -3); mask-position: calc(var(--w) * -8) calc(var(--h) * -3); }
  70.9091% { -webkit-mask-position: calc(var(--w) * -9) calc(var(--h) * -3); mask-position: calc(var(--w) * -9) calc(var(--h) * -3); }
  72.7273% { -webkit-mask-position: 0 calc(var(--h) * -4); mask-position: 0 calc(var(--h) * -4); }
  74.5455% { -webkit-mask-position: calc(var(--w) * -1) calc(var(--h) * -4); mask-position: calc(var(--w) * -1) calc(var(--h) * -4); }
  76.3636% { -webkit-mask-position: calc(var(--w) * -2) calc(var(--h) * -4); mask-position: calc(var(--w) * -2) calc(var(--h) * -4); }
  78.1818% { -webkit-mask-position: calc(var(--w) * -3) calc(var(--h) * -4); mask-position: calc(var(--w) * -3) calc(var(--h) * -4); }
  80.0% { -webkit-mask-position: calc(var(--w) * -4) calc(var(--h) * -4); mask-position: calc(var(--w) * -4) calc(var(--h) * -4); }
  81.8182% { -webkit-mask-position: calc(var(--w) * -5) calc(var(--h) * -4); mask-position: calc(var(--w) * -5) calc(var(--h) * -4); }
  83.6364% { -webkit-mask-position: calc(var(--w) * -6) calc(var(--h) * -4); mask-position: calc(var(--w) * -6) calc(var(--h) * -4); }
  85.4545% { -webkit-mask-position: calc(var(--w) * -7) calc(var(--h) * -4); mask-position: calc(var(--w) * -7) calc(var(--h) * -4); }
  87.2727% { -webkit-mask-position: calc(var(--w) * -8) calc(var(--h) * -4); mask-position: calc(var(--w) * -8) calc(var(--h) * -4); }
  89.0909% { -webkit-mask-position: calc(var(--w) * -9) calc(var(--h) * -4); mask-position: calc(var(--w) * -9) calc(var(--h) * -4); }
  90.9091% { -webkit-mask-position: 0 calc(var(--h) * -5); mask-position: 0 calc(var(--h) * -5); }
  92.7273% { -webkit-mask-position: calc(var(--w) * -1) calc(var(--h) * -5); mask-position: calc(var(--w) * -1) calc(var(--h) * -5); }
  94.5455% { -webkit-mask-position: calc(var(--w) * -2) calc(var(--h) * -5); mask-position: calc(var(--w) * -2) calc(var(--h) * -5); }
  96.3636% { -webkit-mask-position: calc(var(--w) * -3) calc(var(--h) * -5); mask-position: calc(var(--w) * -3) calc(var(--h) * -5); }
  98.1818% { -webkit-mask-position: calc(var(--w) * -4) calc(var(--h) * -5); mask-position: calc(var(--w) * -4) calc(var(--h) * -5); }
  100% { -webkit-mask-position: calc(var(--w) * -5) calc(var(--h) * -5); mask-position: calc(var(--w) * -5) calc(var(--h) * -5); }
}
/* >>> hero-brand end <<< */