/* shared/styles/animations.css
   Sundry animation library — small, calm, brand-consistent.
*/

.progress-bar-fill {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fund-card,
.tool-card,
.item-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fund-card:hover,
.tool-card:hover,
.item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.75);
}

/* Banner variants — built on theme tokens */
.banner-share {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  color: var(--theme-on-primary);
}
.banner-trial {
  background: linear-gradient(90deg, var(--warning), color-mix(in srgb, var(--warning) 80%, white));
  color: #2d2418;
}
.banner-expired {
  background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 70%, black));
  color: #ffffff;
}

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--surface-muted);
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--theme-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--surface-elev);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--theme-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--surface-elev);
}

/* Drop-zone (CSV import, file uploads) */
.dropzone {
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.dragover {
  border-color: var(--theme-primary);
  background: color-mix(in srgb, var(--theme-primary) 8%, var(--surface-base));
}

/* Locked feature indicator (trial expired) */
[data-locked="true"] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto;
  position: relative;
}
[data-locked="true"]::after {
  content: "🔒";
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 12px;
  background: var(--warning);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}