/* =========================================================
   Sign-in pages — "God in the City" night scene
   ========================================================= */
.auth-wrap.auth-scene{
  background:#0F1830 !important; animation:none !important;
  min-height:100vh; min-height:100dvh; padding:28px 16px 140px;
  isolation:isolate;
}
.scene{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.scene-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; mix-blend-mode:luminosity; }
.scene-sky{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 6%, rgba(228,199,122,.20), transparent 60%),
    radial-gradient(1200px 800px at 85% -10%, #2C3D72 0%, transparent 60%),
    radial-gradient(1000px 700px at 0% 110%, #1B2A55 0%, transparent 60%),
    linear-gradient(180deg, #0F1830 0%, #17244A 55%, #1B2A55 100%);
}
.scene-sky::after{ /* stars */
  content:''; position:absolute; inset:0; opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 22%, #F3DE9C 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 9%, #F3DE9C 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 36%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 42%, #fff 50%, transparent 51%);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.35; } to{ opacity:.7; } }
.scene-rays{
  position:absolute; left:50%; top:-40vmax; width:160vmax; height:160vmax; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(228,199,122,.07) 0deg 4deg, transparent 4deg 14deg);
  mask-image:radial-gradient(circle at 50% 50%, black 0%, transparent 55%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, black 0%, transparent 55%);
  animation:rays 90s linear infinite;
}
@keyframes rays{ to{ transform:translateX(-50%) rotate(360deg); } }
.scene-rose{
  position:absolute; left:50%; top:46%; width:min(820px, 130vw); height:auto;
  transform:translate(-50%,-50%); opacity:.22;
  filter:drop-shadow(0 0 22px rgba(228,199,122,.45));
  animation:rose-turn 160s linear infinite;
}
@keyframes rose-turn{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.scene-arc{ /* echoes the gold arc in the SOS logo */
  position:absolute; left:50%; top:46%; width:min(620px, 96vw); aspect-ratio:1; transform:translate(-50%,-50%) rotate(-28deg);
  border-radius:50%; border:3px solid transparent; border-top-color:rgba(198,149,44,.75); border-left-color:rgba(198,149,44,.45);
  filter:drop-shadow(0 0 12px rgba(198,149,44,.5));
}
.scene-motes span{
  position:absolute; bottom:-12px; width:4px; height:4px; border-radius:50%;
  background:#F3DE9C; box-shadow:0 0 10px 2px rgba(243,222,156,.6); opacity:0;
  animation:mote-rise 12s linear infinite;
}
@keyframes mote-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.85; }
  50%{ transform:translateY(-50vh) translateX(14px); }
  100%{ transform:translateY(-105vh) translateX(-10px); opacity:0; }
}
.scene-city{ position:absolute; left:0; right:0; bottom:0; width:100%; height:min(34vh, 300px); }
.city-back{ fill:#0B1226; }
.city-church{ fill:#0B1226; }
.city-windows rect{ fill:#F3DE9C; opacity:.15; animation:window-glow 7s ease-in-out infinite alternate; }
@keyframes window-glow{ 0%{ opacity:.12; } 60%{ opacity:.75; } 100%{ opacity:.35; } }

/* card on top of the scene */
.auth-scene .auth-card{
  position:relative; z-index:2;
  background:rgba(255,255,255,.93) !important;
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(228,199,122,.55);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65), 0 0 0 6px rgba(255,255,255,.04);
  border-radius:20px;
}
.auth-logo{ display:block; width:150px; height:auto; margin:-6px auto 6px; }
.auth-scene .auth-card h1{ font-family:'Cormorant Garamond', Georgia, serif; font-size:28px; color:#1B2A55; }
.auth-scene .rosary, .auth-scene > .motes{ display:none; } /* replaced by the scene */
.auth-links{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:16px; font-size:13px; }
.auth-links a{ color:#9C7420; text-decoration:underline; text-underline-offset:3px; }
.auth-links a:hover{ color:#1B2A55; }
.auth-foot{ position:absolute; bottom:14px; left:0; right:0; text-align:center; z-index:2; font-size:12px; color:rgba(250,246,236,.6); }
.auth-foot a{ color:rgba(250,246,236,.8); text-decoration:underline; text-underline-offset:3px; }
.auth-msg{ font-size:14px; border-radius:10px; padding:10px 12px; margin-bottom:14px; }
.auth-msg.ok{ background:var(--green-bg); color:#25603D; }
.auth-msg.err{ background:var(--red-bg); color:var(--red); }

@media (prefers-reduced-motion: reduce){
  .scene *, .scene *::after{ animation:none !important; }
}