/* Theme */
:root{
  --bg:#0a0a0a;
  --card:#121212;
  --muted:#bbb;
  --text:#f5f5f5;
  --purple:#6a0dad;
  --purple-2:#3c0f66;
  --accent: linear-gradient(45deg,#6a0dad,#9a4dff);
  --glass: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(106,13,173,.25), transparent 60%),
    radial-gradient(800px 400px at 0% 10%, rgba(60,15,102,.25), transparent 50%),
    var(--bg);
}

/* Layout */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section-alt{padding:80px 0; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));}
.section-title{font-family:'Playfair Display',serif;font-size:42px;margin:0 0 24px}

/* Nav */
.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(10,10,10,0.6);backdrop-filter: blur(8px);border-bottom:1px solid rgba(255,255,255,0.08)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{font-family:'Playfair Display',serif;font-weight:700;letter-spacing:.08em;text-decoration:none;color:#fff}
#nav{display:flex;gap:22px;align-items:center}
.nav-link{color:#e6ddff;text-decoration:none;position:relative;overflow:hidden}
/* link shine */
.nav-link::before{content:'';position:absolute;left:-100%;top:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:transform .6s}
.nav-link:hover::before{transform:translateX(200%)}
.hamburger{display:none;background:none;border:0;width:36px;height:36px;position:relative}
.hamburger span{position:absolute;left:6px;right:6px;height:2px;background:#fff;border-radius:1px;transition:.3s}
.hamburger span:nth-child(1){top:10px}
.hamburger span:nth-child(2){top:17px}
.hamburger span:nth-child(3){top:24px}

@media(max-width:900px){
  #nav{display:none;position:absolute;inset:64px 16px auto 16px;background:rgba(12,12,12,0.95);padding:16px 20px;border-radius:12px;flex-direction:column;border:1px solid rgba(255,255,255,0.06)}
  .hamburger{display:block}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;
  background-image:var(--accent);color:#fff;text-decoration:none;border:0;cursor:pointer;font-weight:600;box-shadow:0 8px 30px rgba(106,13,173,.35);transition:transform .15s, box-shadow .3s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 36px rgba(106,13,173,.5)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.2)}
.btn-ghost{background:linear-gradient(180deg, rgba(106,13,173,.15), rgba(154,77,255,.08));border:1px solid rgba(255,255,255,0.12)}
.btn-small{padding:8px 14px;font-size:14px}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Hero */
.hero{position:relative;min-height:86vh;display:grid;place-items:center;overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.1) brightness(1.2)}
.hero-overlay{position:absolute;inset:0;background: radial-gradient(60% 50% at 50% 40%, rgba(0,0,0,.0), rgba(0,0,0,.6)), linear-gradient(180deg, rgba(10,10,10,.0) 0%, rgba(10,10,10,.85) 200%)}
.hero-content{position:relative;text-align:center}
.headline{font-family:'Playfair Display',serif;font-size:64px;margin:0 0 8px}

/* Hero logo container - reduced margin */
.hero-logo-container {
  width: auto;
  height: 400px;
  margin: 0 auto 1px; /* Reduced from 20px to 5px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  max-width: 100%;
  max-height: 100%;
}

/* Kicker text - reduced margin */
.kicker {
  color: var(--muted);
  margin: 0 0 10px; /* Reduced from 24px to 10px */
  font-size: 18px;
}

/* Hero buttons container */
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0; /* Ensure no extra margin */
}

.hero-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.hero-btn.active,
.hero-btn:hover {
  background-image: var(--accent);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(106,13,173,.5);
}

/* floating music notes */
.floating-notes{position:absolute;inset:0;pointer-events:none}
.floating-notes span{position:absolute;font-size:24px;opacity:.5;animation:float 12s linear infinite}
.floating-notes span:nth-child(1){left:10%;bottom:-10%;animation-delay:0s}
.floating-notes span:nth-child(2){left:30%;bottom:-20%;animation-delay:2s}
.floating-notes span:nth-child(3){left:60%;bottom:-15%;animation-delay:4s}
.floating-notes span:nth-child(4){left:80%;bottom:-25%;animation-delay:6s}
.floating-notes span:nth-child(5){left:45%;bottom:-18%;animation-delay:8s}
@keyframes float{to{transform:translateY(-120vh) rotate(30deg)}}

/* About */
.grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.media img{width:100%;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.copy p{line-height:1.8;color:#ddd}
.link-ghost{color:#cba8ff;text-decoration:none;position:relative}
.link-ghost::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:#cba8ff;transition:width .3s}
.link-ghost:hover::after{width:100%}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}.section{padding:56px 0} .headline{font-size:44px}}

/* Discography */
.tracks{display:grid;gap:16px}
.track{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;background:var(--glass);border:1px solid rgba(255,255,255,0.06);padding:16px 18px;border-radius:14px}
.track-meta h3{margin:0 0 6px}
audio{width:100%}
@media(max-width:800px){.track{grid-template-columns:1fr}.track-meta{order:2}audio{order:3}}

/* Videos */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.video-card{background:var(--glass);border:1px solid rgba(255,255,255,0.08);border-radius:14px;text-decoration:none;color:#fff;overflow:hidden;display:block}
.video-card .thumb{height:160px;background:linear-gradient(45deg, #3c0f66, #6a0dad);background-size: cover;background-position: center;}
.video-card .play{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#0006;margin:52px auto 0 auto;border:1px solid rgba(255,255,255,0.25)}
.video-card .video-meta{padding:14px 16px}
.video-card:hover{outline:1px solid rgba(255,255,255,0.20)}

/* Tour */
.tour-list{display:grid;gap:16px}
.tour-card{display:grid;grid-template-columns:160px 1fr 1fr auto;gap:16px;align-items:center;background:var(--glass);border:1px solid rgba(255,255,255,0.06);padding:16px;border-radius:14px}
.date{display:grid;grid-template-columns:repeat(3,auto);gap:8px;align-items:end}
.day{font-size:36px;font-weight:700}
.mon,.yr{color:#cbb8ff;font-weight:600}
.city{font-weight:600}
.venue{color:#e0d4ff}
@media(max-width:800px){.tour-card{grid-template-columns:1fr;justify-items:start}}

/* Merch */
.merch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.merch-card{background:var(--glass);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;text-align:center}
.merch-thumb{height:180px;border-radius:12px;background:repeating-linear-gradient(45deg, #3c0f66 0 10px,#6a0dad 10px 20px)}
.price{opacity:.9;margin:6px 0 12px}

/* Form */
.form{display:grid;gap:14px;background:var(--glass);border:1px solid rgba(255,255,255,0.06);padding:16px;border-radius:14px}
.form label{display:grid;gap:6px;color:#ddd}
.form input,.form textarea{border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:#0f0f12;color:#fff;padding:12px}
.form input:focus,.form textarea:focus{outline:1px solid #8a6aff}

/* Footer */
.footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.06);background:#0a0a0a99;backdrop-filter: blur(6px)}
.footer-managed{text-align:center; opacity:0.9; padding: 20px 0;}

/* Improved mobile responsiveness */
@media (max-width: 768px) {
  .hero-logo-container {
    width: 280px;
    height: 130px;
    margin: 0 auto 3px; /* Reduced for mobile */
  }
  
  .kicker {
    margin: 0 0 8px; /* Reduced for mobile */
    font-size: 16px;
  }
  
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-btn {
    width: 200px;
  }
  
  .tour-card, .track {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  
  .date {
    justify-content: center;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-logo-container {
    width: 220px;
    height: 100px;
    margin: 0 auto 2px; /* Further reduced for small mobile */
  }
  
  .kicker {
    margin: 0 0 6px; /* Further reduced for small mobile */
    font-size: 14px;
  }
}

/* Better focus styles for accessibility */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Merch notice styling */
.merch-notice {
  text-align: center;
  margin-bottom: 2rem;
  font-style: italic;
  color: var(--muted);
}

/* Improved image loading */
.media img {
  transition: opacity 0.3s ease;
}

.media img[data-src] {
  opacity: 0;
}

.media img.loaded {
  opacity: 1;
}


/* Gallery Section */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  aspect-ratio: 4/3;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(106,13,173,0.3);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
  transform: translateY(0);
}

.gallery-overlay h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.gallery-overlay p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

/* Contact Info */
.contact-info {
  margin: 25px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #ddd;
}

.contact-item svg {
  margin-right: 12px;
  color: #cba8ff;
}

.contact-item a {
  color: #cba8ff;
  text-decoration: none;
  transition: color 0.3s;
}

.contact-item a:hover {
  color: #fff;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cba8ff;
  text-decoration: none;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: rgba(106,13,173,0.2);
  color: #fff;
  transform: translateY(-2px);
}

/* Form enhancements */
.form label {
  position: relative;
}

.form input:focus, 
.form textarea:focus {
  box-shadow: 0 0 0 2px rgba(106,13,173,0.5);
}

/* Section subtitle */
.section-subtitle {
  text-align: center;
  color: var(--muted);
  margin: -15px 0 30px;
  font-style: italic;
}

/* Animation enhancements */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Enhanced floating notes */
.floating-notes span {
  animation: float 12s linear infinite, glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 5px rgba(106,13,173,0.5); }
  to { text-shadow: 0 0 15px rgba(106,13,173,0.8), 0 0 20px rgba(106,13,173,0.6); }
}

/* Responsive adjustments for gallery */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .social-links {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}


/* Image Modal */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.modal-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
}

.close-modal {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 30px;
  cursor: pointer;
  background: rgba(0,0,0,0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}