:root{--color-gold:#d4af37;--color-gold-rgb:212, 175, 55;--color-bg-dark:#f5f5f4;--color-bg-light:#fafaf9;--color-border:#e7e5e4;--color-text-primary:#1c1917;--color-text-secondary:#78716c;--color-text-muted:#a8a29e;--font-serif:"Ma Shan Zheng", cursive;--font-display:"Times New Roman", serif;--sidebar-width:300px;--transition-smooth:cubic-bezier(.25, .46, .45, .94)}.app-container{background-color:#f8f4f1;background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;height:100vh;position:relative;overflow:hidden}.sidebar{width:var(--sidebar-width);border-right:1px solid var(--color-border);z-index:100;opacity:0;height:100vh;animation:slideInLeft 1s var(--transition-smooth) forwards;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f0ece9;flex-direction:column;padding:50px 40px;display:flex;position:fixed;top:0;left:0;overflow:hidden;box-shadow:0 2px 12px #00000026}.timeline-title{color:var(--color-gold);letter-spacing:.2em;font-size:2.2rem;font-family:var(--font-serif);margin-bottom:10px}.timeline-subtitle{color:#78716c;font-size:.9rem;font-family:var(--font-serif);margin-bottom:20px;font-weight:300}.timeline-track{flex-direction:column;flex:1;justify-content:space-between;padding-top:60px;padding-bottom:60px;padding-left:30px;display:flex;position:relative}.timeline-line{background:linear-gradient(180deg, var(--color-gold) 0%, #d6d3d1 50%, var(--color-gold) 100%);width:2px;position:absolute;top:10px;bottom:10px;left:5px}.timeline-item{cursor:pointer;opacity:.4;padding:15px 0;transition:all .4s;position:relative;transform:translate(0)}.timeline-item:hover{opacity:.7;transform:translate(10px)}.timeline-item.active{opacity:1;transform:translate(20px)}.timeline-item:before{content:"";z-index:10;background:#f5f5f4;border:2px solid #d6d3d1;border-radius:50%;width:14px;height:14px;transition:all .4s;position:absolute;top:50%;left:-30px;transform:translateY(-50%)scale(1)}.timeline-item.active:before{background:var(--color-gold);border-color:var(--color-gold);box-shadow:0 0 30px rgba(var(--color-gold-rgb), .6);transform:translateY(-50%)scale(1.3)}.era-name{color:#1c1917;font-size:1.1rem;font-weight:600;font-family:var(--font-serif);text-shadow:none;margin-bottom:5px;line-height:1;transition:color .4s}.timeline-item.active .era-name{color:var(--color-gold);text-shadow:0 0 20px rgba(var(--color-gold-rgb), .3)}.era-period{color:#78716c;letter-spacing:.1em;font-size:.8rem;font-weight:300}.content-wrapper{margin-left:var(--sidebar-width);opacity:0;height:100vh;animation:slideInRight 1s var(--transition-smooth) .2s forwards;position:relative;overflow:hidden}.slider-track{height:100%;transition:transform .9s var(--transition-smooth);will-change:transform;display:flex}.era-slide{min-width:calc(100vw - var(--sidebar-width));opacity:.3;align-items:flex-start;height:100vh;padding:0 20px;transition:opacity .5s;display:flex;position:relative;overflow:hidden}.era-slide.active{opacity:1}.era-slide:before{content:"";background:radial-gradient(circle at 20% 50%, rgba(var(--color-gold-rgb), .03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, #8b451305 0%, transparent 50%);pointer-events:none;position:absolute;inset:0}.slide-content{opacity:0;z-index:10;align-items:flex-start;gap:60px;width:100%;max-width:1400px;height:100%;margin:0 auto;padding-top:120px;padding-right:80px;transition:all .8s .3s;display:flex;position:relative;transform:translate(80px)}.era-slide.active .slide-content{opacity:1;transform:translate(0)}.slide-number{color:#1c19170a;pointer-events:none;font-size:15rem;font-weight:700;line-height:1;font-family:var(--font-display);position:absolute;top:50%;right:60px;transform:translateY(-50%)}.image-section{will-change:transform;width:32vh;height:32vh;transform-style:preserve-3d;border-radius:4px;flex:none;align-self:flex-start;position:relative;overflow:visible}.image-section .js-tilt-glare{border-radius:4px;overflow:hidden}.architecture-image{object-fit:cover;filter:sepia(15%)contrast(1.05)saturate(.9);pointer-events:none;width:100%;height:100%;transition:transform 1.2s;transform:scale(1.1)}.image-section:hover .architecture-image{transform:scale(1)}.text-section{flex:1;margin-top:0}.era-label{color:var(--color-gold);letter-spacing:.4em;text-transform:uppercase;opacity:0;margin-bottom:25px;font-size:.85rem;transition:all .6s .5s;transform:translateY(20px)}.era-slide.active .era-label{opacity:1;transform:translateY(0)}.era-heading{color:var(--color-text-primary);opacity:0;font-size:4.5rem;font-weight:700;line-height:1.2;font-family:var(--font-serif);margin-bottom:40px;transition:all .6s .6s;transform:translateY(30px)}.era-slide.active .era-heading{opacity:1;transform:translateY(0)}.era-heading span{color:#78716c;font-size:.6em}.era-description{color:#57534e;text-align:justify;opacity:0;margin-bottom:40px;font-size:1.2rem;line-height:2.1;transition:all .6s .7s;transform:translateY(30px)}.era-slide.active .era-description{opacity:1;transform:translateY(0)}.feature-grid{opacity:0;grid-template-columns:repeat(3,1fr);gap:20px;transition:all .6s .8s;display:grid;transform:translateY(30px)}.era-slide.active .feature-grid{opacity:1;transform:translateY(0)}.feature-card{text-align:center;background:#fff9;border:1px solid #e7e5e4;border-radius:.75rem;padding:20px;transition:all .3s;box-shadow:0 1px 2px #0000000d}.feature-card:hover{border-color:var(--color-gold);background:#ffffffe6;transform:translateY(-5px);box-shadow:0 10px 15px -3px #0000001a}.feature-icon{color:var(--color-gold);font-size:1.5rem;font-family:var(--font-serif);margin-bottom:10px}.feature-text{color:#57534e;font-size:.9rem;line-height:1.4}.scroll-indicator{color:#78716c;z-index:50;align-items:center;gap:15px;font-size:.85rem;animation:2s infinite slideHint;display:flex;position:fixed;bottom:40px;right:120px}@keyframes slideHint{0%,to{opacity:.6;transform:translate(0)}50%{opacity:1;transform:translate(10px)}}.scroll-line{background:linear-gradient(90deg, var(--color-gold), transparent);width:60px;height:1px}.tilt-container{width:100%;height:100%;position:relative;overflow:hidden}.top-bar-container{z-index:200;flex-direction:row;align-items:center;gap:30px;padding:10px 20px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.search-box-wrapper,.navbar-wrapper{flex-shrink:0}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.back-home-btn{z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#78716c;z-index:1000;background-color:#fffc;border:1px solid #0000000d;border-radius:30px;align-items:center;gap:10px;padding:10px 16px;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;position:fixed;top:105px;right:32px;box-shadow:0 4px 20px #0000001a}.btn-icon{justify-content:center;align-items:center;width:20px;height:20px;transition:transform .3s;display:flex}.btn-icon svg{stroke:currentColor;width:100%;height:100%}.back-home-btn:hover{color:var(--color-gold);border-color:var(--color-gold);background-color:#d4af371a;transform:translateY(-2px);box-shadow:0 6px 24px #d4af3726}.back-home-btn:hover .btn-icon{transform:translate(-3px)}@media (max-width:768px){.back-home-btn{padding:8px 12px;top:20px;right:20px}.btn-text{display:none}.back-home-btn{border-radius:50%;justify-content:center;gap:0;width:44px;height:44px}}