/* Colours sampled from images/milanchi_logo.jpg */
:root {
  --cream: #e8d8bf;      /* logo background - must match so the JPG has no visible edge */
  --brown: #7a4827;      /* lettering */
  --gold: #c38435;       /* sparkles and swooshes */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 16px;
  overflow: hidden;
}

.hero h1 { margin: 0; width: min(1000px, 100%); }
.hero h1 img { display: block; width: 100%; height: auto; }

.soon {
  margin: 1rem 0 0;
  font: 700 clamp(1.6rem, 5vw, 2.8rem) "Fredoka", system-ui, sans-serif;
  color: var(--brown);
  letter-spacing: .03em;
}

/* floating sparkles / hearts, echoing the logo's doodles */
.deco { position: absolute; fill: var(--gold); color: var(--brown); pointer-events: none; }
.deco.s1 { width: 34px; height: 34px; top: 12%; left: 10%; animation: twinkle 3s ease-in-out infinite; }
.deco.s2 { width: 22px; height: 22px; top: 20%; right: 14%; fill: var(--brown); animation: twinkle 2.4s .6s ease-in-out infinite; }
.deco.s3 { width: 28px; height: 28px; bottom: 14%; right: 8%; animation: twinkle 3.4s 1.1s ease-in-out infinite; }
.deco.h1 { width: 26px; height: 26px; bottom: 18%; left: 7%; animation: bob 4s ease-in-out infinite; }
.deco.h2 { width: 20px; height: 20px; top: 9%; right: 32%; animation: bob 3.5s .8s ease-in-out infinite; }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(.6) rotate(20deg); opacity: .6; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-8px) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .deco { animation: none; }
}