/* =========================================
   DEVORBIT — ANIMATIONS
========================================= */


/* =========================================
   LOADER
========================================= */

.page-loader {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: grid;
    place-items: center;

    background:
        var(--bg);

    color:
        var(--text);

    transition:
        opacity 900ms var(--ease),
        visibility 900ms var(--ease),
        background-color 500ms ease,
        color 500ms ease;
}


.page-loader.hidden {
    opacity: 0;

    visibility:
        hidden;
}


/* =========================================
   LOADER INNER
========================================= */

.loader-inner {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


/* =========================================
   LOADER MARK
========================================= */

.loader-mark {
    position:
        relative;

    width:
        32px;

    height:
        32px;

    margin-bottom:
        20px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        50%;

    animation:
        loaderRotate 2s linear infinite;
}


.loader-mark::before {
    content:
        "";

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    top:
        -3px;

    left:
        50%;

    border-radius:
        50%;

    background:
        var(--text);
}


/* =========================================
   LOADER LOGO
========================================= */

.loader-logo {
    color:
        var(--text);

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        0.2em;
}


/* =========================================
   LOADER PROGRESS
========================================= */

.loader-progress {
    width:
        100px;

    height:
        1px;

    margin-top:
        16px;

    overflow:
        hidden;

    background:
        var(--border);
}


.loader-progress span {
    display:
        block;

    width:
        100%;

    height:
        100%;

    background:
        var(--text);

    transform-origin:
        left;

    animation:
        loaderProgress 1.3s var(--ease) forwards;
}


/* =========================================
   HERO ENTRANCE
========================================= */

.hero-reveal {
    opacity:
        0;

    transform:
        translateY(25px);

    animation:
        heroReveal 900ms 1.5s var(--ease) forwards;
}


.hero-title .title-line {
    opacity:
        0;

    transform:
        translateY(100%);

    animation:
        titleReveal 1100ms var(--ease) forwards;
}


.hero-title .title-line:nth-child(1) {
    animation-delay:
        1.45s;
}


.hero-title .title-line:nth-child(2) {
    animation-delay:
        1.58s;
}


.hero-title .title-line:nth-child(3) {
    animation-delay:
        1.71s;
}


.hero-description,
.hero-actions {
    opacity:
        0;

    transform:
        translateY(20px);

    animation:
        heroReveal 900ms 1.9s var(--ease) forwards;
}


.hero-actions {
    animation-delay:
        2s;
}


.hero-visual {
    opacity:
        0;

    animation:
        orbitFadeIn 1500ms 1.2s var(--ease) forwards;
}


@keyframes orbitFadeIn {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }

}


/* =========================================
   SCROLL REVEALS
========================================= */

[data-reveal] {
    opacity:
        0;

    transform:
        translateY(45px);

    transition:
        opacity 1000ms var(--ease),
        transform 1000ms var(--ease);
}


[data-reveal].revealed {
    opacity:
        1;

    transform:
        translateY(0);
}


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

@keyframes loaderRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes loaderProgress {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes heroReveal {

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes titleReveal {

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes orbitEntrance {

    to {
        opacity:
            1;

        transform:
            translateY(-50%)
            scale(1);
    }

}


@keyframes orbitSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes orbitSpinReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}


@keyframes floatingCard {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* =========================================
   ORBIT CARD MOTION
========================================= */

.orbit-card-alote {
    animation:
        floatingCard 5s ease-in-out infinite;
}


.orbit-card-zaysai {
    animation:
        floatingCard 5.5s ease-in-out infinite reverse;
}


.orbit-card-web {
    animation:
        floatingCard 6s ease-in-out infinite;
}


/* =========================================
   STATUS PULSE
========================================= */

@keyframes statusPulse {

    0% {
        transform:
            scale(0.6);

        opacity:
            0.8;
    }

    70% {
        transform:
            scale(1.6);

        opacity:
            0;
    }

    100% {
        opacity:
            0;
    }

}


/* =========================================
   SCROLL INDICATOR
========================================= */

@keyframes scrollIndicator {

    0% {
        transform:
            translateX(-100%);
    }

    50% {
        transform:
            translateX(280%);
    }

    100% {
        transform:
            translateX(280%);
    }

}


/* =========================================
   PROJECT STATS MOTION
========================================= */

.stats-section .stat-item {
    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity 900ms var(--ease),
        transform 900ms var(--ease);
}


.stats-section .stat-item.revealed {
    opacity:
        1;

    transform:
        translateY(0);
}


.stats-section .stat-item:nth-child(1) {
    transition-delay:
        0ms;
}


.stats-section .stat-item:nth-child(2) {
    transition-delay:
        80ms;
}


.stats-section .stat-item:nth-child(3) {
    transition-delay:
        160ms;
}


.stats-section .stat-item:nth-child(4) {
    transition-delay:
        240ms;
}


/* =========================================
   CASE STUDY BUTTON
   CLICK / INTERACTION FIX
========================================= */

.project-actions {
    position:
        relative;

    z-index:
        50;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    pointer-events:
        auto;
}


.project-case-study-button {
    position:
        relative;

    z-index:
        100;

    pointer-events:
        auto !important;

    cursor:
        pointer;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.project-case-study-button span {
    pointer-events:
        none;
}


.project-link {
    position:
        relative;

    z-index:
        50;
}