/* App Layout */
.app {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  color: var(--color-gray-300);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-slow);
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.app-main {
  flex: 1;
  min-width: 0;   /* a flex item: without this, a wide table widens the whole page past the window instead of scrolling in its box */
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  z-index: var(--z-sticky);
  gap: var(--space-4);
}

[data-theme="dark"] .app-header {
  background: rgba(26, 26, 24, 0.85);
}

.app-content {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
}

/* Page transition animations */
.app-content.page-enter {
  animation: page-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-content.page-exit {
  animation: page-exit 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes page-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.998);
  }
}

.app-bottom-nav {
  display: none;
}

/* Sidebar styles */
.sidebar-header {
  padding: var(--space-5) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-logo-icon .drip-drop {
  animation: drip 4s ease-in infinite;
}

@keyframes drip {
  0%, 60% {
    cy: 38;
    r: 0;
    opacity: 0;
  }
  65% {
    cy: 38;
    r: 1.8;
    opacity: 0.7;
  }
  85% {
    cy: 47;
    r: 1.2;
    opacity: 0.5;
  }
  95%, 100% {
    cy: 50;
    r: 0.5;
    opacity: 0;
  }
}

.sidebar-brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: #ffffff;
  letter-spacing: -0.02em;
}

.sidebar-tenant-logo {
  max-height: 48px;
  max-width: 180px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-400);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
}

.sidebar-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-link.active {
  color: #ffffff;
  background: rgba(13, 148, 136, 0.2);
  font-weight: var(--font-semibold);
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--color-primary-400);
  border-radius: 0 3px 3px 0;
}

.sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-200);
}

.sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

/* Responsive */
@media (max-width: 1024px) {
  .app-sidebar {
    transform: translateX(-100%);
  }

  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
    bottom: var(--bottom-nav-height);
  }

  /* Stacking while the drawer is open: the drawer (with its ✕) and the bottom bar sit above the dimmed area, which
     covers the page and its sticky header. Without this the header painted over the drawer's top, hiding the ✕. */
  .app-sidebar { z-index: calc(var(--z-sticky) + 2); }

  .app-main {
    margin-left: 0;
    padding-bottom: var(--bottom-nav-height);
  }

  .app-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    z-index: calc(var(--z-sticky) + 2);
    align-items: center;
    justify-content: space-around;
    padding: 0 var(--space-2);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .app-content {
    padding: var(--space-4);
  }

  /* Grid cells may shrink below their content (a wide chart or table then scrolls inside its own card). Without this
     the accountant dashboard's chart widened the whole page on a phone and pushed More, the only menu button at this
     width, off the right edge of the screen. */
  .grid > * {
    min-width: 0;
  }
}

/* Bottom nav items (the one definition — meter-reader.css used to override it).
   The bar's geometry is unchanged: --bottom-nav-height tall with the safe area padded inside it, which is confirmed
   good in the installed iPhone app. Each item is at least 44px tall (gloved fingers) and shares the width equally;
   an 11px label never truncates — a long one (Tenant Invoices) wraps to a second line. */
button.bottom-nav-item {
  border: none;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.bottom-nav-item {
  flex: 1 1 0;
  min-width: 44px;
  max-width: 96px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-1) 2px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item svg { flex-shrink: 0; }

@media (hover: hover) {
  .bottom-nav-item:hover { color: var(--text-accent); }
}

.bottom-nav-item.active,
#bottom-nav-more[aria-expanded="true"] {
  color: var(--text-accent);
  font-weight: var(--font-semibold);
}

.bottom-nav-item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sticky) - 1);
}

@media (max-width: 1024px) {
  .sidebar-overlay.active {
    display: block;
    z-index: calc(var(--z-sticky) + 1);   /* over the sticky header, under the drawer and the bottom bar */
  }
}

/* Container utilities */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .md\:grid-cols-1 { grid-template-columns: 1fr; }
}

@media (min-width: 1025px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Spacing */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* Text */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--text-accent); }
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-danger { color: var(--color-danger-600); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Display */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.cursor-pointer { cursor: pointer; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }
.border-t { border-top: 1px solid var(--border-secondary); }
.border-b { border-bottom: 1px solid var(--border-secondary); }
.border-r { border-right: 1px solid var(--border-secondary); }
.inline-flex { display: inline-flex; }
.justify-start { justify-content: flex-start; }
.shrink-0 { flex-shrink: 0; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-in > * {
  opacity: 0;
  animation: stagger-in 0.4s ease forwards;
}
.stagger-in > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.3s; }

@media (max-width: 1024px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Login screen — full viewport overlay, breaks out of app-main */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--bg-sidebar);
  overflow: hidden;
}

.login-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.4;
  pointer-events: none;
}

.login-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.login-glow-1 {
  top: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.12) 0%, transparent 65%);
  animation: login-glow-drift 16s ease-in-out infinite alternate;
}

