/* Brand tokens (Divvelo logo kit) */
:root {
  --navy: #050B30;
  --sky: #60B5FA;
  --off-white: #F3F4FA;
  --blue: #1C64C9;
  --muted: rgba(243, 244, 250, 0.6);        /* >=5.5:1 on navy, including under the light field */
  --field-bg: rgba(243, 244, 250, 0.06);
  --field-line: rgba(243, 244, 250, 0.18);
  --field-line-focus: rgba(243, 244, 250, 0.45);
  --placeholder: rgba(243, 244, 250, 0.55);
  --field-solid: #13193C;                    /* --field-bg flattened onto navy, for autofill */
  --glow: rgba(96, 181, 250, 0.45);

  --cut: 10.5deg;                            /* Split D cut angle: slab edge from (96.143,40) to (73.857,160) */
  --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --radius: 8px;
  --field-h: 52px;
  --field-gap: 12px;

  color-scheme: dark;
}

/* Arial stand-in sized to Poppins Bold so the headline doesn't reflow when the web font lands.
   Arimo is metric-compatible with Arial, so body text needs no override. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 700;
  size-adjust: 109%;
  ascent-override: 98%;
  descent-override: 33%;
  line-gap-override: 0%;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-top: 4px solid var(--sky);
  color: var(--off-white);
  font: 400 1rem/1.5 "Arimo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Background: the Split ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--navy);
}

/* Light field: two soft radial pools that drift. Transform-only so it stays on the compositor. */
.glow {
  --size: max(70vw, 520px);
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  will-change: transform;
  animation: drift-a 28s ease-in-out infinite alternate;
}

.glow-a {
  left: calc(38% - var(--size) / 2);
  top: calc(34% - var(--size) / 2);
  background: radial-gradient(closest-side, rgba(96, 181, 250, 0.16), rgba(96, 181, 250, 0.07) 50%, rgba(96, 181, 250, 0));
}

.glow-b {
  left: calc(66% - var(--size) / 2);
  top: calc(72% - var(--size) / 2);
  background: radial-gradient(closest-side, rgba(28, 100, 201, 0.12), rgba(28, 100, 201, 0.05) 50%, rgba(28, 100, 201, 0));
  animation-name: drift-b;
  animation-duration: 32s;
}

@keyframes drift-a {
  from { transform: translate3d(-4%, -3%, 0); }
  to   { transform: translate3d(4%, 3%, 0); }
}

@keyframes drift-b {
  from { transform: translate3d(3%, 4%, 0); }
  to   { transform: translate3d(-4%, -3%, 0); }
}

/* Hairline grid at the cut angle, faded out toward the edges. */
.grid {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 25%, transparent 80%);
}

.grid::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: repeating-linear-gradient(90deg, rgba(243, 244, 250, 0.04) 0 1px, transparent 1px 96px);
  transform: rotate(var(--cut));
}

/* Film grain. Fractal noise sits near mid-gray, which soft-light treats as "no change", so the
   filter stretches its contrast 4x; even then soft-light over navy needs ~22% to register. */
.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='4' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='4' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='4' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.22;
  mix-blend-mode: soft-light;
}

/* ---------- Layout ---------- */

