/* Placeholder — populated by Phase 2 Auth Frontend plan
   (docs/superpowers/plans/2026-04-20-talkstock-auth-frontend.md Tasks 5 + 7). */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0ms;
  }
}

/* CSS-only fade fallback for .auth-overlay */
.auth-overlay {
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0, 0, .2, 1);
}
.auth-overlay.is-visible { opacity: 1; }
.auth-overlay.is-hiding {
  opacity: 0;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}

/* ===== Task 7: Auth screens (SigningOut / Banners / ReauthModal) ===== */

/* SigningOut overlay */
.auth-signout {
  position: fixed; inset: 0; z-index: 100000;
  background: linear-gradient(180deg, #1a1a1a 0%, #2a1a0e 100%);
  color: #f5ead9;
  display: flex; align-items: center; justify-content: center;
}
.auth-signout-inner { text-align: center; }
.auth-signout-check {
  width: 56px; height: 56px; border-radius: 50%; background: #c96442;
  color: #fff; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  animation: auth-check-bounce 400ms cubic-bezier(.2,.8,.2,1);
}
@keyframes auth-check-bounce {
  from { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.1); }
  to   { transform: scale(1); opacity: 1; }
}
.auth-signout-label { font-size: 16px; font-weight: 500; }

/* Banners (shared base) */
.auth-banner {
  position: fixed; bottom: 20px; right: 20px; z-index: 99000;
  background: #fdfaf3; border: 1px solid #e5d7b8; border-left: 4px solid #c96442;
  border-radius: 8px; padding: 12px 16px;
  display: flex; gap: 12px; align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(8px); opacity: 0;
  transition: opacity 240ms, transform 240ms;
}
.auth-banner.is-visible { opacity: 1; transform: translateY(0); }
.auth-banner.is-hiding  { opacity: 0; transform: translateY(8px); }
.auth-banner-text { color: #1a1a1a; font-size: 14px; }
.auth-banner-cta {
  background: #1a1a1a; color: #fff; border: 0;
  padding: 6px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.auth-banner-dismiss {
  background: transparent; border: 0; color: #888;
  cursor: pointer; font-size: 18px;
}

/* EmailVerifyBanner variant — top-of-page, centered */
.auth-banner-verify {
  bottom: auto; right: auto; top: 0; left: 50%;
  transform: translate(-50%, -100%);
  border-radius: 0 0 8px 8px;
  border-top: none; border-left: none; border-right: none;
  border-bottom: 4px solid #c96442;
}
.auth-banner-verify.is-visible { transform: translate(-50%, 0); }
.auth-banner-verify.is-hiding  { transform: translate(-50%, -100%); }

/* Reauth modal */
.auth-reauth-modal {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(26,26,26,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.auth-reauth-card {
  background: #fdfaf3; border-radius: 14px; padding: 28px;
  width: 420px; max-width: calc(100% - 32px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.3);
}
.auth-reauth-card h2 { margin: 0 0 18px; font-size: 20px; color: #1a1a1a; }
.auth-reauth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-reauth-form input {
  padding: 10px 12px; border: 1px solid #e5d7b8; border-radius: 8px;
  font-size: 14px; background: #fff;
}
.auth-reauth-submit {
  padding: 11px; background: #1a1a1a; color: #fff; border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 120ms;
}
.auth-reauth-submit:hover { background: #2a2a2a; }
.auth-reauth-error { color: #c24545; font-size: 13px; min-height: 18px; }