/* ==========================================================
   OSITronix - animations.css
   Version: 1.0
   Animation Library
   Autor  : Luís Veiga
   ========================================================== */

/* ---------- Global ---------- */

*{
    transition:
        color .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* ---------- Hero ---------- */

.hero-logo{
    animation:heroFade 1.6s ease forwards;
}

#hero-symbol{
    opacity:0;
    transform:scale(.6) rotate(-15deg);
    animation:symbolIntro 1.2s ease .2s forwards;
}

.hero h1{
    opacity:0;
    animation:titleIntro .9s ease 1.0s forwards;
}

.hero h2{
    opacity:0;
    animation:subtitleIntro .9s ease 1.5s forwards;
}

.hero p{
    opacity:0;
    animation:subtitleIntro .9s ease 1.8s forwards;
}

.button-primary{
    opacity:0;
    animation:buttonIntro .8s ease 2.2s forwards;
}

.button-primary:hover{
    transform:translateY(-3px);
}

/* ---------- Navbar ---------- */

.navbar{
    animation:navDrop .8s ease;
}

/* ---------- Cards ---------- */

.card,
.tech-grid div{

    opacity:0;

    transform:translateY(40px);

    animation:cardReveal .8s ease forwards;

}

.card:hover,
.tech-grid div:hover{

    transform:translateY(-8px) scale(1.02);

}

/* ---------- Gold Glow ---------- */

.gold-glow{

    animation:goldPulse 2.5s infinite;

}

/* ---------- Cursor ---------- */

.pointer{
    cursor:pointer;
}

/* ---------- Keyframes ---------- */

@keyframes heroFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes symbolIntro{

    from{

        opacity:0;

        transform:
            scale(.6)
            rotate(-15deg);

    }

    to{

        opacity:1;

        transform:
            scale(1)
            rotate(0);

    }

}

@keyframes titleIntro{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes subtitleIntro{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes buttonIntro{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes navDrop{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes cardReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes goldPulse{

    0%{

        text-shadow:
            0 0 5px rgba(214,163,32,.25);

    }

    50%{

        text-shadow:
            0 0 25px rgba(214,163,32,.75);

    }

    100%{

        text-shadow:
            0 0 5px rgba(214,163,32,.25);

    }

}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}