/* Circles + Squarish tiles animated background (scoped to .animated-login-area) */
/* Paste into apps/tekton_theme/tekton_theme/public/css/login_background.css */

@import url('https://fonts.googleapis.com/css?family=Exo:400,700&display=swap');

.animated-login-area .area{
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden !important;
  pointer-events: none;
  background: linear-gradient(120deg,#8f94fb 0%, #4e54c8 100%);
}

/* subtle vignette */
.animated-login-area .area::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 50% 45%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.06) 60%, rgba(0,0,0,0.14) 100%);
  z-index: 1;
  pointer-events: none;
}

/* wrapper */
.animated-login-area .circles{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* base particle style */
.animated-login-area .circles li{
  position: absolute;
  list-style: none;
  opacity: 0;
  will-change: transform, opacity, filter;
  mix-blend-mode: screen;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.98), rgba(255,255,255,0.08));
  transform-origin: center;
}

/* default size fallback */
.animated-login-area .circles li { width: 40px; height: 40px; border-radius: 50%; }

/* --- square / squarish look --- */
/* we'll make specific nth-child elements "squares" by reducing border-radius,
   adding slight skew and inner gradient + subtle border for material look */
.animated-login-area .circles li.sq {
  border-radius: 8px; /* squarish */
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(76,110,245,0.07), inset 0 1px 0 rgba(255,255,255,0.03);
  transform-origin: center;
}

/* small glass/neon glow for many particles */
.animated-login-area .circles li.glow {
  box-shadow: 0 12px 40px rgba(124,108,255,0.18), 0 4px 12px rgba(0,0,0,0.06);
  filter: drop-shadow(0 6px 18px rgba(124,108,255,0.08));
}

/* animation definitions: rise, fall, left->right, right->left, float/spiral */
@keyframes rise {
  0%   { transform: translateY(0) translateX(0) rotate(0) scale(1); opacity: 0; filter: blur(0); }
  6%   { opacity: 0.95; }
  60%  { transform: translateY(-48vh) translateX(var(--drift,0px)) rotate(calc(var(--rot,0deg) * 0.6)) scale(var(--s,1.02)); opacity: 0.65; filter: blur(.6px); }
  100% { transform: translateY(-120vh) translateX(calc(var(--drift) * 1.2)) rotate(calc(var(--rot,0deg) * 1.2)); opacity: 0; filter: blur(1.2px); }
}
@keyframes fall {
  0%   { transform: translateY(0) translateX(0) rotate(0) scale(1); opacity: 0; }
  6%   { opacity: 0.92; }
  60%  { transform: translateY(48vh) translateX(var(--drift,0px)) rotate(calc(var(--rot,0deg) * 0.6)) scale(var(--s,1.02)); opacity: 0.6; }
  100% { transform: translateY(120vh) translateX(calc(var(--drift) * 1.2)) rotate(calc(var(--rot,0deg) * 1.2)); opacity: 0; }
}
@keyframes leftToRight {
  0%   { transform: translateX(0) translateY(0) rotate(0) scale(1); opacity: 0; }
  6%   { opacity: 0.94; }
  60%  { transform: translateX(60vw) translateY(var(--driftY,0px)) rotate(calc(var(--rot,0deg) * 0.6)) scale(var(--s,1.02)); opacity: 0.55; }
  100% { transform: translateX(120vw) translateY(calc(var(--driftY) * 1.2)) rotate(calc(var(--rot,0deg) * 1.2)); opacity: 0; }
}
@keyframes rightToLeft {
  0%   { transform: translateX(0) translateY(0) rotate(0) scale(1); opacity: 0; }
  6%   { opacity: 0.94; }
  60%  { transform: translateX(-60vw) translateY(var(--driftY,0px)) rotate(calc(var(--rot,0deg) * 0.6)) scale(var(--s,1.02)); opacity: 0.55; }
  100% { transform: translateX(-120vw) translateY(calc(var(--driftY) * 1.2)) rotate(calc(var(--rot,0deg) * 1.2)); opacity: 0; }
}
@keyframes spiral {
  0%   { transform: translateY(0) translateX(0) rotate(0) scale(1); opacity: 0; }
  8%   { opacity: 0.96; }
  50%  { transform: translateY(-28vh) translateX(var(--drift,0px)) rotate(360deg) scale(var(--s,1.05)); opacity: 0.7; }
  100% { transform: translateY(-96vh) translateX(calc(var(--drift) * 1.1)) rotate(1080deg) scale(var(--s,1.08)); opacity: 0; }
}

