/* Custom Styles for Object-Hunt Alarm Clock */

/* Root and Ambient Variables */
:root {
  --glow-indigo: rgba(99, 102, 241, 0.15);
  --glow-rose: rgba(244, 63, 94, 0.2);
  --glow-emerald: rgba(16, 185, 129, 0.1);
}

/* Base Body Ambient Glow Gradient */
body {
  background: radial-gradient(circle at 50% 0%, #111827 0%, #080c14 100%);
  background-attachment: fixed;
}

/* Custom Webkit scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(8, 12, 20, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

/* Hide default spin buttons on time/number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* SVG Circular Ring Smooth Transition */
#progress-ring {
  transition: stroke-dashoffset 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5)) drop-shadow(0 0 16px rgba(99, 102, 241, 0.4));
}

/* ALARM ACTIVE FLASHING KEYFRAMES */
@keyframes alarm-flash {
  0% {
    opacity: 0.1;
    box-shadow: inset 0 0 40px rgba(239, 68, 68, 0.2);
  }
  50% {
    opacity: 0.8;
    box-shadow: inset 0 0 100px rgba(249, 115, 22, 0.4);
  }
  100% {
    opacity: 0.1;
    box-shadow: inset 0 0 40px rgba(239, 68, 68, 0.2);
  }
}

.alarm-flashing {
  animation: alarm-flash 1.2s infinite ease-in-out;
  opacity: 1 !important;
}

/* Pulse breathing effect for the ringing overlay text and buttons */
@keyframes pulse-grow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.3);
  }
}

#ringing-view.active-ringing-card {
  animation: pulse-grow 2s infinite ease-in-out;
}

/* CSS transition helper for state switches */
.state-transition {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Glassmorphism custom blur rules */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Webcam feed adjustments */
#webcam-container video, 
#webcam-container canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Keep mirrored view */
  border-radius: 1rem;
}