.login-glow-2 {
  bottom: -15%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 65%);
  animation: login-glow-drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes login-glow-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.1); }
}

.login-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.6;
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 3rem 2.5rem 2.5rem;
  position: relative;
  z-index: 2;
  animation: login-card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.3), transparent);
}

@keyframes login-card-in {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card--centered {
  text-align: center;
  padding: var(--space-8);
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 18px;
  animation: login-icon-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes login-icon-in {
  from { opacity: 0; transform: scale(0.8) rotate(-5deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.login-logo svg {
  display: block;
}

.login-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-gray-100);
  letter-spacing: -0.02em;
  animation: login-text-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.login-subtitle {
  font-family: 'Figtree', sans-serif;
  font-size: 0.85rem;
  color: rgba(214, 211, 209, 0.9);
  margin-top: 0.25rem;
  animation: login-text-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes login-text-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-screen .login-form {
  animation: login-form-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes login-form-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-screen .login-form .form-group {
  margin-bottom: 1.25rem;
}

.login-screen .login-form .form-label {
  font-family: 'Figtree', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(214, 211, 209, 0.9);
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
  display: block;
}

.login-screen .login-form .form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--color-gray-100);
  font-family: 'Figtree', sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  outline: none;
}

.login-screen .login-form .form-input::placeholder {
  color: rgba(168, 162, 158, 0.4);
}

.login-screen .login-form .form-input:focus {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
}

.login-screen .login-form .form-error {
  color: var(--color-danger-400);
  font-size: 0.85rem;
  min-height: 1.25rem;
  margin-bottom: 0.25rem;
}

.login-screen .login-form .btn-primary {
  width: 100%;
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: white;
  border: none;
  border-radius: 10px;
  font-family: 'Figtree', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 0.5rem;
}

.login-screen .login-form .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(20, 184, 166, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.login-screen .login-form .btn-primary:active {
  transform: translateY(0);
}

.login-screen .login-form .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-cancel {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-family: 'Figtree', sans-serif;
  font-size: 0.8rem;
  color: rgba(168, 162, 158, 0.6);
  text-decoration: none;
  transition: color 0.3s;
}

.login-cancel:hover {
  color: rgba(45, 212, 191, 0.8);
}

/* ── Login → Dashboard cinematic transition ── */
.login-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  will-change: opacity;
}

/* Phase 1: Fade to black over the login screen */
.login-transition.phase-blackout {
  animation: lt-blackout 1200ms ease-out forwards;
}

@keyframes lt-blackout {
  to { opacity: 1; }
}

/* Teal glow that expands behind the logo */
.login-transition-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.3) 0%, rgba(14, 165, 233, 0.1) 40%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  will-change: transform, opacity;
}

.login-transition.phase-bloom .login-transition-glow {
  animation: lt-glow-pulse 3000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lt-glow-pulse {
  0%   { opacity: 0; transform: scale(0); }
  15%  { opacity: 1; }
  70%  { opacity: 0.5; }
  100% { opacity: 0; transform: scale(12); }
}

/* Logo + brand wrapper — blooms from a pinpoint to filling the screen */
.login-transition-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  transform: scale(0);
  z-index: 1;
  will-change: transform, opacity, filter;
}

.login-transition.phase-bloom .login-transition-logo-wrap {
  animation: lt-logo-bloom 3000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lt-logo-bloom {
  0%   { opacity: 0; transform: scale(0); filter: blur(0px); }
  10%  { opacity: 1; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1.05); filter: blur(0px); }
  100% { opacity: 0; transform: scale(8); filter: blur(8px); }
}

.login-transition-svg {
  filter: drop-shadow(0 0 20px rgba(45, 212, 191, 0.5))
          drop-shadow(0 0 40px rgba(45, 212, 191, 0.2));
}

.login-transition-img {
  max-height: 96px;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.3))
          drop-shadow(0 0 48px rgba(20, 184, 166, 0.2));
}

/* Brand text fades in with letter-spacing cinch */
.login-transition-brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-100);
  letter-spacing: 0.15em;
  opacity: 0;
}

.login-transition.phase-bloom .login-transition-brand {
  animation: lt-brand-in 1200ms ease 200ms forwards;
}

@keyframes lt-brand-in {
  0%   { opacity: 0; letter-spacing: 0.5em; }
  60%  { opacity: 1; }
  100% { opacity: 1; letter-spacing: 0.15em; }
}

/* Phase 3: Overlay shifts to white then dissolves, matching the light dashboard */
.login-transition.phase-reveal {
  animation: lt-reveal 1800ms ease-in forwards;
  pointer-events: none;
}

@keyframes lt-reveal {
  0%   { background: #000; opacity: 1; }
  40%  { background: #fff; opacity: 1; }
  100% { background: #fff; opacity: 0; }
}

/* Accessibility: skip cinematic transition for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .login-transition {
    display: none !important;
  }
}