/* حركة خلفية صفحة الدخول فقط — من خطوط ودرجات هوية دروب أيديا. */
body.login-page{
  isolation:isolate;
  background:#F8FAF8;
}
body.login-page main.centered,
body.login-page .foot{
  position:relative;
  z-index:1;
}
body.login-page .foot{
  background:rgba(255,255,255,.54);
  backdrop-filter:blur(8px);
}
.login-scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 65% at 98% 4%,rgba(235,178,45,.095),transparent 72%),
    radial-gradient(ellipse 58% 68% at 2% 98%,rgba(45,182,125,.085),transparent 74%);
}
.login-scene__glow{
  position:absolute;
  display:block;
  width:clamp(350px,46vw,760px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(44px);
  opacity:.32;
  will-change:transform;
  animation:login-glow 20s ease-in-out infinite alternate;
}
.login-scene__glow--gold{
  top:-37%; right:-17%;
  background:radial-gradient(circle,rgba(235,178,45,.24),transparent 70%);
}
.login-scene__glow--green{
  bottom:-48%; left:-16%;
  background:radial-gradient(circle,rgba(45,182,125,.24),transparent 70%);
  animation-delay:-10s;
}
.login-scene__waves{
  position:absolute;
  width:116%;
  height:116%;
  top:-8%; left:-8%;
  fill:none;
  stroke:#D8AC37;
  stroke-width:1.15;
  opacity:.36;
  vector-effect:non-scaling-stroke;
  will-change:transform;
  animation:login-wave 24s ease-in-out infinite alternate;
}
.login-scene__waves path{vector-effect:non-scaling-stroke}
.login-scene__waves .login-scene__wave-green{stroke:#2DB67D;opacity:.72}
.login-scene__spark{
  position:absolute;
  width:12px;height:12px;
  opacity:.45;
  animation:login-spark 7s ease-in-out infinite;
}
.login-scene__spark::before,.login-scene__spark::after{
  content:"";position:absolute;background:#2DB67D;border-radius:3px;
}
.login-scene__spark::before{width:12px;height:1px;top:5px}
.login-scene__spark::after{width:1px;height:12px;left:5px}
.login-scene__spark--one{top:22%;left:17%}
.login-scene__spark--two{right:17%;bottom:24%;animation-delay:-3.5s}
.login-scene__spark--two::before,.login-scene__spark--two::after{background:#D8A321}
.login-scene__ring{
  position:absolute;top:68%;left:13%;width:8px;height:8px;
  border:1px solid rgba(210,154,22,.55);border-radius:50%;
  animation:login-spark 8s ease-in-out infinite reverse;
}
body.login-page .login{
  position:relative;
  background:rgba(255,255,255,.95);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 24px 70px rgba(34,75,58,.11),0 6px 22px rgba(66,66,66,.05);
  backdrop-filter:blur(12px);
}
@keyframes login-wave{
  from{transform:translate3d(-1.4%,.6%,0) scale(1.01)}
  to{transform:translate3d(1.4%,-.7%,0) scale(1.035)}
}
@keyframes login-glow{
  from{transform:translate3d(-2%,1%,0) scale(.96)}
  to{transform:translate3d(3%,-2%,0) scale(1.08)}
}
@keyframes login-spark{
  0%,100%{opacity:.22;transform:translateY(0) rotate(0deg)}
  50%{opacity:.58;transform:translateY(-5px) rotate(12deg)}
}
@media(max-width:640px){
  .login-scene__waves{width:185%;left:-43%;opacity:.26}
  .login-scene__spark--one{left:8%;top:13%}
  .login-scene__spark--two{right:8%;bottom:16%}
  .login-scene__ring{left:7%}
  body.login-page main.centered{padding-block:24px}
  body.login-page .login{padding:24px 22px}
}
@media(prefers-reduced-motion:reduce){
  .login-scene__glow,.login-scene__waves,
  .login-scene__spark,.login-scene__ring{animation:none;will-change:auto}
}