:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: #17191a;
  color: #e4e4e4;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 28px 24px;
  background:
    radial-gradient(ellipse at 50% 43%, rgb(120 125 79 / 8%), transparent 58%),
    radial-gradient(ellipse at 50% 50%, transparent 25%, rgb(0 0 0 / 20%) 100%);
}

.card {
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 5vh, 48px);
}

.logo-enter {
  width: min(100%, 390px, 53svh);
  animation: arrive 1200ms cubic-bezier(.2, .7, .2, 1) both;
}

.logo {
  position: relative;
  animation: breathe 4.8s ease-in-out 1.2s infinite;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    transparent 38%,
    rgb(112 128 66 / 65%) 46%,
    rgb(244 255 210 / 95%) 50%,
    rgb(112 128 66 / 45%) 54%,
    transparent 62%
  ) 0 100% / 100% 300% no-repeat;
  -webkit-mask: url("./rebringer-logowhite.svg") center / contain no-repeat;
  mask: url("./rebringer-logowhite.svg") center / contain no-repeat;
  animation: light-sweep 4.8s ease-in-out 1.2s infinite;
}

.links {
  width: 100%;
  display: flex;
  gap: 12px;
  animation: arrive 1000ms cubic-bezier(.2, .7, .2, 1) 180ms both;
}

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid #45483a;
  border-radius: 3px;
  color: #e7e8df;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .015em;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.link-steam { flex: 1.15; background: #32372a; }
.link-discord { flex: 1; background: rgb(24 26 26 / 40%); border-color: #383c37; }
.link span { color: #a8ae8c; font-size: 17px; line-height: 1; }

@media (hover: hover) {
  .link:hover { background: #3e4432; border-color: #858d61; color: #fff; }
}

.link:focus-visible { outline: 2px solid #bdc895; outline-offset: 5px; }
.link:active { background: #454c37; }

@keyframes arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* A slow pulse and an olive light sweep, followed by a quiet pause. */
@keyframes breathe {
  0%, 75%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgb(157 178 100 / 0%));
  }
  35% {
    transform: scale(1.025);
    filter: drop-shadow(0 0 18px rgb(157 178 100 / 28%));
  }
}

@keyframes light-sweep {
  0% { background-position: 0 100%; opacity: 0; }
  8% { opacity: 1; }
  52% { background-position: 0 0%; opacity: 1; }
  60%, 100% { background-position: 0 0%; opacity: 0; }
}

@media (max-width: 480px) {
  .card { max-width: 330px; gap: 32px; }
  .logo-enter { width: min(88%, 45svh); }
  .links { flex-direction: column; gap: 12px; }
  .link { flex: auto; width: 100%; }
}

@media (max-height: 440px) and (min-width: 481px) {
  body { padding-block: 20px; }
  .card { gap: 20px; }
  .logo-enter { width: 50svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .logo::after { display: none !important; }
}