/* ===========================
   Preloader Section
   =========================== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f2f2f; /* dark teal background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.8s ease;
}
#preloader.hidden {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0.5s;
}

/* Abstract Wave Backdrop Animation */
.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle at 30% 30%, rgba(163,230,216,0.6), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(20,83,61,0.8), transparent 60%),
              radial-gradient(circle at 50% 50%, rgba(110,183,166,0.5), transparent 70%);
  animation: rotate 20s linear infinite;
  z-index: 0;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===========================
   Loader (Jumping Squares)
   =========================== */
.loader {
  display: flex;
  gap: 12px;
  z-index: 1;
}
.square {
  width: 20px;
  height: 20px;
  background: #a7d3c6; /* teal shade */
  border-radius: 4px;
  animation: jump 1s infinite ease-in-out;
}
.square:nth-child(1) { animation-delay: 0s; }
.square:nth-child(2) { animation-delay: 0.1s; }
.square:nth-child(3) { animation-delay: 0.2s; }
.square:nth-child(4) { animation-delay: 0.3s; }

@keyframes jump {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-15px) scale(1.1); } /* jump up */
  50%  { transform: translateY(0) scale(1); }      /* fall down */
  75%  { transform: translateY(10px) scale(0.9); } /* slight push down */
  100% { transform: translateY(0) scale(1); }      /* back to normal */
}

/* ===========================
   Body Background & Theme
   =========================== */

/* ☀️ Light Mode */
body.light {
  background-color: #e0f7f4; /* fallback */
  background: linear-gradient(
    135deg,
    #e0f7f4,  /* very pale teal */
    #a7d3c6,  /* jade */
    #6eb7a6,  /* medium teal */
    #3b8c80   /* stronger teal */
  );
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
  color: #111;
}

/* 🌙 Dark Mode */
body.dark {
  background-color: #008080; /* fallback */
  background: linear-gradient(
    135deg,
    #008080,  /* teal */
    #134e4a,  /* muted green-teal */
    #1e3a3a,  /* gray-teal */
    #0d2b36   /* deep teal-blue */
  );
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
  color: #fff;
}

/* Gradient animation shared for both light and dark */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Optimization */
body.light, body.dark {
  will-change: background-position;
  backface-visibility: hidden;
}

/* ===========================
   Scroll-to-Top Button
   =========================== */
#scrollTopBtn {
  position: fixed;
  bottom: 80px; /* above footer */
  right: 30px;
  z-index: 50;
  background-color: rgba(248, 113, 113, 0.8); /* slightly transparent */
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  display: none; /* hidden by default */
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
#scrollTopBtn:hover {
  transform: scale(1.1);
  background-color: rgba(239, 68, 68, 0.9);
}
body.dark #scrollTopBtn {
  background-color: rgba(239, 68, 68, 0.8);
}

/* ===========================
   Error Highlighting
   =========================== */
.error {
  background-color: #f87171;
  border-radius: 6px;
  padding: 2px 4px;
  color: white;
  animation: fadeIn 0.6s ease, shake 0.4s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===========================
   Suggestions Styling
   =========================== */
.suggestion-item {
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  background: #f3f4f6;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}
body.dark .suggestion-item { background: #1e293b; }
.suggestion-item:hover { background: #d1fae5; transform: scale(1.02); }
body.dark .suggestion-item:hover { background: #047857; }

/* ===========================
   Copy Button
   =========================== */
#copyBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(200,200,200,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 20; /* above outputBox but below navbar */
}
#copyBtn i {
  font-size: 1rem;
  color: #333;
}
#copyBtn:hover {
  background-color: rgba(150,150,150,0.9);
  transform: scale(1.1);
}
body.dark #copyBtn {
  background-color: rgba(255,255,255,0.2);
}
body.dark #copyBtn i { color: white; }

/* ===========================
   Logo Hover Animation
   =========================== */
.logo-animate {
  transition: all 0.5s ease;
}
.logo-animate:hover {
  transform: rotate(360deg) scale(1.1);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.9));
}

/* ===========================
   Feature Images Hover Animation
   =========================== */
.feature-img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.feature-img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}
body.dark .feature-img + div p {
  color: #d1d5db; /* adjusts text color in dark mode */
}