/* =============================================================================
   Chief's Den — The Door
   File: public/assets/css/door.css
   Created: 2026-09-04
   Updated: 2026-09-04 — cut from ~940 lines to this

   Styles for the public front door (src/Views/pages/door.php) and nothing else.
   Loaded only by layouts/door.php, so nothing here can reach the member pages.

   WHAT WAS REMOVED, AND WHY IT IS NOT COMING BACK IN THIS FILE
   ------------------------------------------------------------
   This file used to draw a panelled door with a brass frame, recessed planks, a
   knob, a sliding grille, a bar top and a rocks glass with whisky in it — all
   out of gradients, border-radius and box-shadow.

   It did not look like a door. It looked like a box, which is what it was.

   CSS is very good at light — a glow, a haze, a soft falloff have no edges and
   no perspective to get wrong. It is bad at objects, because an object needs
   material and form and both have to be faked one declaration at a time. The
   seal is a rendered image and looks struck; the drawn door never got past
   looking drawn.

   So: light stays, objects go. Anything on this page that has to look like a
   thing should arrive as artwork, the way the medallion did.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.door-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;      /* dvh so iOS Safari's toolbar cannot clip the form */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.door {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-7, 32px) var(--space-5, 20px) var(--space-8, 40px);
  box-sizing: border-box;
}
/* NO overflow:hidden here.
   It was added to contain the drifting smoke, but .door-ambient is
   position:fixed and cannot overflow the viewport anyway — so the only thing it
   ever clipped was the form. On a laptop around 700px tall the seal, the
   fields and the buttons are taller than the screen, and hidden overflow made
   the passkey button unreachable rather than merely below the fold. The page
   scrolls instead. */

.door-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* THE SCRIM — the text's own ground, independent of the photograph.
 *
 * Measured on the room image at the size it renders: the strip the form sits in
 * has a mean luminance of 81/255 but a MAXIMUM of 255. It is mostly dark with
 * specular highlights where the bottles and the lamp catch the light, and one
 * of those falls straight behind the labels.
 *
 * No fixed overlay opacity fixes that. Dim the photograph enough to make the
 * worst pixel safe and the whole room goes to mud; dim it enough to keep the
 * room and the labels sit on a highlight. So the form gets a ground of its own
 * and stops depending on what happens to be behind it.
 *
 * It is a gradient with no edge, no border and no radius — deliberately not a
 * card. What it removes is the highlight, not the room. */
.door-inner::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6%;
  width: 168%;
  height: 112%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(13,11,8,0.94) 0%,
    rgba(13,11,8,0.88) 42%,
    rgba(13,11,8,0.62) 70%,
    rgba(13,11,8,0.20) 87%,
    transparent 100%);
}

/* -----------------------------------------------------------------------------
   The room.

   Ryan's photograph of the bar, fixed behind everything and dimmed hard. At
   full strength the bottles and the lamp compete with the form for attention,
   and this is a sign-in screen before it is a photograph — the overlay below
   takes it back to roughly a fifth, which is enough to read as a room you are
   standing in and not enough to read as an image you are looking at.
   -------------------------------------------------------------------------- */

.room-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: image-set(url("/assets/img/room.webp") type("image/webp"),
                              url("/assets/img/room.jpg")  type("image/jpeg"));
  background-image: url("/assets/img/room.jpg");   /* fallback for no image-set */
  background-image: -webkit-image-set(url("/assets/img/room.webp") type("image/webp"),
                                      url("/assets/img/room.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center 46%;
  /* The room artwork is 16:9 now, not the square original. A square image
     cover-fitted to a desktop viewport threw away most of its top and bottom —
     the ceiling and the floor, which is where the depth was. */
  pointer-events: none;
  /* Settles from very slightly zoomed. A still photograph behind a form reads
     as wallpaper; a photograph that is still coming to rest reads as a place. */
  animation: roomSettle 3.2s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes roomSettle {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* The dimmer. Warm rather than neutral, so the room stays lamplit rather than
   going grey, and darkest at the centre where the form sits. */
.room-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 66% at 50% 46%, rgba(13,11,8,0.72) 0%, rgba(13,11,8,0.60) 55%, rgba(13,11,8,0.52) 100%),
    linear-gradient(180deg, rgba(13,11,8,0.50) 0%, rgba(13,11,8,0.26) 45%, rgba(13,11,8,0.70) 100%);
}

/* -----------------------------------------------------------------------------
   Ambience — light, and only light.
   -------------------------------------------------------------------------- */

.door-ambient {
  position: fixed;
  inset: 0;
  z-index: 1;   /* above the room photograph, below the form */
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, rgba(200,134,10,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 15% 12%,  rgba(200,134,10,0.025) 0%, transparent 65%);
}

/* Something burning down in an ashtray just out of frame. */
.amb-ember {
  position: absolute;
  left: 6%;
  bottom: 8%;
  width: min(48vw, 440px);
  height: min(32vh, 280px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
              rgba(232,160,32,0.15) 0%,
              rgba(200,134,10,0.065) 38%,
              transparent 72%);
  filter: blur(30px);
  animation: emberBreathe 7s ease-in-out infinite;
}
@keyframes emberBreathe {
  0%, 100% { transform: scale(1)    translateY(0);    }
  50%      { transform: scale(1.06) translateY(-6px); }
}

/* Two slow blurs. Enough to read as movement at the edge of the eye. */
.amb-smoke {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,234,216,0.030) 0%, transparent 68%);
  filter: blur(34px);
}
.amb-smoke-1 { left: 12%; bottom: 14%; width: 300px; height: 300px; animation: drift1 28s ease-in-out infinite; }
.amb-smoke-2 { right:16%; bottom: 10%; width: 230px; height: 230px; animation: drift2 36s ease-in-out infinite; }

