/*
 * amoeba-login.css — unified login shell for Amoeba Networks apps.
 * CANONICAL SOURCE: rockneybot/amoeba-login — do not edit synced copies.
 *
 * Provides: page atmosphere (.al-bg orbs), membrane card (.al-card),
 * auth lanes (buttons, magic-link form), and the fleet dock (.al-dock).
 * Markup contract lives in login-shell.template.html; adoption notes in LOGIN.md.
 * Fonts: EB Garamond + Hanken Grotesk (load via Google Fonts or self-host).
 */
:root {
  --al-bg: #060a12; --al-panel: rgba(15,26,40,0.78);
  --al-line: #1a2740; --al-line-bright: #223354;
  --al-ink: #eaf1f8; --al-muted: #93a6bf; --al-faint: #5d6f8a;
  --al-mint: #5ee0c4; --al-cyan: #7ddfff; --al-purple: #a87dff;
  --al-pink: #ff5dc8; --al-amber: #ffb84d; --al-orange: #ffa040;
  --al-cyto: #3fd9bf; --al-green: #6aff8a;
  --al-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --al-serif: 'EB Garamond', Georgia, serif;
}

.al-body {
  min-height: 100vh; margin: 0; font-family: var(--al-sans); color: var(--al-ink);
  background: radial-gradient(120% 120% at 50% -10%, #0a1422 0%, #060a12 45%, #040810 100%);
  display: flex; align-items: center; justify-content: center; gap: 72px;
  padding: 40px; overflow-x: hidden; position: relative; box-sizing: border-box;
}
.al-body *, .al-body *::before, .al-body *::after { box-sizing: border-box; }

.al-orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.al-orb--a { width: 44vw; height: 44vw; top: -14vw; right: -10vw; opacity: .4;
  background: radial-gradient(circle at 40% 40%, rgba(125,223,255,.30), transparent 60%);
  animation: al-drift 26s ease-in-out infinite alternate; }
.al-orb--b { width: 40vw; height: 40vw; bottom: -16vw; left: -12vw; opacity: .35;
  background: radial-gradient(circle at 60% 60%, rgba(94,224,196,.26), transparent 60%);
  animation: al-drift 32s ease-in-out infinite alternate-reverse; }
@keyframes al-drift { from { transform: translate(0,0) } to { transform: translate(-3vw, 2vw) } }

/* ---- fleet dock (internal pages only; see LOGIN.md gating rule) ---- */
.al-dock { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.al-dock__title { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--al-faint); font-weight: 700; padding-left: 2px; margin: 0 0 2px; }
.al-dock a { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.al-tile { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(6,10,18,0.6); border: 1px solid var(--tint, var(--al-line));
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.al-tile svg { width: 21px; height: 21px; stroke: var(--hue, var(--al-mint)); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.al-dock .al-nm { display: block; font-size: 12.5px; color: #c8d4e3; font-weight: 600; transition: color .16s ease; }
.al-dock .al-ds { display: block; font-size: 10.5px; color: var(--al-faint); }
.al-dock a:hover .al-tile, .al-dock a:focus-visible .al-tile {
  border-color: var(--hue);
  background: color-mix(in srgb, var(--hue) 10%, rgba(6,10,18,0.6));
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--hue) 60%, transparent);
  transform: translateX(3px); }
.al-dock a:hover .al-nm { color: var(--al-ink); }
.al-dock a:focus-visible { outline: none; }

/* ---- membrane card ---- */
.al-stage { position: relative; z-index: 1; }
.al-stage::before { content: ""; position: absolute; inset: -14px; border-radius: 34px;
  background: conic-gradient(from 200deg, var(--al-mint), var(--al-cyan), var(--al-purple), var(--al-pink), var(--al-amber), var(--al-mint));
  filter: blur(46px); opacity: .30; z-index: -1; }
.al-card { width: 344px; background: var(--al-panel); border: 1px solid var(--al-line-bright);
  border-radius: 22px; overflow: hidden;
  backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -40px rgba(0,0,0,.75);
  animation: al-scale-in .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes al-scale-in { from { opacity: 0; transform: scale(.97) translateY(8px) } to { opacity: 1; transform: none } }
.al-card__logo { padding: 24px 30px 0; }
.al-card__logo img { height: 56px; width: auto; display: block; }
.al-card__body { padding: 18px 30px 22px; }
.al-eyebrow { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--al-mint); font-weight: 700; margin: 0 0 10px; }
.al-title { font-family: var(--al-serif); font-weight: 500; font-size: 30px; line-height: 1.08;
  letter-spacing: -0.3px; margin: 0 0 10px; color: var(--al-ink); }
.al-title em { font-style: italic; color: var(--al-cyan); }

.al-btn { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: 10px; text-decoration: none; border: none;
  font-family: inherit; cursor: pointer; width: 100%;
  transition: filter .15s ease, transform .15s ease, background .15s ease, border-color .15s ease; }
.al-btn--fill { background: var(--al-mint); margin-top: 14px; }
.al-btn--fill:hover { filter: brightness(1.08); transform: translateY(-1px); }
.al-btn--fill span { font-size: 14px; color: #060a12; font-weight: 700; }
.al-btn--outline { background: transparent; border: 1px solid rgba(94,224,196,.4);
  margin-top: 10px; font-size: 13.5px; color: var(--al-mint); font-weight: 600; }
.al-btn--outline:hover { background: rgba(94,224,196,.08); border-color: var(--al-mint); }

.al-hint { font-size: 9.5px; color: var(--al-faint); margin-top: 8px; text-align: center; }
.al-or { display: flex; align-items: center; gap: 12px; margin: 15px 0 13px; }
.al-or::before, .al-or::after { content: ""; flex: 1; height: 1px; background: var(--al-line); }
.al-or span { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--al-faint); }
.al-label { display: block; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--al-faint); font-weight: 600; margin-bottom: 7px; }
.al-input { width: 100%; padding: 12px 15px; background: rgba(6,10,18,.6);
  border: 1px solid var(--al-line); border-radius: 10px; color: var(--al-ink);
  font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s ease; }
.al-input:focus { border-color: var(--al-mint); }
.al-input::placeholder { color: var(--al-faint); }
.al-stafflink { display: block; text-align: center; margin-top: 14px; font-size: 12px;
  color: var(--al-faint); text-decoration: none; transition: color .15s ease; }
.al-stafflink:hover { color: var(--al-mint); }
.al-note { font-size: 11px; color: var(--al-faint); text-align: center; margin-top: 14px; line-height: 1.5; }
.al-card__foot { padding: 11px 30px 14px; border-top: 1px solid #141d30; text-align: center; }
.al-card__foot span { font-family: var(--al-serif); font-style: italic;
  color: rgba(147,166,191,.5); font-size: 12.5px; }
.al-error { margin-top: 14px; padding: 10px 14px; border: 1px solid rgba(255,107,138,.4);
  border-radius: 10px; background: rgba(255,107,138,.08); color: #ff8ba3; font-size: 12.5px; }

/* dock entrance stagger */
.al-dock a { animation: al-fade-up .5s ease both; }
.al-dock a:nth-of-type(1) { animation-delay: .03s } .al-dock a:nth-of-type(2) { animation-delay: .07s }
.al-dock a:nth-of-type(3) { animation-delay: .11s } .al-dock a:nth-of-type(4) { animation-delay: .15s }
.al-dock a:nth-of-type(5) { animation-delay: .19s } .al-dock a:nth-of-type(6) { animation-delay: .23s }
.al-dock a:nth-of-type(7) { animation-delay: .27s } .al-dock a:nth-of-type(8) { animation-delay: .31s }
@keyframes al-fade-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

@media (max-width: 820px) {
  .al-body { flex-direction: column; gap: 36px; }
  .al-dock { flex-direction: row; flex-wrap: wrap; justify-content: center; order: 2; }
  .al-dock .al-nm, .al-dock .al-ds, .al-dock__title { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .al-body *, .al-orb, .al-card, .al-dock a { animation: none !important; transition: none !important; }
}