/* ==========================================================================
   TornadoWeb - custom CSS layer on top of Tailwind
   Design system: "Obsidian Kinetic" (obsidian / crimson / Syne + Inter +
   JetBrains Mono). Only for things Tailwind utilities cannot express cleanly.
   ========================================================================== */

:root {
  --tw-obsidian: #0b0b0d;
  --tw-glass: #18181c;
  --tw-crimson: #dc2626;
  --tw-scarlet: #f43f5e;
  --tw-rose: #ffb4ab;
  --tw-wine: #3f1d24;
  --tw-blood: #7f1d1d;
}

/* Screen-reader-only helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* Hide scrollbars, matching the draft treatment */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* Solid obsidian header (exact #0b0b0d, fully opaque) */
.tw-header {
  background-color: #0b0b0d;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Glassmorphic panel: charcoal 85% + 16px blur, hairline stroke, crimson hover lift */
.card-glass {
  background-color: rgba(24, 24, 28, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.card-glass:hover {
  border-color: rgba(127, 29, 29, 0.9);
  box-shadow: 0 8px 32px -8px rgba(220, 38, 38, 0.18);
}

/* Primary CTA ambient crimson glow */
.cta-glow {
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.25);
  transition: box-shadow .3s ease, transform .15s ease, background-color .2s ease;
}
.cta-glow:hover { box-shadow: 0 4px 28px rgba(220, 38, 38, 0.4); }

/* Button active / focus pulse */
.btn-active-glow:active { box-shadow: 0 0 24px rgba(244, 63, 94, 0.35); }

/* Input focus: crimson border + scarlet inner halo */
.input-obsidian {
  background-color: #111116;
  border: 1px solid #1f1f28;
  color: #7b8a9e;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input-obsidian::placeholder { color: #64748b; }
.input-obsidian:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15), inset 0 0 12px rgba(244, 63, 94, 0.08);
}

/* Ambient crimson aura for hero sections */
.tw-aura {
  background: radial-gradient(circle, rgba(220, 38, 38, 0.16), transparent 62%);
}

/* FAQ collapse */
.faq-content { transition: max-height .3s ease; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-glass, .cta-glow, .input-obsidian, .faq-content { transition: none; }
}