// ================================================
// FikoFinans - Premium Animation System v2.0
// World-Class Micro-interactions & Transitions
// ================================================
// Usage: @import '../styles/finans-animations.less';
// ================================================

// ==================== 1. PAGE TRANSITIONS ====================

// Page enter/exit with stagger
@keyframes finans-pageEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes finans-pageExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
}

.finans-page-enter {
  animation: finans-pageEnter 400ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.finans-page-exit {
  animation: finans-pageExit 250ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

// Staggered children on page enter
.finans-page-stagger {
  & > * {
    animation: finans-fadeInUp 400ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
  }
  & > *:nth-child(1) { animation-delay: 50ms; }
  & > *:nth-child(2) { animation-delay: 100ms; }
  & > *:nth-child(3) { animation-delay: 150ms; }
  & > *:nth-child(4) { animation-delay: 200ms; }
  & > *:nth-child(5) { animation-delay: 250ms; }
  & > *:nth-child(6) { animation-delay: 300ms; }
  & > *:nth-child(7) { animation-delay: 350ms; }
  & > *:nth-child(8) { animation-delay: 400ms; }
  & > *:nth-child(9) { animation-delay: 450ms; }
  & > *:nth-child(10) { animation-delay: 500ms; }
}

@keyframes finans-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// ==================== 2. CARD ANIMATIONS ====================

// 3D perspective hover with tilt
.finans-card-3d {
  transition: transform var(--finans-transition-normal),
              box-shadow var(--finans-transition-normal);
  transform-style: preserve-3d;
  perspective: 1000px;

  &:hover {
    transform: translateY(-4px) rotateX(2deg);
    box-shadow: var(--finans-shadow-float);
  }

  &:active {
    transform: translateY(-2px) scale(0.98);
    transition-duration: 80ms;
  }
}

// Magnetic cursor effect (requires JS for full effect, but provides hover state)
.finans-card-magnetic {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);

  &:hover {
    transform: translateZ(4px) scale(1.01);
    box-shadow: var(--finans-shadow-float);
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                                rgba(var(--finans-brand-rgb), 0.04) 0%,
                                transparent 50%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    border-radius: inherit;
  }

  &:hover::after {
    opacity: 1;
  }
}

// Parallax tilt effect
.finans-card-tilt {
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;

  &:hover {
    transform: rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) translateZ(8px);
  }

  .finans-card-tilt-inner {
    transform: translateZ(20px);
  }
}

// Card reveal on scroll
.finans-card-reveal {
  animation: finans-cardReveal 600ms cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}

