/* Conscious Being Animation Styles */
#conscious-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.landing {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing__content {
  text-align: center;
  padding: var(--dss-space-8);
}

/* Team Cards */
.team-cards {
  display: flex;
  gap: var(--dss-space-6);
  justify-content: center;
  margin-bottom: var(--dss-space-12);
}

.team-card {
  width: 200px;
  padding: var(--dss-space-8) var(--dss-space-6);
  background: rgba(var(--dss-accent-pulse-rgb), 0.05);
  border: 1px solid var(--dss-border);
  border-radius: var(--dss-radius-xl);
  cursor: pointer;
  transition: all var(--dss-duration-response) var(--dss-ease-organic);
  position: relative;
  overflow: hidden;
}

.team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(var(--dss-accent-pulse-rgb), 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dss-duration-response) var(--dss-ease-smooth);
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--dss-accent-pulse);
  box-shadow: var(--dss-glow-medium);
}

.team-card:hover::before {
  opacity: 1;
}

.team-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--dss-space-4);
  color: var(--dss-accent-pulse);
}

.team-card__icon svg {
  width: 100%;
  height: 100%;
}

.team-card h2 {
  font-size: var(--dss-text-xl);
  font-weight: 600;
  margin-bottom: var(--dss-space-2);
  color: var(--dss-text-primary);
}

.team-card p {
  font-size: var(--dss-text-sm);
  color: var(--dss-text-secondary);
}

/* Team-specific colors */
.team-card[data-team="ui"]:hover {
  --dss-accent-pulse-rgb: 0, 212, 170;
  border-color: #00d4aa;
}

.team-card[data-team="ux"]:hover {
  --dss-accent-pulse-rgb: 124, 58, 237;
  border-color: #7c3aed;
}

.team-card[data-team="qa"]:hover {
  --dss-accent-pulse-rgb: 245, 158, 11;
  border-color: #f59e0b;
}

/* Admin Link */
.admin-link {
  display: inline-block;
  font-size: var(--dss-text-sm);
  color: var(--dss-text-muted);
  padding: var(--dss-space-2) var(--dss-space-4);
  border: 1px solid transparent;
  border-radius: var(--dss-radius);
  transition: all var(--dss-duration-response) var(--dss-ease-smooth);
}

.admin-link:hover {
  color: var(--dss-text-secondary);
  border-color: var(--dss-border);
  opacity: 1;
}

/* Breathing animation for the being */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Pulse animation for cards on hover */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: var(--dss-glow-soft);
  }
  50% {
    box-shadow: var(--dss-glow-intense);
  }
}

.team-card:hover {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Page transition */
.landing.transitioning {
  animation: fade-out var(--dss-duration-transition) var(--dss-ease-smooth) forwards;
}

@keyframes fade-out {
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

.dashboard.entering {
  animation: fade-in var(--dss-duration-transition) var(--dss-ease-smooth) forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
