/* Palisades Harbor, coming soon. Values from the "Motion 1" design reference and the Palisades Harbor design system. */
:root, [data-theme="smoke"] {
  --bg: #55666F;
  --ink: #F2EFEA;
  --muted: #EEF1F2;
  --desc: #E8DCCF;
  --rule: rgba(242, 239, 234, 0.5);
  --field: #F2EFEA;
  --on-field: #1E262B;
  --field-border: #F2EFEA;
  --btn: #DCCDBF;
  --btn-ink: #2E3A42;
  --chip-border: rgba(242, 239, 234, 0.5);
  --focus: #F2EFEA;
  --wave: #DDDAD5;
  --mark-left-top: #ECEEEF;
  --mark-left-base: #B4BCC1;
  --mark-right-top: #EEE5DB;
  --mark-right-base: #C4B3A1;
  --mark-water: #DDDAD5;
  --hz-left-top: #6F7E85;
  --hz-left-base: #5A6A72;
  --hz-right-top: #747E81;
  --hz-right-base: #5A6A71;
  /* Form states (design system: danger, danger-mark, signal) */
  --danger: #F8DDD6;
  --danger-mark: #EDB2A6;
  --signal-on-btn: #1A5F99;
  --glint: #FFFFFF;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #F7F5F1;
  --ink: #1E262B;
  --muted: #46535B;
  --desc: #6B5747;
  --rule: rgba(30, 38, 43, 0.25);
  --field: #FFFFFF;
  --field-border: #76848D;
  --btn: #2E3A42;
  --btn-ink: #F7F5F1;
  --chip-border: rgba(30, 38, 43, 0.35);
  --focus: #2E3A42;
  --wave: #55666F;
  --mark-left-top: #9AA8B1;
  --mark-left-base: #7F8E98;
  --mark-right-top: #B5A08C;
  --mark-right-base: #9C8672;
  --mark-water: #55666F;
  --hz-left-top: #E0E2E2;
  --hz-left-base: #F2F1ED;
  --hz-right-top: #E4DDD5;
  --hz-right-base: #F3F0EB;
  --danger: #94463F;
  --danger-mark: #B5655A;
  --signal-on-btn: #9CD3FF;
  --glint: #1E262B;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}
a { color: inherit; }
a:hover { opacity: .8; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.page {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.theme-toggle {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); z-index: 2;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: transparent;
  border: 1px solid var(--chip-border); border-radius: 999px;
  cursor: pointer;
}
.theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

main {
  flex-grow: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 28px;
  padding: 72px 16px 24px;
  position: relative; z-index: 1;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Optical centering: the channel between the shores sits ~0.75 units left of the
   64-unit viewBox center, so shift the mark right to put the channel on the axis. */
.mark { transform: translateX(1.2%); }
.wordmark { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wordmark p { margin: 0; line-height: 1; }
.name { font-size: 26px; font-weight: 400; letter-spacing: .38em; padding-left: .38em; }
.desc { font-size: 13px; font-weight: 400; letter-spacing: .7em; padding-left: .7em; color: var(--desc); }

.rest { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; position: relative; }
.rule { width: 48px; height: 1px; background: var(--rule); }
h1 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 6px; padding-left: 6px; text-transform: uppercase; }

/* The form and its confirmation share one grid cell, so swapping them never changes the page height. */
.signup-area { display: grid; width: 100%; max-width: 30rem; }
.signup, .done { grid-area: 1 / 1; }

.signup {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: 10px; width: 100%;
}
.field { flex: 1 1 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.field label { font-size: 15px; font-weight: 500; letter-spacing: .5px; }
.signup input {
  font: inherit; font-size: 18px;
  color: var(--on-field); background: var(--field);
  border: 1.5px solid var(--field-border); border-radius: 10px;
  padding: 14px 16px; min-height: 54px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.signup input::placeholder { color: #76848D; }
.signup input[aria-invalid="true"] { border-color: var(--danger-mark); box-shadow: 0 0 0 1px var(--danger-mark); }
.signup button {
  font: inherit; font-size: 18px; font-weight: 600;
  color: var(--btn-ink); background: var(--btn);
  border: none; border-radius: 10px;
  padding: 14px 24px; min-height: 54px; min-width: 9.5rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.signup button:disabled { cursor: default; }
.signup button[aria-busy="true"] { cursor: progress; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--signal-on-btn); animation: ph-pulse 1.4s ease-in-out infinite; }

/* Form status line: sits just under the form, out of the flow, so it takes no space until a message appears. */
.note { position: absolute; top: calc(100% + 16px); left: 0; right: 0; margin: 0; font-size: 16px; color: var(--muted); }
.note.is-error { color: var(--danger); }
.note.is-in { animation: ph-note-in .22s cubic-bezier(.2,.7,.2,1) both; }

.done {
  align-self: end; min-height: 54px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 18px; font-weight: 500;
  opacity: 0; visibility: hidden;
}
.done span { text-align: center; text-wrap: balance; }
/* The tick sits inline before the first word, so a wrapped line stays centred as one unit. */
.done svg { display: inline-block; vertical-align: -5px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main.is-done .signup { animation: ph-form-out .2s ease both; pointer-events: none; }
main.is-done .done { animation: ph-done-in .3s cubic-bezier(.2,.7,.2,1) .2s both; }

/* On success the mark's three water lines light once, top to bottom. */
.glint { opacity: 0; }
main.is-done .g1 { animation: ph-glint .9s ease .3s both; }
main.is-done .g2 { animation: ph-glint .9s ease .45s both; }
main.is-done .g3 { animation: ph-glint .9s ease .6s both; }

.sea { position: relative; height: 210px; flex-shrink: 0; overflow: hidden; }
.sea svg { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 640px) {
  /* Keep the lockup well clear of the theme toggle (20px + 44px). */
  main { padding-top: calc(112px + env(safe-area-inset-top)); }
  .sea { height: 96px; }
  .signup button { flex: 1 1 100%; }
  .done { align-self: center; }
}
/* Shorter phones (or Safari with its toolbars showing): tighten spacing so it fits without scrolling. */
@media (max-width: 640px) and (max-height: 720px) {
  main { padding-top: calc(100px + env(safe-area-inset-top)); gap: 20px; }
  .rest { gap: 20px; }
  .mark { width: 96px; height: 96px; }
  .sea { height: 72px; }
}

/* Motion */
@keyframes ph-rise { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ph-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ph-track { from { letter-spacing: .62em; padding-left: .62em; opacity: 0; } to { letter-spacing: .38em; padding-left: .38em; opacity: 1; } }
@keyframes ph-drift { 0%, 100% { transform: translateX(-1.2px); } 50% { transform: translateX(1.2px); } }
@keyframes ph-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ph-wave-a { from { transform: translateX(0); } to { transform: translateX(-320px); } }
@keyframes ph-wave-b { from { transform: translateX(-440px); } to { transform: translateX(0); } }
@keyframes ph-wave-c { from { transform: translateX(0); } to { transform: translateX(-560px); } }
@keyframes ph-swell { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ph-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: .3; } }
@keyframes ph-note-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ph-form-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes ph-done-in { from { opacity: 0; transform: translateY(4px); visibility: visible; } to { opacity: 1; transform: translateY(0); visibility: visible; } }
@keyframes ph-glint { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

.shore-l { animation: ph-rise 1.4s cubic-bezier(.2,.7,.2,1) .2s both; }
.shore-r { animation: ph-rise 1.6s cubic-bezier(.2,.7,.2,1) .45s both; }
.water { animation: ph-fade 1.2s ease .9s both; }
.name { animation: ph-track 1.8s cubic-bezier(.2,.7,.2,1) .7s both; }
.desc { animation: ph-fade 1.2s ease 1.3s both; }
.rest { animation: ph-fade 1s ease 1.7s both; }
.sea { animation: ph-fade 2.4s ease .4s both; }
.w1 { animation: ph-drift 9s ease-in-out infinite, ph-breathe 6s ease-in-out infinite; }
.w2 { animation: ph-drift 11s ease-in-out -3s infinite, ph-breathe 7s ease-in-out -2s infinite; }
.w3 { animation: ph-drift 13s ease-in-out -6s infinite, ph-breathe 8s ease-in-out -4s infinite; }
.wv-a { animation: ph-wave-a 30s linear infinite; }
.wv-b { animation: ph-wave-b 42s linear infinite; }
.wv-c { animation: ph-wave-c 56s linear infinite; }
.swell-a { animation: ph-swell 9s ease-in-out infinite; }
.swell-b { animation: ph-swell 12s ease-in-out -4s infinite; }
.swell-c { animation: ph-swell 15s ease-in-out -7s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Without animation, set the end states directly so the swap still happens. */
  main.is-done .signup { opacity: 0; visibility: hidden; }
  main.is-done .done { opacity: 1; visibility: visible; }
}