/* Word Unscrambler — custom CSS layered on top of Tailwind */

/* CSS variables (also used directly from JS for the counter color) */
:root {
  --color-cream: #f0f4f7;
  --color-cream-2: #e2e8ee;
  --color-ink: #1b2733;
  --color-ink-soft: #2e3c4d;
  --color-ink-mute: #5a6878;
  --color-accent: #2dd4a4;
  --color-accent-deep: #075f44;
  --color-accent-soft: #d8f5ea;
  --color-line: #d2d8e0;
}

html, body {
  background: var(--color-cream);
  color: var(--color-ink);
}

/* Atmospheric background tint */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(45, 212, 164, 0.10), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(27, 39, 51, 0.05), transparent 40%);
}

/* Sticky header backdrop */
.site-header {
  background: rgba(240, 244, 247, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Letters input — needs custom typography that Tailwind can't easily express */
.letters-input {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.letters-input::placeholder {
  color: #9ca8b6;
  font-weight: 400;
  letter-spacing: 2px;
}
.letters-input:focus {
  border-color: var(--color-accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(45, 212, 164, 0.22);
}
@media (max-width: 640px) {
  .letters-input { font-size: 18px; letter-spacing: 3px; }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.35s ease both; }
.word-pill { animation: fadeIn 0.4s ease both; }

@keyframes bounce-dot {
  to { transform: translateY(-6px); }
}
.loading-dot { animation: bounce-dot 0.8s infinite alternate; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* Forms — make selects and inputs feel native and consistent */
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  font-family: inherit;
  outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent);
  background: #fff;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Hide scrollbar on horizontal nav (mobile) */
.nav-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-scroll::-webkit-scrollbar {
  display: none;
}