/* Em-pire.net: black stage, white ink. Matches the logo/vault videos. */
:root {
  --ink: #f2f2f2;
  --dim: #8a8a8a;
  --serif: "DejaVu Serif", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #000; color: var(--ink);
  font-family: var(--serif); overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; background: #000; }

/* Videos fill the screen without cropping; the black bars blend into the black page. */
.film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
/* The vault scene may lose a little at the edges; no bars around it on any screen shape. */
#vault { object-fit: cover; }
#stage[data-state="intro"] #intro,
#stage[data-state="login"] #intro { opacity: 1; }
#stage[data-state="vault"] #vault { opacity: 1; }

/* Ink-style button: white hairline frame, wide letter spacing. */
.ink-button {
  font: 700 .95rem/1 var(--serif); letter-spacing: .45em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1.5px solid var(--ink);
  padding: 1em 1.4em 1em 1.85em; cursor: pointer; border-radius: 2px;
  transition: background .2s, color .2s;
}
.ink-button:hover, .ink-button:focus-visible { background: var(--ink); color: #000; outline: none; }

#enter {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  animation: breathe 2.6s ease-in-out infinite;
}
#stage:not([data-state="gate"]) #enter { display: none; }
@keyframes breathe { 50% { opacity: .45; } }

/* Login form, centred over the last part of the intro. */
.login {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(86vw, 340px); display: grid; gap: 1.4rem;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, transform .8s ease, visibility 0s .8s;
}
#stage[data-state="login"] .login {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%);
  transition: opacity .8s ease, transform .8s ease, visibility 0s;
}
.login.leaving { opacity: 0 !important; transition: opacity .35s ease !important; }
.field { display: grid; gap: .5rem; }
.field span {
  font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: var(--dim);
}
.field input {
  font: 400 1.05rem var(--serif); color: var(--ink); background: #000;
  border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  padding: .55rem .1rem; outline: none; caret-color: var(--ink);
}
.field input:focus { border-bottom-width: 2.5px; padding-bottom: calc(.55rem - 1px); }
.login .ink-button { justify-self: center; margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
  #enter { animation: none; }
}