/* ==========================================================================
   LinkTrade Animation Library
   Modern, GPU-accelerated, performance-first animations.
   All animations use transform/opacity only (no layout thrashing).
   Respects prefers-reduced-motion for accessibility.
   ========================================================================== */

/* ----- Page Transition ----- */
.page-enter { animation: ltPageEnter .4s cubic-bezier(.16,.84,.44,1) both; }
@keyframes ltPageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Scroll Reveal (triggered by IntersectionObserver adding .lt-revealed) ----- */
.lt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s cubic-bezier(.16,.84,.44,1), transform .5s cubic-bezier(.16,.84,.44,1); }
.lt-reveal.lt-revealed { opacity: 1; transform: translateY(0); }

/* Staggered children */
.lt-reveal[data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity .45s cubic-bezier(.16,.84,.44,1), transform .45s cubic-bezier(.16,.84,.44,1); }
.lt-reveal.lt-revealed[data-stagger] > * { opacity: 1; transform: translateY(0); }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(1) { transition-delay: .05s; }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(2) { transition-delay: .12s; }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(3) { transition-delay: .19s; }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(4) { transition-delay: .26s; }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(5) { transition-delay: .33s; }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(6) { transition-delay: .40s; }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(7) { transition-delay: .47s; }
.lt-reveal.lt-revealed[data-stagger] > *:nth-child(8) { transition-delay: .54s; }

/* ----- Hero Animated Gradient ----- */
.lt-hero-gradient {
    background-size: 200% 200%;
    animation: ltGradientShift 8s ease infinite;
}
@keyframes ltGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ----- Floating Elements (subtle parallax) ----- */
.lt-float { animation: ltFloat 4s ease-in-out infinite; }
.lt-float-slow { animation: ltFloat 6s ease-in-out infinite; }
.lt-float-delay { animation: ltFloat 5s ease-in-out 1s infinite; }
@keyframes ltFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ----- Card Hover Lift ----- */
.lt-lift { transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s cubic-bezier(.16,.84,.44,1); }
.lt-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(31,80,45,.16); }

/* ----- Card Entrance (CSS-only, no JS needed) ----- */
.lt-card-enter { opacity: 0; transform: translateY(20px) scale(.98); animation: ltCardEnter .45s cubic-bezier(.16,.84,.44,1) forwards; }
.lt-card-enter:nth-child(1) { animation-delay: .05s; }
.lt-card-enter:nth-child(2) { animation-delay: .12s; }
.lt-card-enter:nth-child(3) { animation-delay: .19s; }
.lt-card-enter:nth-child(4) { animation-delay: .26s; }
.lt-card-enter:nth-child(5) { animation-delay: .33s; }
.lt-card-enter:nth-child(6) { animation-delay: .40s; }
.lt-card-enter:nth-child(7) { animation-delay: .47s; }
.lt-card-enter:nth-child(8) { animation-delay: .54s; }
@keyframes ltCardEnter {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----- Shimmer (image loading placeholder) ----- */
.lt-shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: ltShimmer 1.5s infinite; }
@keyframes ltShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- Pulse (for badges, notifications) ----- */
.lt-pulse { animation: ltPulse 2s ease-in-out infinite; }
@keyframes ltPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.05); opacity: .85; }
}

/* ----- Slide In From Left (for sidebars, drawers) ----- */
.lt-slide-left { animation: ltSlideLeft .35s cubic-bezier(.16,.84,.44,1) both; }
@keyframes ltSlideLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ----- Slide In From Right ----- */
.lt-slide-right { animation: ltSlideRight .35s cubic-bezier(.16,.84,.44,1) both; }
@keyframes ltSlideRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ----- Scale In (for modals, popups) ----- */
.lt-scale-in { animation: ltScaleIn .3s cubic-bezier(.16,.84,.44,1) both; }
@keyframes ltScaleIn {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ----- Count Up (number animation, triggered by JS) ----- */
.lt-countup { display: inline-block; }

/* ----- Button Press Feedback ----- */
.lt-press { transition: transform .1s ease; }
.lt-press:active { transform: scale(.96); }

/* ----- Underline Grow (nav links) ----- */
.lt-underline { position: relative; }
.lt-underline::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width .25s ease; }
.lt-underline:hover::after { width: 100%; }

/* ----- Toast Slide In ----- */
.lt-toast-in { animation: ltToastIn .35s cubic-bezier(.16,.84,.44,1) both; }
@keyframes ltToastIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ----- Badge Bounce ----- */
.lt-badge-bounce { animation: ltBadgeBounce .5s cubic-bezier(.16,1.5,.44,1) both; }
@keyframes ltBadgeBounce {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ----- Progress Bar Fill ----- */
.lt-progress-fill { width: 0; transition: width 1s cubic-bezier(.16,.84,.44,1); }
.lt-progress-fill.lt-filled { width: var(--lt-progress, 72%); }

/* ----- Rotating Loader ----- */
.lt-spinner { animation: ltSpin 1s linear infinite; }
@keyframes ltSpin { to { transform: rotate(360deg); } }

/* ----- Accessibility: Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    .page-enter, .lt-reveal, .lt-reveal[data-stagger] > *,
    .lt-card-enter, .lt-hero-gradient, .lt-float, .lt-float-slow, .lt-float-delay,
    .lt-slide-left, .lt-slide-right, .lt-scale-in, .lt-toast-in, .lt-badge-bounce,
    .lt-shimmer, .lt-pulse, .lt-spinner {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        background-position: 0% 50% !important;
    }
    .lt-progress-fill { width: var(--lt-progress, 72%) !important; }
}