/* OGACE ANIMATIONS */

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

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

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

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

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

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

/* APPLY ANIMATIONS */
.ogace-card,
.ogace-g-card,
.ogace-tour-card,
.ogace-pillar-card,
.ogace-tier-card {
  animation: fadeIn var(--transition-base);
}

.ogace-section,
.ogace-pillars-section {
  animation: slideUp var(--transition-base);
}

.ogace-g-badge {
  animation: slideInLeft var(--transition-base);
}

.ogace-loading {
  animation: pulse var(--transition-base) infinite;
}

.ogace-ai-loader {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bg-secondary);
  border-top-color: var(--g2-color);
  border-radius: 50%;
  animation: ogace-spin 0.8s linear infinite;
}

/* LOADING SKELETON */
.ogace-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}