/* brand-story.css - 对应 pages/brand-story.php - 待建 */

/* ===== 从 pages/brand-story.php <style> 迁移 TS-0411-01 ===== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #fff; color: #1D1D1F; font-family: 'Inter', sans-serif; }

/* ── Fixed UI ── */
.ui-label {
  position: fixed; top: 22px; left: 26px; z-index: 600;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #C7C7CC; user-select: none;
}
.ui-counter {
  position: fixed; top: 22px; right: 50px; z-index: 600;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 0.08em; color: #C7C7CC; user-select: none;
}
.ui-counter em { color: #1D1D1F; font-style: normal; }
.pdots {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 600;
}
.pdot {
  width: 5px; height: 5px; border-radius: 50%; background: #D1D1D6;
  transition: background 0.3s, transform 0.3s; cursor: pointer;
}
.pdot.on { background: #1D1D1F; transform: scale(1.5); }

/* ── Chapters ── */
.chapter {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #fff;
  opacity: 0; transition: opacity 0.45s ease;
  pointer-events: none;
}
.chapter.active { opacity: 1; pointer-events: auto; }

/* Story chapters: content centered via .ch-stage (full-screen) */
.story-ch { justify-content: flex-start; }

/* ── ch-stage: full-screen centering container ── */
.ch-stage {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* ── Chevrons ── */
.ch-hint { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.chevrons {
  animation: bounce 2s ease-in-out infinite;
  display: flex; flex-direction: column; align-items: center;
}
.chevrons svg + svg { margin-top: -3px; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ── Floating Title ── */
#ft {
  position: fixed; left: 0; right: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none;
  /* Hero position: vertically centered */
  top: 50%; transform: translateY(-50%);
  transition:
    top      0.85s cubic-bezier(0.16,1,0.3,1),
    transform 0.85s cubic-bezier(0.16,1,0.3,1),
    opacity  0.45s ease;
}
#ft.sticky { top: 100px; transform: translateY(0); }

.ft-eye {
  font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #86868B; text-align: center; margin-bottom: 20px;
  transition: font-size 0.85s cubic-bezier(0.16,1,0.3,1);
}
#ft.sticky .ft-eye { font-size: 11px; }
.ft-eye .sep { color: #D1D1D6; }

/* Hero title */
.ft-tit {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: clamp(46px, 7.4vw, 82px);
  line-height: 1.06; letter-spacing: -0.02em; text-align: center; color: #1D1D1F;
  transition: font-size 0.85s cubic-bezier(0.16,1,0.3,1), line-height 0.85s cubic-bezier(0.16,1,0.3,1);
}
/* Sticky title: shrink to 50% + open up line-height */
#ft.sticky .ft-tit { font-size: clamp(23px, 3.7vw, 41px); line-height: 1.45; }
.ft-tit .pur { color: #5856D6; }
.ft-tit .blu { color: #0071e3; }

/* Chevrons below hero title — disappear when sticky */
.ft-hint {
  margin-top: 48px; display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.5s ease;
}
#ft.sticky .ft-hint { opacity: 0; pointer-events: none; }

/* ── Ch0: MOKELING ── */
.ch0-scene { position: relative; display: inline-flex; align-items: center; }
.ch0-word {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 28px;
  letter-spacing: 0.12em; color: #1D1D1F; white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}
.ch0-cur {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2px; height: 36px; border-radius: 1px;
  background: #1D1D1F; left: 2px; opacity: 0;
}

/* ── Ch2: 一根线 ── */
.wipe-wrap { position: relative; display: inline-block; white-space: nowrap; }
.wipe-text { display: block; clip-path: inset(0 100% 0 0); }
.wipe-cur {
  position: absolute; top: 8%; bottom: 8%; width: 2px; border-radius: 1px;
  background: #1D1D1F; left: 2px; opacity: 0;
}
.ch2-title { font-weight: 300; font-size: 43px; color: #1D1D1F; }
.ch2-line  { width: 0; height: 1px; background: #1D1D1F; margin: 36px auto 0; }

/* ── Text chapters ── */
.txt-ch { max-width: 820px; width: 100%; padding: 0 32px; }
.txt-title {
  font-size: 33px; font-weight: 500; color: #1D1D1F;
  text-align: left; margin-bottom: 64px; line-height: 1.35;
}
.txt-body {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.65s ease 0.1s, transform 0.65s ease 0.1s;
}
.txt-body.in { opacity: 1; transform: translateY(0); }
.txt-body p {
  font-size: 25px; font-weight: 400; color: #1D1D1F;
  line-height: 2.2; text-align: left;
}
.txt-body p + p { margin-top: 36px; }
.txt-em { font-weight: 500; }
.txt-ellipsis { display: block; }

/* ── Ch7: 希冀未来 ── */
.ch7-inner {
  display: flex; flex-direction: column; align-items: center;
  max-width: 640px; width: 100%; padding: 0 32px;
}
.ch7-title { font-size: 33px; font-weight: 500; color: #1D1D1F; text-align: center; margin-bottom: 48px; }
.ch7-sent  { font-size: 37px; font-weight: 500; color: #1D1D1F; text-align: center; }
.ch7-gap   { height: 40px; }
.ch7-s2    { opacity: 0; transition: opacity 0.15s ease; }
.ch7-rr {
  margin-top: 52px; font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #86868B; cursor: pointer; border: none; background: none;
  opacity: 0; transition: opacity 0.6s ease;
}
.ch7-rr:hover { color: #1D1D1F; }
.ch7-exit {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 400;
  color: #86868B;
  text-decoration: none;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.6s ease, color 0.2s ease;
}
.ch7-exit:hover { color: #0071e3; }

/* ── Brand Story: Navbar & Footer control ── */
footer, #brx-footer, .brx-footer { display: none !important; }

/* Navbar hidden by default */
header, #brx-header, .brx-header {
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
/* Revealed state: after story ends */
header.mkl-nav-revealed, #brx-header.mkl-nav-revealed, .brx-header.mkl-nav-revealed {
  transform: translateY(0) !important;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1) !important;
}
/* Hover trigger strip */
#mkl-nav-trigger {
  position: fixed; top: 0; left: 0; right: 0;
  height: 60px; z-index: 9999;
  pointer-events: none; /* never intercept clicks */
}
/* When active (hover), slide navbar down */
#mkl-nav-trigger.active ~ * header,
body.mkl-nav-hover header,
body.mkl-nav-hover #brx-header,
body.mkl-nav-hover .brx-header {
  transform: translateY(0);
}