/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;

  /* Match the logo background more accurately */
  background: #0C172F;

  position: relative;
}

/* Center the logo, but nudge it slightly downward */
.logo-container {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1; /* behind snow */
}

.logo {
  display: block;

  /* Slightly smaller than before */
  width: clamp(220px, 38vw, 520px);
  height: auto;

  /* Nudge down for better balance */
  transform: translateY(5vh);

  /* Optional: if you want ultra-clean, remove this line */
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
}

/* Snow in FRONT of everything (keep), but blend it */
#storm {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  z-index: 999;

  /* This is the “looks premium” switch */
  mix-blend-mode: screen;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  #storm {
    opacity: 0.4;
  }
  .logo {
    filter: none;
  }
}