/* src/style.css */
:root {
  --bg-primary: #0d1117;
  --bg-secondary: #1c2028;
  --text-primary: #e0ddd8;
  --text-secondary: #8a8f9a;
  --text-muted: #556;
  --contour-line: #c8d8e0;
  --accent: #c45a3c;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  -webkit-font-smoothing: antialiased;
  flex-direction: column;
  font-family: DM Sans, sans-serif;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hero {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items:  center;
  min-height: 70vh;
}

.hero-logo svg {
  width: min(500px, 85vw);
  height: auto;
}

.hero-logo svg text {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.hero-logo svg path {
  opacity: 0;
  animation: contourReveal 1.6s ease-out forwards;
}

.hero-logo svg path:first-child {
  animation-delay: .2s;
}

.hero-logo svg path:nth-child(2) {
  animation-delay: .5s;
}

.hero-logo svg path:nth-child(3) {
  animation-delay: .8s;
}

.hero-logo svg text {
  opacity: 0;
  animation: fadeIn 1.2s ease-out forwards;
}

.hero-logo svg text:first-of-type {
  animation-delay: .6s;
}

.hero-logo svg text:last-of-type {
  animation-delay: 1.2s;
}

@keyframes contourReveal {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.message {
  text-align: center;
  padding: 0 1.5rem 6rem;
}

.message p {
  color: var(--text-secondary);
  letter-spacing: .01em;
  font-size: 1.125rem;
  font-weight: 400;
}

footer {
  text-align: center;
  border-top: 1px solid #c8d8e00f;
  padding: 2rem 1.5rem;
}

.footer-mark {
  color: var(--text-muted);
  letter-spacing: .08em;
  font-family: Space Mono, monospace;
  font-size: .75rem;
}

@media (max-width: 480px) {
  .message p {
    font-size: 1rem;
  }
}