.site-header,
.hero,
.site-footer {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-header { padding-top: 24px; }

.brand {
  display: inline-block;
  border-radius: 4px;
}

.brand img {
  display: block;
  width: auto;
  height: 28px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
}

/* ---------- Headline ---------- */

.headline {
  position: relative;
  isolation: isolate;
  width: 100%;
}

h1 {
  margin: 0 auto;
  /* ~24.5ch of Poppins Bold. Line 1 needs 23.3ch at 64px, so 22ch split it in three.
     Set in em so the Arial fallback (narrower "0", same line width) wraps identically. */
  max-width: 15.5em;
  min-height: 2.12em; /* two lines reserved before fonts/scripts arrive */
  font-family: "Poppins", "Poppins Fallback", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.l1,
.l2 { display: block; }

.l1 { color: var(--sky); }
.l2 { color: var(--off-white); }

.w { display: inline-block; }

/* The slanted sky line behind the headline. */
.split {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 1px;
  height: calc(100% + clamp(48px, 9vh, 120px));
  transform: translate(-50%, -50%) rotate(var(--cut));
  pointer-events: none;
}

.split-line {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sky);
  box-shadow: 0 0 6px 1px rgba(96, 181, 250, 0.7), 0 0 24px 2px rgba(96, 181, 250, 0.3);
}

/* ---------- Intro states ----------
   Hidden until script.js runs the anime.js sequence. If it never does, the fallback
   animation reveals everything after 2.4s so the page can't get stuck blank. */

.w,
.reveal,
.split-line { animation: intro-fallback 0.6s ease-out 2.4s both; }

.w { opacity: 0; transform: translateY(24px); }
.reveal { opacity: 0; transform: translateY(12px); }
.split-line { transform: scaleY(0); animation-name: split-fallback; }

@keyframes intro-fallback {
  to { opacity: 1; transform: none; }
}

@keyframes split-fallback {
  to { opacity: 0.25; transform: none; }
}

.intro-js .w,
.intro-js .reveal,
.intro-js .split-line { animation: none; }

.intro-done .w,
.intro-done .reveal { opacity: 1; transform: none; }
.intro-done .split-line { opacity: 0.25; transform: none; }

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

.signup {
  width: 100%;
  max-width: 760px;
  margin: clamp(28px, 5vh, 44px) auto 0;
}

.fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Vertical rhythm comes from margins, not grid gaps, so the "Other" row can open from zero height. */
.fields > select,
.fields > button { margin-top: var(--field-gap); }

input,
select,
button {
  height: var(--field-h);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem; /* >=16px keeps iOS from zooming on focus */
}

input,
select {
  width: 100%;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--field-line);
  background-color: var(--field-bg);
  color: var(--off-white);
  transition: border-color 0.15s ease;
}

input::placeholder { color: var(--placeholder); opacity: 1; }

input:-webkit-autofill {
  -webkit-text-fill-color: var(--off-white);
  -webkit-box-shadow: 0 0 0 1000px var(--field-solid) inset;
  caret-color: var(--off-white);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F3F4FA' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  text-overflow: ellipsis;
}

select:invalid { color: var(--placeholder); } /* placeholder option showing */
option { background: var(--navy); color: var(--off-white); }

input:focus,
select:focus { border-color: var(--field-line-focus); }

input:focus-visible,
select:focus-visible,
.brand:focus-visible,
.status a:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* "Other (please fill in)" free-text row. */
.other { overflow: hidden; }
.other.is-open { overflow: visible; }
.other input { margin-top: var(--field-gap); }

button {
  margin-left: 0;
  margin-right: 0;
  padding: 0 24px;
  border: 0;
  background: var(--sky);
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

button:hover,
button:focus-visible {
  background: var(--off-white);
  box-shadow: 0 0 0 1px rgba(96, 181, 250, 0.5), 0 0 28px 2px var(--glow);
}

button:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}

button:disabled {
  cursor: progress;
  background: var(--sky);
  box-shadow: none;
  opacity: 0.7;
}

.status {
  min-height: 1.5em;
  margin: 14px 0 0;
  font-size: 0.9375rem;
}

.status:empty { margin-top: 0; }

.status a {
  color: var(--sky);
  text-underline-offset: 2px;
}

.success {
  margin: clamp(28px, 5vh, 44px) 0 0;
  font-weight: 700;
  font-size: 1.125rem;
}

.success:focus { outline: none; }

/* Honeypot: present for bots, off-screen for people. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-top: 16px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

@media (min-width: 720px) {
  .site-header { padding-top: 32px; }
  .brand img { height: 32px; }
  .split { height: calc(100% + clamp(96px, 18vh, 220px)); }

  .fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: var(--field-gap);
  }

  #email { grid-area: 1 / 1; }
  #role { grid-area: 1 / 2; }
  .fields > button { grid-area: 1 / 3; }
  .fields > select,
  .fields > button { margin-top: 0; }
  .other { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .w,
  .reveal { animation: none; opacity: 1; transform: none; }
  .split-line { animation: none; opacity: 0.25; transform: none; }
  input,
  select,
  button { transition: none; }
}