/* aimlink.ai Contact page (support/contact/index.html). Load after site.css and nav.css.
   Script: assets/contact-page.js.

   Contact is a human reply. The frame of the app pages and News: dark hero, light content, dark footer.
   1. Hero (data-rhythm="hero"): the statement on a photograph of a range bench after the session (ear defenders, a phone
      face down, the lanes soft and empty behind), with a scrim for the words. The bench sits in the lower third, under
      the lede, and the form hangs over the hero's hard edge: it rides up on load.
   2. The form: its own heading, then who you are (the .chip component, still real radio buttons; ?who= picks one), the
      three fields we need and one we do not. A small target beside the button counts them: each field you complete
      lands a shot, and the third closes the group. The button says what it does (it opens the mail app) until there
      is an endpoint. Send carries the target to the middle of the panel, where it says what happens next.
   3. Beside the form, on the light: the direct address (a small heading, not a headline), who we are, and a quiet row
      for clubs and ranges (CLUB in the stores, TARGET in beta on TestFlight).
   Static by default: without JS the form posts as plain text to the same address. Reduced motion keeps colour and
   opacity and drops the travel. Type and space come from the tokens. */

@layer sections {
  /* ───────────────────────── The top: hero and form ───────────────────────── */
  .cp-top {
    --cp-over: 3.5rem;                                           /* how far the form reaches up into the hero */
    --cp-fw: 100%;                                               /* the form's width */
    /* the bench: how much of the hero lies under the lede, below the form's reach (the ear defenders and the phone sit here) */
    --cp-bench: max(9.5rem, calc(46vw - 1.25rem));      /* below 900 px the picture is the narrow crop and grows with the width */
    position: relative; isolation: isolate;
  }
  @media (min-width: 900px) {
    .cp-top {
      --cp-fw: calc((min(100vw, var(--container) + 2 * var(--gutter)) - 2 * var(--gutter)) * 0.54);
      --cp-over: clamp(11rem, 20vw, 17rem);
      --cp-bench: clamp(6rem, 15.3rem - 10.4vw, 9.5rem);
    }
  }

  /* data-rhythm="hero" gives the top (hero air plus the nav); the bottom is the form's reach plus the bench */
  .cp-hero { position: relative; isolation: isolate; overflow: clip; background: var(--color-night); color: var(--text); padding-bottom: calc(var(--cp-over) + var(--cp-bench)); }
  .cp-hero-copy { max-width: 100%; }
  .cp-hero .hl { display: block; }
  .cp-hero .lede { color: var(--text); opacity: 0.92; max-width: 34ch; }
  .cp-hero .w { display: inline-block; animation: rise var(--duration-reveal) var(--ease-out) both; animation-delay: calc(120ms + var(--i) * var(--motion-stagger)); }
  .cp-hero .lede { animation: rise var(--duration-reveal) var(--ease-out) 360ms both; }

  /* The photograph and its scrim. The bench stays at the foot of the hero, whatever the hero's shape. */
  .cp-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--color-night); pointer-events: none; }
  .cp-bg picture, .cp-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cp-bg-img { object-fit: cover; object-position: 30% 100%; }
  /* the scrim (one layer above the picture): night under the words (the top of the hero, on the left), clear over the
     bench and the lanes; measured against the lightest pixel behind any text */
  .cp-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgb(12 20 28 / 0.5) 0%, transparent 16%),
      linear-gradient(180deg, rgb(12 20 28 / 0.8) 0%, rgb(12 20 28 / 0.74) 52%, rgb(12 20 28 / 0.1) 78%, transparent 100%);
  }
  @media (min-width: 900px) {
    .cp-bg-img { object-position: 28% 100%; }
    .cp-bg::after {
      background:
        linear-gradient(180deg, rgb(12 20 28 / 0.5) 0%, transparent 16%),
        linear-gradient(90deg, rgb(12 20 28 / 0.9) 0%, rgb(12 20 28 / 0.82) 36%, rgb(12 20 28 / 0.4) 66%, transparent 90%);
      -webkit-mask-image: linear-gradient(180deg, black 0%, black 56%, transparent 74%);
      mask-image: linear-gradient(180deg, black 0%, black 56%, transparent 74%);
    }
  }

  /* data-rhythm="proof" gives the bottom; the top is zero, because the form hangs up into the hero */
  .cp-body { position: relative; background: var(--bg); padding-top: 0; }
  .cp-grid { display: grid; gap: var(--gap-group); }
  @media (min-width: 900px) {
    .cp-grid { grid-template-columns: minmax(0, 1fr) var(--cp-fw); column-gap: var(--space-7); align-items: start; }
    .cp-panel { grid-column: 2; grid-row: 1; }
    .cp-ways { grid-column: 1; grid-row: 1; padding-top: var(--space-8); }
  }

  /* ───────────────────────── The form ───────────────────────── */
  .cp-panel {
    position: relative; margin-top: calc(-1 * var(--cp-over)); padding: clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--radius-panel); background: var(--bg); color: var(--text);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
    /* the ride up, as the phone on the GO page: from below and leaning back, to rest */
    animation: cp-ride 700ms var(--ease-out) 160ms both;
  }
  @keyframes cp-ride { from { opacity: 0; transform: perspective(1400px) translateY(9%) rotateX(9deg) scale(0.97); } }
  .cp-form { display: grid; gap: var(--gap-item); }
  .cp-form-title { margin-bottom: var(--space-2); }

  .cp-who { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
  .cp-who legend { padding: 0; margin-bottom: var(--space-3); font-size: var(--type-small-size); line-height: 1.3; font-weight: 700; }
  .cp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  /* the choice is a chip (assets/site.css .chip), the control underneath is a real radio button: arrow keys work */
  .cp-chip { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cp-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .cp-chip .chip { white-space: nowrap; }
  .cp-chip input:active + .chip { transform: scale(var(--motion-press-scale)); }
  .cp-chip input:focus-visible + .chip { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; }
  /* what to write, for the one you picked */
  .cp-hint { min-height: 3.2em; color: var(--text-muted); max-width: 52ch; text-wrap: pretty; }
  .cp-hint.is-new { animation: cp-fade var(--duration-exit) var(--ease-out) both; }
  @keyframes cp-fade { from { opacity: 0; } }

  .cp-row { display: grid; gap: var(--gap-item); }
  @media (min-width: 600px) { .cp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
  /* visible labels, in bold; the inputs are the site's field (r26), the textarea matches it */
  .cp-form .field label { font-weight: 700; }
  .cp-form .field label .opt { font-weight: 400; }
  .cp-form .field textarea {
    display: block; width: 100%; min-height: 9.5rem; padding: 14px 20px; resize: vertical;
    border: var(--line-border) solid var(--border); border-radius: var(--radius-input);
    background: var(--bg); color: var(--text); font: inherit; font-size: 1.0625rem; line-height: 1.5;
    transition: border-color var(--duration-hover) var(--ease-hover);
  }
  @media (hover: hover) and (pointer: fine) { .cp-form .field textarea:hover { border-color: var(--text); } }
  .cp-form .field textarea:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
  .cp-form .field.is-invalid textarea { border-color: var(--error); }
  .cp-form .field.is-invalid .field-error { animation: cp-fade var(--duration-hover) var(--ease-out) both; }
  .cp-left { font-size: var(--type-small-size); color: var(--text-subtle); }
  .cp-left[hidden] { display: none; }
  .cp-long { color: var(--text-muted); max-width: 52ch; text-wrap: pretty; }
  .cp-done-long[hidden] { display: none; }
  .cp-done .body a { color: var(--text); text-decoration: underline; text-decoration-thickness: var(--line-underline); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
  /* the button answers when the third shot closes the group: one short press, then it rests */
  @media (prefers-reduced-motion: no-preference) {
    .cp-foot:has(.is-grouped) .cp-send { animation: cp-ready 140ms var(--ease-out); }
  }
  @keyframes cp-ready { 40% { transform: scale(0.97); } }

  /* The foot: the target that counts the fields, and the button */
  .cp-foot { display: grid; gap: var(--space-4); align-items: center; }
  .cp-meter { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .cp-target { width: 56px; height: 56px; flex: none; overflow: visible; }
  .cp-count { font-size: var(--type-small-size); line-height: 1.35; color: var(--text-muted); }
  .cp-send { width: 100%; }
  .cp-note { font-size: var(--type-small-size); color: var(--text-subtle); max-width: 52ch; }
  @media (min-width: 600px) {
    .cp-foot { grid-template-columns: minmax(0, 1fr) auto; }
    .cp-send { width: auto; }
  }

  /* A shot: the hole lands (from a little large, as a pellet through paper), a ring leaves it once.
     Transitions, so a field that is emptied again takes its shot back without a jump. */
  .cp-shot .m-hole { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.35); transition: opacity var(--duration-exit) var(--ease-out), transform 220ms var(--ease-out); }
  .cp-shot.is-hit .m-hole { opacity: 1; transform: none; }
  .cp-shot .m-impact, .cp-done-impact { opacity: 0; transform-box: fill-box; transform-origin: center; }
  .cp-shot.is-hit .m-impact { animation: cp-impact 700ms var(--ease-out) both; }
  @keyframes cp-impact { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
  /* The group: a lime ring round the three holes, inside the black of the target (lime never on white) */
  .cp-group { fill: none; stroke: var(--color-lime); stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 520ms var(--ease-out); }
  .cp-target.is-grouped .cp-group, .cp-group.is-drawn { stroke-dashoffset: 0; }

  /* ───────────────────────── Sent ───────────────────────── */
  .cp-done {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
    gap: var(--space-3); padding: var(--space-6); text-align: center; visibility: hidden;
  }
  .cp-panel.is-done .cp-done { visibility: visible; }
  .cp-panel.is-done .cp-form { visibility: hidden; }
  /* keep the form in view until its fields have faded (200 ms) */
  @media (prefers-reduced-motion: no-preference) { .cp-panel.is-done .cp-form { transition: visibility 0s linear 220ms; } }
  .cp-done .mini { width: 112px; height: 112px; overflow: visible; margin-bottom: var(--space-3); }
  .cp-done .h3:focus { outline: none; }
  .cp-done .body { margin-inline: auto; max-width: 40ch; }
  .cp-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-5); margin-top: var(--space-2); }

  /* ───────────────────────── Beside the form ───────────────────────── */
  .cp-ways { display: grid; gap: var(--space-6); align-content: start; }
  .cp-direct { display: grid; justify-items: start; align-content: start; }
  /* the address: a link at body size, not a headline; the form is the headline */
  .cp-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--gap-head); }
  .cp-mail a { display: inline-flex; align-items: center; min-height: 44px; font: 700 1.25rem/1.3 var(--font-text); color: var(--text); overflow-wrap: anywhere; }
  .cp-u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--text-subtle); transition: text-decoration-color var(--duration-hover) var(--ease-hover); }
  @media (hover: hover) and (pointer: fine) { .cp-mail a:hover .cp-u { text-decoration-color: var(--accent-strong); } }
  .cp-mail a:focus-visible .cp-u { text-decoration-color: var(--accent-strong); }
  .cp-copy[hidden] { display: none; }

  .cp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-item); width: 100%; margin-top: var(--gap-action); padding-top: var(--gap-action); border-top: var(--line-hairline) solid var(--line); }
  .cp-facts > div { display: grid; gap: var(--space-2); align-content: start; }
  .cp-facts dd { color: var(--text-muted); }
  .cp-facts-wide { grid-column: 1 / -1; }
  .cp-facts .social { justify-content: flex-start; }

  /* the club row: quiet, a line of text, the CLUB badges and the TARGET line */
  .cp-club { display: grid; justify-items: start; align-content: start; padding-top: var(--space-6); border-top: var(--line-hairline) solid var(--line); }
  .cp-club-title { font: 700 var(--type-body-size)/var(--type-body-leading) var(--font-text); }
  .cp-club-text { margin-top: var(--space-1); color: var(--text-muted); max-width: 46ch; }
  .cp-club .store-row { justify-content: flex-start; margin-top: var(--gap-head); }
  .cp-club-target { margin-top: var(--gap-head); color: var(--text-muted); max-width: 46ch; }
  .cp-club-target a { color: var(--text); text-decoration: underline; text-decoration-thickness: var(--line-underline); text-underline-offset: 0.2em; text-decoration-color: var(--text-subtle); transition: text-decoration-color var(--duration-hover) var(--ease-hover); }
  @media (hover: hover) and (pointer: fine) { .cp-club-target a:hover { text-decoration-color: var(--accent-strong); } }
  .cp-club-target a:focus-visible { text-decoration-color: var(--accent-strong); }
}

/* ───────────────────────── Reduced motion: colour and opacity only ───────────────────────── */
@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .cp-hero .w, .cp-hero .lede { animation: none; }
    .cp-panel { animation: cp-fade var(--duration-reduced) var(--ease-out) both; }
    .cp-chip input:active + .chip { transform: none; }
    .cp-shot .m-hole { transform: none; transition: opacity var(--duration-reduced) var(--ease-out); }
    .cp-shot.is-hit .m-impact { animation: none; }
    .cp-group { transition: none; }
  }
}