@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ancizar+Serif:ital,wght@0,300..900;1,300..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --leva-sizes-rootWidth: 340px;
}
/* Keep your widget container logic if you use it for internal UI */
html, body, #root {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: transparent !important; /* Overrides the black background */
  background-image: none !important;
  overflow: hidden;
}
#lumi-widget-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: 600px;
  z-index: 9999;
  cursor: grab;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
/* #root {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
  background-color: #000000;
  /* background-image: linear-gradient(19deg, #faaca8 0%, #ddd6f3 100%); */
/* } */

body.greenScreen {
  background-color: #00ff00;
  background-image: none;
} 

@keyframes wave {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.3);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.animate-wave circle {
  animation: wave 1.2s infinite;
}
.animate-wave circle:last-child {
  animation-delay: 0.6s;
}

@keyframes sine-move {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -56;
  }
}
.sine-wave-animate path {
  stroke-dasharray: 56;
  stroke-dashoffset: 0;
  animation: sine-move 1.2s linear infinite;
}

@keyframes aura-flash {
  0% {
    box-shadow:
      0 0 120px 40px #38bdf8,
      0 0 240px 80px #0ea5e9,
      0 0 480px 160px #38bdf8;
    border-color: #38bdf8;
    opacity: 0.7;
  }
  100% {
    box-shadow:
      0 0 200px 80px #0ea5e9,
      0 0 400px 160px #38bdf8,
      0 0 800px 320px #0ea5e9;
    border-color: #0ea5e9;
    opacity: 1;
  }
}

@keyframes cloud-aura-flash {
  0% {
    filter: blur(0px) brightness(1.1);
    opacity: 0.85;
  }
  100% {
    filter: blur(8px) brightness(1.35);
    opacity: 1;
  }
}