.timeline-visualization{width:100%;margin:3rem auto;padding:0 1rem;max-width:1400px}.timeline-main-thumbnail{width:100%;margin-bottom:2rem;display:flex;justify-content:center}.timeline-main-thumbnail-wrapper{position:relative;width:100%;max-width:979.64px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3);margin:0 auto}.timeline-main-thumbnail-bg{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.3);transition:filter .5s ease}.timeline-overlay-thumbnail{position:absolute;width:80%;height:80%;border-radius:clamp(6px,1.2vw,12px);overflow:hidden;opacity:0;transform:scale(0) translateY(20px);transition:all .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 clamp(3px,.6vw,6px) clamp(10px,2vw,20px) rgba(59,130,246,.2),0 0 clamp(15px,3vw,30px) rgba(37,99,235,.15);border:clamp(1px,.2vw,2px) solid rgba(37,99,235,.45)}.timeline-overlay-thumbnail img{width:100%;height:100%;object-fit:cover}.timeline-overlay-thumbnail.position-0{top:12%;left:8%;z-index:11}.timeline-overlay-thumbnail.position-1{top:17%;right:5%;z-index:12}.timeline-overlay-thumbnail.position-2{bottom:17%;left:12%;z-index:13}.timeline-overlay-thumbnail.position-3{bottom:12%;right:15%;z-index:14}.timeline-overlay-thumbnail.overlay-active{opacity:1;transform:scale(1) translateY(0);animation:timeline-overlay-appear .6s ease-out 0s forwards}@keyframes timeline-overlay-appear{0%{opacity:0;transform:scale(0) translateY(30px) rotate(-3deg)}50%{transform:scale(1.05) translateY(-5px) rotate(1.5deg)}to{opacity:1;transform:scale(1) translateY(0) rotate(0deg)}}.timeline-overlay-timestamp{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(59,120,240,.9);background:rgba(0,0,0,.8);padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;animation:timeline-fade-in .3s ease-out .3s forwards;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.3)}.timeline-container{position:relative;width:100%;max-width:979.64px;margin:0 auto}.timeline-bar{position:relative;width:100%;height:70px;padding-top:10px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.08) 50%,rgba(255,255,255,.05));border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.timeline-thumbnail-grid{display:flex;align-items:center;height:calc(100% - 10px);padding:0 4px;gap:3px;justify-content:center}.timeline-thumbnail-container{position:relative;flex:1 1 auto;max-width:78.22px;height:44px}.timeline-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;border:1px solid transparent}.timeline-thumbnail.grayscale{filter:grayscale(100%) brightness(.4);opacity:.8;z-index:1}.timeline-thumbnail.overlay{filter:none;opacity:0;transform:scale(0) translateY(20px);transition:all .4s cubic-bezier(.34,1.56,.64,1);z-index:2}.timeline-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.timeline-thumbnail.overlay.highlighted{opacity:1;transform:scale(1.15) translateY(0);box-shadow:0 4px 12px rgba(59,130,246,.2),0 0 20px rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.45);z-index:10;animation:timeline-highlight-reveal .6s ease-out 0s forwards;width:78.22px;left:50%;transform-origin:center;margin-left:-39.11px}@keyframes timeline-highlight-reveal{0%{filter:grayscale(100%) brightness(.4);transform:scale(1) translateY(0);opacity:.8}50%{transform:scale(1.25) translateY(-7px)}to{filter:none;transform:scale(1.15) translateY(0);opacity:1}}.timeline-thumbnail-timestamp{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.7);white-space:nowrap;opacity:0;animation:timeline-fade-in .4s ease-out .2s forwards}.timeline-thumbnail.highlighted .timeline-thumbnail-timestamp{opacity:1}.timeline-timestamps{position:relative;display:flex;justify-content:space-between;margin-top:8px;padding:0 12px;font-size:12px;color:rgba(255,255,255,.5);font-weight:500}.timeline-highlight-timestamp{position:absolute;top:-25px;transform:translateX(-50%);font-size:10px;color:rgba(59,120,240,.9);background:rgba(0,0,0,.7);padding:2px 4px;border-radius:4px;white-space:nowrap;font-weight:600;z-index:10}.timeline-caption{text-align:center;margin-top:2.5rem;font-size:14px;color:rgba(255,255,255,.6);line-height:1.4}.timeline-caption .caption-highlight{color:rgba(59,120,240,.9);font-weight:600}@keyframes timeline-fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:768px){.timeline-visualization{margin:2rem auto}.timeline-main-thumbnail{margin-bottom:1.5rem}.timeline-main-thumbnail-wrapper{width:min(90vw,800px);height:min(50.6vw,450px)}.timeline-overlay-thumbnail{border-radius:clamp(4px,1vw,8px);border-width:clamp(1px,.15vw,1.5px);box-shadow:0 clamp(2px,.4vw,4px) clamp(6px,1.2vw,12px) rgba(59,130,246,.2),0 0 clamp(8px,1.6vw,16px) rgba(37,99,235,.15)}.timeline-overlay-thumbnail.position-0{top:12%;left:8%}.timeline-overlay-thumbnail.position-1{top:17%;right:5%}.timeline-overlay-thumbnail.position-2{bottom:17%;left:12%}.timeline-overlay-thumbnail.position-3{bottom:12%;right:15%}.timeline-overlay-timestamp{font-size:9px;padding:1px 4px}.timeline-bar{height:58px;padding-top:8px}.timeline-thumbnail-grid{gap:2px;padding:0 4px;height:calc(100% - 8px)}.timeline-thumbnail-container{flex:1 1 auto;max-width:60px;height:32px}.timeline-thumbnail.overlay.highlighted{transform:scale(1.2) translateY(0);width:56.89px;margin-left:-28.45px}@keyframes timeline-highlight-reveal{50%{transform:scale(1.3) translateY(-5px)}to{transform:scale(1.2) translateY(0)}}.timeline-timestamps{font-size:11px}.timeline-caption{font-size:13px;margin-top:2rem}}@media (max-width:480px){.timeline-main-thumbnail{margin-bottom:1rem}.timeline-overlay-thumbnail{border-radius:clamp(3px,.8vw,6px);border-width:clamp(.5px,.1vw,1px);box-shadow:0 clamp(1px,.2vw,2px) clamp(4px,.8vw,8px) rgba(59,130,246,.2),0 0 clamp(6px,1.2vw,12px) rgba(37,99,235,.15)}.timeline-overlay-thumbnail.position-0{top:12%;left:8%}.timeline-overlay-thumbnail.position-1{top:17%;right:5%}.timeline-overlay-thumbnail.position-2{bottom:17%;left:12%}.timeline-overlay-thumbnail.position-3{bottom:12%;right:15%}.timeline-overlay-timestamp{display:none}.timeline-thumbnail-grid{gap:1px;padding:0 2px}.timeline-thumbnail-container{flex:1 1 auto;max-width:40px;height:24px}.timeline-thumbnail{border-radius:2px}.timeline-thumbnail.overlay.highlighted{width:42.67px;margin-left:-21.34px}.timeline-thumbnail-timestamp{font-size:10px;bottom:-20px}}@media (prefers-reduced-motion:reduce){.timeline-thumbnail.overlay{transition:none}.timeline-thumbnail.overlay.highlighted{animation:none;filter:none;opacity:1;transform:scale(1.1);width:78.22px;margin-left:-39.11px}@keyframes timeline-highlight-reveal{0%,to{filter:none;transform:scale(1.1);opacity:1}}}