/* =====================================================================
   FAL'ASH — Global Animation Layer
   Loaded on every page (user, auth, admin) after style.css.
   Reveal classes are only applied by animations.js, so content is never
   hidden if JavaScript fails to load.
   ===================================================================== */

:root {
    --anim-ease: cubic-bezier(.22, 1, .36, 1);
    --anim-ease-back: cubic-bezier(.34, 1.56, .64, 1);
    --anim-fast: .25s;
    --anim-med: .55s;
    --anim-slow: .9s;
}

/* ---------- Keyframes ---------- */
@keyframes fx-page-in   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop       { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes fx-shake     { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes fx-slide-down{ from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fx-ripple    { to { transform: scale(4); opacity: 0; } }
@keyframes fx-gradient  { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes fx-shine     { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }
@keyframes fx-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fx-bounce-x  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes fx-progress  { 0% { width: 0; } 60% { width: 70%; } 100% { width: 92%; } }
@keyframes fx-pulse-ring{ 0% { box-shadow: 0 0 0 0 rgba(59,130,246,.45); } 100% { box-shadow: 0 0 0 14px rgba(59,130,246,0); } }
@keyframes fx-check-in  { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.15) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes fx-dots      { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } }

/* ---------- Page entrance ---------- */
.user-content-container,
.admin-content,
body > .container,
.hero-section {
    animation: fx-page-in var(--anim-med) var(--anim-ease) both;
}

/* ---------- Scroll reveal (classes added by JS) ---------- */
.fx-reveal {
    opacity: 0;
    transform: translateY(24px) scale(.985);
    transition: opacity var(--anim-med) var(--anim-ease), transform var(--anim-med) var(--anim-ease);
    transition-delay: var(--fx-delay, 0ms);
    will-change: opacity, transform;
}
.fx-reveal.fx-in { opacity: 1; transform: none; }
.fx-reveal.fx-from-left  { transform: translateX(-28px); }
.fx-reveal.fx-from-right { transform: translateX(28px); }
.fx-reveal.fx-zoom       { transform: scale(.92); }
.fx-reveal.fx-in.fx-from-left,
.fx-reveal.fx-in.fx-from-right,
.fx-reveal.fx-in.fx-zoom { transform: none; }

/* ---------- Top navigation progress bar ---------- */
#fx-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 99999;
    background: linear-gradient(90deg, var(--secondary-color, #3b82f6), var(--accent-color, #0ea5e9), #8b5cf6);
    box-shadow: 0 0 10px rgba(59,130,246,.6);
    pointer-events: none; opacity: 0; transition: opacity .2s;
}
#fx-progress.fx-run { opacity: 1; animation: fx-progress 2.5s var(--anim-ease) forwards; }

/* ---------- Cards: hover lift ---------- */
.service-card-new, .service-card-modern, .mod-card, .slip-card, .type-card,
.bd-card, .bd-network-card, .at-network-card, .modern-stat-card, .stat-pill,
.step-item, .wallet-card-new, .auth-card, .form-container {
    transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) ease, background-color var(--anim-fast) ease;
}
.service-card-new:hover, .service-card-modern:hover, .mod-card:hover,
.bd-card:hover, .modern-stat-card:hover, .step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px -12px rgba(15, 23, 42, .22);
}
.slip-card:hover, .type-card:hover, .bd-network-card:hover, .at-network-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -10px rgba(59, 130, 246, .35);
}
.service-card-new:active, .mod-card:active, .slip-card:active, .type-card:active { transform: scale(.98); }

/* Selected states pop */
.type-card.active, .slip-card.active, .bd-network-card.active, .at-network-card.active,
.bd-card.active, .filter-tab.active {
    animation: fx-pop .35s var(--anim-ease-back);
}

/* Icon micro-interactions */
.service-card-new .card-icon, .mod-card .mod-icon, .icon-circle, .stat-icon-box {
    transition: transform .4s var(--anim-ease-back);
}
.service-card-new:hover .card-icon, .mod-card:hover .mod-icon,
.service-card-modern:hover .icon-circle, .modern-stat-card:hover .stat-icon-box {
    transform: rotate(-6deg) scale(1.12);
}
.service-card-new:hover .card-arrow i { animation: fx-bounce-x .7s ease-in-out infinite; }

/* ---------- Wallet card: living gradient + shine ---------- */
.wallet-card-new {
    background-size: 200% 200% !important;
    animation: fx-gradient 10s ease infinite;
    position: relative; overflow: hidden;
}
.wallet-card-new::after {
    content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    animation: fx-shine 4.5s ease-in-out 1.2s infinite;
    pointer-events: none;
}
.wallet-actions .action-btn { transition: transform var(--anim-fast) var(--anim-ease-back), background-color .2s; }
.wallet-actions .action-btn:hover { transform: translateY(-2px) scale(1.04); }

/* ---------- Buttons: ripple + shine ---------- */
.btn, .btn-primary, .modern-btn, .action-btn, button[type="submit"] {
    position: relative; overflow: hidden;
    transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) ease, background-color .2s, filter .2s;
}
.btn:hover:not(:disabled), .btn-primary:hover:not(:disabled), .modern-btn:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(59, 130, 246, .55);
}
.btn:active:not(:disabled), button[type="submit"]:active:not(:disabled) { transform: translateY(0) scale(.98); }
.fx-ripple {
    position: absolute; border-radius: 50%; transform: scale(0);
    background: rgba(255,255,255,.45); pointer-events: none;
    animation: fx-ripple .6s linear;
}
.btn-processing { cursor: progress !important; filter: saturate(.85); }
.btn-processing::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: fx-shine 1.1s linear infinite;
}

