/* NXT Wave shared styles. Layout and spacing come from Tailwind utilities; this file covers what utilities can't. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  color-scheme: dark;
}
html { scroll-padding-top: 5.5rem; -webkit-font-smoothing: antialiased; }
body { background: #140F16; color: #F1EAE4; }
::selection { background: #D4AF72; color: #140F16; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* NXTWAVE wordmark: "NXT" solid, "WAVE" outlined */
.wordmark { font-family: "Syncopate", "Arial Black", sans-serif; font-weight: 700; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
@supports (-webkit-text-stroke: 1px #fff) {
  .wordmark-outline { color: transparent; -webkit-text-stroke: 1.4px #FFFFFF; }
}

:focus-visible { outline: 2px solid #D4AF72; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* Navbar backdrop fades in once the page scrolls */
.nav-backdrop { opacity: 0; transition: opacity 200ms var(--ease-out); }
.is-scrolled .nav-backdrop { opacity: 1; }

/* Buttons: press feedback + hover tint via an opacity overlay */
.btn { position: relative; isolation: isolate; transition: transform 120ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { opacity: 0.1; }
  .link:hover { color: #EBD6AC; }
}

/* Tab panels, mobile menu, success states */
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.panel-enter { animation: rise-in 220ms var(--ease-out) both; }
.menu-enter { animation: drop-in 200ms var(--ease-out) both; }

/* Hero statement: the page's single load-time reveal */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar { transform-origin: left center; }
.reveal .bar { animation: bar-grow 480ms var(--ease-out-quart) both; animation-delay: calc(var(--i) * 70ms + 120ms); }

/* Form fields */
.field {
  display: block; width: 100%; margin-top: 0.5rem;
  background: #140F16; color: #F1EAE4;
  border: 1px solid #342A38; border-radius: 10px;
  padding: 0.8rem 0.95rem; font-size: 1rem; line-height: 1.4;
}
.field::placeholder { color: #8A7E88; }
.field:focus { outline: none; border-color: #D4AF72; box-shadow: 0 0 0 3px rgba(212, 175, 114, 0.2); }
.field[aria-invalid="true"] { border-color: #F29B93; }
select.field {
  appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A89CA6' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
textarea.field { resize: vertical; min-height: 8rem; }
.check { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: #D4AF72; flex-shrink: 0; }

/* Legal pages */
html.legal-page { scroll-padding-top: 2rem; }
@media (prefers-reduced-motion: no-preference) {
  html.legal-page { scroll-behavior: smooth; }
}
.legal section + section { margin-top: 3.5rem; }
.legal h2 {
  font-family: "Bodoni Moda", Didot, "Times New Roman", serif;
  font-size: 1.85rem; font-weight: 500; line-height: 1.2; color: #F1EAE4;
}
.legal h3 { margin-top: 2rem; font-size: 1.05rem; font-weight: 600; color: #F1EAE4; }
.legal p, .legal li { color: #C9BFC7; line-height: 1.75; }
.legal p { margin-top: 1rem; }
.legal ul { margin-top: 1rem; padding-left: 1.25rem; list-style: disc; }
.legal li + li { margin-top: 0.6rem; }
.legal li::marker { color: #D4AF72; }
.legal strong { color: #F1EAE4; font-weight: 600; }
.legal a { color: #EBD6AC; text-decoration: underline; text-decoration-color: rgba(212, 175, 114, 0.6); text-underline-offset: 4px; }
.legal table { width: 100%; min-width: 32rem; margin-top: 1.5rem; border-collapse: collapse; }
.legal th, .legal td { padding: 1rem 1.25rem 1rem 0; border-top: 1px solid #342A38; text-align: left; vertical-align: top; line-height: 1.7; }
.legal tr:last-child th, .legal tr:last-child td { border-bottom: 1px solid #342A38; }
.legal th { width: 32%; color: #F1EAE4; font-weight: 600; }
.legal td { color: #C9BFC7; }

@media (prefers-reduced-motion: reduce) {
  .nav-backdrop { transition: none; }
  .btn, .btn::after { transition: none; }
  .btn:active { transform: none; }
  .panel-enter, .menu-enter { animation: none; }
  .reveal .bar { animation: none; }
}