@keyframes drift1 {
  0%   { transform: translate(0, 0)         scale(1);   opacity: 0.9; }
  100% { transform: translate(80px, -190px) scale(1.6); opacity: 0;   }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0)          scale(1);   opacity: 0.85; }
  100% { transform: translate(-60px, -160px) scale(1.5); opacity: 0;    }
}

/* -----------------------------------------------------------------------------
   The seal
   -------------------------------------------------------------------------- */

.door-seal {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4, 16px);
}
.door-seal img {
  width: 240px;
  height: 240px;
  /* Struck metal picking up the warmth of the room, rather than a sticker
     sitting on top of the page. */
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.6))
          drop-shadow(0 0 34px rgba(200,134,10,0.18));
}

/* Kept in the document for structure and screen readers; the name is already
   struck around the seal's rim, so drawing it again said it twice. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.door-eyebrow {
  margin: 0 0 var(--space-7, 32px);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium, 500);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;            /* balance the trailing letter-space */
  color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   The form.

   No panel behind it. A card here would be the same mistake as the door — a box
   drawn on the page to stand in for somewhere to write. The fields are lines,
   which is what a field is.
   -------------------------------------------------------------------------- */

.door-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

.door-form .alert { margin: 0; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.field-aside {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}
.field-aside:hover { color: var(--color-accent); }

.field input {
  width: 100%;
  padding: 10px 2px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text);
  background: transparent;
  border: 0;
  /* Brighter than --color-border-light was: that token is tuned for a line on
     a flat dark panel, and against a photograph it disappeared. */
  border-bottom: 1px solid rgba(200,134,10,0.38);
  border-radius: 0;
  outline: none;
  transition: border-color .22s ease;
}
.field input:hover { border-bottom-color: rgba(200,134,10,0.62); }
.field input:focus {
  border-bottom-color: var(--color-accent);
}
/* Chrome paints its own blue-white block over autofilled inputs, which on this
   page is the single loudest thing on screen. There is no property to switch it
   off; a long inset shadow in the page's own colour covers it. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 60px var(--color-bg) inset;
  caret-color: var(--color-text);
}

.remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.remember input { margin-top: 3px; flex-shrink: 0; }
.remember small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* .auth-divider lives in layout.css, which this page deliberately does not load
   — that file is the signed-in app shell and none of the rest of it belongs on
   a public page. */
.door-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
}
.door-divider::before,
.door-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* -----------------------------------------------------------------------------
   Small screens and short landscape
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .door-seal img    { width: 200px; height: 200px; }
  .door-eyebrow     { margin-bottom: var(--space-6, 24px); }
}

/* A 13-inch laptop is about 720px of viewport, and at a 240px seal the page
   spills over by roughly 90px — not broken, but it means the commonest screen
   in the house has to scroll to reach the passkey button. The seal gives up the
   space because it is the only element here with any to spare. */
@media (max-height: 820px) {
  .door-seal img { width: 200px; height: 200px; }
  .door-eyebrow  { margin-bottom: var(--space-6, 24px); }
}

/* A phone on its side: the seal is the first thing to give up its space, since
   the form is the part you cannot do without. */
@media (max-height: 620px) {
  .door       { padding-top: var(--space-5, 20px); padding-bottom: var(--space-5, 20px); }
  .door-seal img { width: 120px; height: 120px; }
  .door-eyebrow  { margin-bottom: var(--space-5, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .amb-ember,
  .amb-smoke { animation: none !important; }
  .field input { transition: none; }
}


/* The threshold — a full-screen door that opened once on arrival — lived here
   until 2026-09-04. Removed because it went unnoticed in use: it cost a script,
   a preload, a timing contract split across two files and a localStorage key,
   and the person it was for never saw it fire. `git show e7e27de` has it whole
   if it is ever wanted back.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .room-bg { animation: none !important; }
}

/* Where auth.js drops sign-in and passkey errors (showAuthError). Empty until
   something goes wrong, so it must take no space at rest — a gap above the
   first field on every normal load would be a permanent scar from an error
   nobody has hit yet. */
.door-errors:empty { display: none; }
.door-errors .alert { margin: 0 0 var(--space-2, 8px); }

/* Quiet help under a field. The door has one, on the identifier, because that
   field takes either a username or an email and the label ("What's the word?")
   is charm rather than instruction. */
.door-form .field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  letter-spacing: 0;
  text-transform: none;
}