/* =============================================================================
   animations.css — VerifAIer v1.33.0 · Localhost Enterprise Demo Surface
   Subtle enterprise-grade transitions. No external dependencies. No CDN.

   Principles:
   - Entrance animations only (not looping, not decorative)
   - Reduced-motion friendly — all motion disabled at media query
   - No spring-physics that can feel slick or unprofessional
   - Motion communicates structure, not personality
   ============================================================================= */

/* ── Keyframes ─────────────────────────────────────────────────────────────── */

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

@keyframes vrf-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vrf-slide-right {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes vrf-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Entrance utility classes ──────────────────────────────────────────────── */

/* Fade only */
.vrf-animate-fade {
  animation: vrf-fade-in 280ms ease both;
}

/* Slide up + fade — use on cards, panels, main content sections */
.vrf-animate-in {
  animation: vrf-slide-up 360ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Slide right + fade — use on step lists, sidebar content */
.vrf-animate-from-left {
  animation: vrf-slide-right 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Scale + fade — use on modal-style panels */
.vrf-animate-scale {
  animation: vrf-scale-in 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Staggered delay helpers ───────────────────────────────────────────────── */
/* Apply .vrf-stagger to a grid/flex parent; children receive staggered delay */

.vrf-stagger > *:nth-child(1) { animation-delay:   0ms; }
.vrf-stagger > *:nth-child(2) { animation-delay:  60ms; }
.vrf-stagger > *:nth-child(3) { animation-delay: 120ms; }
.vrf-stagger > *:nth-child(4) { animation-delay: 180ms; }
.vrf-stagger > *:nth-child(5) { animation-delay: 240ms; }
.vrf-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* ── Section reveal ────────────────────────────────────────────────────────── */
/* Apply to vrf-section elements for a gentle entrance on load */

.vrf-section-reveal {
  animation: vrf-slide-up 440ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.vrf-section-reveal:nth-of-type(1) { animation-delay:   0ms; }
.vrf-section-reveal:nth-of-type(2) { animation-delay:  80ms; }
.vrf-section-reveal:nth-of-type(3) { animation-delay: 160ms; }
.vrf-section-reveal:nth-of-type(4) { animation-delay: 240ms; }
.vrf-section-reveal:nth-of-type(5) { animation-delay: 320ms; }

/* ── Card hover lift ───────────────────────────────────────────────────────── */
/* Pairs with existing component transitions — adds subtle Y translate on hover */

.vrf-card-hover {
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.vrf-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Highlight flash — for step activation, receipt expand ────────────────── */

@keyframes vrf-highlight-pulse {
  0%   { box-shadow: 0 0 0 0 var(--color-green-glow); }
  50%  { box-shadow: 0 0 0 6px var(--color-green-glow); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.vrf-highlight-flash {
  animation: vrf-highlight-pulse 600ms ease both;
}

/* ── Skeleton loader shimmer ───────────────────────────────────────────────── */
/* Only used while data is loading — hidden once content renders */

@keyframes vrf-shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}

.vrf-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 0%,
    var(--bg-overlay) 50%,
    var(--bg-elevated) 100%
  );
  background-size: 800px 100%;
  animation: vrf-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-md);
}

/* ── Progress bar fill ─────────────────────────────────────────────────────── */

@keyframes vrf-progress-fill {
  from { width: 0%; }
}

.vrf-progress-bar {
  height: 2px;
  background: var(--color-green);
  border-radius: var(--r-full);
  animation: vrf-progress-fill 600ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Tab switch fade ───────────────────────────────────────────────────────── */

.vrf-tab-panel {
  animation: vrf-fade-in 200ms ease both;
}

/* ── Global focus enhancement ──────────────────────────────────────────────── */
/* Supplements demo.css focus-visible rules with consistent green ring */

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Reduced motion override ───────────────────────────────────────────────── */
/* When the user prefers reduced motion, disable ALL animation and transition.
   This is a hard reset — no exceptions. Accessibility requirement. */

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

  .vrf-card-hover:hover {
    transform: none;
  }

  .vrf-skeleton {
    animation: none;
    background: var(--bg-elevated);
  }
}