/* UpRankers Studio — custom styles + animations on top of Tailwind */

/* ---- step dot ---- */
.step-dot {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: white;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -8px rgba(124, 58, 237, 0.6);
}

/* ---- keyframes ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); }
  50%       { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- shimmer placeholder for loading images ---- */
.shimmer {
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.dark .shimmer {
  background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* ---- line-clamp helpers (Tailwind line-clamp plugin not loaded via CDN) ---- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- glassy hover lift ---- */
.lift {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}

/* ---- scrollbar polish (dark mode) ---- */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: #0f172a; }
.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Alpine collapse fallback (x-collapse is a plugin not bundled) — show/hide softly */
[x-cloak] { display: none !important; }

/* generated image fade-in */
img[data-loaded="true"] { animation: fadeIn 0.5s ease-out; }