/* --- assign positions, sizes, animations for 16 particles (mix squares & circles) --- */
/* Particle 1 - big circle rising */
.animated-login-area .circles li:nth-child(1){
  left: 8%; top: 85%;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.98), rgba(255,255,255,0.06));
  animation: rise 38s linear infinite;
  animation-delay: -6s;
  --drift: 80px; --rot: 220deg; --s:1.04;
  box-shadow: 0 20px 50px rgba(124,108,255,0.12);
}

/* Particle 2 - small square left->right */
.animated-login-area .circles li:nth-child(2){
  left: 12%; top: 52%;
  width: 44px; height: 44px; 
  /* mark as square via class-like rule */
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.12));
  animation: leftToRight 20s linear infinite;
  animation-delay: -3s;
  --driftY: 18px; --rot: 120deg; --s:1;
  box-shadow: 0 14px 36px rgba(76,110,245,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Particle 3 - tiny circle falling */
.animated-login-area .circles li:nth-child(3){
  left: 72%; top: 6%;
  width: 22px; height: 22px; border-radius: 50%;
  animation: fall 22s linear infinite;
  animation-delay: -8s;
  --drift: -32px; --rot: -140deg; --s:0.98;
}

/* Particle 4 - large squarish moving right->left */
.animated-login-area .circles li:nth-child(4){
  left: 90%; top: 18%;
  width: 120px; height: 120px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,255,255,0.08));
  animation: rightToLeft 34s linear infinite;
  animation-delay: -4s;
  --driftY: 40px; --rot: -300deg; --s:1.03;
  box-shadow: 0 22px 52px rgba(124,108,255,0.12);
}

/* Particle 5 - spiral small */
.animated-login-area .circles li:nth-child(5){
  left: 50%; top: 54%;
  width: 34px; height: 34px; border-radius: 50%;
  animation: spiral 28s linear infinite;
  animation-delay: -10s;
  --drift: 22px; --rot: 480deg; --s:1.02;
  box-shadow: 0 10px 30px rgba(76,110,245,0.06);
}

/* Particle 6 - falling square */
.animated-login-area .circles li:nth-child(6){
  left: 28%; top: 12%;
  width: 86px; height: 86px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.08));
  animation: fall 30s linear infinite;
  animation-delay: -3s;
  --drift: -60px; --rot: 200deg; --s:1.02;
  box-shadow: 0 18px 44px rgba(124,108,255,0.1);
}

/* Particle 7 - circle */
.animated-login-area .circles li:nth-child(7){
  left: 76%; top: 70%;
  width: 56px; height: 56px; border-radius: 50%;
  animation: rise 20s linear infinite;
  animation-delay: -5s;
  --drift: -18px; --rot: 140deg; --s:1;
}

/* Particle 8 - slim square */
.animated-login-area .circles li:nth-child(8){
  left: 94%; top: 40%;
  width: 20px; height: 44px; border-radius: 6px;
  animation: rightToLeft 18s linear infinite;
  animation-delay: -7s;
  --driftY: -36px; --rot: -54deg; --s:0.95;
  box-shadow: 0 8px 22px rgba(76,110,245,0.06);
}

/* Particle 9 - big circle bottom */
.animated-login-area .circles li:nth-child(9){
  left: 44%; top: 88%;
  width: 120px; height: 120px; border-radius: 50%;
  animation: rise 36s linear infinite;
  animation-delay: -12s;
  --drift: 110px; --rot: -260deg; --s:1.05;
  box-shadow: 0 20px 44px rgba(124,108,255,0.12);
}

/* Particle 10 - leftToRight small */
.animated-login-area .circles li:nth-child(10){
  left: 14%; top: 44%;
  width: 24px; height: 24px; border-radius: 50%;
  animation: leftToRight 26s linear infinite;
  animation-delay: -3s;
  --driftY: 12px; --rot: 100deg; --s:0.98;
}

