/* 256Bank — login + invitation i landingssidens design.
 * MASTERPLAN (256-showcase): M3.2. Samme byfotos, samme EPROM-chip; ved tryk
 * rejser chippen sig og #chipFace ligger præcist på dens flade (JS sætter
 * position/størrelse og --u = pixels pr. chip-enhed). Alt tryk er Geist Mono
 * som chippens laser-ætsning. */
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2-variations"), url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
:root { color-scheme: light; --ink: #2a2230; --ink-2: #4a3f55; --violet: #2a1a65; --cream: #faf5e8; --mint: #6fe3b0; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0e0820; color: #1a1230;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { position: relative; }

/* Byfotos — identiske med landingssiden (lyse, rødfri). */
.city-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0e0820; }
.city-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.05); transition: opacity 2.4s ease; will-change: opacity, transform;
}
.city-stage img.active { opacity: 1; animation: cityZoom 14s linear forwards; }
@keyframes cityZoom { from { transform: scale(1.02); } to { transform: scale(1.18); } }
canvas#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: none; }
canvas#stage:focus-visible { outline: none; }

/* Blød lilla skygge bag chippen, når den står oprejst — fotoet forbliver lyst. */
.chip-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(26, 18, 64, .28), rgba(26, 18, 64, 0) 75%);
}
body.chip-open .chip-veil { opacity: 1; }

/* Chippens flade. Grid i chip-enheder: venstre blok | kvartsvindue | højre blok. */
.chip-face {
  position: fixed; left: 0; top: 0; z-index: 3;
  width: 0; height: 0; visibility: hidden; opacity: 0;
  --u: 100px;
  display: grid;
  grid-template-columns: 2.6fr 2.35fr 2.6fr;
  grid-template-rows: 1fr;
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ink);
  text-transform: uppercase;
  will-change: transform, width, height, opacity;
}
.cf-block {
  display: flex; flex-direction: column; justify-content: center;
  gap: calc(var(--u) * .07);
  padding: calc(var(--u) * .34) calc(var(--u) * .3);
  min-width: 0;
}
.cf-left { align-items: flex-start; text-align: left; }
.cf-right { align-items: flex-end; text-align: right; }
.cf-id { margin: 0; font-weight: 800; font-size: calc(var(--u) * .33); letter-spacing: .02em; line-height: 1; color: var(--ink); }
.cf-sub { margin: 0; font-weight: 600; font-size: calc(var(--u) * .17); letter-spacing: .04em; line-height: 1.1; color: var(--ink); }
.cf-meta { margin: 0; font-weight: 500; font-size: calc(var(--u) * .14); letter-spacing: .06em; line-height: 1.2; color: var(--ink-2); }
.cf-tri { display: inline-block; width: 0; height: 0; margin-right: .45em; vertical-align: .08em;
  border-left: .32em solid transparent; border-right: .32em solid transparent; border-bottom: .55em solid var(--mint);
  filter: drop-shadow(0 0 .5px rgba(40, 30, 20, .55)); }

