/*==================================================

    MONEY PLANT
    Premium Animation Stylesheet

===================================================*/


/*==========================================
GLOBAL TRANSITIONS
==========================================*/

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


/*==========================================
FADE IN
==========================================*/

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/*==========================================
FADE UP
==========================================*/

.fade-up {
    opacity: 0;
    transform: translateY(60px);
    animation: fadeUp .9s ease forwards;
}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================
FADE LEFT
==========================================*/

.fade-left {
    opacity: 0;
    transform: translateX(70px);
    animation: fadeLeft .9s ease forwards;
}

@keyframes fadeLeft {

    from {
        opacity: 0;
        transform: translateX(70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/*==========================================
FADE RIGHT
==========================================*/

.fade-right {
    opacity: 0;
    transform: translateX(-70px);
    animation: fadeRight .9s ease forwards;
}

@keyframes fadeRight {

    from {
        opacity: 0;
        transform: translateX(-70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/*==========================================
ZOOM
==========================================*/

.zoom-in {
    opacity: 0;
    transform: scale(.8);
    animation: zoomIn .8s ease forwards;
}

@keyframes zoomIn {

    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/*==========================================
FLOATING COINS
==========================================*/

.coin {
    animation: coinFloat 7s ease-in-out infinite;
}

.coin1 {
    animation-delay: 0s;
}

.coin2 {
    animation-delay: 3s;
}

@keyframes coinFloat {

    0% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-18px) rotate(10deg);
    }

    50% {
        transform: translateY(-35px) rotate(25deg);
    }

    75% {
        transform: translateY(-15px) rotate(12deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}


/*==========================================
FLOATING LEAVES
==========================================*/

.leaf {
    animation: leafFloat 9s ease-in-out infinite;
}

.leaf1 {
    animation-delay: 0s;
}

.leaf2 {
    animation-delay: 2s;
}

@keyframes leafFloat {

    0% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translate(-8px,-12px) rotate(10deg);
    }

    50% {
        transform: translate(10px,-30px) rotate(-15deg);
    }

    75% {
        transform: translate(-8px,-15px) rotate(12deg);
    }

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


/*==========================================
IMAGE FLOAT
==========================================*/

.hero-card {
    animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat {

    0% {
        transform: translateY(0);
    }

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

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


/*==========================================
GLOW
==========================================*/

.hero-card {
    position: relative;
}

    .hero-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 28px;
        background: linear-gradient( 135deg, rgba(76,175,80,.25), rgba(212,175,55,.35), rgba(76,175,80,.25) );
        filter: blur(20px);
        z-index: -1;
    }


/*==========================================
BUTTON SHINE
==========================================*/

.btn-primary {
    position: relative;
    overflow: hidden;
}

    .btn-primary::before {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 70px;
        height: 100%;
        background: rgba(255,255,255,.35);
        transform: skewX(-25deg);
    }

    .btn-primary:hover::before {
        animation: shine .8s linear;
    }

@keyframes shine {

    from {
        left: -120%;
    }

    to {
        left: 140%;
    }
}


/*==========================================
NAV LINK
==========================================*/

.navbar a {
    transition: .35s;
}

    .navbar a:hover {
        transform: translateY(-2px);
    }


/*==========================================
COUNTER HOVER
==========================================*/

.stat-card {
    overflow: hidden;
    position: relative;
}

    .stat-card::after {
        content: "";
        position: absolute;
        width: 0;
        height: 4px;
        left: 0;
        bottom: 0;
        background: linear-gradient( 90deg, #4CAF50, #D4AF37 );
        transition: .45s;
    }

    .stat-card:hover::after {
        width: 100%;
    }

    .stat-card:hover {
        transform: translateY(-10px) scale(1.03);
    }


/*==========================================
HERO TEXT
==========================================*/

.hero-badge {
    animation: slideBadge .8s ease;
}

.hero h1 {
    animation: titleAnimation 1s ease;
}

.hero p {
    animation: textAnimation 1.2s ease;
}

.hero-buttons {
    animation: buttonsAnimation 1.4s ease;
}

.hero-stats {
    animation: statsAnimation 1.7s ease;
}

@keyframes slideBadge {

    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes titleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textAnimation {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes buttonsAnimation {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes statsAnimation {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================
BACKGROUND ANIMATION
==========================================*/

body {
    background-size: 300% 300%;
    animation: backgroundMove 18s ease infinite;
}

@keyframes backgroundMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/*==========================================
SCROLL REVEAL SUPPORT
==========================================*/

.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all .8s ease;
}

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }


/*==========================================
SMOOTH HERO ENTRY
==========================================*/

.hero-content > * {
    animation-fill-mode: both;
}

    .hero-content > *:nth-child(1) {
        animation-delay: .1s;
    }

    .hero-content > *:nth-child(2) {
        animation-delay: .2s;
    }

    .hero-content > *:nth-child(3) {
        animation-delay: .4s;
    }

    .hero-content > *:nth-child(4) {
        animation-delay: .6s;
    }

    .hero-content > *:nth-child(5) {
        animation-delay: .8s;
    }

    .hero-content > *:nth-child(6) {
        animation-delay: 1s;
    }

/*==========================================
BENEFIT CARD HOVER
==========================================*/

.benefit-card {
    overflow: hidden;
    position: relative;
}

    .benefit-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.12), transparent );
        transition: .7s;
    }

    .benefit-card:hover::before {
        left: 120%;
    }

.benefit-icon {
    transition: .35s;
}

.benefit-card:hover .benefit-icon {
    transform: rotateY(360deg) scale(1.08);
}

/*==========================================
TIMELINE ANIMATION
==========================================*/

.timeline-item {
    opacity: 0;
    transform: translateY(60px);
    animation: timelineFade .8s forwards;
}

    .timeline-item:nth-child(1) {
        animation-delay: .2s;
    }

    .timeline-item:nth-child(2) {
        animation-delay: .4s;
    }

    .timeline-item:nth-child(3) {
        animation-delay: .6s;
    }

    .timeline-item:nth-child(4) {
        animation-delay: .8s;
    }

    .timeline-item:nth-child(5) {
        animation-delay: 1s;
    }

@keyframes timelineFade {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-item::after {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0% {
        box-shadow: 0 0 0 0 rgba(212,175,55,.7);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(212,175,55,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(212,175,55,0);
    }
}


/*==========================================
STATISTICS ANIMATION
==========================================*/

.stat-card {
    position: relative;
    overflow: hidden;
}

    .stat-card::before {
        content: "";
        position: absolute;
        top: -120%;
        left: -120%;
        width: 220%;
        height: 220%;
        background: linear-gradient( 45deg, transparent, rgba(255,255,255,.08), transparent );
        transform: rotate(25deg);
        transition: .8s;
    }

    .stat-card:hover::before {
        top: 120%;
        left: 120%;
    }

.stat-icon {
    transition: .4s;
}

.stat-card:hover .stat-icon {
    transform: rotateY(360deg) scale(1.1);
}

/*==========================================
TESTIMONIAL ANIMATION
==========================================*/

.testimonial-card {
    position: relative;
    overflow: hidden;
}

    .testimonial-card::before {
        content: "";
        position: absolute;
        top: -120%;
        left: -120%;
        width: 220%;
        height: 220%;
        background: linear-gradient( 45deg, transparent, rgba(255,255,255,.08), transparent );
        transform: rotate(25deg);
        transition: .8s;
    }

    .testimonial-card:hover::before {
        top: 120%;
        left: 120%;
    }

    .testimonial-card img {
        transition: .4s;
    }

    .testimonial-card:hover img {
        transform: scale(1.08);
    }

/*==========================================
FAQ ANIMATION
==========================================*/

.faq-item {
    position: relative;
}

    .faq-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(#4CAF50,#D4AF37);
        transform: scaleY(0);
        transform-origin: top;
        transition: .4s;
    }

    .faq-item.active::before {
        transform: scaleY(1);
    }

.faq-question {
    transition: .3s;
}

.faq-item:hover .faq-question {
    padding-left: 42px;
}

/*==========================================
CTA ANIMATION
==========================================*/

.cta-box {
    animation: floatBox 6s ease-in-out infinite;
}

@keyframes floatBox {

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

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

.social-links a:hover {
    transform: translateY(-6px) rotate(360deg);
}