/* ==========================================
   SCROLL PROGRESS BAR
========================================== */

.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    background:linear-gradient(90deg, transparent, var(--color-primary), #ff2a00);
    z-index:100000;
    box-shadow:0 0 18px rgba(255,106,0,.8);
}

/* ==========================================
   BUTTON MOTION
========================================== */

.btn{
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.btn:hover{
    transform:translateY(-4px);
}

.btn.primary:hover{
    box-shadow:0 0 35px rgba(255,106,0,.4);
}

.btn:active{
    transform:translateY(-1px) scale(.98);
}

/* ==========================================
   NAVBAR UNDERLINE
========================================== */

.nav-links a{
    position:relative;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--color-primary);
    transition:.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after{
    width:100%;
}

/* ==========================================
   SCROLL TO TOP
========================================== */

.scroll-top{
    position:fixed;
    right:24px;
    bottom:24px;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:var(--color-primary);
    color:#000;
    font-size:1.3rem;
    font-weight:900;
    z-index:999;
    opacity:0;
    pointer-events:none;
    transform:translateY(20px);
    transition:.3s ease;
    box-shadow:0 0 30px rgba(255,106,0,.3);
}

.scroll-top.show{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.scroll-top:hover{
    transform:translateY(-5px);
}

/* ==========================================
   GLOBAL MOTION
========================================== */

.info-card,
.progress-card,
.highlight-box,
.quote-box,
.scene-panel,
.feature-terminal,
.final-card{
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.info-card:hover,
.progress-card:hover,
.highlight-box:hover,
.scene-panel:hover,
.feature-terminal:hover,
.final-card:hover{
    box-shadow:0 25px 70px rgba(255,106,0,.12);
}

.progress-card i{
    width:0;
    transition:width 1.4s ease;
}

/* ==========================================
   KEYFRAMES
========================================== */

@keyframes heroFloat{
    0%{
        transform:translateY(-25px) scale(1);
    }

    50%{
        transform:translateY(25px) scale(1.05);
    }

    100%{
        transform:translateY(-25px) scale(1);
    }
}

@keyframes scrollDot{
    0%{
        opacity:0;
        transform:translateX(-50%) translateY(0);
    }

    35%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translateX(-50%) translateY(22px);
    }
}