:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #d4c3aa; }
.canvas {
  isolation: isolate;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #d4c3aa;
  display: grid;
  place-items: center;
}
/* A separate canvas layer preserves the appearance on all aspect ratios. */
.canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/canvas.webp") 0 0 / 600px 600px repeat;
  mix-blend-mode: multiply;
  opacity: 0.31;
  pointer-events: none;
}
.seal {
  display: block;
  width: clamp(240px, 32vw, 465px);
  max-width: 82vw;
  height: auto;
  object-fit: contain;
  position: relative;
  top: -7vh;
  filter: drop-shadow(3px 7px 12px rgb(38 16 13 / 22%)) drop-shadow(0 2px 3px rgb(38 16 13 / 22%));
  animation: stamp-in 850ms cubic-bezier(.18,.7,.2,1) both;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes stamp-in {
  from { opacity: 0; transform: translateY(-12px) scale(1.055); filter: drop-shadow(5px 18px 19px rgb(38 16 13 / 12%)); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .seal { width: 82vw; top: -4vh; }
  .canvas::before { background-size: 440px 440px; }
}
@media (prefers-reduced-motion: reduce) { .seal { animation: none; } }