/* GLOBAL */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #0f0f0f;
  color: #eaeaea;
}
h1, h2, h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}
.grain {
  background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}

/* Top bar with logo + trigger */
.nav-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
  z-index: 201;
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 1px;
  color: #ff4b91;
}

.nav-trigger {
  font-size: 2.2rem;
  font-weight: bold;
  cursor: pointer;
  color: #ff4b91;
  user-select: none;
}

/* Full overlay nav */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #ff4b91; /* Solid pink */
  overflow-x: hidden;
  transition: width 0.4s ease;
  z-index: 200;
}

.overlay.open {
  width: 100%;
}

/* Menu links aligned left */
.overlay-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left aligned */
  padding: 5rem 3rem;
}

.overlay-content a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem; /* big bold */
  font-weight: bold;
  color: #0f0f0f; /* black text for contrast */
  text-decoration: none;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  transition: color 0.2s ease;
}

.overlay-content a:hover {
  color: #ffffff; /* white on hover */
}

/* HERO */
.hero {
  height: 100vh;
  background: url('hero.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-overlay {
  background: rgba(0,0,0,0.6);
  padding: 2rem;
  text-align: center;
}
.hero-overlay h1 { color: #00f5d4; font-size: 3rem; }
.hero-overlay p { color: #eaeaea; font-size: 1.2rem; }

/* SECTIONS */
.section {
  padding: 6rem 2rem;
  max-width: 1200px;
  margin: auto;
}

/* ABOUT */
.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.about-photo {
  background-size: cover;
  background-position: center;
  filter: grayscale(20%);
  transition: filter 0.4s;
  aspect-ratio: 4/5;
}
.about-photo:hover { filter: none; }
.read-more { color: #ff4b91; text-decoration: none; }
.read-more:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .about-container { grid-template-columns: 1fr; }
}

/* ARTISTS */
.artist-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 2rem;
  scrollbar-width: none;
}
.artist-scroll::-webkit-scrollbar { display: none; }
.artist-card {
  position: relative;
  width: 250px;
  aspect-ratio: 1/1;
  overflow: hidden;
  flex-shrink: 0;
}
.artist-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transition: filter 0.4s;
  z-index: 1;
}
.artist-card:hover .artist-img {
  filter: grayscale(0%) blur(2px);
}
.artist-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
  z-index: 2;
}
.artist-card:hover .artist-overlay { opacity: 1; }
.artist-overlay span {
  color: #eaeaea;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* SERVICES */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 2rem;
}
.service-card {
  background: #1a1a1a;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.2s, border-color 0.2s;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: #ff4b91;
}

/* EVENTS */
.events-placeholder {
  background: #1a1a1a;
  padding: 2rem;
  text-align: center;
  color: #999;
}

/* CONTACT */
form input, form textarea {
  background: #000;
  color: #eaeaea;
  border: 1px solid #444;
  padding: 0.75rem;
  width: 100%;
  margin-bottom: 1rem;
}
button {
  background: #ff4b91;
  color: #eaeaea;
  padding: 0.75rem 1.5rem;
  border: none;
  font-family: 'Bebas Neue', sans-serif;
  cursor: pointer;
  letter-spacing: 1px;
}
button:hover { background: #e03a7a; }

/* FOOTER */
footer {
  background: #0a0a0a;
  color: #777;
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
}

/* Services dropdown submenu */
.services-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  display: flex;          /* keep flex */
  flex-direction: column; /* stack vertically */
}
.services-submenu a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: black
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.services-submenu a:hover {
  color: white; /* white on hover */
}

/* When submenu is open */
.services-submenu.open {
  max-height: 500px; /* enough height for items */
  opacity: 1;
}

.services-toggle .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-left: 6px;
}

/* Rotate arrow up when open */
.services-toggle.open .arrow {
  transform: rotate(180deg);
}

/* FADE-IN INITIAL HIDE */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }