/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* === Base Layout === */
html, body {
  height: 100%;
  margin: 0;
}

body {
  background: url("https://martyrdtheband.com/site-images/Martyrd-wallpaper-2.webp") no-repeat center center fixed;
  background-size: cover;
  color: #E3DAC9;
  font-family: 'Courier Prime', "Apple Color Emoji", "Segoe UI Emoji", 'Courier New', Courier, monospace;
  font-weight: 400;
  text-align: center;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  padding-bottom: 60px;
}

/* === Navigation === */
.nav-container {
  width: 90%;
  max-width: 900px;
  margin: 20px auto;
}
  
nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap; /* ✅ Allows nav links to wrap on small screens */
  padding: 15px 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 2px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav a {
  color: #E3DAC9;
  background: rgba(0, 0, 0, 0);
  border-radius: 20px;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.95rem;
  position: relative;
  transition: all 0.3s ease;
}

nav a:hover {
  background-color: #E3DAC9;
  color: #000;
  box-shadow: 0 0 10px #E3DAC9, 0 0 30px #E3DAC9;
  text-shadow: none;
}

nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* === Content Window === */

.martyrd-logo-transparent {
  width: 80%;
  max-width: 900px;
  height: auto;
  margin-bottom: 20px;
  background: url("https://martyrdtheband.com/site-images/martyrd_logo_transparent.png") no-repeat center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.content-section {
  width: 60%; /* narrower for a more vertical feel */
  max-width: 600px; /* smaller max width to reinforce headstone shape */
  height: 80vh; /* taller to enhance the vertical silhouette */
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #E3DAC9;
  border-radius: 100% 100% 0 0 / 70% 70% 0 0; /* exaggerated top curve */
  box-shadow: 0 0 20px #E3DAC9, 0 0 40px #E3DAC9;
  align-items: center;
  justify-content: center;
  line-height: 1.8;
  padding: 30px 20px;
  background-color: rgba(0, 0, 0, 0.3);
}

.content {
  font-size: 1.1rem;
  margin-bottom: 10px;
  margin: 10px;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #555;
  color: #E3DAC9;
}


/* === RiseLetter animation === */
.riseLetter span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: riseLetter 7.77s ease-in-out forwards;
  font-size: 3.5rem;
  margin: 10px 0 15px;
  color: #E3DAC9;
  text-shadow:
  0 0 5px #431579,
  0 0 10px #431579,
  0 0 20px #431579,
  0 0 40px #431579;
}

.riseLetter span:nth-child(1) { animation-delay: 0.8s; }
.riseLetter span:nth-child(2) { animation-delay: 1.2s; }
.riseLetter span:nth-child(3) { animation-delay: 1.6s; }
.riseLetter span:nth-child(4) { animation-delay: 2.0s; }
.riseLetter span:nth-child(5) { animation-delay: 2.4s; }
.riseLetter span:nth-child(6) { animation-delay: 2.8s; }
.riseLetter span:nth-child(7) { animation-delay: 3.2s; }

@keyframes riseLetter {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  10%, 30% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* idle state for pause */
  }
}

/* === Typewriter === */
.typewriter span {
  display: inline-block;
  overflow: hidden;
  border-right: 1.5px solid #E3DAC9; /* cursor */
  white-space: nowrap;
  margin: 0.3em auto;
  padding: 0 2rem;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  font-weight: 400;
  color: #E3DAC9;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #555;
  max-width: none;
  opacity: 0;
  animation:
    fadeInAndType 7s steps(45, end) 4.7s forwards,
    blink-caret 0.75s step-end 11s 2 forwards;
}

@keyframes fadeInAndType {
  0% {
    width: 0;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #E3DAC9 }
}

/* === Responsive Design === */
@media (max-width: 600px) {
  .nav-container {
    width: 95%;
    padding: 10px;
  }

  nav {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  nav a {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
  
  .martyrd-logo-transparent {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 20px auto 0;
    display: block;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px 0;
  }

  @media (max-width: 500px) {
  .content-section {
    width: 90%;
    height: auto;
    border-radius: 100% 100% 0 0 / 60% 60% 0 0; /* exaggerated top curve */
    padding: 20px 10px;
    margin-top: 50px;
  }

  .riseLetter span {
    font-size: 2.2rem;
  }

  .typewriter span {
    font-size: 0.85rem;
    padding: 0 1rem;
  }
}
  
/* === Footer === */
.footer {
  background: rgba(0, 0, 0, 0.4);
  color: #ccc;
  text-align: center;
  padding: 20px 0;
  margin-bottom: 20px;
  font-size: 12px;
  width: 100%;
}