/* ============================================================
   Hero 轮播 — 式和元官网 2026-10-22
   由 js/hero-carousel.js 自动接管 section.hero，页面无需改结构。
   4 帧交叉淡入 + 缓推（Ken Burns），5.6s 一帧
   ============================================================ */

/* 底色兜底：stage 第一帧加载前不闪白 */
.hero.hc { background-image: none; background-color: #241713; }

.hero.hc::before { z-index: 2; }

.hero.hc .hc-stage {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
}

.hero.hc .hc-frame {
  position: absolute; inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.05s ease, transform 8.5s linear;
  will-change: opacity, transform;
}
.hero.hc .hc-frame.is-on { opacity: 1; transform: scale(1); }

/* —— 文字层：每帧一屏，交叉淡入 —— */
.hero.hc .hc-pane {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px;
  color: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity .85s ease, visibility .85s;
}
.hero.hc .hc-pane.is-on { opacity: 1; visibility: visible; }

/* 第 1 帧沿用原有 .hero-content 的排版，这里只补定位 */
.hero.hc .hero-content { position: absolute; inset: 0; z-index: 3; }

.hero.hc .hc-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300; letter-spacing: 4px;
  line-height: 1.25; margin-bottom: 16px;
}

/* —— 左右箭头 —— */
.hero.hc .hc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 46px; height: 46px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(20, 14, 12, .16);
  color: #fff; font-size: 22px; line-height: 1;
  font-family: Georgia, "Songti SC", serif;
  cursor: pointer; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  transition: background .22s, border-color .22s, color .22s, opacity .22s;
  opacity: .78;
}
.hero.hc .hc-arrow:hover,
.hero.hc .hc-arrow:focus-visible {
  background: #B8976A; border-color: #B8976A; color: #2C2416;
  opacity: 1; outline: none;
}
.hero.hc .hc-arrow.prev { left: 28px; }
.hero.hc .hc-arrow.next { right: 28px; }

/* —— 指示条 —— */
.hero.hc .hc-dots {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 5; display: flex; gap: 10px;
}
.hero.hc .hc-dots button {
  width: 22px; height: 3px; padding: 0; border: 0;
  background: rgba(255, 255, 255, .3);
  cursor: pointer; transition: background .3s, width .3s;
}
.hero.hc .hc-dots button.is-on { background: #B8976A; width: 42px; }
.hero.hc .hc-dots button:focus-visible { outline: 1px solid #B8976A; outline-offset: 3px; }

/* —— 底部进度线 —— */
.hero.hc .hc-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255, 255, 255, .07); z-index: 5;
}
.hero.hc .hc-bar i {
  display: block; height: 100%; width: 100%;
  background: #B8976A;
  transform: scaleX(0); transform-origin: left center;
  animation: hcFill 5.6s linear forwards;
}
.hero.hc.paused .hc-bar i { animation-play-state: paused; }
@keyframes hcFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 只有一帧 / 用户要求减少动态：不播、不缩放 */
.hero.hc.single .hc-arrow,
.hero.hc.single .hc-dots,
.hero.hc.single .hc-bar { display: none; }
.hero.hc.single .hc-frame { transition: opacity .01s; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero.hc .hc-frame { transition: opacity .3s ease; transform: none !important; }
  .hero.hc .hc-bar i { animation: none; transform: scaleX(1); opacity: .25; }
  .hero.hc .hc-pane { transition: opacity .3s ease; }
}

/* —— 平板 —— */
@media (max-width: 1024px) {
  .hero.hc .hc-arrow { width: 40px; height: 40px; font-size: 19px; }
  .hero.hc .hc-arrow.prev { left: 14px; }
  .hero.hc .hc-arrow.next { right: 14px; }
  .hero.hc .hc-dots { bottom: 24px; }
}

/* —— 手机 —— */
@media (max-width: 768px) {
  /* 原站手机端用 100% auto 会留白，轮播必须 cover 才满屏 */
  .hero.hc .hc-frame { background-size: cover; background-position: center center; }
  .hero.hc .hc-arrow {
    width: 34px; height: 34px; font-size: 17px;
    background: rgba(20, 14, 12, .22);
    opacity: .7;
  }
  .hero.hc .hc-arrow.prev { left: 8px; }
  .hero.hc .hc-arrow.next { right: 8px; }
  .hero.hc .hc-title { font-size: 26px; letter-spacing: 2px; }
  .hero.hc .hc-pane { padding: 30px 16px; }
  .hero.hc .hc-dots { bottom: 16px; gap: 8px; }
  .hero.hc .hc-dots button { width: 16px; }
  .hero.hc .hc-dots button.is-on { width: 30px; }
  .hero.hc .hc-bar { height: 2px; }
}