/* === IMPORT FONTS (at the very top) === */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  --color-bg-dark: #181820;
  --color-primary: #a259c6;
  --color-primary-light: #ff3fa8;
  --color-link-hover: #4ad0e0;
  --color-text: #d8d6e3;
}

body {
  font-family: "Poppins", sans-serif; /* Modern sans-serif */
  margin: 0;
  color: #d8d6e3; /* Muted light gray */
  /* Remove 'fixed' on mobile to avoid jank; add back in desktop media */
  background:
    url('images/snow-lamp.jpg'),
    radial-gradient(circle at center, rgba(84,19,136,0.5) 0%, rgba(39,35,67,0.8) 75%, var(--color-bg-dark) 100%),
    repeating-linear-gradient(transparent 0px, transparent 3px, rgba(0,0,0,0.1) 4px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='1' height='1' fill='%23fff' fill-opacity='0.05'/><rect x='3' y='3' width='1' height='1' fill='%23fff' fill-opacity='0.05'/></svg>");
  background-size: cover, cover, 100% 4px, 20px 20px;
  background-position: center, center, center, center;
  background-blend-mode: overlay, overlay, overlay, overlay;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
/* Yume Nikki scanline + noise overlay */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0.25;
  background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.12) 1px,
      rgba(0, 0, 0, 0) 3px,
      rgba(0, 0, 0, 0) 4px
    ),
    url("data:image/svg+xml;utf8,<svg width=\"4\" height=\"4\" viewBox=\"0 0 4 4\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill='white' fill-opacity='0.12' cx='1' cy='1' r='0.5'/><circle fill='white' fill-opacity='0.09' cx='3' cy='3' r='0.5'/></svg>");
  background-size: 100% 4px, 40px 40px;
  mix-blend-mode: screen;
}

header,
nav,
main section,
footer {
  /* Added main section styling */
  width: 100%;
  max-width: 700px;
  text-align: center;
  margin-bottom: 30px;
  padding: 15px;
  background-color: rgba(30, 28, 40, 0.7); /* Subtle very dark overlay */
  border-radius: 14px;
  border: 1px solid rgba(162, 89, 198, 0.15); /* Subtle purple border */
}

#artist-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #a259c6; /* Muted Purple */
  margin-bottom: 10px;
  box-shadow: 0 0 18px 2px rgba(162, 89, 198, 0.35); /* Subtle purple glow */
}

h1#artist-name {
  /* Specific ID for main name */
  font-family: "Press Start 2P", "Poppins", sans-serif;
  font-weight: 400;
  font-size: 2.1em;
  color: #ede9f6;
  margin-top: 0;
  margin-bottom: 5px;
  letter-spacing: 2px;
  text-shadow: 2px 0 #a259c6, -2px 0 #4ad0e0, 0 0 10px #a259c6, 0 0 18px #4ad0e0;
  /* Glitch animation on hover */
  transition: filter 0.1s;
  position: relative;
  z-index: 1;
}
h1#artist-name:hover {
  animation: yume-glitch 0.3s steps(2, jump-none) infinite;
  filter: brightness(1.2) contrast(1.1);
}
@keyframes yume-glitch {
  0% {
    text-shadow: 2px 0 #a259c6, -2px 0 #4ad0e0, 0 0 10px #a259c6,
      0 0 18px #4ad0e0;
  }
  50% {
    text-shadow: 4px 1px #ff3fa8, -4px -1px #4ad0e0, 0 0 14px #a259c6,
      0 0 16px #ff3fa8;
  }
  100% {
    text-shadow: 2px 0 #a259c6, -2px 0 #4ad0e0, 0 0 10px #a259c6,
      0 0 18px #4ad0e0;
  }
}

header p {
  /* Subtitle */
  font-family: "Poppins", sans-serif; /* Modern sans-serif */
  font-weight: 400;
  font-size: 1em;
  color: #a0a0b0; /* Softer color */
  margin-top: 0;
  margin-bottom: 20px;
}

nav {
  margin-bottom: 40px;
}

nav a {
  font-family: "Poppins", sans-serif; /* Modern sans-serif */
  font-weight: 600;
  color: #a259c6; /* Purple accent */
  margin: 0 15px;
  text-decoration: none;
  font-size: 1.1em;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-bottom-color 0.3s;
}

nav a:hover,
nav a:focus {
  color: #ff3fa8; /* Magenta on hover */
  border-bottom-color: #ff3fa8;
}

