.login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  isolation: isolate;
  background: #050406;
}
.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(rgba(4,3,5,.42), rgba(4,3,5,.82)), var(--login-bg-url);
  background-size: cover;
  background-position: center;
  filter: saturate(.72) contrast(1.08);
}
.login-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at center, transparent 0 16%, rgba(0,0,0,.78) 78%),
    radial-gradient(circle at 50% 40%, rgba(201,166,92,.06), transparent 30%);
  pointer-events: none;
}

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(20,15,24,.55), rgba(3,3,5,.96));
  animation: introFadeOut .95s ease 3.4s forwards;
}
.intro-core { display: grid; gap: 18px; justify-items: center; }
.intro-logo-stack {
  position: relative;
  width: min(78vw, 520px);
  filter: drop-shadow(0 0 32px rgba(201,166,92,.12));
}
.intro-logo { width: 100%; max-height: 52dvh; object-fit: contain; }
.intro-logo-base { filter: grayscale(1) brightness(.22) contrast(1.1); opacity: .92; }
.intro-fill-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  animation: logoFillFromBottom 2.8s cubic-bezier(.2,.75,.18,1) .2s forwards;
}
.intro-logo-fill {
  filter: saturate(1.08) brightness(1) drop-shadow(0 0 22px rgba(231,201,128,.2));
}
.intro-sigil-row {
  color: rgba(234,217,159,.72);
  letter-spacing: .32em;
  font-size: clamp(.88rem, 2.3vw, 1.2rem);
  opacity: 0;
  animation: introSigils 2.1s ease .65s forwards;
}
@keyframes logoFillFromBottom { to { clip-path: inset(0 0 0 0); } }
@keyframes introSigils { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: .9; transform: translateY(0); } }
@keyframes introFadeOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.login-shell {
  width: min(430px, 100%);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  animation: revealLogin .9s ease 3.15s forwards;
}
@keyframes revealLogin { to { opacity: 1; transform: translateY(0) scale(1); } }

.login-card {
  position: relative;
  padding: 30px 22px 22px;
  border: 1px solid rgba(231,201,128,.42);
  border-radius: 31px 21px 29px 18px;
  background:
    linear-gradient(170deg, rgba(26,19,31,.965), rgba(7,6,10,.98)),
    linear-gradient(90deg, rgba(201,166,92,.04), rgba(255,255,255,.01));
  box-shadow: 0 34px 110px rgba(0,0,0,.72), inset 0 0 58px rgba(201,166,92,.04);
  overflow: hidden;
  backdrop-filter: blur(14px);
}
.login-card::before,
.login-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201,166,92,.16);
  border-radius: 27px 16px 24px 16px;
  pointer-events: none;
}
.login-card::after {
  inset: auto 18px 18px auto;
  width: 68px;
  height: 68px;
  border: 0;
  background: radial-gradient(circle, rgba(201,166,92,.16), transparent 68%);
  filter: blur(8px);
  opacity: .8;
}
.corner-glyph {
  position: absolute;
  color: rgba(234,217,159,.78);
  font-size: 1rem;
  text-shadow: 0 0 10px rgba(201,166,92,.2);
}
.corner-glyph-a { top: 10px; left: 12px; }
.corner-glyph-b { top: 10px; right: 14px; }
.corner-glyph-c { bottom: 12px; left: 12px; }
.corner-glyph-d { bottom: 12px; right: 14px; }

.login-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(234,217,159,.95);
  box-shadow: 0 0 10px rgba(231,201,128,.72);
  pointer-events: none;
  opacity: .0;
}
.particle-1 { top: 16%; left: 9%; animation: driftGold 4.6s ease-in-out infinite .1s; }
.particle-2 { top: 21%; right: 12%; animation: driftGold 5.1s ease-in-out infinite 1.3s; }
.particle-3 { bottom: 20%; left: 13%; animation: driftGold 4.3s ease-in-out infinite .8s; }
.particle-4 { bottom: 16%; right: 10%; animation: driftGold 5.5s ease-in-out infinite 1.8s; }
@keyframes driftGold {
  0%, 100% { opacity: .15; transform: translate3d(0,0,0) scale(.7); }
  50% { opacity: .95; transform: translate3d(0,-14px,0) scale(1); }
}

.login-brand {
  display: flex;
  justify-content: center;
  margin: 2px 0 20px;
}
.login-brand-logo {
  width: min(360px, 92vw);
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(201,166,92,.16));
}
.login-form { display: grid; gap: 14px; }
.login-links { display: flex; justify-content: center; margin-top: 14px; }
.text-button { border: 0; color: var(--muted); background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: .78rem; }
.login-feedback { min-height: 20px; margin: 13px 0 0; color: var(--danger); text-align: center; font-size: .8rem; }
.login-footer { margin: 16px 0 0; color: rgba(235,215,168,.55); text-align: center; font-size: .85rem; letter-spacing: .28em; }

@media (prefers-reduced-motion: reduce) {
  .intro-screen, .intro-fill-mask, .login-shell, .login-particle, .intro-sigil-row { animation: none !important; }
  .intro-screen { display: none; }
  .login-shell { opacity: 1; transform: none; }
}