/* =====================================================================
 * chrome.css —— 加载页 / 顶部导航 / 两侧栏 / 翻页指示 / 弹窗
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 加载页
 * ------------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(var(--c-primary-rgb), .08), transparent 70%),
    var(--c-bg);
  transition: opacity .9s var(--ease-out), visibility .9s;
  /* 保险：即使脚本出错，8 秒后也会自动淡出 */
  animation: loaderFailsafe .8s 8s forwards;
}
.is-loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }
.loader__center { display: flex; flex-direction: column; align-items: center; }
.loader__logo { width: 64px; height: 64px; opacity: .9; }
.loader__title {
  margin-top: 18px; font-family: var(--f-cal); font-size: 52px; line-height: 1; color: #f2fffc;
  text-shadow: 0 0 24px rgba(var(--c-primary-rgb), .45);
}
.loader__bar { position: relative; width: 240px; height: 2px; margin-top: 26px; background: var(--c-line); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-primary); box-shadow: 0 0 12px var(--c-primary); transition: width .35s var(--ease-out); }
.loader__status { margin-top: 14px; font-family: var(--f-en); font-weight: 600; font-size: 13px; letter-spacing: .24em; color: var(--c-muted); }
.loader__status span { margin-right: 8px; font-family: var(--f-body); letter-spacing: .3em; color: var(--c-pale); }
.loader__status b { color: var(--c-text); font-weight: 700; }
.loader__status em { animation: loaderDots 1.2s steps(4) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; width: 3.2em; }
@keyframes loaderDots { 0% { width: .4em; } 100% { width: 3.2em; } }
.loader__foot {
  position: absolute; left: 32px; bottom: 26px;
  font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .24em; color: var(--c-dim); text-transform: uppercase;
}
.loader__foot b { color: var(--c-rim); font-weight: 700; }

/* ---------------------------------------------------------------------
 * 顶部导航
 * ------------------------------------------------------------------- */
