html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-bottom: 76px;
}

/* Gallery horizontal scrollbar */
.gallery-scroll::-webkit-scrollbar {
  height: 4px;
}
.gallery-scroll::-webkit-scrollbar-track {
  background: #E4EAF5;
  border-radius: 2px;
}
.gallery-scroll::-webkit-scrollbar-thumb {
  background: #4472C4;
  border-radius: 2px;
}
.gallery-scroll::-webkit-scrollbar-thumb:hover {
  background: #1E2D40;
}

/* Smooth image loading */
img {
  transition: opacity 200ms ease;
}

/* -------------------------------------------------------------
   Quizzora Premium Interaction & Animation Library
   ------------------------------------------------------------- */

/* Rotating Gradient Ring animation for Team Avatar */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spinSlow 8s linear infinite;
}

/* Shake animation for incorrect answer feedback */
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}
.animate-shake {
  animation: cardShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Float Up & Fade Out animation for "+1 Correct!" visual effect */
@keyframes floatUpFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.85);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0px) scale(1.1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(0.9);
  }
}
.animate-float-up {
  animation: floatUpFade 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Advanced Why Card hover state with glow and shadow depth */
.why-card {
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 300ms;
}
.why-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(68, 114, 196, 0.4);
  box-shadow: 0 20px 40px -15px rgba(30, 45, 64, 0.15), 0 0 22px 4px rgba(68, 114, 196, 0.14);
}
.why-card:hover .why-icon {
  transform: scale(1.18) translateY(-2px);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.15));
}

/* Smooth layout transitions for compressed headers */
header, nav, header div {
  will-change: padding, transform;
}