/* 文件描述：首页公告广播条 — 半透明白底；入场滑入；过长文案走马灯 */
.home-broadcast.is-overlay {
  position: absolute;
  top: calc(var(--nav-height, 64px) + 12px);
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  padding: 0;
  pointer-events: none;
  overflow: visible;
}

.home-broadcast__shell {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--max-width, 1440px);
  margin: 0 auto;
  padding: 0 var(--space-gutter, 32px);
  box-sizing: border-box;
}

.home-broadcast__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: 100%;
  padding: 6px 12px 6px 10px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 87, 156, 0.08);
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* 入场：自右侧滑入 */
  transform: translateX(120%);
  opacity: 0;
  animation: home-broadcast-slide-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 入场结束后，hover 可轻微上浮（避免打断入场 transform） */
.home-broadcast.is-ready .home-broadcast__inner {
  transform: translateX(0);
  opacity: 1;
  animation: none;
}

.home-broadcast.is-ready .home-broadcast__inner:hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(0, 87, 156, 0.14);
  transform: translateX(-4px);
}

.home-broadcast.is-ready .home-broadcast__inner:hover .home-broadcast__text {
  color: var(--primary, #00579c);
}

.home-broadcast.is-ready .home-broadcast__inner:hover .home-broadcast__arrow {
  max-width: 18px;
  opacity: 1;
  margin-left: 2px;
  transform: translateX(0);
}

.home-broadcast__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  line-height: 0;
  transition: transform 0.25s ease;
}

.home-broadcast.is-ready .home-broadcast__inner:hover .home-broadcast__icon {
  transform: scale(1.06);
}

.home-broadcast__icon img {
  display: block;
  width: 32px;
  height: 32px;
}

/* 文案可视窗口：固定上限，超出由走马灯处理 */
.home-broadcast__viewport {
  flex: 0 1 auto;
  box-sizing: border-box;
  display: block;
  max-width: 220px;
  min-width: 0;
  overflow: hidden;
}

.home-broadcast__track {
  display: inline-flex;
  flex-wrap: nowrap; /* 两段文案必须横排，避免小屏叠字 */
  align-items: center;
  width: max-content;
  max-width: 100%;
}

/* 默认：单行截断；第二份文案隐藏 */
.home-broadcast__text {
  box-sizing: border-box;
  display: block;
  padding: 4px 0;
  color: var(--blue, #115391);
  font-size: var(--fs-14, 14px);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.home-broadcast:not(.is-marquee) .home-broadcast__track {
  max-width: 100%;
}

.home-broadcast:not(.is-marquee) .home-broadcast__text:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.home-broadcast:not(.is-marquee) .home-broadcast__text[aria-hidden="true"] {
  display: none;
}

/* 溢出：无缝循环向左滚动（两段文案各占一半轨道） */
.home-broadcast.is-marquee .home-broadcast__track {
  max-width: none;
  gap: 0;
  animation: home-broadcast-marquee 12s linear infinite;
}

.home-broadcast.is-marquee .home-broadcast__text {
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  flex: 0 0 auto;
  /* 段间距计入半宽，保证 translateX(-50%) 无缝 */
  padding-right: 32px;
}

.home-broadcast.is-marquee .home-broadcast__text[aria-hidden="true"] {
  display: block;
}

/* 右箭头：默认收起，hover 自左侧滑入 */
.home-broadcast__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--primary, #00579c);
  transform: translateX(-10px);
  transition:
    max-width 0.28s ease,
    opacity 0.28s ease,
    margin-left 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-broadcast__arrow svg {
  display: block;
  flex-shrink: 0;
}

@keyframes home-broadcast-slide-in {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 两段等宽文案 + gap：平移 50% 即无缝衔接 */
@keyframes home-broadcast-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-broadcast__inner,
  .home-broadcast.is-ready .home-broadcast__inner,
  .home-broadcast.is-ready .home-broadcast__inner:hover {
    transform: none;
    opacity: 1;
    animation: none;
  }

  .home-broadcast__arrow {
    transition: none;
  }

  .home-broadcast.is-ready .home-broadcast__inner:hover .home-broadcast__arrow {
    max-width: 18px;
    opacity: 1;
    transform: none;
  }

  /* 减弱动效：关闭走马灯，退回截断 */
  .home-broadcast.is-marquee .home-broadcast__track {
    animation: none;
    max-width: 100%;
    gap: 0;
  }

  .home-broadcast.is-marquee .home-broadcast__text:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    padding-right: 0;
  }

  .home-broadcast.is-marquee .home-broadcast__text[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero:has(> .home-broadcast) .hero-slide-inner,
  .hero:has(> .home-broadcast) .hero-inner {
    padding-top: calc(var(--nav-height, 64px) + 56px);
  }

  .home-broadcast.is-overlay {
    top: calc(var(--nav-height, 64px) + 6px);
  }

  .home-broadcast__shell {
    justify-content: center;
  }

  .home-broadcast__inner {
    gap: 8px;
    max-width: 100%;
    padding: 5px 10px 5px 8px;
    border-radius: 8px;
    /* iOS：去掉 blur，避免与固定头叠层导致花屏 */
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .home-broadcast__icon,
  .home-broadcast__icon img {
    width: 28px;
    height: 28px;
  }

  .home-broadcast__viewport {
    max-width: min(220px, calc(100vw - 96px));
  }

  /* 仅静态态截断；走马灯时两段都要完整宽度，否则第一段溢出叠到第二段 */
  .home-broadcast:not(.is-marquee) .home-broadcast__text:first-child {
    max-width: min(220px, calc(100vw - 96px));
  }

  .home-broadcast.is-marquee .home-broadcast__text {
    max-width: none;
    overflow: visible;
  }

  .home-broadcast__text {
    padding: 3px 0;
    font-size: 13px;
  }
}