/* The log in page a business's people land on, at /login/<slug> or the front page of its own address (loginPage in
   server.js). Half of it is the business's own scene, half is the form. A brand with its own identity picks a scene in its
   brand.json ("login": { "scene": … }); everyone else gets the plain scene in their own colour. The form's own styles are
   in auth.css. */
body.door-page { margin: 0; }
.door { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 540px); }

/* ---- the scene ---- */
.door-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: clamp(20px, 4vh, 44px); padding: clamp(28px, 4vw, 60px); background: var(--ink); border-right: 1px solid var(--line); }
.door-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.door-brand img { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
.door-brand b { font: 800 19px/1 var(--display); font-stretch: var(--display-stretch, 100%); letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; }
/* A business with no logo is shown by its initials on its own colour. */
.door .mark { display: inline-grid; place-items: center; flex: none; background: var(--volt); color: var(--on-volt); font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: .02em; border-radius: var(--radius, 2px); }
.door-brand .mark { width: 40px; height: 40px; font-size: 15px; }
.door-art { flex: 1; min-height: 0; display: grid; place-items: center; }
.door-copy { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.door-copy h1 { margin: 0; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; text-wrap: balance; }
.door-copy p.lede { margin: 0; color: var(--soft); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 46ch; }
.door-foot { margin: 0; color: var(--mute); font: 500 12px/1.5 var(--label, var(--mono)); letter-spacing: .12em; text-transform: uppercase; }

/* ---- the form side ---- */
.door-panel { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(28px, 4vw, 64px); background: var(--ink-2); }
.door-panel .door-theme { position: absolute; top: clamp(16px, 2.4vw, 28px); right: clamp(16px, 2.4vw, 28px); }
.door-head { display: flex; flex-direction: column; gap: 10px; }
.door-head h2 { margin: 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; }
.door-head p { margin: 0; color: var(--soft); }
.door-panel #auth { width: 100%; }
.door-legal { margin: 0; color: var(--mute); font-size: 13.5px; line-height: 1.5; }

/* ---- scene: plain. The business's colour as a glow over a faint grid, with its mark large in the middle. ---- */
.scene-plain .door-hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .55; -webkit-mask-image: radial-gradient(120% 90% at 30% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 90% at 30% 40%, #000 0%, transparent 72%); }
.scene-plain .door-hero::after { content: ""; position: absolute; z-index: -1; width: 70vmin; height: 70vmin; left: -12vmin; top: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--volt) 34%, transparent), transparent); filter: blur(10px); }
.scene-plain .door-art .mark, .scene-plain .door-art img { width: clamp(120px, 16vw, 200px); height: clamp(120px, 16vw, 200px); font-size: clamp(44px, 6vw, 76px); object-fit: contain; }
.scene-plain .door-art .mark { box-shadow: 0 30px 80px color-mix(in srgb, var(--volt) 30%, transparent); }
.scene-plain .door-art img { background: var(--slate); border: 1px solid var(--line); padding: 18px; border-radius: var(--radius, 2px); }

/* ---- scene: puzzle (Orion Solves). The pieces from orionsolves.com, one for each seat on the team, and one for you. ---- */
.scene-puzzle .door-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5;
  background: radial-gradient(60% 50% at 70% 35%, color-mix(in srgb, var(--volt) 9%, transparent), transparent 70%); }
.scene-puzzle .door-tile { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; color: var(--bone); opacity: .05; }
.scene-puzzle .door-art svg { width: min(100%, 620px); height: auto; overflow: visible; }
.scene-puzzle .pz { fill: var(--slate-2); stroke: var(--line); stroke-width: .5; }
.scene-puzzle .pz-you { fill: var(--volt); stroke: none; }
.scene-puzzle .pz-slot { fill: none; stroke: var(--line); stroke-width: .5; stroke-dasharray: 2 2; }
.scene-puzzle text { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 4.1px; fill: var(--bone); text-anchor: middle; }
.scene-puzzle text.n { font-family: var(--mono); font-weight: 500; font-stretch: 100%; font-size: 2.4px; fill: var(--mute); text-anchor: start; letter-spacing: .1em; }
.scene-puzzle .you text { fill: var(--on-volt); }
.scene-puzzle .you text.n { fill: var(--on-volt); opacity: .7; }
.scene-puzzle .door-art g.p { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: no-preference) { .scene-puzzle .door-art g.you { animation: door-float 5s ease-in-out infinite; } }
@keyframes door-float { 50% { translate: 0 -2px; } }

/* ---- scene: band (GLM Custom). The framed logo sitting on the bright teal band, as on glminc.com. ---- */
.scene-band .door-hero { gap: 0; padding-top: 0; }
.scene-band .door-hero::before { content: ""; position: absolute; left: 0; right: 0; top: clamp(150px, 24vh, 230px); height: clamp(54px, 9vh, 84px); z-index: -1; background: var(--volt); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.scene-band .door-brand { display: none; }
.scene-band .door-art { flex: none; place-items: start; padding-top: clamp(40px, 7vh, 76px); min-height: clamp(260px, 40vh, 360px); }
.scene-band .door-art img { width: clamp(150px, 15vw, 210px); height: auto; box-shadow: 8px 10px 0 rgba(0, 0, 0, .32); }
.scene-band .door-copy { margin-top: auto; }
.scene-band .door-copy h1 { text-transform: none; letter-spacing: -.03em; }
.scene-band .door-foot { margin-top: clamp(20px, 4vh, 44px); }
.scene-band .door-dot { position: absolute; z-index: -1; right: clamp(28px, 6vw, 90px); top: clamp(150px, 24vh, 230px); width: clamp(54px, 9vh, 84px); height: clamp(54px, 9vh, 84px); background: var(--flag, var(--volt)); }

/* ---- phones and narrow windows: the scene becomes a header above the form ---- */
@media (max-width: 900px) {
  .door { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .door-hero { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 20px 26px; gap: 18px; }
  .door-art { display: none; }
  .door-copy h1 { font-size: clamp(28px, 8vw, 40px); }
  .door-copy p.lede { font-size: 16px; }
  .door-foot { display: none; }
  .door-panel { justify-content: flex-start; padding: 26px 20px 36px; gap: 22px; }
  .door-panel .door-theme { top: 14px; right: 14px; }
  .scene-band .door-hero { padding-top: 0; }
  .scene-band .door-hero::before { top: 54px; height: 44px; }
  .scene-band .door-dot { top: 54px; width: 44px; height: 44px; right: 20px; }
  .scene-band .door-art { display: grid; min-height: 0; padding-top: 22px; padding-bottom: 20px; }
  .scene-band .door-art img { width: 104px; box-shadow: 5px 6px 0 rgba(0, 0, 0, .3); }
  .scene-band .door-copy { margin-top: 0; }
}

/* Phones: the form is the point of the page, so the scene above it stays short. On a short screen, or a phone on its
   side, the line under the heading goes and the form starts sooner. The panel clears the home indicator. */
@media (max-width: 600px) {
  .door-hero { padding: 18px 20px 20px; gap: 14px; }
  .door-brand b { font-size: 17px; }
  .door-panel { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  .door-legal { font-size: 14px; }
  .door-head h2 { overflow-wrap: anywhere; padding-right: 52px; }
}
@media (max-width: 900px) and (max-height: 700px) { .door-copy p.lede { display: none; } .door-hero { padding-block: 14px 16px; gap: 10px; } }