/* public/css/login.css */
html, body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to { opacity:1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0;} to { opacity:1; } }
@keyframes float { 0%,100% { transform: translateY(0px);} 50% { transform: translateY(-20px);} }
@keyframes pulse { 0%,100% { opacity:1;} 50% { opacity:0.5;} }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

.delay-100 { animation-delay: 0.1s; opacity:0; }
.delay-200 { animation-delay: 0.2s; opacity:0; }
.delay-300 { animation-delay: 0.3s; opacity:0; }
.delay-400 { animation-delay: 0.4s; opacity:0; }

/* Background gradient */
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

/* Card */
.card-shadow { box-shadow: 0 20px 60px rgba(0,0,0,0.18); }

/* Floating shapes */
.floating-shape { position:absolute; border-radius:50%; background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); }
.shape-1 { width:300px; height:300px; top:-150px; right:-150px; animation: float 6s ease-in-out infinite; }
.shape-2 { width:200px; height:200px; bottom:-100px; left:-100px; animation: float 8s ease-in-out infinite reverse; }
.shape-3 { width:150px; height:150px; top:50%; right:10%; animation: float 7s ease-in-out infinite; }

/* Inputs and buttons */
.input-field { transition: all .25s ease; padding: .75rem 1rem; border: 1px solid #e6edf3; border-radius: .5rem; }
.input-field:focus { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(102,126,234,0.12); outline: none; border-color: #667eea; }
.btn-primary { transition: all .3s ease; position: relative; overflow: hidden; border: none; }
.btn-primary::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background: rgba(255,255,255,0.12); transform: translate(-50%,-50%); transition: width .6s, height .6s; }
.btn-primary:hover::before { width:300px; height:300px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102,126,234,0.25); }

/* Loading spinner */
.loading-spinner { display:none; width:20px; height:20px; border:2px solid #fff; border-top-color:transparent; border-radius:50%; animation: spin .6s linear infinite; }
.btn-primary.loading .loading-spinner { display:inline-block; }
.btn-primary.loading .btn-text { display:none; }