/* AtlasShare — login (brutalist minimal: username + password) */

:root {
  --bg: #050505;
  --fg: #E8E8E8;
  --fg-mute: #6E7370;
  --fg-faint: #3D413E;
  --line: rgba(255,255,255,0.12);
  --line-2: rgba(255,255,255,0.24);
  --accent: #4DDDA8;
  --danger: #ff6b6b;
  --font-pixel: 'Silkscreen', monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a, button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Stage ─────────────────────────────────────────────────── */
.stage {
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bg-blob {
  position: absolute; pointer-events: none; z-index: 0;
  width: 1100px; height: 1100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35,40,55,0.35), transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(140px);
}
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}
.stage::before, .stage::after {
  content: ""; position: absolute; background: var(--line); z-index: 2; pointer-events: none;
}
.stage::before { left: 0; right: 0; top: 50%; height: 1px; opacity: 0.35; }
.stage::after  { top: 0; bottom: 0; left: 50%; width: 1px; opacity: 0.35; }

/* ── Corner meta ────────────────────────────────────────────── */
.corner {
  position: absolute;
  top: 18px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
}
.corner.left { left: 28px; }
.corner.right { right: 28px; }

/* ── Center card ───────────────────────────────────────────── */
.center {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 460px;
  padding: 40px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 0;
  animation: cardIn 2.4s var(--ease-out-expo) 0.08s both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Cinematic stagger — every element fades up sequenced */
@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.brand .logo {
  animation:
    fadeUp 1.85s var(--ease-out-expo) 1.0s both,
    glitchLogo 18s steps(1) 5.0s infinite;
}
.brand .word {
  animation:
    fadeUp 1.7s var(--ease-out-expo) 1.35s both,
    glitchWord 25s steps(1) 5.0s infinite;
}

/* Matrix glitch — irregular bursts of clip-path slicing + small translates.
   Different cycle lengths so logo + wordmark drift out of phase. */
@keyframes glitchLogo {
  0%, 9.2%, 9.6%, 21.5%, 21.9%, 37.9%, 38.3%, 62.3%, 62.7%, 81.1%, 81.5%, 100% {
    clip-path: inset(0); transform: translateX(0);
  }
  9.4%  { clip-path: inset(30% 0 50% 0); transform: translateX(-2px); }
  21.7% { clip-path: inset(10% 0 70% 0); transform: translateX(1px); }
  38.1% { clip-path: inset(55% 0 20% 0); transform: translateX(-1px); }
  62.5% { clip-path: inset(25% 0 45% 0); transform: translateX(2px); }
  81.3% { clip-path: inset(45% 0 35% 0); transform: translateX(-2px); }
}
@keyframes glitchWord {
  0%, 6.5%, 7%, 17.2%, 17.6%, 28%, 28.4%, 41.3%, 41.7%, 56.1%, 56.5%, 73%, 73.4%, 88.7%, 89.1%, 100% {
    clip-path: inset(0); transform: translateX(0);
  }
  6.7%  { clip-path: inset(20% 0 60% 0); transform: translateX(-1px); }
  17.4% { clip-path: inset(55% 0 25% 0); transform: translateX(2px); }
  28.2% { clip-path: inset(8% 0 75% 0);  transform: translateX(-2px); }
  41.5% { clip-path: inset(40% 0 35% 0); transform: translateX(1px); }
  56.3% { clip-path: inset(70% 0 5% 0);  transform: translateX(-1px); }
  73.2% { clip-path: inset(25% 0 50% 0); transform: translateX(2px); }
  88.9% { clip-path: inset(15% 0 65% 0); transform: translateX(-2px); }
}
.brand .word-sub { animation: fadeUp 1.7s  var(--ease-out-expo) 1.6s both; }
.hint-row        { animation: fadeIn 1.85s ease-out 1.95s both; }
.auth .auth-row:nth-child(1) { animation: fadeUp 1.7s var(--ease-out-expo) 2.3s both; }
.auth .auth-row:nth-child(2) { animation: fadeUp 1.7s var(--ease-out-expo) 2.55s both; }

.corner.left  { animation: fadeIn 2.05s ease-out 2.8s both; }
.corner.right { animation: fadeIn 2.05s ease-out 2.95s both; }

/* ── Brand: CSS-only mark + pixel wordmark ─────────────────── */
.brand {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.logo {
  width: 56px; height: 56px;
  background: url('atlas-logo.png') center / contain no-repeat;
  filter: grayscale(1) brightness(1.05) contrast(1.15);
  opacity: 0.92;
}
.word {
  font-family: var(--font-pixel);
  font-size: 18px;
  letter-spacing: 0.32em;
  color: var(--fg);
  text-transform: uppercase;
}
.word-sub {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--fg-faint);
  text-transform: uppercase;
}

/* ── Hint row with hairlines ───────────────────────────────── */
.hint-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
}
.hint-row .line { flex: 1; height: 1px; background: var(--line); }
.hint-row .label {
  font-family: var(--font-pixel);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
  text-transform: uppercase;
}

/* ── Sign-in form ──────────────────────────────────────────── */
.auth {
  display: flex; flex-direction: column;
  width: 100%;
  gap: 12px;
}
.auth-row {
  display: flex; align-items: stretch;
  width: 100%;
  border: 1px solid var(--line-2);
}
.auth-row input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 14px 16px;
  color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.10em;
}
.auth-row input::placeholder {
  color: var(--fg-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-pixel);
  font-size: 10px;
}
.auth-row button {
  border: 0;
  border-left: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg);
  padding: 0 22px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms;
}
.auth-row button:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.auth-row button:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-error {
  font-family: var(--font-pixel);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--danger);
  padding: 8px 12px;
  border: 1px dashed rgba(255,107,107,0.45);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 540px) {
  .center { max-width: 92vw; padding: 28px 20px; gap: 24px; }
  .corner { font-size: 8px; }
  .corner.left { left: 14px; }
  .corner.right { right: 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   Accessibility pass
   ════════════════════════════════════════════════════════════════════ */

.auth-row input:focus-visible,
.auth-row button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--accent);
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .brand .logo,
  .brand .word {
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(255,255,255,0.32);
    --line-2: rgba(255,255,255,0.50);
    --fg-mute: rgba(255,255,255,0.85);
    --fg-faint: rgba(255,255,255,0.65);
  }
  .auth-row { border-color: rgba(255,255,255,0.55); }
}