/* Landing: typography and one glassy form floating over the night. */

.landing {
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --glass-thin: color-mix(in oklab, var(--ink-900) 42%, transparent);
  --scrim: color-mix(in oklab, var(--ink-950) 62%, transparent);
  position: relative;
  overflow-x: clip;
  min-height: 100svh;
}

/* ---------- header ---------- */
.landing-header {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: max(var(--s-4), env(safe-area-inset-top)) var(--gutter) 0;
}
.landing-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--text); text-decoration: none;
}
.landing-brand-word {
  font-family: var(--font-display); font-variation-settings: 'SOFT' 100, 'opsz' 48;
  font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0.01em;
}
.landing-clock {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-dim);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--glass-thin); border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.landing-clock-icon { width: 15px; height: 15px; color: var(--lamp-soft); flex: none; }
.landing-clock-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.01em; }
.landing-clock-mood { font-style: italic; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; }

/* ---------- hero ---------- */
.landing-hero {
  position: relative;
  min-height: 100svh;
  max-width: var(--max); margin: 0 auto;
  padding: calc(var(--s-7) + 56px) var(--gutter) calc(var(--s-7) + 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 420px);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
/* a soft pool of dark behind the type so it reads over any window */
.landing-hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% 35% 10% -20%;
  background: radial-gradient(closest-side, var(--scrim), transparent);
  filter: blur(20px);
}
.landing-hero-copy { min-width: 0; }
.landing-eyebrow { margin: 0 0 var(--s-5); color: var(--lamp-soft); opacity: 0.85; }
.landing-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 380;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  font-size: var(--fs-hero); line-height: 0.9; letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 2px 40px color-mix(in oklab, var(--ink-950) 70%, transparent);
}
.landing-title-line { display: block; }
.landing-title-em {
  font-style: italic; font-weight: 340; color: var(--lamp-soft);
  padding-right: 0.08em;
  text-shadow: 0 0 36px var(--lamp-glow), 0 0 90px var(--lamp-glow);
}
.landing-pitch {
  margin: var(--s-6) 0 0; max-width: 32ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.5; color: var(--text-dim);
  text-wrap: pretty;
}

/* ---------- join card ---------- */
.landing-hero-form { min-width: 0; }
.landing-card {
  --my-lamp: var(--lamp);
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  background: var(--glass-thin);
  border-color: var(--glass-line-strong);
  transition: box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
/* the lamp's warm spill on the top edge of the card, tinted by your colour */
.landing-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--my-lamp) 22%, transparent), transparent 60%);
  opacity: 0.7; transition: opacity var(--t-slow) var(--ease);
}
.landing-card > * { position: relative; }
.landing-card.is-joining {
  border-color: color-mix(in oklab, var(--my-lamp) 55%, transparent);
  box-shadow: var(--shadow), 0 0 80px color-mix(in oklab, var(--my-lamp) 40%, transparent);
}
.landing-card.is-joining::before { opacity: 1; }
.landing-card-title { font-size: var(--fs-xl); margin-bottom: var(--s-5); }

.landing-invite {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--text-dim);
}
.landing-invite[hidden] { display: none; }
.landing-invite-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 12px var(--rose-glow); }
.landing-invite-code {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text);
  padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--glass-line-strong);
  overflow-wrap: anywhere;
}

.landing-form { display: grid; gap: var(--s-4); }
.landing-form > *:not(.landing-submit):not(.landing-fine) { transition: opacity var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
.landing-card.is-joining .landing-field { opacity: 0.32; filter: blur(1.5px); }

.landing-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.landing-label { font-size: var(--fs-sm); color: var(--text-dim); padding: 0; }
.landing-input { min-height: 48px; font-size: 1rem; } /* 16px stops iOS zoom */
.landing-input[aria-invalid='true'] { border-color: var(--danger); }
.landing-input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 30%, transparent); }

.landing-room-row { display: flex; gap: var(--s-2); align-items: center; }
.landing-room-wrap { position: relative; flex: 1; min-width: 0; }
.landing-room-prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-faint); pointer-events: none;
}
.landing-input-room { padding-left: 42px; font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: -0.01em; }
@supports (-webkit-touch-callout: none) { .landing-input-room { font-size: 1rem; } }
.landing-reroll { flex: none; width: 48px; height: 48px; }
.landing-reroll .landing-icon { width: 20px; height: 20px; }
.landing-reroll.is-spinning .landing-icon { animation: landing-spin 560ms var(--ease); }
@keyframes landing-spin { from { transform: rotate(-300deg); } }

