@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root { --emu-red: #a20000; --emu-gold: #f9b54c; --red-dark: #6d0000; --text: #fff3d8; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--emu-red); color: var(--text); font-family: "IBM Plex Mono", monospace; }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 54px 24px 170px;
  background: var(--emu-red);
}

.event { position: relative; z-index: 1; width: min(620px, 100%); text-align: center; }
.logo-link { display: inline-block; line-height: 0; }
.logo { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; }
h1 {
  margin: 18px 0 0;
  color: var(--emu-gold);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  text-shadow: -1px -1px .5px var(--red-dark), 1px 1px .5px var(--red-dark);
}
.date {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 500;
  letter-spacing: .08em;
}
.date span { color: var(--emu-gold); }
.date a { color: inherit; text-underline-offset: 4px; }

.actions { display: flex; justify-content: center; gap: 18px; margin-top: 22px; font-size: .68rem; }
.actions a { color: var(--emu-gold); text-underline-offset: 3px; }
.button-disabled { color: rgba(249, 181, 76, .45); cursor: not-allowed; }

.waves { position: absolute; inset: auto 0 0; width: 100%; height: 15vh; min-height: 100px; max-height: 150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever { from { transform: translate3d(-90px, 0, 0); } to { transform: translate3d(85px, 0, 0); } }

@media (max-width: 560px) {
  .hero { padding: 38px 18px 90px; }
  .waves { height: 50px; min-height: 50px; }
}

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