/**
 * ИЗВОРИ БЪЛГАРИЯ — ANIMATION SYSTEM
 * Всяка анимация тук е с цел. Нищо декоративно без смисъл.
 * Базирана на design-tokens.css motion tokens.
 */


/* ─────────────────────────────────────────────
 * ENTER ANIMATIONS
 * За елементи, влизащи в viewport.
 * ───────────────────────────────────────────── */

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

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ─────────────────────────────────────────────
 * WATER ANIMATIONS
 * Характерни за бранда — вода, капки, вълни.
 * ───────────────────────────────────────────── */

/* Ripple effect — при клик на бутон */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* Water drop falling */
@keyframes dropFall {
  0%   { transform: translateY(-8px) scale(0.8); opacity: 0; }
  50%  { transform: translateY(0) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Pulse — за live indicators */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.96); }
}

/* Glow pulse — за accent елементи */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(56,200,216,0.2); }
  50%       { box-shadow: 0 0 28px rgba(56,200,216,0.45); }
}

/* Wave — за background decorations */
@keyframes wave {
  0%   { transform: translateX(0) scaleY(1); }
  25%  { transform: translateX(-2%) scaleY(0.98); }
  50%  { transform: translateX(-4%) scaleY(1.02); }
  75%  { transform: translateX(-2%) scaleY(0.99); }
  100% { transform: translateX(0) scaleY(1); }
}

/* Blob float */
@keyframes blobFloat {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(20px,-14px) scale(1.04); }
  66%  { transform: translate(-14px,20px) scale(0.97); }
  100% { transform: translate(0,0) scale(1); }
}

/* Marquee scroll */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ─────────────────────────────────────────────
 * LOADING STATES
 * Skeleton screens > spinners.
 * ───────────────────────────────────────────── */

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

/* Skeleton base */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-elevated) 25%,
    rgba(255,255,255,0.07) 50%,
    var(--color-bg-elevated) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* Skeleton card */
.skeleton-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  overflow: hidden;
}

.skeleton-line {
  height: 14px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
}

.skeleton-line.short  { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long   { width: 90%; }
.skeleton-line.full   { width: 100%; }

.skeleton-image {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
}

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

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner.sm { width: 14px; height: 14px; }
.spinner.lg { width: 28px; height: 28px; border-width: 3px; }


/* ─────────────────────────────────────────────
 * MICRO-INTERACTIONS
 * При hover, focus, active states.
 * ───────────────────────────────────────────── */

/* Lift on hover */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

/* Scale on click */
.press-scale {
  transition: transform var(--duration-fast) var(--ease-out);
}
.press-scale:active {
  transform: scale(0.97);
}

/* Accent border on hover */
.hover-accent {
  transition: border-color var(--duration-normal) var(--ease-out);
}
.hover-accent:hover {
  border-color: var(--color-accent);
}


/* ─────────────────────────────────────────────
 * TOAST NOTIFICATIONS
 * ───────────────────────────────────────────── */

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* Toast container */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

/* Individual toast */
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(16px);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  pointer-events: all;
  animation: toastIn var(--duration-slow) var(--ease-spring) both;
  max-width: 360px;
}

.toast.exiting {
  animation: toastOut var(--duration-normal) var(--ease-in) both;
}

.toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.toast-message { flex: 1; line-height: var(--leading-snug); }

.toast.success { border-color: rgba(72,184,112,0.35); }
.toast.error   { border-color: rgba(224,96,96,0.35); }
.toast.warning { border-color: rgba(212,168,76,0.35); }
.toast.info    { border-color: var(--color-border-accent); }


/* ─────────────────────────────────────────────
 * PAGE TRANSITIONS
 * ───────────────────────────────────────────── */

.page-enter {
  animation: fadeIn var(--duration-slow) var(--ease-out) both;
}

/* Staggered children */
.stagger > * {
  animation: fadeUp var(--duration-slow) var(--ease-out) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }


/* ─────────────────────────────────────────────
 * UTILITY ANIMATION CLASSES
 * ───────────────────────────────────────────── */

.animate-fade-up    { animation: fadeUp var(--duration-slow) var(--ease-out) both; }
.animate-fade-in    { animation: fadeIn var(--duration-slow) var(--ease-out) both; }
.animate-scale-in   { animation: scaleIn var(--duration-slow) var(--ease-spring) both; }
.animate-drop-fall  { animation: dropFall var(--duration-slow) var(--ease-spring) both; }
.animate-pulse      { animation: pulse 2s var(--ease-in-out) infinite; }
.animate-glow       { animation: glowPulse 2.5s var(--ease-in-out) infinite; }
.animate-spin       { animation: spin 1s linear infinite; }

/* Delays */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }