/* ── Phatt Music Co. — Contact page ──────────────────────────────────────── */

/* ── Page heading ────────────────────────────────────────────────────────── */
.contact-title {
  font-size:      clamp(48px, 6.8vw, 82px);
  font-weight:    700;
  color:          #fff;
  line-height:    1;
  letter-spacing: -0.02em;
  margin:         0 0 48px;

  opacity:   0;
  transform: translateX(-150px);
  animation: slideInLeft 0.4s cubic-bezier(0.2, 0, 0, 1.1) 0.05s forwards;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-150px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.contact-form {
  max-width: 540px;
  opacity:   0;
  animation: slideInUp 0.4s cubic-bezier(0.2, 0, 0, 1.1) 0.12s forwards;
}

.form-group {
  display:       flex;
  flex-direction: column;
  gap:           8px;
  margin-bottom: 24px;
}

.form-label {
  font-size:   clamp(13px, 1.3vw, 15px);
  font-weight: 600;
  color:       rgba(255, 255, 255, 0.75);
  letter-spacing: 0.01em;
}

.form-input,
.form-textarea {
  font-family:     var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:       clamp(14px, 1.4vw, 16px);
  font-weight:     400;
  color:           #fff;
  background:      rgba(255, 255, 255, 0.05);
  border:          1px solid rgba(255, 255, 255, 0.12);
  border-radius:   10px;
  padding:         14px 16px;
  width:           100%;
  outline:         none;
  transition:      border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: rgb(153, 153, 153);
}
.form-input:focus,
.form-textarea:focus {
  border-color: rgba(255, 255, 255, 0.35);
  background:   rgba(255, 255, 255, 0.08);
}

.form-textarea {
  min-height: 140px;
  resize:     vertical;
}

/* Formspree honeypot — keep hidden from humans */
.form-honeypot { display: none; }

.form-submit {
  font-family:  var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:    clamp(14px, 1.4vw, 16px);
  font-weight:  600;
  color:        rgba(255, 255, 255, 0.85);
  background:   rgb(51, 51, 51);
  border:       none;
  border-radius: 10px;
  padding:      14px 32px;
  cursor:       pointer;
  width:        100%;
  margin-top:   8px;
  transition:   background 0.2s, color 0.2s;
}
.form-submit:hover {
  background: rgb(70, 70, 70);
  color:      #fff;
}
.form-submit:active {
  background: rgb(40, 40, 40);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .contact-title, .contact-form {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}