.site-header {
  position: fixed; z-index: 60; left: 0; right: 0; top: 0;
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 calc(var(--rail-w) + 10px) 0 0;
  background: linear-gradient(180deg, rgba(2, 12, 13, .92) 0%, rgba(2, 12, 13, .72) 60%, rgba(2, 12, 13, 0) 100%);
}
/* 翻到页脚时，上方露出的是上一屏的内容，把导航底色加深避免文字叠在一起 */
html.is-fullpage[data-section="footer"] .site-header { background-color: rgba(2, 12, 13, .94); }
.site-header { transition: background-color .6s; }
.site-header::after {
  content: ""; position: absolute; left: var(--rail-w); right: var(--rail-w); bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--c-line-2), var(--c-line) 40%, transparent);
}
.brand {
  display: flex; align-items: center; gap: 12px; flex: none;
  height: 100%; padding: 0 22px 0 12px;
  min-width: calc(var(--rail-w) + 150px);
}
.brand__logo { width: 42px; height: 42px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text b { font-family: var(--f-serif); font-weight: 900; font-size: 18px; letter-spacing: .14em; }
.brand__text i { font-family: var(--f-en); font-weight: 600; font-size: 10px; letter-spacing: .36em; color: var(--c-rim); margin-top: 3px; }

.nav { display: flex; align-items: center; flex: 1; height: 100%; min-width: 0; }
.nav__list { display: flex; height: 100%; margin-left: clamp(8px, 2vw, 40px); }
.nav__item { position: relative; height: 100%; }
.nav__link {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  height: 100%; padding: 0 clamp(12px, 1.5vw, 26px);
  color: var(--c-muted); transition: color .3s;
}
.nav__link i { font-family: var(--f-en); font-weight: 600; font-size: 11px; letter-spacing: .26em; line-height: 1.2; }
.nav__link b { font-family: var(--f-serif); font-weight: 700; font-size: 15px; letter-spacing: .14em; line-height: 1.5; color: var(--c-text); opacity: .72; transition: opacity .3s, color .3s; }
.nav__link::after {
  content: ""; position: absolute; left: clamp(12px, 1.5vw, 26px); bottom: 14px; width: 0; height: 2px;
  background: var(--c-primary); box-shadow: 0 0 8px var(--c-primary); transition: width .45s var(--ease-out);
}
.nav__link:hover { color: var(--c-rim); }
.nav__link:hover b { opacity: 1; }
.nav__item.is-current .nav__link { color: var(--c-primary); }
.nav__item.is-current .nav__link b { opacity: 1; color: #fff; }
.nav__item.is-current .nav__link::after { width: 22px; }

.nav__ticket {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  margin-left: auto; height: 44px; padding: 0 18px 0 20px;
  background: var(--c-primary); color: var(--c-on-primary);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background .3s, box-shadow .3s;
}
.nav__ticket i { font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .2em; line-height: 1; order: 2; opacity: .7; }
.nav__ticket b { font-family: var(--f-serif); font-weight: 900; font-size: 15px; letter-spacing: .1em; line-height: 1; order: 1; }
.nav__ticket svg { width: 14px; height: 14px; order: 3; }
.nav__ticket:hover { background: var(--c-glow); }

.nav-toggle { display: none; }
.nav__link i, .nav__link b { white-space: nowrap; }

/* 1024–1279px：导航项较多，收紧间距 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .brand { min-width: 0; padding-right: 10px; }
  .brand__text i { letter-spacing: .24em; }
  .nav__list { margin-left: 4px; }
  .nav__link { padding: 0 10px; }
  .nav__link::after { left: 10px; }
  .nav__link b { font-size: 14px; letter-spacing: .08em; }
  .nav__link i { font-size: 10px; letter-spacing: .16em; }
  .nav__ticket { padding: 0 14px 0 16px; }
  .nav__ticket i { display: none; }
}

/* ---------------------------------------------------------------------
 * 左右侧栏
 * ------------------------------------------------------------------- */
.rail {
  position: fixed; z-index: 55; top: var(--header-h); bottom: 0; width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.rail--left { left: 0; border-right: 1px solid var(--c-line); padding: 26px 0; }
.rail--right { right: 0; border-left: 1px solid var(--c-line); justify-content: center; }
.rail__dot { width: 6px; height: 6px; background: var(--c-primary); transform: rotate(45deg); box-shadow: 0 0 10px var(--c-primary); }
.rail__text {
  flex: 1; margin: 22px 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .34em; color: var(--c-dim);
  white-space: nowrap; text-align: center;
}
.rail__text b { color: var(--c-rim); font-weight: 700; }
.rail__text span { font-family: var(--f-body); letter-spacing: .4em; }
.rail__line { width: 1px; height: 64px; background: linear-gradient(180deg, var(--c-line-3), transparent); }

.pager { display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.pager__btn { position: relative; display: flex; align-items: center; justify-content: center; width: var(--rail-w); height: 26px; }
.pager__btn::before { content: ""; width: 10px; height: 2px; background: var(--c-line-3); transition: width .4s var(--ease-out), background .3s, box-shadow .3s; }
.pager__btn:hover::before { width: 18px; background: var(--c-rim); }
.pager__btn.is-current::before { width: 26px; background: var(--c-primary); box-shadow: 0 0 8px var(--c-primary); }
.pager__label {
  position: absolute; right: calc(100% + 6px); top: 50%; transform: translate(8px, -50%);
  padding: 4px 10px; white-space: nowrap;
  font-size: 12px; letter-spacing: .14em; color: var(--c-text);
  background: rgba(3, 16, 18, .92); border: 1px solid var(--c-line-2);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease-out);
}
.pager__label i { margin-right: 8px; font-family: var(--f-en); font-weight: 700; color: var(--c-rim); }
.pager__btn:hover .pager__label, .pager__btn:focus-visible .pager__label { opacity: 1; transform: translate(0, -50%); }

.counter {
  position: absolute; bottom: 26px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-en); font-weight: 600; color: var(--c-muted);
}
.counter b { font-size: 30px; font-weight: 700; line-height: 1; color: var(--c-text); letter-spacing: .02em; }
.counter span { writing-mode: vertical-rl; font-size: 12px; letter-spacing: .26em; }
.counter span i { color: var(--c-rim); }

/* ---------------------------------------------------------------------
 * 弹窗
 * ------------------------------------------------------------------- */
html.modal-open, html.modal-open body { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal__backdrop {
  position: absolute; inset: 0; background: rgba(1, 8, 9, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: modalFade .4s var(--ease-out);
}
.modal__dialog {
  --cut: 18px;
  position: relative; display: flex; flex-direction: column;
  width: min(900px, 100%); max-height: min(84vh, 820px);
  background: var(--c-line-2);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  animation: modalIn .5s var(--ease-out);
}
.modal__dialog::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: linear-gradient(160deg, #0b2527, #041113 60%);
  clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px));
}
@keyframes modalFade { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.modal.is-closing .modal__backdrop { opacity: 0; transition: opacity .3s; }
.modal.is-closing .modal__dialog { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 28px 32px 20px; border-bottom: 1px solid var(--c-line);
}
.modal__en { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .34em; color: var(--c-rim); }
.modal__title { margin-top: 6px; font-family: var(--f-serif); font-weight: 900; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .08em; line-height: 1.3; }
.modal__close {
  display: flex; flex-direction: column; align-items: center; flex: none;
  padding: 8px 12px; border: 1px solid var(--c-line-2); transition: background .3s, color .3s, border-color .3s;
}
.modal__close span { font-size: 13px; font-weight: 700; letter-spacing: .2em; line-height: 1.3; }
.modal__close i { font-family: var(--f-en); font-weight: 600; font-size: 10px; letter-spacing: .24em; color: var(--c-rim); }
.modal__close:hover { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.modal__close:hover i { color: var(--c-on-primary); }
.modal__body { flex: 1; min-height: 0; overflow: auto; padding: 26px 32px 34px; }

/* 弹窗内容：日程详情 */
.mdetail__img { position: relative; aspect-ratio: 16 / 7; margin-bottom: 22px; overflow: hidden; background: var(--c-bg-2); }
.mdetail__img img { width: 100%; height: 100%; object-fit: cover; }
.mdetail__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.mdetail__meta div { padding: 12px 16px; background: rgba(3, 15, 17, .92); }
.mdetail__meta dt { font-family: var(--f-en); font-weight: 600; font-size: 11px; letter-spacing: .26em; color: var(--c-rim); }
.mdetail__meta dd { margin-top: 2px; font-weight: 700; letter-spacing: .04em; }
.mdetail__desc { margin-top: 20px; color: var(--c-pale); line-height: 1.95; letter-spacing: .03em; }

/* 弹窗内容：完整日程 */
.mfull { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.mfull__day h4 { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line-2); font-family: var(--f-serif); font-weight: 900; font-size: 20px; letter-spacing: .1em; }
.mfull__day h4 i { font-family: var(--f-en); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: var(--c-rim); }
.mfull__row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--c-line); }
.mfull__row time { font-family: var(--f-en); font-weight: 600; font-size: 15px; letter-spacing: .06em; color: var(--c-rim); }
.mfull__row b { display: block; font-weight: 700; letter-spacing: .06em; }
.mfull__row span { display: block; font-size: 13px; color: var(--c-muted); }

/* 弹窗内容：购票须知 */
.mnotes { counter-reset: mn; display: grid; gap: 10px; }
.mnotes li { position: relative; padding: 12px 16px 12px 52px; background: rgba(4, 18, 20, .72); border-left: 1px solid var(--c-line-2); line-height: 1.85; letter-spacing: .04em; counter-increment: mn; }
.mnotes li::before { content: counter(mn, decimal-leading-zero); position: absolute; left: 16px; top: 12px; font-family: var(--f-en); font-weight: 700; color: var(--c-rim); }

/* 弹窗内容：票种详情 */
.mticket__price { font-family: var(--f-en); font-weight: 700; font-size: 44px; line-height: 1; color: var(--c-glow); }
.mticket__price small { font-size: 18px; margin-right: 4px; }

/* ---------------------------------------------------------------------
 * 移动端导航
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .site-header { padding: 0 8px 0 0; background: rgba(2, 12, 13, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .site-header::after { left: 0; right: 0; }
  .brand { min-width: 0; padding: 0 12px; }
  .brand__logo { width: 36px; height: 36px; }
  .brand__text b { font-size: 16px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 48px; height: 48px; margin-left: auto; padding: 0 12px;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--c-text); transition: transform .35s var(--ease-out), opacity .25s; }
  .nav-toggle span:nth-child(2) { width: 70%; background: var(--c-primary); }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav {
    position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: calc(var(--header-h) + 20px) 24px 32px;
    background: rgba(2, 12, 13, .98);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
    overflow-y: auto;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; height: auto; margin: 0; }
  .nav__item { height: auto; border-bottom: 1px solid var(--c-line); }
  .nav__link { flex-direction: row; align-items: baseline; justify-content: space-between; height: auto; padding: 18px 4px; }
  .nav__link b { order: 1; font-size: 20px; }
  .nav__link i { order: 2; font-size: 12px; }
  .nav__link::after { display: none; }
  .nav__item.is-current .nav__link b { color: var(--c-primary); }
  .nav__ticket { justify-content: center; height: 54px; margin: 28px 0 0; }
  .nav__ticket b { font-size: 17px; }
  html.nav-open, html.nav-open body { overflow: hidden; }

  .rail { display: none; }
  .modal { padding: 12px; align-items: flex-end; }
  .modal__dialog { max-height: 88vh; }
  .modal__head { padding: 20px 20px 16px; }
  .modal__body { padding: 20px 20px 28px; }
  .mdetail__meta { grid-template-columns: 1fr; }
  .loader__foot { left: 20px; right: 20px; font-size: 10px; }
}