/* Portal sign-in, direction A: dark glass. See portal-login-video.js.
   Stopgap overlay; fold into TenantPortal once frontend/src is recovered. */

/* film + layering */
.portal-login-wrap.homer-has-bgvid { position: relative; background: transparent !important; }
.homer-bgvid, .homer-scrim { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; }
.homer-bgvid { object-fit: cover; z-index: 0; }
/* the photo is the best thing on the page, so no wash over it, only a faint edge vignette */
.homer-scrim {
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(6, 14, 18, 0) 55%, rgba(6, 14, 18, 0.30) 100%);
}
.portal-login-wrap.homer-has-bgvid > *:not(.homer-bgvid):not(.homer-scrim) { position: relative; z-index: 2; }

/* the panel: committed smoked glass */
.portal-login-wrap.homer-has-bgvid .portal-login-card {
  background: rgba(10, 18, 22, 0.58) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 30px 80px rgba(4, 10, 14, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portal-login-wrap.homer-has-bgvid .portal-login-card { background: rgba(10, 18, 22, 0.90) !important; }
}

/* wordmark leads */
.homer-wordmark { display: block; width: 190px; max-width: 70%; height: auto; margin: 0 auto 20px; }

/* heading is redundant beside the wordmark: hidden visually, kept for screen readers */
.portal-login-wrap.homer-has-bgvid .portal-login-title {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* type */
.portal-login-wrap.homer-has-bgvid .portal-login-sub { color: rgba(255, 255, 255, 0.78) !important; text-shadow: none !important; }
.portal-login-wrap.homer-has-bgvid .portal-field > span { color: rgba(255, 255, 255, 0.86) !important; text-shadow: none !important; }
.portal-login-wrap.homer-has-bgvid .portal-login-divider { color: rgba(255, 255, 255, 0.55) !important; text-shadow: none !important; }
.portal-login-wrap.homer-has-bgvid .portal-login-divider::before,
.portal-login-wrap.homer-has-bgvid .portal-login-divider::after {
  background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.16) !important;
}

/* fields */
.portal-login-wrap.homer-has-bgvid .portal-field input {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.portal-login-wrap.homer-has-bgvid .portal-field input::placeholder { color: rgba(255, 255, 255, 0.50) !important; }
.portal-login-wrap.homer-has-bgvid .portal-field input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: #8FB933 !important;
  box-shadow: 0 0 0 3px rgba(143, 185, 51, 0.28) !important;
}
/* browser and password-manager autofill paint fields opaque; keep them glass */
.portal-login-wrap.homer-has-bgvid .portal-field input:-webkit-autofill {
  -webkit-text-fill-color: #ffffff; caret-color: #ffffff;
  transition: background-color 99999s ease-out 0s;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.07) !important;
}

/* one primary action: Sign in, brand green with a white label (brand standard, matches boards.agency) */
.portal-login-wrap.homer-has-bgvid .portal-login-btn {
  background: #8FB933 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 700;
  text-shadow: none !important;
  box-shadow: 0 8px 24px rgba(143, 185, 51, 0.22) !important;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.portal-login-wrap.homer-has-bgvid .portal-login-btn:hover {
  background: #9CC14B !important;
  box-shadow: 0 10px 28px rgba(143, 185, 51, 0.30) !important;
}
.portal-login-wrap.homer-has-bgvid .portal-login-btn:active { transform: translateY(1px); }
.portal-login-wrap.homer-has-bgvid .portal-login-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* the demo is demoted to a quiet link, so it no longer competes with Sign in */
.portal-login-wrap.homer-has-bgvid .portal-demo-btn {
  display: block; width: fit-content; margin-left: auto; margin-right: auto;
  height: auto !important; padding: 4px 2px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88) !important; font-weight: 500; text-shadow: none !important;
  text-decoration: underline; text-decoration-color: rgba(143, 185, 51, 0.7);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color .15s, text-decoration-color .15s;
}
.portal-login-wrap.homer-has-bgvid .portal-demo-btn:hover { color: #ffffff !important; text-decoration-color: #8FB933; }
.portal-login-wrap.homer-has-bgvid .portal-demo-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; border-radius: 4px; }

/* reduced motion: no film is mounted, so show the still frame instead */
@media (prefers-reduced-motion: reduce) {
  .homer-scrim { background: url(/assets/bg-breeze-poster.jpg) center / cover no-repeat; }
  .portal-login-wrap.homer-has-bgvid .portal-login-btn,
  .portal-login-wrap.homer-has-bgvid .portal-demo-btn,
  .portal-login-wrap.homer-has-bgvid .portal-field input { transition: none; }
}