/* assets/css/animation.css */

/* ============ Loading Screen ============ */
.loading-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s, visibility 0.5s;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loading-logo { text-align: center; }
.loading-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
  margin: 0 auto 1rem;
  animation: pulseLogo 1.5s ease-in-out infinite;
  box-shadow: 0 0 40px var(--accent-glow);
}
.loading-text {
  font-family: 'Orbitron', var(--font-body);
  font-size: 2rem; font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--text);
  animation: fadeInUp 0.6s ease 0.2s both;
}
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 1rem auto 0;
}

@keyframes pulseLogo  { 0%,100%{ transform:scale(1); box-shadow:0 0 40px var(--accent-glow); } 50%{ transform:scale(1.06); box-shadow:0 0 60px rgba(108,99,255,0.4); } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin       { to { transform: rotate(360deg); } }

/* ============ Page Transition ============ */
.main-content, .topbar, .app-footer {
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
}
.main-content {
  animation: pageEnter 0.4s ease both;
}
@keyframes pageEnter { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }

/* ============ Staggered Card Animations ============ */
.summary-card { animation: cardReveal 0.5s ease both; }
.summary-card[data-delay="0"] { animation-delay: 0.05s; }
.summary-card[data-delay="1"] { animation-delay: 0.12s; }
.summary-card[data-delay="2"] { animation-delay: 0.19s; }
.summary-card[data-delay="3"] { animation-delay: 0.26s; }
.summary-card[data-delay="4"] { animation-delay: 0.33s; }

.platform-card { animation: cardReveal 0.5s ease both; }
.platform-card:nth-child(1) { animation-delay: 0.1s; }
.platform-card:nth-child(2) { animation-delay: 0.17s; }
.platform-card:nth-child(3) { animation-delay: 0.24s; }
.platform-card:nth-child(4) { animation-delay: 0.31s; }
.platform-card:nth-child(5) { animation-delay: 0.38s; }

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

/* ============ Sidebar Slide ============ */
.sidebar { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }

/* ============ Alert fade ============ */
.alert { animation: alertIn 0.3s ease; }
@keyframes alertIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }