/* THE OPT-IN, THE FLIP'S FACTION AND THE DIVE (2026-10-27; js/optin.js, js/mirror.js "GOING IN")
   One calm screen on the dark stage (the bar, the founder's pick 2026-10-27); no new fonts, no new colours. */

/* ---------- the one calm screen: THE BAR (R2, 2026-10-27, the founder's pick of round 1) ----------
   A laptop: a black band from the top edge, the faction's 6 px stripe along it, First name | Email | the button on one line.
   A phone (the bar's own breakpoint, under 900 px): the whole screen goes black (no page below, no panel edge), the same
   content stacked with breathing room at the top. Fields are solid white with ink text (input text 18 px); the faction
   colours are the locked tokens (sections.css :root, docs/brand/HYPHA-FACTIONS-v1.md), never a new shade; every text pair
   at least 4.5:1 on the dark stage. The error line sits under the field it names (js/optin.js say(), data-for). */
html.optin-on { overflow: hidden; }
.optin {
  --fx: var(--white); /* the visitor's faction (stripe, flag, button, focus ring); no faction known: the neutral white */
  --err: #ff8a8a;
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: start stretch;
  padding: 0;
  opacity: 0;
  transition: opacity 0.24s ease;
}
.optin[hidden] { display: none; }
.optin.is-in { opacity: 1; }
.optin[data-faction="hunter"] { --fx: var(--c-hunter); }
.optin[data-faction="architect"] { --fx: var(--c-architect); }
.optin[data-faction="rainmaker"] { --fx: var(--c-rainmaker); }
.optin[data-faction="commander"] { --fx: var(--c-commander); }
.optin-shade {
  position: absolute;
  inset: 0;
  background: rgb(2 6 5 / 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.optin-card {
  position: relative;
  width: 100%;
  max-height: 100vh;
  max-height: 100svh;
  overflow: auto;
  box-sizing: border-box;
  padding: 0;
  border-radius: 0 0 24px 24px;
  border-top: 6px solid var(--fx);
  background: var(--carbon);
  color: var(--white);
  box-shadow: 0 1px 0 rgb(249 250 250 / 0.06), 0 40px 90px rgb(0 0 0 / 0.6);
  transform: translateY(-28px);
  transition: transform 0.32s cubic-bezier(.2,.7,.2,1);
}
.optin.is-in .optin-card { transform: none; }
.optin-in { box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 44px 64px 36px; }
.optin-x {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--silver);
  font: 400 24px/1 var(--f-body);
  cursor: pointer;
}
.optin-x:hover, .optin-x:focus-visible { border-color: rgb(249 250 250 / 0.4); color: var(--white); background: rgb(249 250 250 / 0.08); outline: none; }
.optin-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 16px; }
.optin-head[hidden] { display: none; }
.optin-flag { display: none; }
.optin[data-faction] .optin-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font: 600 12.5px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fx);
}
.optin-sign { width: 20px; height: 20px; flex: none; }
.optin-kick {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}
.optin-kick:empty { display: none; }
.optin-kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgb(57 241 100 / 0.7); }
.optin[data-faction] .optin-kick::before { display: none; }
.optin-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}
.optin-form { display: grid; gap: 12px; margin: 28px 0 0; }
/* the row: name | email | button on a laptop; the error line under the field it names (row 2), so the button never moves */
.optin-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 14px; align-items: end; }
.optin-f-name { grid-area: 1 / 1; }
.optin-f-mail { grid-area: 1 / 2; }
.optin-row .optin-go { grid-area: 1 / 3; }
.optin-err { grid-area: 2 / 2 / 3 / 4; margin: -6px 0 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--err); }
.optin-err[data-for="name"] { grid-area: 2 / 1 / 3 / 2; }
.optin-err:empty { display: none; }
.optin-f { display: grid; gap: 8px; }
.optin-f > span { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--silver); }
.optin-f input {
  appearance: none;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  padding: 0 18px;
  border-radius: 12px;
  border: 2px solid var(--white);
  background: var(--white);
  color: var(--ink);
  font: 400 18px/1.25 var(--f-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.optin-f input:focus { outline: none; border-color: var(--fx); box-shadow: 0 0 0 3px var(--fx); }
.optin-f input[aria-invalid] { border-color: var(--err); box-shadow: 0 0 0 3px var(--err); }
.optin .optin-go {
  justify-content: center;
  width: auto;
  height: 58px;
  margin: 0;
  padding: 0 30px;
  border-radius: 12px;
  white-space: nowrap;
  background: var(--fx);
  color: var(--ink);
  box-shadow: none;
}
.optin .optin-go .arw { color: var(--ink); text-shadow: none; }
.optin .optin-go:hover { box-shadow: 0 0 0 2px var(--white), 0 18px 44px rgb(0 0 0 / 0.5); }
.optin .optin-go:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.optin-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 40px; align-items: start; margin-top: 6px; }
.optin-lede { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--silver); }
.optin-consent { margin: 0; justify-self: end; max-width: 52ch; font-size: 12.5px; line-height: 1.5; text-align: right; color: var(--steel); }
@media (max-width: 899px) {
  /* the phone: the whole screen black, the content stacked with room at the top; title + First name sit high enough
     that the keyboard (focus lands in First name) leaves them and Email in view */
  .optin-shade { background: var(--void); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .optin-card { height: 100%; max-height: none; border-radius: 0; background: var(--void); box-shadow: none; transform: none; }
  .optin-in { padding: clamp(56px, 11svh, 96px) 22px 28px; }
  .optin-head { margin: 0 46px 14px 0; gap: 8px 16px; }
  .optin-title { font-size: 30px; }
  .optin-form { margin-top: 24px; }
  .optin-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .optin-f-name, .optin-f-mail, .optin-row .optin-go, .optin-err, .optin-err[data-for="name"] { grid-area: auto; }
  .optin-f-name { order: 1; }
  .optin-err[data-for="name"] { order: 2; }
  .optin-f-mail { order: 3; }
  .optin-err { order: 4; }
  .optin-row .optin-go { order: 5; }
  .optin .optin-go { width: 100%; height: 60px; margin-top: 4px; font-size: 15.5px; }
  .optin-foot { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 4px; }
  .optin-lede { font-size: 14.5px; }
  .optin-consent { justify-self: start; text-align: left; }
  .optin-x { top: 12px; right: 10px; }
}

/* ---------- "Going in as <name>. Not you?" ---------- */
.optin-who { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.optin-who[hidden] { display: none; }
.optin-who b { font-weight: 600; color: var(--ink-2); }
.optin-notyou {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(77 87 82 / 0.4);
  cursor: pointer;
}
.optin-notyou:hover { color: var(--ink); }
.mc-done .optin-who--quiz { margin-top: 16px; }
/* :not([hidden]): this display rule out-ranked .optin-who[hidden] above, so the footer read "Going in as . Not you?" to
   visitors not yet in (inv-vnotes-merge look, 10-27) */
.jv-foot .optin-who:not([hidden]) { display: block; margin-top: 6px; font-size: 13px; }

/* ---------- the flip flies the visitor's faction (docs/brand/HYPHA-FACTIONS-v1.md): its colour, its sign ---------- */
.os-you-tag { display: inline-flex; align-items: center; gap: 6px; }
.os-sign { width: 14px; height: 14px; flex: none; color: #04110c; }
.os-you .cur-name { box-shadow: 0 0 0 1px rgb(248 253 250 / 0.6), 0 0 26px color-mix(in srgb, var(--rc) 65%, transparent), 0 4px 16px rgb(0 0 0 / 0.4); }
.os-doc .brief {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rc) 85%, transparent),
    0 0 46px color-mix(in srgb, var(--rc) 30%, transparent),
    0 0 120px color-mix(in srgb, var(--rc) 22%, transparent),
    0 30px 70px rgb(0 0 0 / 0.55);
}

/* ---------- the dive: the camera pushes into the card, the words step back, the world's dark covers from the card ---------- */
.other .hy-world { transition: transform 1.3s cubic-bezier(.55,0,.3,1); }
.other.is-diving .hy-world { transform: scale(2.6); }
.other .other-ui, .other .other-frame { transition: opacity 0.45s ease; }
.other.is-diving .other-ui, .other.is-diving .other-frame { opacity: 0; }
body.is-diving .flip-cover { opacity: 0; }
body.is-diving .flip-cover.is-full { opacity: 1; }
.dive-veil {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--void);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.dive-veil.is-on { opacity: 1; }

/* reduced motion: a crossfade, never a zoom or a slide */
@media (prefers-reduced-motion: reduce) {
  .optin, .optin-card { transition: opacity 0.2s ease; transform: none; }
  .other { opacity: 0; transition: opacity 0.6s ease; }
  .other.is-in { opacity: 1; }
  .other .other-line, .other .other-note, .other.is-in .other-line, .other.is-in .other-note { transform: none; }
  .other .hy-world, .other.is-diving .hy-world { transition: none; transform: none; }
}