/* EntrySplash.css -- cosmetic Authentik-look-alike sign-in (ENTRY-02).
 *
 * Isolated Splash-Only Palette (173-UI-SPEC.md "Cosmetic splash"). This
 * file reads ZERO --mt-*/--m-* Manifold design tokens and ZERO external
 * CSS url references -- self-contained on purpose: ENTRY-02 requires
 * this surface to visually mimic a different product's sign-in look,
 * not Manifold's own theme. ENTRY-03 hard constraint carried into this
 * file: no reference to the real IdP's host, and no reliance on any
 * real-IdP asset -- every rule below is a literal color/shape value.
 *
 * Reuses two EXISTING global keyframes already shipped in theme.css
 * (deliberately not re-invented here, per the UI-SPEC's "do not invent a
 * new keyframe duration"): `te-slide-in` for the card's entrance and
 * `manifold-led-pulse-warn` for the glyph's pulse during the "Touch your
 * passkey..." beat. Keyframe names are global in CSS regardless of which
 * file defines them, so referencing them here doesn't require importing
 * anything from theme.css.
 *
 * `prefers-reduced-motion` is already handled by an existing sitewide
 * rule in theme.css (`* { animation-duration: 0.01ms !important; }`),
 * which collapses both animations below to effectively instant without
 * any extra code here -- the entrance appears immediately and the pulse
 * reads as static, exactly as the UI-SPEC asks.
 */

.entry-splash-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.entry-splash-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 48px;
  max-width: 360px;
  text-align: center;
  background: rgba(17, 18, 23, 0.75);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: te-slide-in 160ms ease-out;
}

.entry-splash-title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #56a0d3;
}

.entry-splash-glyph-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(212, 145, 94, 0.12);
  box-shadow: 0 0 0 3px rgba(79, 193, 201, 0.5);
}

.entry-splash-glyph {
  width: 32px;
  height: 32px;
  fill: #d4915e;
}

.entry-splash-glyph-pulse {
  animation: manifold-led-pulse-warn 1.2s ease-in-out infinite;
}

.entry-splash-subtitle {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(232, 230, 227, 0.75);
}