/* Layout: the rendered druse fills the screen; one centred block (name, line, signup) sits in the dark above the crystals. */
@font-face { font-family: "Syne"; font-weight: 400; font-display: swap; src: url("/fonts/syne-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 600; font-display: swap; src: url("/fonts/syne-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 700; font-display: swap; src: url("/fonts/syne-latin-700-normal.woff2") format("woff2"); }

:root {
  --void: #020604;
  --ivory: #f3efe4;
  --ivory-dim: rgba(243, 239, 228, 0.7);
  --jade: #8ff0bd;
  --jade-ink: #02170c;
  --glass: rgba(2, 14, 9, 0.55);
  --glass-line: rgba(143, 240, 189, 0.3);
  --error: #ffb8a8;
  --font: "Syne", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--void); color: var(--ivory); font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }

.poster, .poster img, #stone { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.poster img { object-fit: cover; object-position: 50% 50%; }
#stone { opacity: 0; transition: opacity 0.6s ease; }
body.lit #stone { opacity: 1; }
.scrim { position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% 22%, rgba(1, 5, 3, 0.55) 0%, rgba(1, 5, 3, 0) 100%),
    linear-gradient(to bottom, rgba(1, 5, 3, 0.5) 0%, rgba(1, 5, 3, 0) 45%, rgba(1, 5, 3, 0) 75%, rgba(1, 5, 3, 0.6) 100%); }

.ui { position: fixed; inset: 0; display: flex; flex-direction: column; overflow-y: auto; touch-action: pan-y; /* sideways drags move the light on touch screens */
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: calc(env(safe-area-inset-top, 0px) + clamp(40px, 9vh, 104px)) calc(env(safe-area-inset-bottom, 0px) + 14px); }
.hero { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; width: 100%; max-width: 52rem; margin-inline: auto; }
.hero > * { margin: 0; }
h1 { font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; font-size: clamp(2.2rem, 7vw, 5.8rem); text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5); }
.tag { font-size: clamp(1rem, 1.7vw, 1.3rem); letter-spacing: 0.02em; color: var(--ivory-dim); text-wrap: balance; }

form { display: flex; gap: 6px; width: min(100%, 30rem); margin-top: 10px; padding: 6px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
form:focus-within { border-color: var(--jade); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input[type="email"] { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ivory); background: transparent; border: 0; outline: none; padding: 11px 12px; }
input::placeholder { color: rgba(243, 239, 228, 0.5); }
form button { flex: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; border: 0; border-radius: 9px; padding: 12px 18px; background: var(--jade); color: var(--jade-ink); transition: filter 0.15s ease, transform 0.15s ease; }
form button:hover { filter: brightness(1.07); transform: translateY(-1px); }
form button:disabled { opacity: 0.6; cursor: progress; transform: none; }
form[data-state="sent"] { display: none; }
#turnstile:empty { display: none; }
.status { min-height: 1.4em; font-size: 15px; }
.status[data-kind="error"] { color: var(--error); }
.fine { font-size: 12.5px; color: var(--ivory-dim); max-width: 30rem; }
@media (min-width: 760px) { .fine { max-width: none; white-space: nowrap; } } /* one line on desktop */

.bar { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ivory-dim); }
.bar p { margin: 0; }
.tilt { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--jade); background: rgba(2, 14, 9, 0.6); border: 1px solid var(--glass-line); border-radius: 999px; padding: 10px 16px; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tilt::before { content: "\25C6\00a0\00a0"; font-size: 10px; vertical-align: 1px; }

@media (max-width: 480px) {
  form button { padding-inline: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #stone, form button { transition: none; }
}