/* Undistancing. Black, one warm white, one face. Particles drifting; a name; a promise; a way to be found. */

:root {
  --bg: #070707;
  --ink: #ecebe6;
  --ink-2: rgba(236, 235, 230, 0.62);
  --ink-3: rgba(236, 235, 230, 0.36);
  --line: rgba(236, 235, 230, 0.18);
  --serif: "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 3.6vw, 56px);
  --edge: clamp(24px, 4.5vh, 48px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-weight: 400; font-size: 1.0625rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
  caret-color: var(--ink);
}
::selection { background: var(--ink); color: var(--bg); }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
p, h1 { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.plate { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* a breath of dark behind the centre so the words sit on the plate without fighting it */
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 46% at 50% 54%, rgba(7,7,7,0.86) 0%, rgba(7,7,7,0.62) 55%, rgba(7,7,7,0) 100%);
}
.stage > * { position: relative; }

/* One display size for the name and the hero. */
.display {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 5.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.012em;
  text-wrap: balance;
}

.head {
  position: fixed; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: var(--edge) var(--gutter) 0; pointer-events: none;
}
.head > * { pointer-events: auto; }
.sound {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-variant-caps: all-small-caps; letter-spacing: 0.12em; font-size: 1rem; color: var(--ink-2);
  transition: color 200ms ease, transform 160ms var(--ease-out), opacity 1200ms ease;
}
.sound:hover { color: var(--ink); }
.sound:active { transform: scale(0.97); }
.sound-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; align-self: center; opacity: 0.5; }
.sound[aria-pressed="true"] { color: var(--ink); }
.sound[aria-pressed="true"] .sound-dot { opacity: 1; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.5; } }
.sound-state { color: var(--ink-3); font-style: italic; font-variant-caps: normal; letter-spacing: 0; }

/* Centre */
.stage {
  position: fixed; inset: 0; z-index: 2;
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: calc(var(--edge) + 3rem) var(--gutter) calc(var(--edge) + clamp(2.25rem, 5.4vw, 4.75rem) * 1.15); gap: 0;
}
.motto {
  position: fixed; left: var(--gutter); bottom: calc(var(--edge) - 0.12em); z-index: 3; margin: 0;
  color: var(--ink); max-width: calc(100% - 2 * var(--gutter));
  text-shadow: 0 0 24px rgba(7,7,7,0.9), 0 0 8px rgba(7,7,7,0.9);
}
.hero { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3.9vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; max-width: 30ch; }
.hero strong { font-weight: 600; }

.reach { display: grid; width: min(30rem, 100%); margin-top: clamp(36px, 6vh, 64px); text-align: left; }
/* the body folds shut when the message has been received */
.reach-body {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows 1100ms cubic-bezier(0.55, 0, 0.15, 1) 120ms, opacity 600ms ease 60ms;
}
.reach-body-inner { min-height: 0; overflow: hidden; display: grid; gap: 26px; transition: transform 1100ms cubic-bezier(0.55, 0, 0.15, 1) 120ms; }
.reach.is-sent .reach-body { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.reach.is-sent .reach-body-inner { transform: translateY(-16px); }
.fld { display: grid; gap: 6px; }
.fld-label { font-variant-caps: all-small-caps; letter-spacing: 0.12em; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.fld-input {
  width: 100%; font: inherit; font-size: 1.1875rem; line-height: 1.45; color: var(--ink);
  background: none; border: 0; border-bottom: 1.5px solid var(--ink-2); border-radius: 0; padding: 4px 0 10px;
  transition: border-color 250ms ease;
}
.fld-input::placeholder { color: var(--ink-3); font-style: italic; }
.fld-input:focus { border-color: var(--ink); outline: none; }
textarea.fld-input { resize: none; min-height: 2.2lh; field-sizing: content; max-height: 30vh; }
.fld.is-bad .fld-input { border-color: rgba(236,235,230,0.7); }
.fld.is-bad .fld-label::after { content: " needed"; font-variant-caps: normal; letter-spacing: 0; font-style: italic; color: var(--ink-2); }
.reach-foot { display: grid; justify-items: center; padding-top: 6px; }
.leave {
  display: inline-flex; font-size: 1.1875rem; color: var(--ink); padding: 6px 2px 4px; border-bottom: 1px solid var(--ink-2);
  transition: border-color 250ms ease, transform 160ms var(--ease-out), opacity 250ms ease;
}
.leave:hover { border-color: var(--ink); } .leave:active { transform: scale(0.98); }
.leave[disabled] { opacity: 0.5; cursor: default; }
.reach-note {
  margin-top: 26px; font-style: italic; font-weight: 600; font-size: 1.375rem; color: var(--ink); text-align: center; justify-self: center;
  transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease, font-size 1100ms cubic-bezier(0.55, 0, 0.15, 1);
}
.reach-note.is-swapping { opacity: 0; filter: blur(4px); transform: translateY(4px); }
.reach-note.is-received { font-size: 1.5rem; transition: opacity 1200ms var(--ease-out), filter 1200ms var(--ease-out), transform 1200ms var(--ease-out), font-size 1100ms cubic-bezier(0.55, 0, 0.15, 1); }

/* Entrance */
.motto, .hero, .reach, .sound { opacity: 0; }
.hero { filter: blur(6px); transform: translateY(8px); transition: opacity 1400ms var(--ease-out), filter 1400ms var(--ease-out), transform 1400ms var(--ease-out); }
.motto, .reach { transition: opacity 1200ms ease; }
.is-in .sound { opacity: 1; }
.motto { transition: opacity 1200ms ease; }
.is-in .motto { opacity: 1; transition-delay: 1100ms; }
.is-in .hero { opacity: 1; filter: blur(0); transform: none; transition-delay: 300ms; }
.is-in .motto { opacity: 1; transition-delay: 900ms; }
.is-in .reach { opacity: 1; transition-delay: 1300ms; }

@media (max-width: 720px) {
  .head { padding-top: 20px; }
  .display { font-size: clamp(2rem, 9.5vw, 2.75rem); }
  .hero { font-size: clamp(1.625rem, 7.2vw, 2.125rem); }
  .stage { padding-top: calc(20px + 3rem); align-content: center; }
  .motto { bottom: 18px; }
  .reach-note { font-size: 1.1875rem; }
  .reach-note.is-received { font-size: 1.3125rem; }
  .reach { margin-top: 32px; gap: 20px; }
}
@media (max-height: 640px) { .reach { margin-top: 24px; gap: 16px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .motto, .hero, .reach, .sound { opacity: 1; filter: none; transform: none; }
}