/* Sensör paneli — yalnızca animasyon; layout dashboard.css ile aynı */

.panel--sensors {
  position: relative;
  overflow: hidden;
}

.sensor-panel__inner {
  position: relative;
  z-index: 2;
}

.sensor-motion-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Radyo sinyali halkaları */
.sensor-motion-bg__signal {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(78, 207, 143, 0.35);
  opacity: 0;
}

.sensor-panel-ready .sensor-motion-bg__signal {
  animation: sensor-signal-ring 2.8s ease-out infinite;
}

.sensor-motion-bg__signal::before,
.sensor-motion-bg__signal::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(78, 207, 143, 0.2);
}

.sensor-motion-bg__signal::after {
  inset: -18px;
  border-color: rgba(78, 207, 143, 0.12);
}

@keyframes sensor-signal-ring {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* Nem dalgası — panel altı */
.sensor-motion-bg__wave {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -2px;
  height: 42%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(45, 143, 95, 0.06) 40%,
    rgba(78, 207, 143, 0.1) 100%
  );
  opacity: 0.55;
  transform: translateY(8px);
}

.sensor-panel-ready .sensor-motion-bg__wave {
  animation: sensor-moisture-wave 5s ease-in-out infinite;
}

@keyframes sensor-moisture-wave {
  0%, 100% {
    transform: translateY(10px) scaleY(0.92);
    opacity: 0.4;
  }
  50% {
    transform: translateY(0) scaleY(1);
    opacity: 0.65;
  }
}

/* Yüzen veri noktaları */
.sensor-motion-bg__dots {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(78, 207, 143, 0.45) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(100, 180, 220, 0.35) 1px, transparent 1.5px);
  background-size: 48px 48px, 72px 72px;
  background-position: 12% 30%, 78% 55%;
  opacity: 0.25;
}

.sensor-panel-ready .sensor-motion-bg__dots {
  animation: sensor-dots-drift 12s linear infinite;
}

@keyframes sensor-dots-drift {
  0% { background-position: 12% 30%, 78% 55%; }
  100% { background-position: 18% 38%, 72% 48%; }
}

/* Başlık — hafif nabız */
.sensor-panel-ready h3 {
  animation: sensor-title-glow 3s ease-in-out infinite;
}

@keyframes sensor-title-glow {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 6px rgba(78, 207, 143, 0.35)); }
}

/* Ortalama nem özeti */
.sensor-panel-ready .sensor-moisture-summary {
  animation: sensor-summary-in 0.5s ease both;
}

@keyframes sensor-summary-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#avg-donut.sensor-donut-pulse {
  animation: sensor-donut-pulse 0.55s ease;
}

@keyframes sensor-donut-pulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 207, 143, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(78, 207, 143, 0); }
  100% { box-shadow: none; }
}

/* Sensör satırları */
.sensor-row--enter {
  animation: sensor-row-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sensor-list .sensor-row--enter:nth-child(1) { animation-delay: 0.02s; }
.sensor-list .sensor-row--enter:nth-child(2) { animation-delay: 0.06s; }
.sensor-list .sensor-row--enter:nth-child(3) { animation-delay: 0.1s; }
.sensor-list .sensor-row--enter:nth-child(4) { animation-delay: 0.14s; }
.sensor-list .sensor-row--enter:nth-child(5) { animation-delay: 0.18s; }
.sensor-list .sensor-row--enter:nth-child(n+6) { animation-delay: 0.22s; }

@keyframes sensor-row-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sensor-row[data-sensor-type="soil"] .sensor-info strong::before {
  content: "🌱 ";
}

.sensor-row[data-sensor-type="fuel"] .sensor-info strong::before {
  content: "⛽ ";
}

.sensor-row[data-sensor-type="water"] .sensor-info strong::before {
  content: "💧 ";
}

.sensor-row .bar span {
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.sensor-row--live::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ecf8f;
  box-shadow: 0 0 0 0 rgba(78, 207, 143, 0.6);
  animation: sensor-live-dot 1.6s ease-in-out infinite;
  margin-left: 0.25rem;
}

@keyframes sensor-live-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(78, 207, 143, 0.55);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(78, 207, 143, 0);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sensor-panel-ready .sensor-motion-bg__signal,
  .sensor-panel-ready .sensor-motion-bg__wave,
  .sensor-panel-ready .sensor-motion-bg__dots,
  .sensor-panel-ready h3,
  .sensor-row--enter,
  .sensor-row--live::after {
    animation: none !important;
  }

  .sensor-row .bar span {
    transition: none;
  }
}