:root { --fade-duration: 600ms; }
/* Soft page intro */
body { opacity: 0; transition: opacity 400ms ease; }
body.ready { opacity: 1; }

/* Subtle section animation */
[data-animate] { opacity: 0; transform: translateY(16px); transition: opacity var(--fade-duration) ease, transform var(--fade-duration) ease; }
[data-animate].in { opacity: 1; transform: translateY(0); }

/* High-quality type rendering */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Toast for small ephemeral messages (MetaMask errors / status) */
#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(10,26,47,0.95);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 9999;
}
#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.site-logo {
  max-width: 1200px;
  height: auto;
  display: block;
  object-fit: contain;
  width: 92vw; /* ensure responsive scaling */
  max-height: 270px; /* increased ~50% to make logo much larger */
}

/* Tighter limits on small screens */
@media (max-width: 640px) {
  /* Make logo much larger and centered on small screens */
  .site-logo { max-width: 92vw; width: 92vw; max-height: 330px; margin-left: auto; margin-right: auto; display: block; }
}

/* Add a midpoint rule for tablets */
@media (min-width: 641px) and (max-width: 1024px) {
  .site-logo { max-width: 85vw; width: 85vw; max-height: 390px; }
}