/* =============================================
   ANIMATIONS
   ============================================= */

/* ── Page loader bar ──────────────────────────────────────── */
#page-loader {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #a8e050, var(--accent));
  background-size: 200% 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
#page-loader.loading {
  opacity: 1;
  width: 75%;
  transition: width 12s cubic-bezier(0.1, 0.05, 0, 1), opacity 0.2s;
  animation: loader-shine 1.4s linear infinite;
}
#page-loader.done {
  width: 100% !important;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.3s ease 0.2s;
}
@keyframes loader-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Scroll to top ────────────────────────────────────────── */
#scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 38px;
  height: 38px;
  background: rgba(28,30,42,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(0,0,0,.35);
  transition: opacity var(--t-fast), transform var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  z-index: 900;
  pointer-events: none;
  font-family: inherit;
}
#scroll-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scroll-top:hover {
  border-color: rgba(200,240,110,.35);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(200,240,110,.1), 0 0 12px rgba(200,240,110,.2);
}
@media (max-width: 600px) {
  #scroll-top { bottom: 16px; right: 16px; }
}

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

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

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

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

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}

/* Spinning loader */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-hl);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

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

/* Entrada staggered para cards */
.q-card:nth-child(1) { animation: fadeIn 0.5s var(--ease) 0.1s both; }
.q-card:nth-child(2) { animation: fadeIn 0.5s var(--ease) 0.2s both; }
.q-card:nth-child(3) { animation: fadeIn 0.5s var(--ease) 0.3s both; }

.user-card { animation: fadeIn 0.4s var(--ease) both; }

/* Feature cards con stagger vía animation-delay inline */
.feat-card { animation: fadeIn 0.4s var(--ease) both; }

/* Transición de vistas */
.view { transition: opacity var(--t-med); }