.landing-hint, .landing-err { margin: 0; font-size: var(--fs-xs); min-height: 0; }
.landing-hint:empty, .landing-err:empty { display: none; }
.landing-hint { color: var(--text-faint); display: flex; align-items: center; gap: 6px; }
.landing-hint[data-live='true'] { color: var(--text-dim); }
.landing-hint[data-live='true']::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rose);
  box-shadow: 0 0 10px var(--rose-glow); animation: landing-breathe 2.6s var(--ease-in-out) infinite;
}
.landing-err { color: var(--danger); }
@keyframes landing-breathe { 50% { opacity: 0.45; } }

/* colour swatches: native radios, so arrows keys just work */
.landing-colors legend { margin-bottom: 6px; }
.landing-color-name { color: var(--text-faint); font-style: italic; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; margin-left: 4px; }
.landing-swatches { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-left: -6px; }
.landing-swatch { position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.landing-swatch-input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.landing-swatch-dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 -3px 6px color-mix(in oklab, var(--ink-950) 25%, transparent), 0 0 0 0 transparent;
  opacity: 0.72; transform: scale(0.86);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.landing-swatch:hover .landing-swatch-dot { opacity: 0.85; }
.landing-swatch-input:checked + .landing-swatch-dot {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--swatch), 0 0 22px var(--swatch);
}
.landing-swatch-input:focus-visible + .landing-swatch-dot { outline: 2px solid var(--lamp); outline-offset: 6px; }

/* the switch */
.landing-submit {
  position: relative; margin-top: var(--s-2);
  min-height: 54px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1rem; letter-spacing: 0.01em;
}
.landing-submit:disabled { cursor: default; }
.landing-submit-bulb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-900); box-shadow: inset 0 0 0 2px var(--ink-900);
  transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.landing-card.is-joining .landing-submit {
  background: var(--lamp-soft);
  box-shadow: 0 0 0 1px var(--lamp-soft), 0 0 60px var(--lamp-glow), 0 0 120px var(--lamp-glow);
}
.landing-card.is-joining .landing-submit-bulb { background: var(--lamp); box-shadow: 0 0 0 2px var(--ink-900), 0 0 12px var(--lamp-deep); }
.landing-fine { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-faint); }

/* the whole room dims as your lamp comes on */
.landing-hero-copy, .landing-header, .landing-cue { transition: opacity var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
.landing.is-joining .landing-hero-copy,
.landing.is-joining .landing-header,
.landing.is-joining .landing-cue { opacity: 0.25; filter: blur(2px); }

/* ---------- scroll cue ---------- */
.landing-cue {
  position: absolute; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 12px;
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); text-decoration: none;
}
.landing-cue:hover { color: var(--text-dim); }
.landing-cue.is-gone { opacity: 0; pointer-events: none; }
.landing-cue-line {
  position: relative; width: 1px; height: 36px; overflow: hidden;
  background: linear-gradient(var(--glass-line-strong), transparent);
}
.landing-cue-line::after {
  content: ''; position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lamp); box-shadow: 0 0 8px var(--lamp);
  animation: landing-drip 2.8s var(--ease-in-out) infinite;
}
@keyframes landing-drip {
  0% { transform: translateY(-6px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}

/* ---------- sections ---------- */
.landing-section {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) var(--gutter) 0;
  position: relative;
}
.landing-section::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0 -10%;
  background: radial-gradient(60% 70% at 30% 50%, var(--scrim), transparent 70%);
}
.landing-section-head { margin-bottom: clamp(28px, 4vw, 56px); }
.landing-section-head .eyebrow { margin: 0 0 var(--s-3); }
.landing-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-variation-settings: 'SOFT' 100, 'opsz' 96;
  font-size: var(--fs-2xl); line-height: 1.02; letter-spacing: -0.02em;
}
.landing-h2 em { font-style: italic; color: var(--lamp-soft); }

/* how it works: three bulbs on one cord */
.landing-beats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px);
  position: relative;
}
.landing-beats::before {
  content: ''; position: absolute; left: 6px; right: 0; top: 6px; height: 1px;
  background: linear-gradient(90deg, var(--glass-line-strong), var(--glass-line) 80%, transparent);
}
.landing-beat { position: relative; padding-top: var(--s-6); min-width: 0; }
.landing-beat-bulb {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink-700); border: 1px solid var(--glass-line-strong);
  transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t-slow);
  transition-delay: calc(var(--d, 0ms) + 380ms);
}
.landing-beat.is-lit .landing-beat-bulb,
.landing:not(.is-animated) .landing-beat-bulb {
  background: var(--lamp); border-color: var(--lamp-soft);
  box-shadow: 0 0 14px var(--lamp), 0 0 44px var(--lamp-glow);
}
.landing-beat-num {
  display: block; font-family: var(--font-display); font-style: italic;
  font-variation-settings: 'SOFT' 100; font-size: var(--fs-xl); color: var(--lamp-soft); opacity: 0.8;
  margin-bottom: var(--s-2);
}
.landing-beat-title {
  margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: 500;
  font-variation-settings: 'SOFT' 100; font-size: var(--fs-xl); line-height: 1.15;
}
.landing-beat-body { margin: 0; color: var(--text-dim); max-width: 34ch; text-wrap: pretty; }