/* Ætsede felter og knapper på keramikken. */
.cf-etch {
  font: inherit; text-transform: uppercase; color: var(--ink);
  background: rgba(250, 245, 232, .55);
  border: 1px dashed rgba(42, 34, 48, .5); border-radius: calc(var(--u) * .05);
  box-shadow: inset 0 1px 2px rgba(60, 45, 20, .18);
}
.cf-link {
  font: inherit; font-weight: 700; font-size: calc(var(--u) * .14); letter-spacing: .12em;
  padding: calc(var(--u) * .07) calc(var(--u) * .12); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .5em;
  transition: background .15s ease, transform .15s ease;
}
.cf-link:hover, .cf-link:focus-visible { background: rgba(250, 245, 232, .95); outline: none; transform: translateY(-1px); }
.cf-link[hidden] { display: none; }
.cf-form { display: grid; gap: calc(var(--u) * .08); width: 100%; margin: 0; }
.cf-form[hidden] { display: none; }
.cf-field { display: grid; gap: calc(var(--u) * .03); }
.cf-field label { font-weight: 600; font-size: calc(var(--u) * .12); letter-spacing: .14em; color: var(--ink-2); }
.cf-field input {
  width: 100%; box-sizing: border-box; height: calc(var(--u) * .36);
  padding: 0 calc(var(--u) * .1); font-size: calc(var(--u) * .16); letter-spacing: .04em; text-transform: none;
}
.cf-field input:focus { outline: none; border-style: solid; border-color: var(--violet); background: rgba(255, 252, 244, .95); }
.cf-submit {
  justify-self: start; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: calc(var(--u) * .14); letter-spacing: .16em; text-transform: uppercase;
  padding: calc(var(--u) * .08) calc(var(--u) * .16); border-radius: 999px;
  background: var(--violet); color: var(--cream);
  box-shadow: 0 4px 12px -5px rgba(42, 26, 101, .55);
}
.cf-submit:hover, .cf-submit:focus-visible { background: #3d2a8c; outline: none; }
.cf-submit:disabled { opacity: .6; cursor: progress; }
.cf-status { margin: 0; min-height: 1.2em; font-weight: 500; font-size: calc(var(--u) * .13); letter-spacing: .04em; line-height: 1.3; color: var(--ink-2); text-transform: none; }
.cf-status.error, .cf-status.err { color: #5a2a8c; font-weight: 700; }
.cf-status.ok { color: #1f6b4f; font-weight: 700; }
/* Invitationens beskedfelt (scriptet sætter className = 'msg' / 'msg ok' / 'msg err'). */
.msg { margin: 0; min-height: 1.2em; font-weight: 500; font-size: calc(var(--u) * .13); letter-spacing: .04em; line-height: 1.3; color: var(--ink-2); text-transform: none; }
.msg.err { color: #5a2a8c; font-weight: 700; }
.msg.ok { color: #1f6b4f; font-weight: 700; }
.cf-left:has(.cf-form:not([hidden])) .cf-intro { display: none; }
.cf-foot { display: flex; gap: calc(var(--u) * .1); flex-wrap: wrap; justify-content: flex-end; margin-top: calc(var(--u) * .06); }

/* Kvartsvinduet = passkey-knappen. Kuglen ligger fladt i glasset bagved;
 * teksten står i glasset som på landingssidens login. */
.cf-window { display: grid; place-items: center; min-width: 0; }
.cf-window button {
  width: calc(var(--u) * 1.95); height: calc(var(--u) * 1.95);
  border: 0; padding: 0; border-radius: calc(var(--u) * .12);
  background: rgba(18, 12, 46, .12); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .1);
  font-family: inherit; text-transform: uppercase;
  transition: background .2s ease, box-shadow .2s ease;
}
.cf-window button:hover, .cf-window button:focus-visible { background: rgba(140, 112, 255, .18); box-shadow: 0 0 0 2px rgba(196, 181, 253, .7) inset; outline: none; }
.cf-window button:disabled { cursor: not-allowed; opacity: .7; }
.cf-win-title { font-weight: 900; letter-spacing: .14em; font-size: calc(var(--u) * .25); color: var(--cream); text-shadow: 0 1px 6px rgba(14, 8, 32, .95); line-height: 1; }
.cf-win-cta {
  display: inline-flex; align-items: center; gap: .5em; padding: .45em .95em; border-radius: 999px;
  background: var(--violet); color: var(--cream);
  font-weight: 700; font-size: calc(var(--u) * .13); letter-spacing: .14em; white-space: nowrap;
  box-shadow: 0 3px 10px -4px rgba(42, 26, 101, .55);
}

/* Stående skærm: chippen står på højkant — blokkene stables. */
body.portrait .chip-face { grid-template-columns: 1fr; grid-template-rows: 2.6fr 2.35fr 2.6fr; }
body.portrait .cf-left { order: 3; align-items: center; text-align: center; }
body.portrait .cf-window { order: 2; }
body.portrait .cf-right { order: 1; align-items: center; text-align: center; }
body.portrait .cf-foot { justify-content: center; }
body.portrait .cf-submit { justify-self: center; }

/* Ugyldig invitation: ingen JS — en fast keramisk plade på fotoet. */
.plate {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 28px 30px; border-radius: 14px;
  background: linear-gradient(165deg, #f1e9d6, #e6dbc3); color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(26, 18, 64, .65), inset 0 0 0 1px rgba(60, 45, 20, .25);
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase;
}
.plate h1 { margin: 0 0 10px; font-size: 22px; font-weight: 800; letter-spacing: .04em; }
.plate p { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; line-height: 1.5; color: var(--ink-2); text-transform: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .city-stage img.active { animation: none; transform: scale(1.05); } }