/* Beijing cinematic archive — the film (chapter 02 · Timeline).
   One dark full-frame player: era tabs → frame (count, readout, progress) → deck (copy, source, controls).
   The progress line is the clock; it and the slow push-in pause together. */

.beijing-time{--beijing-time-cut:8000ms;--beijing-time-depth:0;display:flow-root;margin-top:var(--bj-s6);color:var(--bj-night-ink)}

/* era tabs */
.beijing-time-chapters{border-top:1px solid var(--bj-night-rule);border-bottom:1px solid var(--bj-night-rule)}
.beijing-time-chapters__track{display:flex;gap:2px;max-width:var(--bj-max);margin:0 auto;padding:0 var(--bj-gutter);overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--bj-gutter)}
.beijing-time-chapters__track::-webkit-scrollbar{display:none}
.beijing-time-chapters button{position:relative;flex:none;min-height:44px;padding:0 12px;border:0;background:none;color:var(--bj-night-muted);font:500 var(--gt-t-small)/1 var(--g-sans);letter-spacing:-.005em;cursor:pointer;white-space:nowrap}
.beijing-time-chapters button:first-child{padding-left:0}
.beijing-time-chapters button:hover{color:var(--bj-night-ink)}
.beijing-time-chapters button[aria-current]{color:var(--bj-night-ink)}
.beijing-time-chapters button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--bj-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.beijing-time-chapters button:first-child::after{left:0}
.beijing-time-chapters button[aria-current]::after{transform:scaleX(1)}

