/**
 * ============================================================================
 * PRODUCTION ANIMATIONS & EFFECTS - Imperial & Gold Style
 * ============================================================================
 * 
 * Modular animation system for BridgeBanks360
 * Apply classes to any element for instant UX enhancement
 * 
 * PHILOSOPHY:
 * - Smooth, professional animations (200-300ms)
 * - GPU-accelerated (transform, opacity)
 * - Respect prefers-reduced-motion
 * - No layout shift (use transform, not margin/padding)
 * - Consistent easing curves
 * 
 * USAGE:
 * Add utility classes to HTML elements:
 * <div class="card hover-lift fade-in">...</div>
 * <button class="btn hover-glow pulse-once">...</button>
 * 
 * ============================================================================
 */

/**
 * ============================================================================
 * ACCESSIBILITY: Respect User Preferences
 * ============================================================================
 */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/**
 * ============================================================================
 * ENTRANCE ANIMATIONS - Use on page load
 * ============================================================================
 */

/* Fade In - Smooth opacity transition */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 300ms ease-out forwards;
}

.fade-in-fast {
    animation: fadeIn 150ms ease-out forwards;
}

.fade-in-slow {
    animation: fadeIn 500ms ease-out forwards;
}

/* Slide Up - Content slides from bottom */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scale In - Zoom effect */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in {
    animation: scaleIn 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays for multiple elements */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
.delay-6 { animation-delay: 300ms; }

/**
 * ============================================================================
 * HOVER EFFECTS - Interactive states
 * ============================================================================
 */

/* Lift Effect - Card/button lifts on hover */
.hover-lift {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(7, 17, 31, 0.70),
                0 0 32px rgba(232, 197, 71, 0.18);
}

body.theme-light .hover-lift:hover {
    box-shadow: 0 24px 48px rgba(148, 163, 184, 0.35),
                0 0 28px rgba(232, 197, 71, 0.22);
}

/* Lift Small - Subtle lift for smaller elements */
.hover-lift-sm {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(7, 17, 31, 0.55),
                0 0 24px rgba(232, 197, 71, 0.14);
}

/* Glow Effect - Gold/teal glow on hover */
.hover-glow {
    transition: box-shadow 300ms ease;
}

.hover-glow:hover {
    box-shadow: 0 0 32px rgba(232, 197, 71, 0.40),
                0 0 64px rgba(74, 171, 137, 0.25),
                0 20px 40px rgba(7, 17, 31, 0.45);
}

body.theme-light .hover-glow:hover {
    box-shadow: 0 0 28px rgba(232, 197, 71, 0.45),
                0 0 56px rgba(74, 171, 137, 0.30),
                0 16px 32px rgba(148, 163, 184, 0.28);
}

/* Scale Effect - Slight zoom on hover */
.hover-scale {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Border Glow - Animated border on hover */
.hover-border-glow {
    position: relative;
    transition: border-color 200ms ease;
}

.hover-border-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, 
        rgba(232, 197, 71, 0) 0%,
        rgba(232, 197, 71, 0.6) 50%,
        rgba(74, 171, 137, 0.6) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.hover-border-glow:hover::before {
    opacity: 1;
}

/**
 * ============================================================================
 * PULSE ANIMATIONS - Attention grabbers
 * ============================================================================
 */

/* Pulse Glow - Repeating glow effect */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 16px rgba(232, 197, 71, 0.20),
                    0 0 32px rgba(74, 171, 137, 0.12);
    }
    50% {
        box-shadow: 0 0 28px rgba(232, 197, 71, 0.40),
                    0 0 56px rgba(74, 171, 137, 0.25);
    }
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Pulse Once - Single pulse for notifications */
@keyframes pulseOnce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-once {
    animation: pulseOnce 400ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

/* Pulse Scale - Subtle scale pulse */
@keyframes pulseScale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.pulse-scale {
    animation: pulseScale 1.5s ease-in-out infinite;
}

/**
 * ============================================================================
 * SHIMMER EFFECT - Loading/highlight states
 * ============================================================================
 */

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(232, 197, 71, 0.15) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

/* Shimmer on element (not background) */
.shimmer-overlay {
    position: relative;
    overflow: hidden;
}

.shimmer-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(232, 197, 71, 0.20) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2.5s linear infinite;
    pointer-events: none;
}

/**
 * ============================================================================
 * GRADIENT ANIMATIONS - Animated backgrounds
 * ============================================================================
 */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

/* Rotating Border Gradient */
@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.rotating-border {
    position: relative;
    overflow: hidden;
}

.rotating-border::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, 
        #E8C547 0%,
        #4AAB89 33%,
        #7DD3FC 66%,
        #E8C547 100%
    );
    border-radius: inherit;
    animation: rotateBorder 4s linear infinite;
    opacity: 0.8;
    z-index: -1;
}