/* what's inside */
.landing-things {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 1100px) { .landing-things { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.landing-thing {
  display: flex; gap: var(--s-3); align-items: flex-start; min-width: 0;
  padding: var(--s-4) 0; border-top: 1px solid var(--glass-line);
}
.landing-thing-icon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  color: var(--lamp-soft); background: color-mix(in oklab, var(--lamp) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--lamp) 22%, transparent);
}
.landing-icon { width: 20px; height: 20px; }
.landing-icon-sm { width: 16px; height: 16px; }
.landing-thing-text { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.landing-thing-title { font-weight: 550; font-size: var(--fs-md); }
.landing-thing-body { font-size: var(--fs-sm); color: var(--text-dim); text-wrap: pretty; }

/* footer */
.landing-footer {
  max-width: var(--max); margin: clamp(64px, 10vw, 128px) auto 0;
  padding: 0 var(--gutter) max(var(--s-6), env(safe-area-inset-bottom));
}
.landing-footer-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-6) 0; border-top: 1px solid var(--glass-line-strong);
}
.landing-footer-line {
  margin: 0; font-family: var(--font-display); font-variation-settings: 'SOFT' 100, 'opsz' 96;
  font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.02em;
}
.landing-footer-line em { font-style: italic; color: var(--lamp-soft); text-shadow: 0 0 30px var(--lamp-glow); }
.landing-footer-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; font-size: var(--fs-md); }
.landing-footer-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  font-size: var(--fs-xs); color: var(--text-dim);
}
.landing-footer-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: var(--fs-md); color: var(--text); }
.landing-footer-brand .brand-mark { width: 12px; height: 15px; }
.landing-footer-faint { color: var(--text-faint); margin-left: auto; font-style: italic; }

/* ---------- motion: the lamp switch (only when JS opted in and motion is welcome) ---------- */
@keyframes landing-switch {
  0% { opacity: 0.25; filter: blur(10px); }
  14% { opacity: 0.55; filter: blur(6px); }
  22% { opacity: 0.3; filter: blur(6px); }
  34% { opacity: 0.8; filter: blur(3px); }
  100% { opacity: 1; filter: blur(0); }
}
/* Starts dim, not invisible, so the hero text paints (and counts for LCP) on the first frame. */
.landing.is-animated .landing-intro { opacity: 0.25; }
.landing.is-animated.is-on .landing-intro {
  animation: landing-switch 1300ms var(--ease) both; animation-delay: var(--d, 0ms);
}
.landing.is-animated .landing-reveal {
  opacity: 0; filter: blur(8px);
  transition: opacity var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
  transition-delay: var(--d, 0ms);
}
.landing.is-animated .landing-reveal.is-lit { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .landing-cue-line::after, .landing-hint[data-live='true']::before { animation: none; }
  .landing-cue-line::after { top: 14px; }
  .landing-reroll.is-spinning .landing-icon { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: center; gap: var(--s-6);
    padding-top: calc(56px + var(--s-7));
  }
  .landing-hero::before { inset: 0 -10% 40% -30%; }
  .landing-hero-form { max-width: 480px; width: 100%; }
  .landing-pitch { max-width: 36ch; }
  .landing-things { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .landing-beats { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-left: var(--s-6); }
  .landing-beats::before { left: 6px; right: auto; top: 6px; bottom: 0; width: 1px; height: auto; background: linear-gradient(var(--glass-line-strong), transparent); }
  .landing-beat { padding-top: 0; }
  .landing-beat-bulb { left: calc(-1 * var(--s-6)); top: 4px; }
  .landing-beat-num { display: inline; margin-right: 6px; font-size: var(--fs-lg); }
  .landing-beat-title { display: inline; }
  .landing-beat-body { margin-top: var(--s-2); }
  .landing-things { grid-template-columns: minmax(0, 1fr); }
  .landing-footer-faint { margin-left: 0; }
}
@media (max-width: 560px) {
  .landing { --gutter: 16px; }
  .landing-clock-dash, .landing-clock-mood { display: none; }
  .landing-hero { padding-top: calc(56px + var(--s-6)); padding-bottom: calc(var(--s-7) + 48px); gap: var(--s-5); }
  .landing-eyebrow { margin-bottom: var(--s-3); }
  .landing-title { font-size: clamp(2.875rem, 14.5vw, 4rem); line-height: 0.92; }
  .landing-pitch { margin-top: var(--s-4); }
  .landing-card { padding: 20px 16px; }
  .landing-card-title { margin-bottom: var(--s-4); }
}
@media (max-height: 640px) and (min-width: 961px) {
  .landing-cue { display: none; }
}