/* ============================================================
   SettlementRadar — Animation Library (Task #1308675)
   Entrance animations, micro-interactions, radar sweep,
   and scroll-triggered reveals.

   Respects prefers-reduced-motion throughout.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   Elements start hidden, animate in when .sr-visible is added
   (via IntersectionObserver in animations.js)
   ═══════════════════════════════════════════════════════════ */

/* Fade In */
.sr-fade-in {
  opacity: 0;
  transition: opacity var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-fade-in.sr-visible {
  opacity: 1;
}

/* Slide Up + Fade */
.sr-slide-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-slide-up.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide Up — Staggered children */
.sr-slide-up-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-slide-up-stagger.sr-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.sr-slide-up-stagger.sr-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.sr-slide-up-stagger.sr-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.sr-slide-up-stagger.sr-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.sr-slide-up-stagger.sr-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.sr-slide-up-stagger.sr-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.sr-slide-up-stagger.sr-visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.sr-slide-up-stagger.sr-visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: translateY(0); }

/* Scale In */
.sr-scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--duration-slow, 300ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--duration-slow, 300ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.sr-scale-in.sr-visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide Left */
.sr-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-slide-left.sr-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide Right */
.sr-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-slide-right.sr-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Blur In */
.sr-blur-in {
  opacity: 0;
  filter: blur(8px);
  transition: opacity var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              filter var(--duration-slower, 500ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-blur-in.sr-visible {
  opacity: 1;
  filter: blur(0);
}

/* Custom delay utilities for entrance animations */
.sr-delay-1 { transition-delay: 100ms !important; }
.sr-delay-2 { transition-delay: 200ms !important; }
.sr-delay-3 { transition-delay: 300ms !important; }
.sr-delay-4 { transition-delay: 400ms !important; }
.sr-delay-5 { transition-delay: 500ms !important; }


/* ═══════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   Applied directly — no JS trigger needed
   ═══════════════════════════════════════════════════════════ */

/* Hover Lift */
.sr-hover-lift {
  transition: transform var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              box-shadow var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.05));
}

/* Hover Scale */
.sr-hover-scale {
  transition: transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

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

/* Press Effect */
.sr-press-effect {
  transition: transform var(--duration-instant, 100ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-press-effect:active {
  transform: scale(0.98);
}

/* Hover Glow — Gold */
.sr-hover-glow-gold {
  transition: box-shadow var(--duration-slow, 300ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-hover-glow-gold:hover {
  box-shadow: var(--shadow-glow-gold, 0 0 30px rgba(212, 175, 55, 0.3));
}

/* Hover Glow — Blue */
.sr-hover-glow-blue {
  transition: box-shadow var(--duration-slow, 300ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-hover-glow-blue:hover {
  box-shadow: var(--shadow-glow-blue, 0 0 30px rgba(30, 64, 175, 0.2));
}

/* Link arrow nudge on hover */
.sr-link-arrow::after {
  content: ' \2192';
  display: inline-block;
  transition: transform var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.sr-link-arrow:hover::after {
  transform: translateX(4px);
}


/* ═══════════════════════════════════════════════════════════
   CONTINUOUS ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* Pulse (for urgent items) */
.sr-pulse {
  animation: sr-pulse 2s ease-in-out infinite;
}

@keyframes sr-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Float (subtle up/down) */
.sr-float {
  animation: sr-float 3s ease-in-out infinite;
}

@keyframes sr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Spin */
.sr-spin {
  animation: sr-spin 1s linear infinite;
}

@keyframes sr-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Breathing glow */
.sr-breathe {
  animation: sr-breathe 3s ease-in-out infinite;
}

@keyframes sr-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 64, 175, 0); }
  50% { box-shadow: 0 0 20px 4px rgba(30, 64, 175, 0.15); }
}

/* Shimmer — Loading skeleton */
.sr-shimmer {
  position: relative;
  overflow: hidden;
}

.sr-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  animation: sr-shimmer-sweep 1.5s ease-in-out infinite;
}

@keyframes sr-shimmer-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Count up number animation (pair with JS) */
.sr-count-up {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, monospace);
}


/* ═══════════════════════════════════════════════════════════
   RADAR SWEEP MOTIF
   The signature SettlementRadar visual — rotating sweep
   ═══════════════════════════════════════════════════════════ */

.sr-radar-sweep {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.sr-radar-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 340deg,
    rgba(30, 64, 175, 0.08) 350deg,
    rgba(30, 64, 175, 0.2) 355deg,
    rgba(30, 64, 175, 0.4) 358deg,
    rgba(30, 64, 175, 0.6) 359deg,
    rgba(30, 64, 175, 0.8) 359.5deg,
    rgba(30, 64, 175, 1) 360deg
  );
  animation: sr-radar-rotate 4s linear infinite;
  border-radius: 50%;
}

.sr-radar-sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(30, 64, 175, 0.1);
}

@keyframes sr-radar-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Radar sweep for non-circular containers (hero, loading, etc.) */
.sr-radar-sweep-bg {
  position: relative;
  overflow: hidden;
}

.sr-radar-sweep-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 350deg,
    rgba(30, 64, 175, 0.04) 355deg,
    rgba(30, 64, 175, 0.08) 358deg,
    rgba(30, 64, 175, 0.12) 360deg
  );
  animation: sr-radar-rotate 6s linear infinite;
  pointer-events: none;
}

/* Radar concentric rings (for hero/loading backgrounds) */
.sr-radar-rings {
  position: relative;
}

.sr-radar-rings::before,
.sr-radar-rings::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(30, 64, 175, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.sr-radar-rings::before {
  width: 300px;
  height: 300px;
}

.sr-radar-rings::after {
  width: 500px;
  height: 500px;
}

/* Radar dot on sweep line */
.sr-radar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 12px rgba(30, 64, 175, 0.6), 0 0 4px rgba(30, 64, 175, 0.8);
  animation: sr-radar-dot-ping 2s ease-out infinite;
}

@keyframes sr-radar-dot-ping {
  0% { transform: scale(1); opacity: 1; }
  75% { transform: scale(2); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════ */

/* Page enter (added via JS on navigation) */
.sr-page-entering {
  opacity: 0;
}

.sr-page-enter {
  animation: sr-page-enter-anim var(--duration-slow, 300ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

@keyframes sr-page-enter-anim {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   Respect user preferences
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sr-fade-in,
  .sr-slide-up,
  .sr-scale-in,
  .sr-slide-left,
  .sr-slide-right,
  .sr-blur-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .sr-slide-up-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sr-pulse,
  .sr-float,
  .sr-spin,
  .sr-breathe,
  .sr-shimmer::after,
  .sr-radar-sweep::before,
  .sr-radar-sweep-bg::before,
  .sr-radar-dot {
    animation: none !important;
  }

  .sr-hover-lift:hover,
  .sr-hover-scale:hover,
  .sr-press-effect:active {
    transform: none !important;
  }
}