.timeline{
    transition: width 1.5s;
    width: 0;
}

.image__scale{
    transition: scale 1.5s;
}

.image__scale__zoomin{
    transition: scale 1.5s;
}

.zoomin{
    scale : 1.1;
}


@property --progress-value {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
  
@keyframes html-progress {
    to { --progress-value: 100; }
}

@keyframes fade-out {
    0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}
  
  
.pinnacle__loader__inner__bar {
    width: 500px;
    height: 500px;
    border-radius: 50%;
}

.percent::before{
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) '%';
    color: white;
    font-family: OregonLdoLight;
    font-size: 2rem;
}
  
.pinnacle__loader__inner__bar {
    background: 
      radial-gradient(closest-side, #171717 99%, transparent 100% 100%),
      conic-gradient(#f4f2f0 calc(var(--progress-value) * 1%), #f4f2f031 0);
    animation: html-progress 2s 1 forwards;
    transform: scaleX(-1);
}
  
.percent::before {
    animation: html-progress 2s 1 forwards;
}
  
progress {
    visibility: hidden;
    width: 0;
    height: 0;
}

.pinnacle__loader {
    animation: 1s fade-out 1 forwards;
    animation-delay: 2s;
}

@media (max-width: 480px) {
    .pinnacle__loader__inner__bar {
        width: 300px;
        height: 300px;
        border-radius: 50%;
    }
}