/* ============================================================================
   /contact/ — the link-in-bio / NFC landing page.

   A phone page first. It is what an NFC tap and an Instagram bio link land on,
   so the whole job is: prove who this is, then get the message sent, with the
   fewest possible taps and no scrolling to find the form.

   Loads ON TOP of css/style.css, which supplies the brand tokens, .btn,
   .ts-field and .consent-check. Nothing here redefines a token.
   ========================================================================== */

.ct-body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font-d);
  min-height: 100svh;         /* svh, not vh: vh includes the mobile URL bar,
                                 which is what makes a "full height" page
                                 scroll by 60-ish pixels on a phone */
  margin: 0;
  overflow-x: hidden;
}

/* A single warm pool behind the mark, so the page has a centre without needing
   an image. Fixed, so it does not slide away as the form scrolls. */
.ct-body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(58% 42% at 50% 12%, rgba(212, 160, 58, 0.12), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(138, 90, 28, 0.07), transparent 72%);
  pointer-events: none;
  /* -1, not 0. At 0 this sits inside the same stacking order as .ct, and .ct
     would then need a z-index to clear it — which is what created a stacking
     context and broke mix-blend-mode on the mark below. Behind everything is
     the simpler answer. */
  z-index: -1;
}

.ct {
  /* Relative for positioning only. Do NOT add z-index here: it would create a
     stacking context, and .ct-mark's mix-blend-mode:screen can only blend
     against a backdrop inside its own context — with one, the clip's black
     background stops dropping out and the mark renders in a visible box. */
  position: relative;
  width: min(420px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- the rotating mark ---------- */
/* Its own class rather than .shard, which style.css hides below 1023px. */
.ct-mark {
  width: 84px; height: 84px;
  object-fit: contain;
  /* The clip is rendered on black, so screen blending drops the background and
     leaves only the glass. Works here because this page is dark too. */
  mix-blend-mode: screen;
  opacity: 0.95;
  pointer-events: none;
  margin-bottom: -10px;
}

/* ---------- lockup ---------- */
/* Wordmark only — the rotating video above is the logo on this page, and a
   second static mark beside the text read as two logos rather than one lockup.
   Stacked, PRODUCTIONS centred under AVIRA. */
.ct-lockup {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  text-decoration: none;
  margin-bottom: 14px;
}
.ct-lockup__name {
  font-weight: 800; font-size: 1.12rem; letter-spacing: 0.2em;
  color: var(--ink);
  /* letter-spacing adds its full value AFTER the last glyph too, which shifts
     a centred string visibly left. Half of it back as padding re-centres it
     optically — the same trick the footer lockup needs. */
  padding-left: 0.2em;
  line-height: 1;
}
.ct-lockup__sub {
  font-family: var(--font-m); font-weight: 500;
  font-size: 0.56rem; letter-spacing: 0.42em;
  color: var(--gold);
  padding-left: 0.42em;
  line-height: 1;
}

/* ---------- headline ---------- */
.ct-head {
  font-size: clamp(1.42rem, 6.6vw, 1.8rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.015em;
  margin: 0 0 9px;
  color: var(--ink);
}
.ct-sub {
  font-family: var(--font-m);
  font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

/* ---------- call / email ---------- */
/* Above the form on purpose. For a lot of people arriving from an NFC tap the
   answer is a phone call, and making them fill in four fields to get it is the
   most expensive thing this page could do. */
.ct-quick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%;
  margin-bottom: 16px;
}
.ct-quick__a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 10px;
  text-decoration: none;
  font-family: var(--font-m);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(212, 160, 58, 0.03);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.ct-quick__a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ct-quick__a:hover, .ct-quick__a:focus-visible {
  color: var(--gold-hi); border-color: var(--gold);
  background: rgba(212, 160, 58, 0.07);
}

/* ---------- the copied-to-clipboard line ---------- */
/* Height is RESERVED, not animated open. On a 375x812 phone the send button
   sits a few dozen pixels above the fold; a row that grows on tap would push it
   under, and only for the people who tapped. Empty it is an invisible 15px
   gap, which the layout was measured with. */
.ct-copied {
  margin: -8px 0 8px;
  min-height: 15px;
  font-family: var(--font-m);
  font-size: 0.6rem; letter-spacing: 0.06em;
  color: var(--gold-hi);
  opacity: 0;
  transition: opacity 0.3s;
  /* An address is long and must not wrap the row to two lines and reintroduce
     the jump this was written to avoid. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ct-copied.is-on { opacity: 1; }

/* ---------- form ---------- */
.ct-form { width: 100%; display: grid; gap: 10px; text-align: left; }

/* style.css's .ts-field is display:block on tradeshow and a grid on the
   occasion pages. Pin it here so this page does not inherit whichever one
   happens to win the cascade. */
.ct-form .ts-field { display: grid; gap: 6px; }
.ct-form .ts-field > span {
  font-family: var(--font-m);
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.ct-form input,
.ct-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: var(--font-d);
  font-size: 16px;            /* 16px exactly: anything smaller and iOS Safari
                                 zooms the page on focus, which throws the
                                 layout off and cannot be undone by the user */
  transition: border-color 0.2s, background 0.2s;
}
.ct-form textarea { resize: vertical; min-height: 74px; }
.ct-form input::placeholder,
.ct-form textarea::placeholder { color: #5b5445; }
.ct-form input:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(212, 160, 58, 0.04);
}
.ct-form input[aria-invalid="true"],
.ct-form textarea[aria-invalid="true"] { border-color: #b4552f; }

/* The honeypot. display:none rather than off-screen so autofill never fills it. */
.ct-form .ts-hp { display: none; }

/* style.css's .form__send is `justify-self: start` — sized to its own label and
   pinned left. On a 420px phone column the send button should be the full width
   of the fields it belongs to, so both the grid placement and the internal
   alignment have to be overridden, not just the width. */
.ct-send {
  justify-self: stretch;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  border: none;
  cursor: pointer;
}

.ct-form .ts-form__status {
  margin: 2px 0 0;
  font-size: 0.8rem; line-height: 1.4;
  color: var(--muted);
  min-height: 1em;
}
.ct-form .ts-form__status.ok  { color: var(--gold-hi); }
.ct-form .ts-form__status.err { color: #d4794f; }

/* ---------- socials + the way back to the site ---------- */
.ct-social { display: flex; gap: 10px; margin: 26px 0 0; }

.ct-more {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(212, 160, 58, 0.06);
  width: 100%;
}
.ct-more a {
  font-family: var(--font-m);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6d6555; text-decoration: none;
  transition: color 0.25s;
}
.ct-more a:hover { color: var(--gold); }

/* ---------- entrance ---------- */
/* CSS-only and additive: it animates FROM a shifted state TO the resting one,
   so if animations never run the page is simply already in its final state.
   .reveal would have needed main.js and left everything at opacity 0 forever. */
@keyframes ct-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.ct-mark, .ct-lockup, .ct-head, .ct-sub, .ct-quick, .ct-form, .ct-social, .ct-more {
  animation: ct-in 0.7s var(--ease) both;
}
.ct-lockup { animation-delay: 0.06s; }
.ct-head   { animation-delay: 0.12s; }
.ct-sub    { animation-delay: 0.17s; }
.ct-quick  { animation-delay: 0.22s; }
.ct-form   { animation-delay: 0.28s; }
.ct-social { animation-delay: 0.34s; }
.ct-more   { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .ct-mark, .ct-lockup, .ct-head, .ct-sub,
  .ct-quick, .ct-form, .ct-social, .ct-more { animation: none; }
  /* A looping spin is exactly what this preference is about, so freeze it on
     the poster frame rather than merely slowing it down. */
  .ct-mark { display: none; }
  .ct-body::before { opacity: 0.8; }
}

/* ---------- short phones ---------- */
/* On a 667px-tall screen the mark is the one thing that can shrink without
   costing anything — the form is the point of the page. */
@media (max-height: 720px) {
  .ct { padding-top: 8px; }
  .ct-mark { width: 54px; height: 54px; }
  .ct-lockup { margin-bottom: 10px; }
  .ct-lockup__name { font-size: 1.02rem; }
  .ct-head { font-size: 1.3rem; margin-bottom: 4px; }
  /* Smaller and tighter so "TORONTO & THE GTA · WE REPLY WITHIN ONE BUSINESS
     DAY" fits ONE line at 375px instead of wrapping to two. */
  .ct-sub { font-size: 0.54rem; letter-spacing: 0.1em; margin-bottom: 11px; }
  .ct-quick { margin-bottom: 9px; }
  .ct-quick__a { padding: 10px 10px; }
  .ct-copied { margin: -5px 0 5px; min-height: 12px; font-size: 0.54rem; }
  .ct-form { gap: 8px; }
  .ct-form textarea { min-height: 58px; }

  /* The four field labels cost 76px here — a label, plus its 6px gap, four
     times over — which is more than the whole shortfall on a 667px-tall phone.
     The placeholders already say the same thing ("Your name",
     "you@example.com", "+1 647 000 0000"), so on a short screen the labels are
     duplication that pushes the send button under the fold.

     CLIPPED, never display:none. display:none removes the <span> from the
     accessibility tree, and since it is the label's only text the input would
     be left with no accessible name at all — a screen reader would announce
     four anonymous text boxes. Clipping keeps it announced and unseen. */
  .ct-form .ts-field > span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ct-form .ts-field { gap: 0; }

  .consent-check { padding: 8px 10px; }
  .ct-form .consent-check__text { font-size: 0.76rem; }
}

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  .ct { padding-top: 44px; }
  .ct-mark { width: 118px; height: 118px; }
}