/**
 * CONTACT SECTION (visual styling only) — index.html only. Covers the
 * "Get in touch" heading/intro text and the spinning-border effect on
 * the email button.
 *
 * `.socials`/`.soc` below (a row of small pill-shaped social/contact
 * links) have no matching markup in index.html right now — editing them
 * has no visible effect. The site's actual social links (Instagram,
 * TikTok, LinkedIn) live in the footer instead — see footer.css.
 *
 * NOTE: the actual form INPUT FIELDS (name/email/message boxes) are
 * styled in the separate ../forms.css file, not here — that file is
 * shared with partner.html's form, so its styles live in one place both
 * pages can use. If you're trying to change how the text inputs look,
 * go to forms.css. If you're trying to change the heading, intro text,
 * or the glowing email button, this is the right file.
 *
 * The actual form SUBMIT behavior (what happens when you click send) is
 * in public/js/marketing/contact-form.js, not any CSS file.
 *
 * Requires base.css to be linked first.
 */

/* The soft green glow behind the whole contact section. */
.contact { position: relative; overflow: hidden; }
.contact::before {
  content: ''; position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 1000px; pointer-events: none;
  background: radial-gradient(ellipse 68% 62% at 50% 80%, rgba(0,255,140,.24) 0%, rgba(0,255,140,.08) 50%, transparent 72%);
}
.contact-in { position: relative; z-index: 1; text-align: center; max-width: 620px; margin: 0 auto; }
.contact-h { font-family: var(--display); font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; margin: 10px 0 18px; }
.contact-h span { color: var(--accent); }
.contact-email { font-size: .98rem; color: var(--text-3); margin-bottom: 32px; }
.contact-email a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 4px; transition: color .2s; }
.contact-email a:hover { color: var(--accent-lt); }

/* Unused on the current page — see file header. .socials would be the
   row, .soc one pill-shaped link inside it. */
.socials { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.soc {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 16px; font-size: .84rem; font-weight: 500; color: var(--text-3);
  transition: all .22s var(--ease);
}
.soc:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }

/* ── EMAIL BUTTON SPINNING BORDER ──────────────────── */
/* Decorative rotating light effect around the email button. `2.4s` is
   how long one full rotation takes — a smaller number spins faster. */
.email-btn-wrap {
  position: relative; display: inline-flex;
  border-radius: 12px; padding: 1.5px; overflow: hidden; isolation: isolate;
}
.email-btn-wrap::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 300%; height: 300%;
  background: conic-gradient(
    from 0deg,
    transparent 0%, transparent 70%,
    rgba(0,255,140,.75) 74%,
    rgba(130,255,210,1)  78%,
    rgba(0,255,140,.75) 82%,
    transparent 86%
  );
  animation: email-border-spin 2.4s linear infinite;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: opacity .2s ease;
}
.email-btn-wrap:hover::before { opacity: 0; }
.email-btn-wrap .btn-fill { position: relative; z-index: 1; }
.email-btn-wrap:hover .btn-fill {
  background: var(--accent-lt);
  box-shadow: 0 0 6px rgba(0,255,140,1), 0 0 18px rgba(0,255,140,.9), 0 0 40px rgba(0,255,140,.6), 0 0 80px rgba(0,255,140,.25);
  transform: translateY(-1px);
}
@keyframes email-border-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}