/* the frame */
.beijing-time-stage{position:relative;isolation:isolate;height:clamp(440px,min(72svh,56.25vw),820px);overflow:hidden;background:#030303;outline-offset:-3px}
.beijing-time-media{position:absolute;inset:0;overflow:hidden;background:#030303}
.beijing-time-frame{
  --beijing-time-scale:1;--beijing-time-x:0%;--beijing-time-y:0%;
  position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;
  object-fit:cover;object-position:center;
  transform:translate3d(var(--beijing-time-x),var(--beijing-time-y),0) scale(var(--beijing-time-scale));
  transition:opacity 900ms cubic-bezier(.22,.61,.36,1),filter .7s ease;
  will-change:opacity,transform;
}
.beijing-time-frame.is-visible{opacity:1}
.beijing-time-frame.is-missing{visibility:hidden}
.beijing-time-frame.is-live{animation:beijing-time-push calc(var(--beijing-time-cut) + 1400ms) linear both}
.beijing-time:not(.is-running) .beijing-time-frame.is-live{animation-play-state:paused}
@keyframes beijing-time-push{
  from{transform:translate3d(var(--beijing-time-x),var(--beijing-time-y),0) scale(var(--beijing-time-scale))}
  to{transform:translate3d(var(--beijing-time-x),calc(var(--beijing-time-y) - 1.4%),0) scale(calc(var(--beijing-time-scale) * 1.07))}
}
.beijing-time-frame[data-fit="contain"]{object-fit:contain;padding:clamp(12px,2vw,32px) clamp(12px,2vw,32px) clamp(96px,16vw,200px)}
.beijing-time-frame[data-tone="relic"]{filter:saturate(.72) contrast(1.05) brightness(.76)}
.beijing-time-frame[data-tone="relic-dark"]{filter:saturate(.52) contrast(1.08) brightness(.63)}
.beijing-time-frame[data-tone="object"]{filter:saturate(.82) contrast(1.04) brightness(.74);background:#11100e}
.beijing-time-frame[data-tone="archive"]{filter:grayscale(1) contrast(1.06) brightness(.8);background:#100f0d}
.beijing-time-frame[data-tone="archive-site"]{filter:saturate(.68) contrast(1.04) brightness(.72)}
.beijing-time-frame[data-tone="satellite"]{filter:grayscale(1) contrast(1.12) brightness(.79);background:#0a0b0a}
.beijing-time-frame[data-tone="late-archive"]{filter:saturate(.73) contrast(1.04) brightness(.75)}
.beijing-time-frame[data-tone="digital"]{filter:saturate(.88) contrast(1.03) brightness(.78)}
.beijing-time-frame[data-tone="present"]{filter:saturate(.86) contrast(1.04) brightness(.72)}
.beijing-time-vignette{position:absolute;z-index:2;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgb(0 0 0 / .42),transparent 22%,transparent 46%,rgb(0 0 0 / .86)),
  radial-gradient(circle at 50% 42%,transparent 40%,rgb(0 0 0 / .44) 118%)}
.beijing-time-grain{position:absolute;z-index:3;inset:-18%;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  transform:translate3d(calc(var(--beijing-time-depth) * -6%),0,0);transition:transform 1.2s ease}

/* frame counter, top left */
.beijing-time-count{position:absolute;z-index:4;top:var(--bj-s3);left:var(--bj-gutter);display:flex;align-items:center;gap:12px;margin:0;font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;color:var(--bj-night-ink)}
.beijing-time-count b{font-weight:700;color:var(--bj-night-ink)}
.beijing-time-count i{display:block;width:48px;height:1px;background:rgb(236 235 229 / .5)}
@media(min-width:1440px){.beijing-time-count{left:calc((100vw - var(--bj-max)) / 2 + var(--bj-gutter))}}

/* readout: era, year, headline — each stated once */
.beijing-time-readout{position:absolute;z-index:4;left:0;right:0;bottom:0;max-width:var(--bj-max);margin:0 auto;padding:0 var(--bj-gutter) clamp(32px,4.5vw,64px)}
.beijing-time-era{margin:0 0 var(--bj-s2);font:600 var(--gt-t-label)/1.4 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:#e6e4dc}
.beijing-time-year{margin:0;font:800 clamp(48px,7.4vw,116px)/.9 var(--g-sans);font-variation-settings:"opsz" 32;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:#f5f5f1}
.beijing-time-title{max-width:20em;margin:var(--bj-s2) 0 0;font:700 clamp(20px,2.3vw,32px)/1.18 var(--g-sans);letter-spacing:-.02em;color:#f5f5f1;text-wrap:balance}
.beijing-time-readout.is-entering > *{animation:beijing-time-enter .7s cubic-bezier(.22,.61,.36,1) both}
.beijing-time-readout.is-entering > :nth-child(2){animation-delay:.06s}
.beijing-time-readout.is-entering > :nth-child(3){animation-delay:.12s}
@keyframes beijing-time-enter{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}

/* progress: the clock */
.beijing-time-progress{position:absolute;z-index:5;left:0;right:0;bottom:0;height:3px;background:rgb(236 235 229 / .16)}
.beijing-time-progress i{display:block;height:100%;background:var(--bj-accent);transform:scaleX(0);transform-origin:left}
.beijing-time-progress i.is-timing{animation:beijing-time-clock var(--beijing-time-cut) linear forwards}
.beijing-time:not(.is-running) .beijing-time-progress i.is-timing{animation-play-state:paused}
@keyframes beijing-time-clock{to{transform:scaleX(1)}}

/* deck: copy + source + controls */
.beijing-time-deck{min-height:var(--bj-deck-h);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--bj-s3) var(--bj-s5);align-items:start;max-width:var(--bj-max);margin:0 auto;padding:var(--bj-s4) var(--bj-gutter) 0}
.beijing-time-copy{max-width:34em;margin:0;font:400 var(--bj-body)/1.6 var(--g-sans);color:var(--bj-night-ink)}
.beijing-time-source{margin:var(--bj-s2) 0 0;font:500 var(--gt-t-label)/1.5 var(--g-mono);letter-spacing:.06em;text-transform:uppercase}
.beijing-time-source a{display:inline-flex;flex-wrap:wrap;gap:4px 12px;color:var(--bj-night-muted);text-decoration:none}
.beijing-time-source__go{color:var(--bj-accent-night);font-weight:700}
.beijing-time-source a:hover,.beijing-time-source a:focus-visible{color:var(--bj-night-ink)}
.beijing-time-source a:hover .beijing-time-source__go{text-decoration:underline;text-underline-offset:3px}
.beijing-time-controls{display:flex;align-items:center;gap:var(--bj-s1);flex-wrap:wrap;justify-content:flex-end}
.beijing-time-btn{min-width:44px;height:44px;display:inline-grid;place-items:center;padding:0 14px;border:1px solid rgb(236 235 229 / .55);background:transparent;color:var(--bj-night-ink);font:600 var(--gt-t-small)/1 var(--g-sans);cursor:pointer}
.beijing-time-btn:hover{background:var(--bj-night-ink);color:var(--bj-night)}
.beijing-time-btn--play{min-width:88px;background:var(--bj-night-ink);color:var(--bj-night);border-color:var(--bj-night-ink)}
.beijing-time-btn--play:hover{background:transparent;color:var(--bj-night-ink)}
.beijing-time-btn--text{padding:0 16px;margin-left:var(--bj-s1)}
.beijing-time :focus-visible{outline:2px solid var(--bj-night-ink);outline-offset:3px}

/* second layer: every source at once */
.beijing-time-archive{width:min(1120px,calc(100vw - 32px));max-height:min(86svh,880px);padding:0;border:1px solid var(--bj-night-rule);background:var(--bj-night);color:var(--bj-night-ink)}
.beijing-time-archive::backdrop{background:rgb(0 0 0 / .78)}
.beijing-time-archive__head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--bj-s3);padding:var(--bj-s4) var(--bj-s4) var(--bj-s3);background:var(--bj-night);border-bottom:1px solid var(--bj-night-rule)}
.beijing-time-archive__head p{margin:0 0 var(--bj-s1);font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bj-night-muted)}
.beijing-time-archive__head h3{margin:0;font:800 var(--gt-t-h3)/1 var(--g-sans);letter-spacing:-.03em}
.beijing-time-archive__list{list-style:none;margin:0;padding:var(--bj-s2) var(--bj-s4) var(--bj-s4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--bj-s3)}
.beijing-time-archive__list a{display:grid;gap:6px;padding:var(--bj-s2) 0;border-bottom:1px solid var(--bj-night-rule);color:inherit;text-decoration:none}
.beijing-time-archive__list span,.beijing-time-archive__list small{font:500 var(--gt-t-label)/1.45 var(--g-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--bj-night-muted)}
.beijing-time-archive__list span{color:var(--bj-accent-night);font-weight:700}
.beijing-time-archive__list strong{font:700 var(--g-t-ui)/1.3 var(--g-sans);text-transform:none}
.beijing-time-archive__list a:hover strong,.beijing-time-archive__list a:focus-visible strong{text-decoration:underline;text-underline-offset:3px}

@media(max-width:820px){
  .beijing-time{margin-top:var(--bj-s5)}
  .beijing-time-chapters button{padding:0 10px}
  .beijing-time-chapters button::after{left:10px;right:10px}
  .beijing-time-stage{height:min(122vw,66svh);min-height:400px}
  .beijing-time-frame[data-fit="contain"]{padding:12px 12px 168px}
  .beijing-time-count{top:var(--bj-s2)}
  .beijing-time-readout{padding-bottom:var(--bj-s4)}
  .beijing-time-year{font-size:clamp(44px,13vw,64px)}
  .beijing-time-title{font-size:20px}
  .beijing-time-deck{grid-template-columns:1fr;padding-top:var(--bj-s3)}
    .beijing-time-controls{justify-content:flex-start}
  .beijing-time-btn--text{margin-left:auto}
  .beijing-time-archive__list{grid-template-columns:1fr;padding:var(--bj-s1) var(--bj-s3) var(--bj-s3)}
  .beijing-time-archive__head{padding:var(--bj-s3)}
}
@media(min-width:821px) and (max-width:1100px){.beijing-time-archive__list{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(prefers-reduced-motion:reduce){
  .beijing-time-frame{transition:opacity .01ms!important}
  .beijing-time-frame.is-live,.beijing-time-readout.is-entering > *{animation:none!important}
  .beijing-time-grain{transform:none!important;transition:none!important}
  .beijing-time-chapters button::after{transition:none}
}