ai-status-light-web/src/components/IdleCard.vue

<script lang="ts" setup>
</script>

<template>
  <div class="idle-card">
    <div class="glow glow-1"/>
    <div class="glow glow-2"/>
    <div class="orb"/>
  </div>
</template>

<style scoped>
.idle-card {
  position: relative;
  aspect-ratio: 3 / 1;
  background: #0f1d14;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(82, 196, 26, 0.2);
  box-shadow: 0 0 12px rgba(82, 196, 26, 0.08),
  inset 0 0 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow {
  position: absolute;
  inset: -50%;
  filter: blur(40px);
}

.glow-1 {
  background: radial-gradient(ellipse at 40% 50%, #52c41a 0%, transparent 55%);
  opacity: 0.25;
  animation: drift-1 7s ease-in-out infinite alternate;
}

.glow-2 {
  background: radial-gradient(ellipse at 60% 50%, #95de64 0%, transparent 50%);
  opacity: 0.2;
  animation: drift-2 9s ease-in-out infinite alternate;
}

.orb {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #95de64, #52c41a);
  animation: breathe 4s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(82, 196, 26, 0.3),
  0 0 8px rgba(82, 196, 26, 0.5);
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.4;
  }
}

@keyframes drift-1 {
  0% {
    transform: translate(-15%, -10%) scale(0.9);
  }
  100% {
    transform: translate(15%, 10%) scale(1.1);
  }
}

@keyframes drift-2 {
  0% {
    transform: translate(10%, 10%) scale(1.1);
  }
  100% {
    transform: translate(-10%, -10%) scale(0.9);
  }
}
</style>