/* =============================================================================
   LUMIN — Floating Label Contact Fields
   Premium, app-like floating labels on a refined bottom-line field.
   Black + teal: transparent field, subtle line, TEAL focus underline + label.
   The float is pure CSS (:placeholder-shown / :focus) and works with NO JS; the
   companion JS only reinforces the filled state + detects Chrome autofill.
   Real <label> kept for a11y. Respects prefers-reduced-motion.
   ========================================================================== */

.contact-form {
  --ff-accent: var(--accent);                 /* teal */
  --ff-line: rgba(244, 240, 231, 0.18);
  --ff-line-hover: rgba(244, 240, 231, 0.34);
  --ff-muted: rgba(244, 240, 231, 0.56);
  --ff-shift: -1.15rem;                        /* label float distance */
  --ff-dur: .25s;                              /* label / underline motion */
}

/* field wrapper = positioning context for the floating label */
.ff-field { position: relative; }

/* refined bottom-line control — transparent, no default browser chrome */
.ff-field input,
.ff-field textarea {
  display: block; width: 100%; font: inherit; margin: 0;
  color: var(--daylight); background: transparent;
  border: 0; border-bottom: 1px solid var(--ff-line); border-radius: 0;
  padding: 1.4rem 0 .55rem;
  caret-color: var(--ff-accent);
  -webkit-appearance: none; appearance: none;
  transition: border-color .25s var(--ease);
}
.ff-field textarea { line-height: 1.5; min-height: 4.4rem; resize: vertical; }
.ff-field input:hover,
.ff-field textarea:hover { border-bottom-color: var(--ff-line-hover); }
.ff-field input:focus,
.ff-field textarea:focus { outline: none; box-shadow: none; }

/* the floating label — placeholder-like when empty, floats up when active */
.ff-field label {
  position: absolute; left: 0; top: 0; padding-top: 1.4rem;
  font-size: 1rem; line-height: 1.4; color: var(--ff-muted);
  pointer-events: none; transform-origin: left top; white-space: nowrap;
  transition: transform var(--ff-dur) var(--ease), color var(--ff-dur) var(--ease);
}
.ff-field .field__opt { color: var(--ash); font-weight: 400; }

/* floated state: focused, filled (:not placeholder-shown), or JS is-filled */
.ff-field input:focus ~ label,
.ff-field input:not(:placeholder-shown) ~ label,
.ff-field textarea:focus ~ label,
.ff-field textarea:not(:placeholder-shown) ~ label,
.ff-field.is-filled label,
.ff-field.is-focused label {
  transform: translateY(var(--ff-shift)) scale(0.78);
  color: var(--ff-muted);
}
/* focused: accent the label teal (declared last so it wins over the filled rule) */
.ff-field input:focus ~ label,
.ff-field textarea:focus ~ label,
.ff-field.is-focused label { color: var(--ff-accent); }

/* restrained animated teal focus underline — no glow, no neon */
.ff-field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--ff-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease); pointer-events: none;
}
.ff-field:focus-within::after { transform: scaleX(1); }

/* Chrome autofill: keep the dark field + light text (no yellow box) and expose a
   hook (ff-autofill) so the JS can float the label on autofill */
.ff-field input:-webkit-autofill,
.ff-field input:-webkit-autofill:hover,
.ff-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--daylight);
  caret-color: var(--ff-accent);
  transition: background-color 9999s ease-in-out 0s;
  animation-name: ff-autofill;
}
@keyframes ff-autofill { from {} to {} }

@media (prefers-reduced-motion: reduce) {
  .ff-field label,
  .ff-field::after,
  .ff-field input,
  .ff-field textarea { transition: none; }
}