/* Vahndre Ventures — connect page styles
 * Page-specific overlays on top of shared.css (which sets the black
 * backdrop, font stack, and reset). The homepage has its own
 * full-viewport stage; this page is a regular scrollable form layout.
 */

.connect-body {
  /* Standard body scrolling — DO NOT set overflow:auto here. On mobile
     Safari, making the body a scroll container interacts badly with
     position:fixed children. Let the document scroll naturally. */
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* ---------- Background splatter layer ----------
 *
 * Fixed-position decoration. Sits behind all content (.connect-main
 * gets a higher z-index). Five splat colors used; one is reused so the
 * total of six gives even periphery coverage without crowding the
 * center where the form lives.
 *
 * Each splat is positioned with explicit top/left/right/bottom values
 * and a per-instance size + rotation so the layout feels intentional
 * rather than random. Stays out of the central form column.
 *
 * pointer-events:none means nothing here ever blocks form interaction.
 *
 * Mobile-specific: iOS Safari and Chrome on Android can "jiggle"
 * position:fixed elements as the URL bar shows/hides on scroll. We
 * force a GPU compositing layer (transform: translateZ(0)) which
 * promotes the splatter to its own paint layer and decouples it from
 * the document scroll repaint. Combined with explicit 100vw/100vh
 * sizing (not 100dvh — we want the larger "URL-bar-hidden" viewport),
 * the splats stay locked while the form scrolls in front of them.
 */

.bg-splatter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Force a separate GPU compositing layer to stop iOS URL-bar jiggle. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.bg-splat {
  position: absolute;
  opacity: 0.50;
  /* Small drop shadow gives depth on the very-dark backdrop without
     turning into a halo. Kept very subtle. */
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.4));
  user-select: none;
  -webkit-user-drag: none;
  /* Each splat also gets its own compositing layer so any per-element
     transforms (rotate, scale on resize) don't trigger paint of the
     surrounding splatter container. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Splat 1 — Indigo, top-left corner, biggest of the bunch. */
.splat-1 {
  top: -8%;
  left: -10%;
  width: clamp(280px, 36vw, 520px);
  transform: rotate(-12deg);
}

/* Splat 2 — Turquoise, top-right, medium. */
.splat-2 {
  top: 6%;
  right: -8%;
  width: clamp(220px, 28vw, 420px);
  transform: rotate(38deg);
}

/* Splat 3 — Orange, mid-left, smaller, sits below the form header
   area so it peeks past the left edge without crowding inputs. */
.splat-3 {
  top: 38%;
  left: -12%;
  width: clamp(180px, 22vw, 320px);
  transform: rotate(75deg);
}

/* Splat 4 — Pink, mid-right, mirror of splat-3 with a different
   rotation so the symmetry isn't obvious. */
.splat-4 {
  top: 52%;
  right: -10%;
  width: clamp(200px, 24vw, 360px);
  transform: rotate(-50deg);
}

/* Splat 5 — Yellow, bottom-left, slightly larger to anchor the
   bottom-left corner. */
.splat-5 {
  bottom: -6%;
  left: -6%;
  width: clamp(220px, 28vw, 400px);
  transform: rotate(-115deg);
}

/* Splat 6 — Turquoise (reuse), bottom-right, smallest, just a hint. */
.splat-6 {
  bottom: 4%;
  right: -4%;
  width: clamp(160px, 20vw, 280px);
  opacity: 0.24;
  transform: rotate(155deg);
}

/* On narrow viewports the splats need to step back further so they
   don't visually crowd the form. Reduce opacity and pull more of each
   splat off-screen. */
@media (max-width: 640px) {
  .bg-splat {
    opacity: 0.22;
  }
  .splat-1 { top: -12%; left: -22%; }
  .splat-2 { top: 2%;   right: -22%; }
  .splat-3 { top: 40%;  left: -28%; }
  .splat-4 { top: 56%;  right: -24%; }
  .splat-5 { bottom: -10%; left: -18%; }
  .splat-6 { bottom: 2%;   right: -18%; opacity: 0.18; }
}

/* Reduced motion: the splatter is static, but stripping the drop
   shadow filter saves a tiny bit of repaint cost on low-power
   devices. */
@media (prefers-reduced-motion: reduce) {
  .bg-splat {
    filter: none;
  }
}

.connect-main {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 32px);
}

.connect-header {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 44px);
}

.connect-logo-link {
  display: inline-block;
  transition: transform 200ms ease, opacity 200ms ease;
}

.connect-logo-link:hover {
  transform: scale(1.02);
}

.connect-logo-link:active {
  transform: scale(0.98);
  opacity: 0.85;
}

.connect-logo {
  width: clamp(120px, 22vw, 180px);
  height: auto;
  display: block;
}

.connect-title {
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--fg);
  margin: 16px 0 8px;
}

.connect-subtitle {
  color: var(--fg-muted);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 auto;
}

/* ---------- Form ---------- */

.connect-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 520px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.field label {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-transform: uppercase;
  font-weight: 500;
}

.req {
  color: var(--accent);
  margin-left: 2px;
}

.optional {
  color: #6e6e6e;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin-left: 6px;
  font-size: 0.78rem;
}

.field input,
.field select,
.field textarea {
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 180ms ease, background 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.5;
}

.field select {
  /* Custom-ish dropdown indicator since we strip default appearance. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23999' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #121212;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #5a5a5a;
}

/* Validation state — applied by JS when a field fails. */
.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: #c54a4a;
}

.field-error {
  color: #e08585;
  font-size: 0.85rem;
  margin-top: 2px;
  min-height: 1em;
}

/* ---------- Turnstile ---------- */

.turnstile-field {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* The Turnstile widget renders inside .cf-turnstile; size locks
   automatically per Cloudflare's widget sizes. */

/* ---------- Submit + status ---------- */

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-top: 8px;
}

.btn-submit {
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: 8px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.btn-submit:hover {
  filter: brightness(1.08);
}

.btn-submit:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}

.btn-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.form-status {
  text-align: center;
  margin: 0;
  font-size: 0.92rem;
  min-height: 1.4em;
  color: var(--fg-muted);
}

.form-status.error {
  color: #e08585;
}

.form-status.success {
  color: #6dd58f;
}

/* ---------- Footer ---------- */

.connect-footer {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 24px;
  border-top: 1px solid #1a1a1a;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.92rem;
}

.connect-footer a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: #555;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease;
}

.connect-footer a:hover {
  text-decoration-color: var(--accent);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .connect-logo-link,
  .btn-submit,
  .field input,
  .field select,
  .field textarea {
    transition: none !important;
  }
}