/* The original overview's perspective geometry, with Haipai's supplied history. */
html:has(body[data-view="timeline"]){scrollbar-gutter:auto}
body[data-view="timeline"]{overflow-x:hidden;background:#fff}
body[data-view="timeline"] #main-content{isolation:isolate}
.outer-introduction{position:relative;height:250vh;margin-bottom:-20vh}
.outer-intro-stage,.outer-stage{position:sticky;top:0;width:100%;height:100lvh;perspective:300px;perspective-origin:50% 50%;transform-style:preserve-3d;overflow:hidden}
.outer-intro-copy{position:absolute;left:50%;top:50%;width:min(900px,72vw);transform:translate(-50%,-50%);text-align:center;transform-origin:center}
.outer-intro-copy :is(h1,h2){font-size:clamp(48px,7vw,96px);font-weight:500;line-height:1.05;margin:28px 0 36px}
.outer-intro-copy p:last-child{font-size:20px;line-height:1.65;font-weight:300}
.outer-intro-visual{position:absolute;left:50%;top:50%;width:min(860px,76vw);margin:0;opacity:0;visibility:hidden;transform:translate3d(-50%,-50%,-180px)}
.outer-intro-visual img{display:block;width:100%;height:min(58vh,540px);object-fit:cover}
.outer-intro-visual figcaption{font-size:12px;line-height:1.5;text-align:center;color:var(--dynamic-font-color);padding-top:12px}
/* Do not force permanent compositor layers on blocks that pass the perspective plane. */
.outer-year{position:relative;width:100%;margin-top:-100lvh}
.outer-stage{pointer-events:none}
.outer-year-number{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family: var(--font-harmonyos-sans);font-size:600px;font-weight:700;line-height:1;white-space:nowrap;color:var(--dynamic-font-color);opacity:0;will-change:transform,opacity}
.outer-block{position:absolute;left:50%;top:50%;z-index:20;transform-style:preserve-3d;transform-origin:50% 50%;opacity:0;backface-visibility:hidden}
.outer-event-block{font-size:96px;font-weight:500;line-height:1.03;white-space:pre;color:var(--dynamic-accent-color);letter-spacing:-.035em}
.outer-image-block{width:600px;max-width:none;margin:0}
.outer-image-block img{display:block;width:100%;height:auto;max-height:650px;object-fit:contain}
.outer-image-block figcaption{font-size:14px;font-weight:300;line-height:1.4;color:var(--dynamic-font-color);text-align:center;padding-top:12px}
.outer-spacer{position:relative;pointer-events:none}
.outer-year-anchor{position:absolute;left:0;top:calc(32% - 100vh);width:1px;height:1px;pointer-events:none}
/* Begin native sticky positioning before the first visible rewind frame.
   The extra stage and final gap preserve the count interval and page bottom. */
.rewind-ending{position:relative;z-index:5;height:300lvh;margin-top:-200lvh;color:#fff;text-align:center}
.rewind-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.rewind-stage{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:center;height:100lvh;padding:0 28px;visibility:hidden;isolation:isolate}
/* Fade the cover independently: fading the whole stage also fades the final
   foreground and exposes the old year after the counter has taken over. */
.rewind-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:#151515;opacity:var(--rewind-cover,0);pointer-events:none}
.rewind-number-link{display:block;color:#fff;text-decoration:none;outline-offset:12px}
.rewind-digits{display:flex;justify-content:center;gap:8px;overflow:hidden;font-family: var(--font-harmonyos-sans);font-size:min(300px,calc((100vw - 88px)/2.72));font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
/* Fixed slots keep all four glyph centres stable even if the font has no
   tabular-number feature. The font size only responds to viewport width. */
.rewind-digit{position:relative;display:block;flex:0 0 .68em;width:.68em;height:1em;text-align:center}
.rewind-final{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;width:100%;height:100lvh;max-width:1152px;margin:100lvh auto 0;padding:0 28px;overflow:clip;pointer-events:none;visibility:hidden}
.rewind-headline{font-size:96px;font-weight:500;line-height:1;color:var(--dynamic-accent-color)}
.rewind-actions{display:flex;justify-content:center;gap:24px;pointer-events:auto}
.rewind-open{display:inline-block;border-radius:999px;padding:8px 24px;background:var(--dynamic-accent-color);color:#151515;font-size:16px;font-weight:500;line-height:24px;text-decoration:none;transition:background-color .3s,color .3s}
.rewind-open:hover{background:#fff;color:#151515}
.rewind-ending a[aria-disabled="true"]{pointer-events:none}
body[data-view="timeline"] .haipai-logo{transition:filter .25s ease}
body[data-view="timeline"] .language-label{transition:color .25s ease}
.timeline-detail-link{position:fixed;left:50%;bottom:38px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid currentColor;color:var(--dynamic-font-color);font-size:20px;line-height:1.2;white-space:nowrap}
.timeline-detail-link svg{width:24px;height:24px;flex:none}
.timeline-detail-link[hidden]{display:none}
body[data-view="timeline"] .current-year{opacity:1}
body[data-view="timeline"] .current-year.is-visible{background:none}
body[data-view="timeline"] .directory-open .timeline-detail-link,body[data-view="timeline"].directory-open .timeline-detail-link{opacity:0!important;pointer-events:none!important}
body[data-view="timeline"].is-dark .timeline-detail-link{color:#c8a05f}
body[data-view="timeline"] .all-history-link{display:none}
@media(max-width:767px){
  .outer-intro-visual{width:86vw}.outer-intro-visual img{height:46vh;object-fit:cover}.outer-intro-copy{width:76vw}.outer-intro-copy :is(h1,h2){font-size:48px;margin:24px 0}.outer-intro-copy p:last-child{font-size:16px;line-height:1.75}
  .outer-event-block{font-size:96px;line-height:1.06}.outer-image-block{width:480px}.outer-image-block figcaption{font-size:14px}
  .timeline-detail-link{bottom:82px;font-size:17px;gap:10px}.timeline-detail-link svg{width:20px;height:20px}
  .rewind-digits{font-size:min(128px,calc((100vw - 72px)/2.72));gap:4px}.rewind-headline{font-size:48px}.rewind-final{gap:40px}
}
@media(prefers-reduced-motion:reduce){
  .outer-year-number,.outer-block{will-change:auto}
  body[data-view="timeline"] .haipai-logo,body[data-view="timeline"] .language-label{transition:none}
}