.rotating-border::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--card-bg);
    border-radius: inherit;
    z-index: -1;
}

/**
 * ============================================================================
 * LOADING ANIMATIONS
 * ============================================================================
 */

/* Skeleton Loading */
@keyframes skeletonLoading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.10) 0%,
        rgba(232, 197, 71, 0.15) 50%,
        rgba(148, 163, 184, 0.10) 100%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* Spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}

/**
 * ============================================================================
 * NUMBER ANIMATIONS - For metrics/KPIs
 * ============================================================================
 */

/* Number Count Up - Add to number elements */
.count-up {
    display: inline-block;
    animation: fadeIn 600ms ease-out forwards;
}

/* Metric Highlight - Flash effect for updated metrics */
@keyframes metricHighlight {
    0% {
        background-color: rgba(232, 197, 71, 0.25);
        transform: scale(1);
    }
    50% {
        background-color: rgba(232, 197, 71, 0.40);
        transform: scale(1.05);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

.metric-highlight {
    animation: metricHighlight 800ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

/**
 * ============================================================================
 * CHART ANIMATIONS - For graphs and visualizations
 * ============================================================================
 */

/* Bar Chart - Animate height */
@keyframes barGrow {
    from {
        transform: scaleY(0);
        transform-origin: bottom;
    }
    to {
        transform: scaleY(1);
        transform-origin: bottom;
    }
}

.chart-bar-animate {
    animation: barGrow 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Donut Chart - Animate stroke */
@keyframes drawCircle {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.chart-circle-animate {
    animation: drawCircle 1s ease-out forwards;
}

/**
 * ============================================================================
 * TABLE ANIMATIONS - For data tables
 * ============================================================================
 */

/* Row Highlight - Highlight on update */
@keyframes rowHighlight {
    0% {
        background-color: rgba(232, 197, 71, 0.20);
    }
    100% {
        background-color: transparent;
    }
}

.table-row-highlight {
    animation: rowHighlight 1s ease-out 1;
}

/* Hover Row Effect */
.table-row-hover {
    transition: background-color 200ms ease,
                transform 200ms ease;
}

.table-row-hover:hover {
    background-color: rgba(232, 197, 71, 0.08);
    transform: translateX(4px);
}

body.theme-light .table-row-hover:hover {
    background-color: rgba(232, 197, 71, 0.12);
}

/**
 * ============================================================================
 * NOTIFICATION ANIMATIONS
 * ============================================================================
 */

/* Slide In From Top - For toast notifications */
@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-enter {
    animation: slideInTop 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide Out Top */
@keyframes slideOutTop {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

.notification-exit {
    animation: slideOutTop 200ms ease-in forwards;
}

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

.btn-press {
    transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-press:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 8px 16px rgba(7, 17, 31, 0.35);
}

/**
 * ============================================================================
 * PROGRESS ANIMATIONS
 * ============================================================================
 */

/* Progress Bar Fill */
@keyframes progressFill {
    from {
        width: 0;
    }
}

.progress-bar-animate {
    animation: progressFill 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Progress Shimmer */
.progress-shimmer {
    position: relative;
    overflow: hidden;
}

.progress-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: shimmer 2s infinite;
}

/**
 * ============================================================================
 * SCROLL REVEAL - Animate elements as they enter viewport
 * ============================================================================
 * 
 * Requires JavaScript Intersection Observer:
 * 
 * const observer = new IntersectionObserver((entries) => {
 *   entries.forEach(entry => {
 *     if (entry.isIntersecting) {
 *       entry.target.classList.add('is-visible');
 *     }
 *   });
 * });
 * 
 * document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));
 * 
 * ============================================================================
 */

.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/**
 * ============================================================================
 * MICRO-INTERACTIONS - Subtle feedback
 * ============================================================================
 */

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.bounce {
    animation: bounce 500ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

/* Shake - For error states */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.shake {
    animation: shake 300ms ease-in-out 1;
}

/* Success Checkmark Animation */
@keyframes checkmark {
    0% {
        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.checkmark-animate {
    stroke-dasharray: 50;
    animation: checkmark 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/**
 * ============================================================================
 * FOCUS STATES - Accessibility
 * ============================================================================
 */

.focus-glow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(232, 197, 71, 0.30),
                0 0 24px rgba(232, 197, 71, 0.40);
}

.focus-ring:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/**
 * ============================================================================
 * UTILITY CLASSES
 * ============================================================================
 */

/* Smooth transitions for all properties */
.transition-all {
    transition: all 200ms ease;
}

.transition-fast {
    transition: all 150ms ease;
}

.transition-slow {
    transition: all 300ms ease;
}

/* Transform GPU acceleration hint */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Prevent layout shift during animations */
.no-layout-shift {
    contain: layout;
}