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

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-track {
  animation: marquee 22s linear infinite;
  padding-right: 3rem;
}
.ticker-track:hover { animation-play-state: paused; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }

@keyframes scale-up {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-scale-up { animation: scale-up .2s ease-out; }

#chat-window-box.open { display: flex; }

/* Tailwind's compiled bundle only includes object-cover (never object-contain),
   so logos/photos needing "contain" behavior get these dedicated rules instead
   of relying on a missing utility class (which silently falls back to the
   default object-fit: fill and stretches the image). */
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chancellor-photo {
  width: 100%;
  height: 100%;
  max-height: 350px;
  object-fit: contain;
  display: block;
}