/* Shared animations for login / register / forgot-password */
@keyframes authFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes authPop { 0% { opacity: 0; transform: scale(.7) rotate(-8deg); } 70% { transform: scale(1.06) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes authFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes authGlow { 0%,100% { box-shadow: 0 10px 30px -8px rgba(99,102,241,.45); } 50% { box-shadow: 0 16px 44px -6px rgba(139,92,246,.7); } }
@keyframes authBlob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-40px) scale(1.12); } 66% { transform: translate(-25px,20px) scale(.92); } }
@keyframes authShine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }
@keyframes authGradText { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes authStepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes authRing { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes authCheck { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

body { position: relative; overflow-x: hidden; }
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 9999px; filter: blur(60px); opacity: .45; pointer-events: none;
  animation: authBlob 16s ease-in-out infinite;
}
body::before { width: 320px; height: 320px; top: -80px; left: -90px; background: radial-gradient(circle, #818cf8, transparent 70%); }
body::after { width: 300px; height: 300px; bottom: 60px; right: -100px; background: radial-gradient(circle, #c084fc, transparent 70%); animation-delay: -6s; }

/* Logo */
body img[src*="logo"] { animation: authPop .7s cubic-bezier(.2,.9,.3,1.3) both, authFloat 4s ease-in-out .8s infinite, authGlow 3.5s ease-in-out .8s infinite; border-radius: 22px; }

/* Staggered entrance for the main blocks */
.auth-in > * { animation: authFadeUp .6s cubic-bezier(.2,.8,.2,1) both; }
.auth-in > *:nth-child(1) { animation-delay: .05s; }
.auth-in > *:nth-child(2) { animation-delay: .15s; }
.auth-in > *:nth-child(3) { animation-delay: .25s; }
.auth-in > *:nth-child(4) { animation-delay: .35s; }
.auth-in > *:nth-child(5) { animation-delay: .45s; }
.auth-in > *:nth-child(6) { animation-delay: .55s; }
.auth-in > *:nth-child(n+7) { animation-delay: .65s; }

.auth-grad-text { background: linear-gradient(90deg,#4f46e5,#8b5cf6,#0ea5e9,#4f46e5); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: authGradText 6s ease infinite; }

/* Inputs */
input, select { transition: transform .2s ease, box-shadow .2s ease; }
div:focus-within > input { transform: translateX(2px); }

/* Buttons shimmer + press */
button[type="submit"], .btn-gradient, #nextStepBtn, #verifyNextBtn { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .25s ease; }
button[type="submit"]::after, .btn-gradient::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: authShine 2.8s ease-in-out infinite; pointer-events: none;
}
button:active:not(:disabled) { transform: scale(.97); }

.auth-step-in { animation: authStepIn .45s cubic-bezier(.2,.8,.2,1) both; }

/* Password rules checklist */
.pw-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 8px; font-size: 11px; font-weight: 600; }
.pw-rule { display: flex; align-items: center; gap: 6px; color: #94a3b8; transition: color .25s ease; }
.pw-rule i { font-size: 10px; transition: transform .3s cubic-bezier(.2,.9,.3,1.4); }
.pw-rule.ok { color: #059669; }
.pw-rule.ok i { transform: scale(1.25); }
.pw-meter { height: 5px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; margin-top: 8px; }
.pw-meter > span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .35s ease, background .35s ease; }

/* Telegram waiting pulse */
.tg-pulse { position: relative; display: inline-flex; }
.tg-pulse::before, .tg-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #0ea5e9; animation: authRing 1.8s ease-out infinite; z-index: -1; }
.tg-pulse::after { animation-delay: .9s; }
.tg-success svg path { stroke-dasharray: 40; animation: authCheck .6s ease .1s both; }

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