/* Harbor32 sign-in: the welcome panel and harbor scene, shared by login.html
   and the post-sign-in intro (signin-intro.js) so the two match exactly. */

/* The harbor scene keeps its own cream/navy/teal, matching the painted
   logo; everything else follows the app tokens. Light is the harbor at
   dawn, dark the same harbor at night. */
:root {
  --g-bg: #ffffff; --g-line: #747775; --g-ink: #1f1f1f;
  --sc-ink: #013346; --sc-sky-top: #fbf4e5; --sc-sky-low: #fcdcbc;
  --sc-sun: #f79a4f; --sc-far: #a9d3cf; --sc-land: #0f4655; --sc-land-lit: #1a6070;
  --sc-sea-top: #6dbdb8; --sc-sea-deep: #0a6168;
  --sc-w1: #8fd0ca; --sc-w2: #3fa19c; --sc-w3: #137a7d; --sc-w4: #075a62;
  --sc-foam: #fbf4e5; --sc-tower: #fbf4e5; --sc-band: #013346; --sc-lamp: #f58a2e;
  --sc-beam: #ffc478; --sc-hull: #013346; --sc-sail: #fffaf0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-bg: #131314; --g-line: #8e918f; --g-ink: #e3e3e3;
    --sc-ink: #fbf4e5; --sc-sky-top: #011c29; --sc-sky-low: #0b4658;
    --sc-sun: #fbf4e5; --sc-far: #0a3747; --sc-land: #01141d; --sc-land-lit: #062633;
    --sc-sea-top: #0f5563; --sc-sea-deep: #011f2b;
    --sc-w1: #17616d; --sc-w2: #0d4a58; --sc-w3: #063a48; --sc-w4: #022a37;
    --sc-foam: #9fd6d0; --sc-tower: #e9e1cf; --sc-band: #0b6a70; --sc-lamp: #ffb45c;
    --sc-beam: #ffce82; --sc-hull: #fbf4e5; --sc-sail: #d9e6e3;
  }
}
:root[data-theme="dark"] {
  --g-bg: #131314; --g-line: #8e918f; --g-ink: #e3e3e3;
  --sc-ink: #fbf4e5; --sc-sky-top: #011c29; --sc-sky-low: #0b4658;
  --sc-sun: #fbf4e5; --sc-far: #0a3747; --sc-land: #01141d; --sc-land-lit: #062633;
  --sc-sea-top: #0f5563; --sc-sea-deep: #011f2b;
  --sc-w1: #17616d; --sc-w2: #0d4a58; --sc-w3: #063a48; --sc-w4: #022a37;
  --sc-foam: #9fd6d0; --sc-tower: #e9e1cf; --sc-band: #0b6a70; --sc-lamp: #ffb45c;
  --sc-beam: #ffce82; --sc-hull: #fbf4e5; --sc-sail: #d9e6e3;
}

.si {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 620px) 1fr;
  gap: 16px;
  padding: 16px;
}

.si-left {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column; gap: 40px;
}

.si-main {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 22px; max-width: 460px;
}

/* The headline carries the page: "Welcome to", then the lockup standing in
   for the word "Harbor32". */
.si-h {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: clamp(44px, 4.6vw, 60px); line-height: 1.05; font-weight: 800;
  letter-spacing: -.025em; margin: 0 0 18px;
}

.si-h .h32-logo { margin-left: -10px; }
.si-h .h32-logo img { height: clamp(140px, 14vw, 184px); }

.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; width: 100%;
  border-radius: 26px; border: 1px solid var(--g-line);
  background: var(--g-bg); color: var(--g-ink);
  font: 600 16px var(--font);
  text-decoration: none;
  transition: box-shadow .12s, transform .12s;
}

.gbtn:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.gbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.gbtn.is-off { pointer-events: none; opacity: .5; }

.si-lock { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.si-lock svg { flex: none; margin-top: 3px; }
.si-lock code {
  font: inherit; font-weight: 700; color: var(--ink);
}

.si-foot { font-size: 13px; color: var(--ink-soft); }

.si-error {
  display: none; padding: 12px 14px;
  background: var(--danger-soft); border: 1px solid var(--danger);
  border-radius: 12px;
  color: var(--danger); font-size: 14px; font-weight: 600; line-height: 1.5;
}

.si-error.is-on { display: block; }

.si-scene {
  position: relative; overflow: hidden;
  border-radius: 24px;
  background: var(--sc-sky-top);
  min-height: 560px;
}

.si-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.sc-day { display: var(--logo-light); }
.sc-night { display: var(--logo-dark); }

/* Each wave band runs one wavelength past the view and slides left by
   exactly that much, so the loop has no seam. */
.sc-wave { animation: sc-drift linear infinite; }
.sc-wave.w1 { --wl: -160px; animation-duration: 22s; }
.sc-wave.w2 { --wl: -240px; animation-duration: 17s; }
.sc-wave.w3 { --wl: -320px; animation-duration: 13s; }
.sc-wave.w4 { --wl: -400px; animation-duration: 10s; }
@keyframes sc-drift { to { transform: translateX(var(--wl)); } }

.sc-beam { transform-origin: 1010px 280px; animation: sc-sweep 9s ease-in-out infinite alternate; }
@keyframes sc-sweep { from { transform: rotate(-8deg); } to { transform: rotate(6deg); } }

.sc-boat { transform-origin: 690px 742px; animation: sc-bob 5s ease-in-out infinite; }
@keyframes sc-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(5px) rotate(1.5deg); }
}

.sc-gulls { animation: sc-glide 14s ease-in-out infinite alternate; }
@keyframes sc-glide { to { transform: translate(40px, -12px); } }

/* ---------------------------------------------------- post-sign-in intro -- */

/* Laid over the app for the first page after Google hands back; the app
   loads underneath while the welcome panel sweeps across the harbor. */
.si-intro {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg-sunken);
  overflow: hidden;
}

.si-intro .si { height: 100vh; }
.si-intro .si-left { position: relative; z-index: 1; overflow: hidden; }

/* The panel is lifted out of the grid mid-sweep; keep the harbor in its
   own column rather than reflowing into the space it leaves. */
.si-intro .si-scene { grid-column: 2; grid-row: 1; }

.si-hello {
  margin: 0; font-size: 18px; font-weight: 600; color: var(--ink-soft);
  min-height: 1.5em;
}

@media (prefers-reduced-motion: reduce) {
  .sc-wave, .sc-beam, .sc-boat, .sc-gulls { animation: none; }
}

@media (max-width: 960px) {
  .si { grid-template-columns: 1fr; }
  .si-scene { display: none; }
  .si-left { min-height: calc(100vh - 32px); }
}

@media (max-width: 520px) {
  .si { padding: 0; }
  .si-left { border-radius: 0; border: 0; min-height: 100vh; padding: 32px 20px; }
  .si-h .h32-logo img { height: 112px; }
}