/* Base layout */
:root {
  --bg: #000;
  --fg: #fff;
}
* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.center {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  padding: 1rem;
}

/* Logo: occupies 50% of the viewport height */
.logo {
  max-height: 50vh;
  width: auto;
  height: auto;
  opacity: 0;
  animation: fadeIn 3s ease forwards; /* 0–3s */
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.6));
}

/* Messages with staggered fades */
.msg {
  opacity: 0;
  margin: 0;
}
.msg-1 {
  font-size: clamp(24px, 4vw, 40px);
  animation: fadeIn 4s ease forwards; /* 2–6s */
  animation-delay: 2s;
}
.msg-2 {
  font-size: clamp(14px, 2.5vw, 18px);
  animation: fadeIn 4s ease forwards; /* 5–9s */
  animation-delay: 5s;
}
.msg-2 a { color: var(--fg); text-decoration: underline }

/* Fade-in keyframes */
@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo, .msg { animation: none; opacity: 1 }
}