/* ==============================================================================
   JAIN CREDIT APP - SNAPPY MOTION & MICRO-INTERACTIONS (150-250ms)
   Motion should explain what changed, not decorate.
   ============================================================================== */

:root {
  --anim-duration-fast: 180ms;
  --anim-duration-normal: 220ms;
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* View Transitions API */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}

::view-transition-new(root) {
  animation: 220ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* @starting-style support for modern Chrome/Edge browsers */
@supports (@starting-style: {}) {
  dialog[open], .anim-dropdown[open], .anim-modal[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity var(--anim-duration-normal) var(--anim-ease-out),
                transform var(--anim-duration-normal) var(--anim-ease-out);
  }

  @starting-style {
    dialog[open], .anim-dropdown[open], .anim-modal[open] {
      opacity: 0;
      transform: scale(0.96) translateY(-4px);
    }
  }
}

/* Skeleton Loaders (replacing generic spinners) */
.skeleton {
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, 6px);
}

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

.skeleton-text {
  height: 14px;
  margin-bottom: 6px;
  border-radius: 4px;
}

.skeleton-title {
  height: 22px;
  width: 60%;
  margin-bottom: 12px;
  border-radius: 6px;
}

.skeleton-card {
  height: 120px;
  border-radius: 12px;
}

/* Micro-interaction hovers */
.hover-lift {
  transition: transform var(--anim-duration-fast) var(--anim-ease-out),
              box-shadow var(--anim-duration-fast) var(--anim-ease-out);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08);
}

.hover-scale {
  transition: transform var(--anim-duration-fast) var(--anim-ease-out);
}

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

.hover-scale:active {
  transform: scale(0.98);
}