/* ═══════════════════════════════════════════════════════════════════════════
   SkillBro — Auth Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Auth forms ────────────────────────────────────────────────────────────── */
.form-panel { transition: max-height 0.45s ease, opacity 0.3s ease; overflow: hidden; }
.form-panel.collapsed { max-height: 0; opacity: 0; pointer-events: none; }

/* ── Input focus ───────────────────────────────────────────────────────────── */
.input-focus { transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.input-focus:focus { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(79,70,229,0.18); background: #ffffff !important; }
.input-focus::placeholder { color: #64748b; }

/* ── Logo float ────────────────────────────────────────────────────────────── */
.logo-float { animation: logoFloat 3.5s ease-in-out infinite; display: inline-block; }
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Ripple effect ─────────────────────────────────────────────────────────── */
.btn-ripple { position: relative; overflow: hidden; }
.ripple-circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.28); transform: scale(0); animation: rippleAnim 0.55s linear forwards; pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(4.5); opacity: 0; } }