/**
 * Login landing page (templates/login.php).
 *
 * Mirrors the REKOM Status login aesthetic — full-bleed dark screen, REKOM logo
 * centered over a radially-masked grid, one sign-in affordance, a quiet footer —
 * rebuilt on Brevflet's design tokens. The login document is rendered data-theme
 * "dark" regardless of the user's theme cookie, so the palette is always the deep
 * green-black ground (matching Status's always-dark sign-in).
 *
 * All motion is gated behind prefers-reduced-motion (UX-05).
 */

#login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  /* The login document loads tokens.css + login.css only (not shell.css, which carries
     the base body font), so set the app sans font here too — otherwise login text falls
     back to the browser default and looks unlike the rest of the app. */
  font-family: var(--font-sans);
  color: var(--ink);
}

/* Masked grid backdrop (Status's .login-bg-grid, themed with the sage accent). */
.login-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  pointer-events: none;
}

.login-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 26rem;
  padding: var(--space-6) var(--space-5);
  margin-top: -12vh;
}

/* Brand block: REKOM logo + brev·flet wordmark, pulsing as one unit. */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-8);
}
.login-brand-logo {
  height: 64px;
  width: auto;
  display: block;
}
.login-brand-word {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.28em;
  color: var(--accent);
}

.login-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.login-subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  margin: 0;
}
.login-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
}

/* Google sign-in — canonical white pill with the multicolour G. */
.login-google {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #1f1f1f;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: var(--shadow-2);
}
.login-google:hover { background: #f3f4f6; }
.login-google:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.login-google-g { display: inline-flex; line-height: 0; }

.login-footer {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .login-brand {
    animation:
      login-fade-up 0.6s var(--ease-out) both,
      login-pulse 4s 0.9s ease-in-out infinite;
    /* Promote to its own compositor layer so the infinite translateY/opacity pulse runs
       on the GPU (composite-only) instead of repainting the logo + word every frame —
       that per-frame repaint is what made the float feel clunky. */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .login-bottom { animation: login-fade-up 0.8s 0.2s var(--ease-out) both; }
  @keyframes login-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes login-pulse {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50%      { opacity: 0.6; transform: translateY(-5px); }
  }
}