/* ---------- Forms ---------- */
.form-control {
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease, background-color .2s;
}
.form-control:focus {
    border-color: var(--secondary-color, #3b82f6) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .15) !important;
    outline: none;
}
.form-group label { transition: color .2s; }
.form-group:focus-within label { color: var(--secondary-color, #3b82f6); }
.form-control.fx-invalid { border-color: var(--danger-color, #ef4444) !important; animation: fx-shake .45s; }

/* Dynamically injected inputs fade in */
#dynamicInputs > * { animation: fx-slide-down .4s var(--anim-ease) both; }
#dynamicInputs > *:nth-child(2) { animation-delay: .05s; }
#dynamicInputs > *:nth-child(3) { animation-delay: .1s; }
#dynamicInputs > *:nth-child(4) { animation-delay: .15s; }
#dynamicInputs > *:nth-child(5) { animation-delay: .2s; }

/* ---------- Alerts & results ---------- */
.alert { animation: fx-slide-down .45s var(--anim-ease) both; }
.alert.alert-error, .alert.alert-danger { animation: fx-slide-down .35s var(--anim-ease) both, fx-shake .5s .35s; }
.alert-success .fa-circle-check { display: inline-block; animation: fx-check-in .6s var(--anim-ease-back) both; }
#resultArea > * { animation: fx-page-in .6s var(--anim-ease) both; }

/* ---------- Tables ---------- */
.modern-table tbody tr, table tbody tr { transition: background-color .2s ease; }
.modern-table tbody tr:hover { background-color: rgba(59, 130, 246, .05); }

/* ---------- Sidebars ---------- */
.user-sidebar a, .sidebar-menu a, .sidebar-menu li {
    transition: background-color .2s ease, color .2s ease, padding-left .25s var(--anim-ease), transform .25s var(--anim-ease);
}
.user-sidebar a:hover, .sidebar-menu a:hover { transform: translateX(4px); }
.user-sidebar, .admin-sidebar { transition: transform .35s var(--anim-ease), left .35s var(--anim-ease); }

/* ---------- Hero / landing ---------- */
.hero-badge, .logo i, .loader-logo i { animation: fx-float 3.5s ease-in-out infinite; }
.hero-title, .hero-section h1 { animation: fx-page-in .8s var(--anim-ease) .1s both; }
.hero-subtitle, .hero-section p { animation: fx-page-in .8s var(--anim-ease) .25s both; }
.hero-cta-group, .hero-buttons { animation: fx-page-in .8s var(--anim-ease) .4s both; }
.hero-stats { animation: fx-page-in .8s var(--anim-ease) .55s both; }

/* ---------- Avatar / topbar ---------- */
.avatar-circle, .admin-profile .avatar { transition: transform .3s var(--anim-ease-back); }
.avatar-circle:hover, .admin-profile .avatar:hover { transform: scale(1.1) rotate(8deg); animation: fx-pulse-ring 1.2s infinite; }

/* ---------- Loader ---------- */
#global-loader { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#global-loader .loader-content { animation: fx-slide-down .3s var(--anim-ease) both; }
#global-loader .loader-text::after { content: ''; animation: fx-dots 1.4s steps(1) infinite; }

/* ---------- Status pills ---------- */
.status-pill, .stat-badge { transition: transform .2s var(--anim-ease-back); }
.status-pill:hover, .stat-badge:hover { transform: scale(1.06); }

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .fx-reveal { opacity: 1 !important; transform: none !important; }
}