h2 {
  /* Section headers */
  font-family: "Press Start 2P", "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  color: #c9bce6;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #a259c6; /* Muted purple underline */
  text-align: left;
  letter-spacing: 1px;
}

main a {
  color: #a259c6;
  text-decoration: none;
}
main a:hover {
  color: #4ad0e0; /* Cyan hover for links in main content */
}

/* Styling for Bandcamp embeds in the Music section using CSS Grid */
section#music {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Responsive grid columns */
  gap: 20px; /* Spacing between embeds */
  justify-items: center; /* Center items within grid cells */
}

section#music iframe {
  max-width: 350px; /* Max width for each embed */
  width: 100%; /* Ensure iframe fills its grid cell width up to max-width */
  /* Removed flex-basis, grid handles column sizing */
  margin-bottom: 10px; /* Keep bottom margin */
}

.bandcamp-follow {
  display: inline-block; /* Centered by parent's text-align: center */
  vertical-align: top; /* Align with sibling inline-block elements */
  margin-bottom: 1em;
  width: 320px; /* Ensure consistent width based on iframe */
}

.bandcamp-text {
  display: block; /* Stack above iframe */
  text-align: center; /* Center text content */
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 0.5em;
}

.bandcamp-iframe {
  display: block; /* Already block, ensures it takes its own line */
  margin-left: auto; /* Center the iframe horizontally */
  margin-right: auto; /* Center the iframe horizontally */
  border: 0;
  width: 320px; /* Fixed width */
  height: 33px;
  background: transparent;
}

footer {
  margin-top: 40px;
  font-size: 0.9em;
  color: #746a88;
}

/* ===== ENHANCED ACCESSIBILITY ===== */
:focus-visible {
  outline: 2px solid var(--color-link-hover);
  outline-offset: 2px;
}

/* ===== BUTTON UTILITY ===== */
.btn-primary {
  display: inline-block;
  padding: 10px 20px;
  background-color: #7a0fff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #ff007f;
}

/* ===== DESKTOP ENHANCEMENTS ===== */
@media (min-width: 1024px) {
  body {
    background-attachment: fixed;
  }
}

@media (min-width: 1200px) {
  header,
  nav,
  main section,
  footer {
    max-width: 900px; /* widen content on large screens */
  }
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  body {
    padding: 10px; /* Reduce padding on smaller screens */
  }

  header,
  nav,
  main section,
  footer {
    padding: 10px;
    margin-bottom: 20px;
  }

  #artist-photo {
    width: 120px;
    height: 120px;
  }

  h1#artist-name {
    font-size: 1.8em;
  }

  header p {
    font-size: 0.9em;
  }

  nav a {
    display: block; /* Stack navigation links */
    margin: 10px 0; /* Adjust margin for vertical layout */
    font-size: 1em;
    text-align: center;
  }

  h2 {
    font-size: 1.1em;
  }

  /* Make latest release iframe responsive */
  section#latest-release iframe {
    width: 100%;
    max-width: 350px; /* Keep its design max-width but allow shrinking */
    height: auto; /* Adjust height proportionally or set a suitable mobile height */
    min-height: 400px; /* Ensure it doesn't become too small */
  }

  /* Ensure other iframes are responsive if not already */
  #newsletter iframe {
    max-width: 100%; /* Ensure they don't overflow */
  }

  section#newsletter > div {
    margin-bottom: 0.5em !important; /* Reduce space between embeds on smaller screens */
  }
}

@media (max-width: 480px) {
  h1#artist-name {
    font-size: 1.6em;
    text-shadow: 1px 0 #a259c6, -1px 0 #4ad0e0, 0 0 8px #a259c6,
      0 0 12px #4ad0e0;
  }
  h1#artist-name:hover {
    /* Adjust hover for smaller screens if overly complex */
    animation: none; /* Optionally disable complex animations on small screens */
    filter: brightness(1.1);
  }

  header,
  nav,
  main section,
  footer {
    max-width: 95%; /* Allow content to use more screen width */
    margin-left: auto; /* Center the content */
    margin-right: auto; /* Center the content */
  }

  section#latest-release iframe {
    min-height: 320px;
  }
}

.guestbook-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #7a0fff; /* Your vibrant purple */
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.guestbook-button:hover {
  background-color: #ff007f; /* Magenta on hover */
}