/* Hope Foundation NGO - Custom Styles */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-in-left { animation: slideInLeft 0.6s ease-out forwards; }
.animate-slide-in-right { animation: slideInRight 0.6s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.4s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.delay-100 { animation-delay: .1s; } .delay-200 { animation-delay: .2s; } .delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; } .delay-500 { animation-delay: .5s; }

.flash-message { animation: slideInRight 0.4s ease-out; }
.hero-gradient { background: linear-gradient(135deg, #064e3b 0%, #065f46 30%, #047857 60%, #059669 100%); }
.hero-pattern { background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,.06) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0%, transparent 50%); }
.card-hover { transition: all .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,.1); }
.section-divider { width: 60px; height: 4px; background: linear-gradient(to right, #059669, #10b981); border-radius: 2px; }
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .5s ease; }
.img-zoom:hover img { transform: scale(1.05); }
.form-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.1); }

.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn .3s ease; cursor: pointer; }
.lightbox-overlay img { max-width: 90%; max-height: 85vh; object-fit: contain; border-radius: 8px; animation: scaleIn .3s ease; }
.lightbox-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 2rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2rem; cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); }
.lightbox-prev { left: 20px; } .lightbox-next { right: 20px; }

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 12px 20px; border-radius: 12px; color: #fff; font-size: .875rem; font-weight: 500; min-width: 280px; box-shadow: 0 10px 30px -5px rgba(0,0,0,.2); animation: slideInRight .4s ease-out; display: flex; align-items: center; gap: 10px; }
.toast-success { background: linear-gradient(135deg, #059669, #10b981); }
.toast-error { background: linear-gradient(135deg, #dc2626, #ef4444); }
.toast-warning { background: linear-gradient(135deg, #d97706, #f59e0b); }
.toast-info { background: linear-gradient(135deg, #2563eb, #3b82f6); }

.admin-sidebar { transition: transform .3s ease, width .3s ease; }
@media (max-width: 1023px) { .admin-sidebar { transform: translateX(-100%); position: fixed; z-index: 40; } .admin-sidebar.open { transform: translateX(0); } }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 35; }
.sidebar-overlay.active { display: block; animation: fadeIn .3s ease; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn .2s ease; }
.modal-content { background: #fff; border-radius: 1rem; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; animation: scaleIn .3s ease; }
.spinner { border: 3px solid rgba(16,185,129,.2); border-top: 3px solid #10b981; border-radius: 50%; width: 24px; height: 24px; animation: spin .8s linear infinite; }