/*
 * Subtle motion system for Capital Finance.
 * Motion is progressively enhanced by assets/js/animations.js.
 */

.cf-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity 720ms cubic-bezier(.22, 1, .36, 1),
        transform 720ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--cf-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.cf-reveal[data-cf-reveal="left"] {
    transform: translate3d(-24px, 0, 0);
}

.cf-reveal[data-cf-reveal="right"] {
    transform: translate3d(24px, 0, 0);
}

.cf-reveal[data-cf-reveal="scale"] {
    transform: scale(.975);
}

.cf-reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Decorative Hero elements move independently, but never distract. */
.hero__orb {
    animation: cf-hero-float 9s ease-in-out infinite alternate;
}

.hero__line {
    transform-origin: left center;
    animation: cf-line-breathe 6s ease-in-out infinite alternate;
}

@keyframes cf-hero-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-12px, 10px, 0) scale(1.025); }
}

@keyframes cf-line-breathe {
    from { opacity: .28; transform: scaleX(.94); }
    to { opacity: .58; transform: scaleX(1); }
}

/* Premium micro-interactions. */
.button,
.cooperation-model__link,
.site-header a {
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 260ms ease,
        transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.button .ui-arrow-icon,
.cooperation-model__link .ui-arrow-icon {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .button:hover {
        transform: translateY(-2px);
    }

    .button:hover .ui-arrow-icon,
    .cooperation-model__link:hover .ui-arrow-icon {
        transform: translate3d(4px, -4px, 0);
    }

    .pillar-card,
    .about-feature,
    .loan-timeline__card,
    .loan-process__grid > *,
    .cooperation-model,
    .cooperation-principles__items > * {
        transition:
            transform 320ms cubic-bezier(.22, 1, .36, 1),
            border-color 260ms ease,
            box-shadow 320ms ease,
            background-color 260ms ease;
    }

    .pillar-card:hover,
    .about-feature:hover,
    .loan-timeline__item:hover .loan-timeline__card,
    .loan-process__grid > *:hover,
    .cooperation-model:hover,
    .cooperation-principles__items > *:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 45px rgba(5, 56, 54, .09);
    }

    .loan-timeline__marker,
    .about-feature__icon {
        transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
    }

    .loan-timeline__item:hover .loan-timeline__marker,
    .about-feature:hover .about-feature__icon {
        transform: scale(1.08);
    }
}

/* Keep anchor scrolling polished without overriding accessibility preferences. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .cf-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* v0.6.6 — stronger but restrained homepage motion */
.home .hero__content > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: cf-home-hero-in 760ms cubic-bezier(.22, 1, .36, 1) forwards;
}
.home .hero__content > *:nth-child(1) { animation-delay: 100ms; }
.home .hero__content > *:nth-child(2) { animation-delay: 190ms; }
.home .hero__content > *:nth-child(3) { animation-delay: 290ms; }
.home .hero__content > *:nth-child(4) { animation-delay: 390ms; }

.home .hero-stat.is-visible .hero-stat__value,
.home .experience-stat.is-visible strong {
    animation: cf-number-settle 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.home .pillar-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 620ms cubic-bezier(.22, 1, .36, 1);
}

.home .pillar-card.is-visible::before {
    width: 100%;
}

.home .experience-section {
    background-size: cover;
    animation: cf-home-image-breathe 16s ease-in-out infinite alternate;
}

@keyframes cf-home-hero-in {
    to { opacity: 1; transform: none; }
}

@keyframes cf-number-settle {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes cf-home-image-breathe {
    from { background-size: 100% auto; }
    to { background-size: 104% auto; }
}

@media (max-width: 767px) {
    .home .experience-section {
        animation: none;
        background-size: cover;
    }

    .cf-reveal {
        transform: translate3d(0, 18px, 0);
        transition-duration: 620ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .hero__content > * {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .home .experience-section {
        animation: none;
    }
}