/* Particle 11 - medium falling */
.animated-login-area .circles li:nth-child(11){
  left: 62%; top: 8%;
  width: 46px; height: 46px; border-radius: 12px;
  animation: fall 24s linear infinite;
  animation-delay: -14s;
  --drift: -72px; --rot: 300deg; --s:1.01;
}

/* Particle 12 - spiral medium */
.animated-login-area .circles li:nth-child(12){
  left: 24%; top: 58%;
  width: 34px; height: 34px; border-radius: 50%;
  animation: spiral 30s linear infinite;
  animation-delay: -6s;
  --drift: -28px; --rot: 220deg; --s:1.02;
}

/* Particle 13 - large square */
.animated-login-area .circles li:nth-child(13){
  left: 86%; top: 86%;
  width: 96px; height: 96px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,255,255,0.07));
  animation: rise 40s linear infinite;
  animation-delay: -11s;
  --drift: -140px; --rot: 420deg; --s:1.05;
  box-shadow: 0 26px 60px rgba(124,108,255,0.14);
}

/* Particle 14 - tiny fall */
.animated-login-area .circles li:nth-child(14){
  left: 52%; top: 24%;
  width: 18px; height: 18px; border-radius: 50%;
  animation: fall 20s linear infinite;
  animation-delay: -1s;
  --drift: 44px; --rot: -90deg; --s:0.97;
}

/* Particle 15 - leftToRight medium */
.animated-login-area .circles li:nth-child(15){
  left: 6%; top: 46%;
  width: 62px; height: 62px; border-radius: 10px;
  animation: leftToRight 28s linear infinite;
  animation-delay: -9s;
  --driftY: 48px; --rot: 200deg; --s:1.02;
  box-shadow: 0 18px 44px rgba(124,108,255,0.1);
}

/* Particle 16 - tiny rightToLeft */
.animated-login-area .circles li:nth-child(16){
  left: 98%; top: 4%;
  width: 18px; height: 18px; border-radius: 6px;
  animation: rightToLeft 22s linear infinite;
  animation-delay: -5s;
  --driftY: -64px; --rot: -140deg; --s:0.95;
  box-shadow: 0 8px 20px rgba(76,110,245,0.06);
}

/* hide very large on very small screens */
@media (max-width:480px){
  .animated-login-area .circles li:nth-child(1),
  .animated-login-area .circles li:nth-child(4),
  .animated-login-area .circles li:nth-child(9),
  .animated-login-area .circles li:nth-child(13){
    display: none;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-login-area .circles li {
    animation: none !important;
    opacity: .9;
    transform: translateY(0);
  }
}

/* ensure the login card stays above the animated background */
body .page-card, body .login-card, body .login-form {
  position: relative;
  z-index: 10;
}
.navbar-light{
    border-bottom: 1px solid #e2e2e2;
    background: #ffffff00;
}

/*--------------------------------------------------------------------------Card Login --------------------------------------*/
/*&&&&&&&&&&&*/
/*_+_+_+_+__+_+_+_+_+_+_+_+_*/

/* ---------- Login Card Glass Effect ---------- */
.for-login .page-card {
  background: rgba(255, 255, 255, 0.12)!important; /* شفافية للزجاج */
  backdrop-filter: blur(12px) !important; /* تأثير الزجاج */
  -webkit-backdrop-filter: blur(12px)!important; /* دعم Safari */
  border-radius: 18px; /* الحواف ناعمة */
  border: 1px solid rgba(255, 255, 255, 0.25)!important; /* حدود شفافة */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25)!important; /* ظل ناعم */
  padding: 40px 30px!important;
  max-width: 420px!important;
  margin: auto!important;
  transition: all 0.3s ease!important;
}

/* عند التحويم */
.for-login .page-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35),
              0 0 20px rgba(255, 255, 255, 0.15); /* Glow خفيف */
  border-color: rgba(255, 255, 255, 0.35);
}

/* العنوان */
.for-login .page-card h2,
.for-login .page-card h3 {
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* الحقول */
.for-login .page-card input {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #fff;
  padding: 12px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.for-login .page-card input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
  outline: none;
}

/* الأزرار */
.for-login .page-card button {
  background: linear-gradient(135deg, #7758f1, #a483ff);
  border: none;
  border-radius: 12px;
  color: #fff;
  padding: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.for-login .page-card button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px rgb(81 87 195);
}