/* ================================================================
   Connect page. Builds on index.css (wrap, section, card, grid,
   photo, list-dash); this file holds the story/form split and the
   contact form.
   ================================================================ */

.connect {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
@media (max-width: 900px) { .connect { grid-template-columns: minmax(0, 1fr); } }

.connect__story { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.connect__photo { min-height: 0; aspect-ratio: 16 / 10; }
.connect__ask p:not(.eyebrow) { color: var(--ink-soft); font-size: clamp(16px, 1.3vw, 18px); }
.connect__ask strong, .connect__ask em { color: var(--yellow); }

.connect__form-col { position: sticky; top: 110px; }
@media (max-width: 900px) { .connect__form-col { position: static; } }

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

.connect__form { display: grid; gap: var(--space-3); }
.connect__form .eyebrow { margin: 0; }

.form-group { display: grid; gap: 6px; }
.form-group label { font-weight: 500; font-size: 14px; letter-spacing: 0.02em; color: var(--yellow); }
.form-group .optional { color: var(--ink-faint); font-weight: 400; font-size: 12px; margin-left: 6px; }

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: rgba(11, 38, 0, 0.45);
    color: var(--yellow);
    font: 16px/1.5 var(--font-body);
    box-sizing: border-box;
    transition:
        border-color var(--dur-warm) var(--ease-warm),
        box-shadow var(--dur-warm) var(--ease-warm),
        background-color var(--dur-warm) var(--ease-warm);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-faint); }
.form-group input:hover,
.form-group textarea:hover { border-color: rgba(255, 207, 109, 0.5); }
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 4px rgba(255, 207, 109, 0.14);
    background-color: rgba(11, 38, 0, 0.7);
}
.form-group textarea { resize: vertical; min-height: 140px; }

.connect__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

/* Submit: same pill language as .button-warm, with a check that
   draws in on submit (see secondary.js). */
.submit-btn {
    position: relative;
    min-height: 54px;
    padding: 14px 28px;
    border: none;
    border-radius: 999px;
    background-color: var(--rust);
    color: var(--yellow);
    font: 600 16px var(--font-body);
    letter-spacing: 0.01em;
    cursor: pointer;
    overflow: hidden;
    transition:
        background-color var(--dur-warm) var(--ease-warm),
        color var(--dur-warm) var(--ease-warm),
        box-shadow var(--dur-warm) var(--ease-warm),
        transform var(--dur-warm) var(--ease-warm);
}
.submit-btn:hover,
.submit-btn:focus-visible {
    background-color: var(--yellow);
    color: var(--green);
    box-shadow: 0 10px 30px -10px rgba(255, 207, 109, 0.6);
    transform: translateY(-2px);
}
.submit-btn:active { transform: none; }
.submit-btn__label { transition: opacity 320ms var(--ease-warm); }
.submit-btn__check {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-warm) var(--ease-warm), transform var(--dur-warm) var(--ease-warm);
}
.submit-btn__check path {
    stroke: var(--green);
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    transition: stroke-dashoffset 600ms var(--ease-snap) 200ms;
}
.submit-btn.is-sent { background-color: var(--yellow); color: var(--green); }
.submit-btn.is-sent .submit-btn__label { opacity: 0; }
.submit-btn.is-sent .submit-btn__check { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.submit-btn.is-sent .submit-btn__check path { stroke-dashoffset: 0; }

/* Shown after staticforms redirects back with ?sent=1 */
.connect__sent {
    margin-bottom: clamp(14px, 1.6vw, 20px);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(159, 203, 224, 0.4);
    background: rgba(159, 203, 224, 0.08);
}
.connect__sent .eyebrow { color: var(--water); margin: 0 0 6px; }
.connect__sent p:last-child { margin: 0; color: var(--yellow); }

/* Form rows rise in one after another once the column reveals */
.connect__form > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms var(--ease-warm), transform 600ms var(--ease-spring);
}
.connect__form-col.is-lit .connect__form > * { opacity: 1; transform: none; }
.connect__form-col.is-lit .connect__form > :nth-child(4) { transition-delay: 80ms; }
.connect__form-col.is-lit .connect__form > :nth-child(5) { transition-delay: 160ms; }
.connect__form-col.is-lit .connect__form > :nth-child(6) { transition-delay: 240ms; }
.connect__form-col.is-lit .connect__form > :nth-child(7) { transition-delay: 320ms; }
.connect__form-col.is-lit .connect__form > :nth-child(9) { transition-delay: 420ms; }

.connect__direct { display: grid; justify-items: start; gap: 10px; margin-bottom: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
    .connect__form > * { opacity: 1; transform: none; }
    .submit-btn__check path { stroke-dashoffset: 0; }
}