/* ======================================================
   COINFLOW GLOBAL ANIMATIONS
====================================================== */

.cf-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.cf-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* From left */

.cf-reveal-left {
    opacity: 0;
    transform: translateX(-35px);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.cf-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* From right */

.cf-reveal-right {
    opacity: 0;
    transform: translateX(35px);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.cf-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* Scale */

.cf-reveal-scale {
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.cf-reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}


/* ======================================================
   STAGGER
====================================================== */

.cf-stagger > * {
    opacity: 0;
    transform: translateY(22px);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

.cf-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.cf-stagger.is-visible > *:nth-child(1) {
    transition-delay: 0.05s;
}

.cf-stagger.is-visible > *:nth-child(2) {
    transition-delay: 0.12s;
}

.cf-stagger.is-visible > *:nth-child(3) {
    transition-delay: 0.19s;
}

.cf-stagger.is-visible > *:nth-child(4) {
    transition-delay: 0.26s;
}

.cf-stagger.is-visible > *:nth-child(5) {
    transition-delay: 0.33s;
}

.cf-stagger.is-visible > *:nth-child(6) {
    transition-delay: 0.40s;
}


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

.cf-hero-enter {
    animation: coinflowHeroEnter 0.9s ease both;
}

.cf-hero-enter-delay {
    animation: coinflowHeroEnter 0.9s 0.12s ease both;
}

.cf-hero-enter-delay-2 {
    animation: coinflowHeroEnter 0.9s 0.22s ease both;
}

.cf-hero-enter-delay-3 {
    animation: coinflowHeroEnter 0.9s 0.32s ease both;
}

@keyframes coinflowHeroEnter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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


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

.cf-float {
    animation: coinflowFloat 5s ease-in-out infinite;
}

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

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


/* Different floating speed */

.cf-float-slow {
    animation: coinflowFloatSlow 7s ease-in-out infinite;
}

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

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


/* ======================================================
   SOFT PULSE
====================================================== */

.cf-pulse {
    animation: coinflowPulse 2.8s ease-in-out infinite;
}

@keyframes coinflowPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}


/* ======================================================
   SHIMMER
====================================================== */

.cf-shimmer {
    position: relative;
    overflow: hidden;
}

.cf-shimmer::after {
    content: "";

    position: absolute;
    inset: 0;

    width: 45%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );

    transform: translateX(-140%) skewX(-18deg);

    animation: coinflowShimmer 3.5s ease-in-out infinite;

    pointer-events: none;
}

@keyframes coinflowShimmer {
    0% {
        transform: translateX(-140%) skewX(-18deg);
    }

    45%,
    100% {
        transform: translateX(260%) skewX(-18deg);
    }
}


/* ======================================================
   BUTTON PRESS
====================================================== */

.cf-button {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.cf-button:hover {
    transform: translateY(-2px);
}

.cf-button:active {
    transform: translateY(0);
}


/* ======================================================
   IMAGE HOVER
====================================================== */

.cf-image-hover {
    overflow: hidden;
}

.cf-image-hover img {
    transition:
        transform 0.7s ease;
}

.cf-image-hover:hover img {
    transform: scale(1.035);
}


/* ======================================================
   NAVBAR ENTRANCE
====================================================== */

.coinflow-navbar {
    animation: coinflowNavbarEnter 0.7s ease both;
}

@keyframes coinflowNavbarEnter {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

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


/* ======================================================
   REDUCED MOTION
====================================================== */

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

    .cf-reveal,
    .cf-reveal-left,
    .cf-reveal-right,
    .cf-reveal-scale,
    .cf-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cf-hero-enter,
    .cf-hero-enter-delay,
    .cf-hero-enter-delay-2,
    .cf-hero-enter-delay-3,
    .cf-float,
    .cf-float-slow,
    .cf-pulse,
    .cf-shimmer,
    .coinflow-navbar {
        animation: none;
    }

    .cf-button,
    .cf-image-hover img {
        transition: none;
    }
}