.timeline-container{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;--primary-color:#000;--secondary-color:grey;--text-side:-1;box-sizing:border-box}.wrapper-cover-bottom,.wrapper-cover-top{z-index:10;position:absolute;width:10px;height:100%;top:0;pointer-events:none}.wrapper-cover-top{left:0;background-image:linear-gradient(90deg,#fff,transparent)}.wrapper-cover-bottom{right:0;background-image:linear-gradient(270deg,#fff,transparent)}.yearButton{position:relative;height:50px;width:16px;cursor:pointer;display:flex;border:none;align-items:center;justify-content:center;background-color:transparent;padding:0}.yearText{position:absolute;font-size:small;transform:translateY(calc(var(--text-side) * 185%)) scale(0);color:var(--secondary-color);transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .1s .1s;opacity:0}.yearButton.active>.yearText{transform:translateY(calc(var(--text-side) * 185%)) scale(1);opacity:1}.strip{background-color:var(--secondary-color);height:28px;width:1px;transition:height .3s cubic-bezier(.34,1.56,.64,1),width .3s cubic-bezier(.34,1.56,.64,1),background-color .2s;border-radius:999px}.yearButton.active>.strip{background-color:var(--primary-color);height:38px;width:2px}.yearButton:active+.yearButton>.strip,.yearButton:has(+.yearButton:active)>.strip{height:30px;width:3px}@media (min-width:550px){.timeline-container{position:relative;display:flex;justify-content:center;--primary-color:#000;--secondary-color:grey;width:100px;--text-side:-1;box-sizing:border-box}.wrapper-cover-bottom,.wrapper-cover-top{z-index:10;position:absolute;width:100%;height:10px;left:0;pointer-events:none}.wrapper-cover-top{top:0;background-image:linear-gradient(#fff,transparent)}.wrapper-cover-bottom{bottom:0;background-image:linear-gradient(transparent,#fff)}.yearButton{position:relative;width:50px;height:16px;cursor:pointer;display:flex;border:none;align-items:center;justify-content:center;background-color:transparent;padding:0}.yearText{position:absolute;font-size:small;transform:translateX(calc(var(--text-side) * 140%)) scale(0);color:var(--secondary-color);transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .1s .1s;opacity:0}.yearButton:has(+.yearButton:hover).active>.yearText,.yearButton:hover+.yearButton.active>.yearText{transform:translateX(calc(var(--text-side) * 140%)) scale(1);opacity:1}.yearButton:has(+.yearButton:hover)>.yearText,.yearButton:hover+.yearButton>.yearText{transform:translateX(calc(var(--text-side) * 140%)) scale(0)}.yearButton:has(+.yearButton+.yearButton:hover).active>.yearText,.yearButton:hover+.yearButton+.yearButton.active>.yearText{transform:translateX(calc(var(--text-side) * 140%)) scale(1);opacity:1}.yearButton.active>.yearText{color:var(--primary-color);transform:translateX(calc(var(--text-side) * 140%));opacity:1;font-weight:semi-bold}.yearButton:hover>.yearText{transform:translateX(calc(var(--text-side) * 150%));opacity:1}.yearButton:has(+.yearButton:hover)>.strip,.yearButton:hover+.yearButton>.strip{width:30px;height:3px}.strip{background-color:var(--secondary-color);width:28px;height:1px;transition:width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1),background-color .2s;border-radius:999px}.yearButton:hover>.strip{width:38px;height:4px}.yearButton:has(+.yearButton+.yearButton:hover)>.strip,.yearButton:hover+.yearButton+.yearButton>.strip{width:20px;height:2px}.yearButton.active>.strip{background-color:var(--primary-color);width:38px;height:2px}}