/* --- Animation Styles --- */
@keyframes logo-float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(10deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.brand-container:hover .brand-logo {
  animation: logo-float 0.8s ease-in-out;
}

@keyframes gradient-pan {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.brand-name {
  color: #2dd4bf;
  background-image: linear-gradient(
    90deg,
    #2dd4bf,
    #3b82f6,
    #a855f7,
    #2dd4bf
  );
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  display: inline-block;
  animation: gradient-pan 4s linear infinite;
}

.animated-gradient-banner {
  background-image: linear-gradient(
    90deg,
    #2dd4bf,
    #3b82f6,
    #a855f7,
    #2dd4bf
  );
  background-size: 200% auto;
  animation: gradient-pan 10s linear infinite;
}

/* Link Preview Animation */
@keyframes link-preview-fade-in {
  from { opacity: 0; transform: translateY(-100%) translateY(-5px) scale(0.98); }
  to { opacity: 1; transform: translateY(-100%) translateY(-10px) scale(1); }
}
.animate-link-preview-fade-in {
  animation: link-preview-fade-in 0.2s ease-out forwards;
}

/* Share Modal Animation */
@keyframes fade-in-scale {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Author Banner Animation */
.animated-gradient-banner-author {
  background-image: linear-gradient(
    90deg,
    #0d9488, /* teal-700 */
    #10b981, /* emerald-500 */
    #34d399, /* emerald-400 */
    #0d9488  /* teal-700 */
  );
  background-size: 200% auto;
  animation: gradient-pan 10s linear infinite;
}