/* Online Classroom Hub — custom styles */

@keyframes blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-50px) scale(1.1); }
  66%     { transform: translate(-20px,20px) scale(0.9); }
}
.animate-blob { animation: blob 12s ease-in-out infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
.animate-float { animation: float 5s ease-in-out infinite; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up .8s ease-out both; }

/* gradient text - using deep navy and amber */
.text-gradient {
  background: linear-gradient(135deg, #021C3D 0%, #3373af 50%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* card hover */
.card-hover { transition: transform .35s ease, box-shadow .35s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.15); }

/* chatbot bubbles - update to deep navy */
.bubble-bot {
  background:#fff; border:1px solid #e2e8f0; padding:.6rem .85rem;
  border-radius: 14px 14px 14px 4px; max-width: 80%; align-self:flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.bubble-user {
  background:#021C3D; color:#fff; padding:.6rem .85rem;
  border-radius: 14px 14px 4px 14px; max-width: 80%; align-self:flex-end;
}
#chatbot-messages { display:flex; flex-direction:column; }
#chatbot-window { animation: fade-in-up .25s ease-out; }

/* typing indicator */
.typing span { display:inline-block; width:6px; height:6px; margin:0 1px; background:#94a3b8; border-radius:50%; animation: typing 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.15s }
.typing span:nth-child(3){ animation-delay:.3s }
@keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-4px); opacity:1 } }

/* Brand-specific button styles */
.btn-brand {
  background-color: #021C3D;
  transition: all 0.3s ease;
}
.btn-brand:hover {
  background-color: #021934;
  transform: translateY(-2px);
}

.btn-outline-brand {
  border: 2px solid #021C3D;
  color: #021C3D;
  transition: all 0.3s ease;
}
.btn-outline-brand:hover {
  background-color: #021C3D;
  color: white;
}

/* Status badges */
.badge-live {
  background-color: #ef4444;
  animation: pulse 2s infinite;
}
.badge-upcoming {
  background-color: #F59E0B;
}