/* One animated ocean scene; the login panel remains opaque and stationary. */
.login-page { position: relative; isolation: isolate; min-height: 100dvh; background: #07111b; }
.login-page .login-layout { position: relative; background: transparent; }
@media (min-width: 768px) {
  .login-page .login-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); grid-template-areas: "form intro"; }
  .login-page .login-form-section { grid-area: form; }
  .login-page .login-intro { grid-area: intro; }
}
.login-page .login-intro { background: transparent; border: 0; }
.login-page .login-form-section { background: #0d1823; background-image: none; border: 0; }
.login-page .login-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ocean-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 47%;
  filter: saturate(.5) brightness(.76);
  transform: scale(1.05);
  animation: ocean-drift 18s linear infinite alternate;
  animation-delay: -3s;
  will-change: transform;
}
.login-page.motion-paused .ocean-photo { animation-play-state: paused; }
.login-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(7,17,27,.79) 0%, rgba(7,17,27,.4) 42%, rgba(7,17,27,.77) 70%, rgba(7,17,27,.9) 100%),
              linear-gradient(180deg, rgba(7,17,27,.23), transparent 45%, rgba(7,17,27,.65));
}
.login-intro .intro-copy h1 { text-shadow: 0 2px 24px rgba(0,0,0,.22); }
.login-intro .intro-copy > p:not(.eyebrow) { color: #c1cdd5; }
.login-page .eyebrow, .login-intro .intro-caption { color: #b8c5cb; }
.login-page .login-description, .login-page .form-field label { color: #c1cdd5; }
.login-page .login-help, .login-page .login-form-footer { color: #aebec9; }
.login-intro .intro-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  border-color: rgba(197,164,109,.28);
  color: #bdc6cd;
}
.intro-signature { display: flex; justify-content: space-between; align-items: center; }
.intro-signature > span:first-child { font: 400 13px Cinzel, Georgia, serif; color: #e1c894; letter-spacing: .2px; }
.scene-credit { font-size: 10px; line-height: 1.6; letter-spacing: .15px; color: #b8c5cb; }
@keyframes ocean-drift {
  from { transform: scale(1.06) translate3d(1.2%,.6%,0); }
  to { transform: scale(1.22) translate3d(-2%,-1.5%,0); }
}
@media (max-width: 767px) {
  .login-page .login-intro { padding-bottom: 23px; }
  .login-scene .ocean-photo { object-position: 55% 42%; }
  .login-scene::after { background: linear-gradient(180deg, rgba(7,17,27,.62), rgba(7,17,27,.72) 38%, rgba(7,17,27,.9)), linear-gradient(90deg, rgba(7,17,27,.25), transparent); }
  .login-intro .intro-footer { display: flex; margin-top: 27px; padding-top: 13px; }
  .intro-signature { display: none; }
  .scene-credit { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-scene .ocean-photo { animation: none !important; transform: scale(1.05); will-change: auto; }
}