@keyframes finans-cardReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.92) rotateX(10deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

// ==================== 3. NUMBER ANIMATIONS ====================

// Counter roll-up animation
@keyframes finans-counterUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.finans-number-rollup {
  animation: finans-counterUp 800ms cubic-bezier(0.23, 1, 0.32, 1);
  font-variant-numeric: tabular-nums;
}

// Currency flip animation
.finans-currency-flip {
  display: inline-block;
  animation: finans-flipIn 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes finans-flipIn {
  0% {
    opacity: 0;
    transform: rotateX(-90deg) translateY(-10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotateX(0) translateY(0);
  }
}

// Value change pulse (green for increase, red for decrease)
.finans-value-increase {
  animation: finans-valuePulseGreen 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.finans-value-decrease {
  animation: finans-valuePulseRed 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes finans-valuePulseGreen {
  0%, 100% {
    background: transparent;
    transform: scale(1);
  }
  30% {
    background: var(--finans-gelir-bg);
    transform: scale(1.05);
  }
  60% {
    background: var(--finans-gelir-bg);
  }
}

@keyframes finans-valuePulseRed {
  0%, 100% {
    background: transparent;
    transform: scale(1);
  }
  30% {
    background: var(--finans-gider-bg);
    transform: scale(1.05);
  }
  60% {
    background: var(--finans-gider-bg);
  }
}

// Digit rolling effect
.finans-digit-roll {
  display: inline-block;
  animation: finans-digitRoll 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes finans-digitRoll {
  0% {
    transform: translateY(100%) rotateX(-90deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}

// ==================== 4. CHART ANIMATIONS ====================

// Chart drawing reveal
@keyframes finans-chartDrawIn {
  from {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.finans-chart-draw {
  stroke-dasharray: 1000;
  animation: finans-chartDrawIn 1200ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

// Bar chart slide up
@keyframes finans-barSlideUp {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

.finans-chart-bar {
  animation: finans-barSlideUp 600ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;

  &:nth-child(1) { animation-delay: 50ms; }
  &:nth-child(2) { animation-delay: 100ms; }
  &:nth-child(3) { animation-delay: 150ms; }
  &:nth-child(4) { animation-delay: 200ms; }
  &:nth-child(5) { animation-delay: 250ms; }
  &:nth-child(6) { animation-delay: 300ms; }
  &:nth-child(7) { animation-delay: 350ms; }
  &:nth-child(8) { animation-delay: 400ms; }
}

// Pie chart reveal
@keyframes finans-pieReveal {
  from {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.finans-chart-pie {
  animation: finans-pieReveal 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

// ==================== 5. MICRO-INTERACTIONS ====================

// Button press with ripple
.finans-btn-ripple {
  position: relative;
  overflow: hidden;
  transition: transform 80ms ease, box-shadow 120ms ease;

  &:active {
    transform: scale(0.96);
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 600ms ease, height 600ms ease, opacity 600ms ease;
    opacity: 0;
  }

  &:active::before {
    width: 300px;
    height: 300px;
    opacity: 0.3;
    transition: 0ms;
  }
}

// Toggle switch smooth animation
.finans-toggle {
  transition: background var(--finans-transition-normal),
              transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);

  .finans-toggle-handle {
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  &.checked .finans-toggle-handle {
    transform: translateX(100%);
  }
}

// Checkbox celebrate animation
.finans-checkbox-celebrate {
  &:checked + label::after {
    animation: finans-checkCelebrate 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@keyframes finans-checkCelebrate {
  0% {
    transform: scale(0) rotate(-45deg);
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

// Input focus glow
.finans-input-focus {
  transition: border-color var(--finans-transition-fast),
              box-shadow var(--finans-transition-fast);

  &:focus {
    border-color: var(--finans-brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--finans-brand-rgb), 0.1),
                0 1px 3px rgba(0, 0, 0, 0.1);
  }
}

// ==================== 6. LOADING STATES ====================

// Skeleton shimmer
@keyframes finans-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.finans-skeleton {
  background: linear-gradient(
    90deg,
    var(--finans-bg-secondary) 0%,
    var(--finans-bg-tertiary) 20%,
    var(--finans-bg-secondary) 40%,
    var(--finans-bg-secondary) 100%
  );
  background-size: 800px 100%;
  animation: finans-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--finans-radius-sm);
}

// Pulse loader
@keyframes finans-pulseLoader {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.finans-pulse-loader {
  animation: finans-pulseLoader 1.4s ease-in-out infinite;
}

.finans-pulse-loader-group {
  display: flex;
  gap: var(--finans-space-2);

  & > *:nth-child(1) { animation-delay: 0ms; }
  & > *:nth-child(2) { animation-delay: 200ms; }
  & > *:nth-child(3) { animation-delay: 400ms; }
}

// Progress bar with gradient
@keyframes finans-progressSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

.finans-progress-animated {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    animation: finans-progressSlide 1.5s ease-in-out infinite;
  }
}

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

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

// ==================== 7. SUCCESS/ERROR STATES ====================

// Confetti burst trigger (CSS-only particles)
.finans-confetti-trigger {
  position: relative;

  &.burst::before,
  &.burst::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--finans-brand-primary);
    opacity: 0;
    animation: finans-confettiBurst 800ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  &.burst::after {
    animation-delay: 100ms;
    background: var(--finans-gelir);
  }
}

@keyframes finans-confettiBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 40px), calc(-50% - 60px)) scale(1.5) rotate(180deg);
  }
}

// Error shake
@keyframes finans-errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

.finans-error-shake {
  animation: finans-errorShake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: var(--finans-gider) !important;
}

// Success checkmark draw
@keyframes finans-checkmarkDraw {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.finans-checkmark {
  stroke-dasharray: 100;
  animation: finans-checkmarkDraw 600ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

// Success bounce
@keyframes finans-successBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.finans-success-bounce {
  animation: finans-successBounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

// ==================== 8. SCROLL ANIMATIONS ====================

// Reveal on scroll with fade
.finans-scroll-reveal {
  animation: finans-scrollReveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

@keyframes finans-scrollReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

// Parallax section
.finans-parallax {
  animation: finans-parallaxMove linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

@keyframes finans-parallaxMove {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}

// Fade-in-up stagger
.finans-scroll-stagger {
  & > * {
    animation: finans-fadeInUp 500ms cubic-bezier(0.23, 1, 0.32, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  & > *:nth-child(2n) { animation-delay: 50ms; }
  & > *:nth-child(3n) { animation-delay: 100ms; }
  & > *:nth-child(4n) { animation-delay: 150ms; }
}

// Scale on scroll
.finans-scroll-scale {
  animation: finans-scrollScale linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}

@keyframes finans-scrollScale {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

// ==================== 9. NOTIFICATION ANIMATIONS ====================

// Slide-in from right
@keyframes finans-notifSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.finans-notification-enter {
  animation: finans-notifSlideIn 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

// Slide-out to right
@keyframes finans-notifSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
    max-height: 200px;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
    max-height: 0;
  }
}

.finans-notification-exit {
  animation: finans-notifSlideOut 250ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

// Bell wiggle
@keyframes finans-bellWiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-12deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(12deg);
  }
}

.finans-bell-wiggle {
  animation: finans-bellWiggle 800ms ease-in-out;
}

// Badge bounce
@keyframes finans-badgeBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.finans-badge-bounce {
  animation: finans-badgeBounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

// Notification pulse
@keyframes finans-notifPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--finans-brand-rgb), 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--finans-brand-rgb), 0);
  }
}

.finans-notification-pulse {
  animation: finans-notifPulse 2s ease-in-out infinite;
}

// ==================== 10. DATA UPDATE ANIMATIONS ====================

// Value change highlight (green flash for increase)
.finans-value-flash-up {
  animation: finans-flashGreen 800ms ease-out;
}

@keyframes finans-flashGreen {
  0% {
    background: transparent;
  }
  20% {
    background: var(--finans-gelir-bg);
    box-shadow: 0 0 0 3px rgba(var(--finans-brand-rgb), 0.2);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 rgba(var(--finans-brand-rgb), 0);
  }
}

// Value change highlight (red flash for decrease)
.finans-value-flash-down {
  animation: finans-flashRed 800ms ease-out;
}

@keyframes finans-flashRed {
  0% {
    background: transparent;
  }
  20% {
    background: var(--finans-gider-bg);
    box-shadow: 0 0 0 3px rgba(255, 23, 68, 0.2);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 rgba(255, 23, 68, 0);
  }
}

// Row insert animation
@keyframes finans-rowInsert {
  from {
    opacity: 0;
    max-height: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    max-height: 100px;
    transform: scaleY(1);
  }
}

.finans-row-insert {
  animation: finans-rowInsert 400ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: top;
}

// Row remove animation
@keyframes finans-rowRemove {
  from {
    opacity: 1;
    max-height: 100px;
    transform: scaleX(1);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: scaleX(0.95);
    margin: 0;
    padding: 0;
  }
}

.finans-row-remove {
  animation: finans-rowRemove 300ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

// Data sync pulse
@keyframes finans-dataSyncPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.finans-data-syncing {
  animation: finans-dataSyncPulse 1.5s ease-in-out infinite;
}

// ==================== 11. MORPHING ANIMATIONS ====================

// Shape morphing for status changes
@keyframes finans-morphCircleToCheck {
  0% {
    border-radius: 50%;
    transform: rotate(0deg) scale(1);
  }
  50% {
    border-radius: 20%;
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    border-radius: var(--finans-radius-sm);
    transform: rotate(360deg) scale(1);
  }
}

.finans-morph-check {
  animation: finans-morphCircleToCheck 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

// Icon transition
@keyframes finans-iconFade {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
  }
  51% {
    opacity: 0;
    transform: scale(0.3) rotate(-90deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.finans-icon-transition {
  animation: finans-iconFade 400ms ease-in-out;
}

// Status badge morph
.finans-status-morph {
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  &.status-change {
    animation: finans-statusPop 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
}

@keyframes finans-statusPop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3) rotate(5deg);
  }
}

// ==================== 12. PARTICLE EFFECTS ====================

// CSS-only sparkle effect for achievements
@keyframes finans-sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.finans-sparkle-container {
  position: relative;

  &::before,
  &::after {
    content: '✨';
    position: absolute;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
  }

  &::before {
    top: -8px;
    right: -8px;
    animation: finans-sparkle 1.5s ease-in-out infinite;
  }

  &::after {
    bottom: -8px;
    left: -8px;
    animation: finans-sparkle 1.5s ease-in-out infinite 0.75s;
  }
}

// Floating particles
@keyframes finans-particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) translateX(var(--particle-x, 20px)) scale(1.5);
  }
}

.finans-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--finans-brand-primary);
  border-radius: 50%;
  pointer-events: none;
  animation: finans-particleFloat 2s ease-out forwards;

  &:nth-child(1) { --particle-x: -20px; animation-delay: 0ms; }
  &:nth-child(2) { --particle-x: 30px; animation-delay: 200ms; }
  &:nth-child(3) { --particle-x: -10px; animation-delay: 400ms; }
  &:nth-child(4) { --particle-x: 15px; animation-delay: 600ms; }
}

// ==================== 13. GLASSMORPHISM ENHANCED ====================

// Frosted glass with animated gradient border
.finans-glass-animated {
  position: relative;
  background: var(--finans-glass-bg);
  backdrop-filter: blur(var(--finans-glass-blur));
  -webkit-backdrop-filter: blur(var(--finans-glass-blur));
  border: 1px solid transparent;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(var(--finans-brand-rgb), 0.3),
      rgba(var(--finans-brand-rgb), 0.05),
      rgba(var(--finans-brand-rgb), 0.3)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 200% 200%;
    animation: finans-borderFlow 3s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes finans-borderFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

// Liquid glass refraction effect
.finans-liquid-glass {
  position: relative;
  background: var(--finans-glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
  }

  &:hover::after {
    opacity: 1;
    animation: finans-liquidMove 3s ease-in-out infinite;
  }
}

@keyframes finans-liquidMove {
  0%, 100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(30%, -30%);
  }
  66% {
    transform: translate(-30%, 30%);
  }
}

// ==================== 14. 3D CARD FLIP ====================

// Credit card flip (front/back)
.finans-card-flip-container {
  perspective: 1000px;
}

.finans-card-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-style: preserve-3d;

  &.flipped {
    transform: rotateY(180deg);
  }
}

.finans-card-front,
.finans-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.finans-card-back {
  transform: rotateY(180deg);
}

// Interactive flip on hover
.finans-card-flip-hover {
  .finans-card-flipper {
    &:hover {
      transform: rotateY(180deg);
    }
  }
}

// ==================== 15. ELASTIC/SPRING PHYSICS ====================

// Bounce effect
@keyframes finans-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  10%, 30% {
    transform: translateY(-8px);
  }
  20% {
    transform: translateY(-16px);
  }
  40% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(0);
  }
}

.finans-bounce {
  animation: finans-bounce 1s ease-in-out;
}

// Elastic bounce (overshoot)
@keyframes finans-elasticBounce {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.finans-elastic-bounce {
  animation: finans-elasticBounce 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

// Spring-back on click
.finans-spring-click {
  transition: transform 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  &:active {
    transform: scale(0.92);
  }
}

// Overshoot entrance
@keyframes finans-overshootIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.finans-overshoot-in {
  animation: finans-overshootIn 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

// Jello effect
@keyframes finans-jello {
  0%, 100% {
    transform: skewX(0deg) skewY(0deg);
  }
  30% {
    transform: skewX(12.5deg) skewY(12.5deg);
  }
  40% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  50% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  60% {
    transform: skewX(-6.25deg) skewY(-6.25deg);
  }
  70% {
    transform: skewX(3.125deg) skewY(3.125deg);
  }
  80% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
}

.finans-jello {
  animation: finans-jello 900ms ease-in-out;
  transform-origin: center;
}

// Rubber band
@keyframes finans-rubberBand {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85);
  }
  65% {
    transform: scaleX(0.95) scaleY(1.05);
  }
  75% {
    transform: scaleX(1.05) scaleY(0.95);
  }
}

.finans-rubber-band {
  animation: finans-rubberBand 1s ease-in-out;
}

// Wobble
@keyframes finans-wobble {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
}

.finans-wobble {
  animation: finans-wobble 1s ease-in-out;
}

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

// Animation delay utilities
.finans-delay-0 { animation-delay: 0ms; }
.finans-delay-50 { animation-delay: 50ms; }
.finans-delay-100 { animation-delay: 100ms; }
.finans-delay-150 { animation-delay: 150ms; }
.finans-delay-200 { animation-delay: 200ms; }
.finans-delay-300 { animation-delay: 300ms; }
.finans-delay-500 { animation-delay: 500ms; }

// Animation duration utilities
.finans-duration-fast { animation-duration: 200ms; }
.finans-duration-normal { animation-duration: 400ms; }
.finans-duration-slow { animation-duration: 600ms; }

// Transform utilities
.finans-transform-gpu {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

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

@media (prefers-reduced-motion: reduce) {
  // Disable all animations for users who prefer reduced motion
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  // Keep essential feedback animations but make them instant
  .finans-btn-ripple,
  .finans-spring-click,
  .finans-card-3d,
  .finans-card-magnetic,
  .finans-card-tilt {
    &:active {
      transform: scale(0.98);
      transition: transform 50ms ease;
    }
  }

  // Disable particle effects completely
  .finans-sparkle-container::before,
  .finans-sparkle-container::after,
  .finans-particle {
    display: none !important;
  }
}

// ==================== PERFORMANCE OPTIMIZATIONS ====================

// GPU-accelerated transforms for smoother animations
.finans-gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

// Container for animations to prevent layout thrashing
.finans-animation-container {
  contain: layout style paint;
  content-visibility: auto;
}

// ================================================
// END OF ANIMATIONS
// ================================================