/* Load before styles.css: prevents logo FOUC (wide intrinsic image) and runs fade-in first paint. */
.logo-block {
  display: inline-block;
  max-width: min(400px, 90vw);
  vertical-align: middle;
}

.logo-block .logo-img {
  max-width: min(400px, 90vw);
  height: clamp(68px, 16vw, 104px);
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 0;
  animation: logoFadeIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.06s forwards;
}

@media (max-width: 768px) {
  .logo-block {
    max-width: min(400px, 94vw);
  }

  .logo-block .logo-img {
    max-width: min(400px, 94vw);
    height: clamp(76px, 24vw, 104px);
  }
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-block .logo-img {
    animation: none !important;
    opacity: 1 !important;
  }
}