/* styles.css
   NAV (banner menu) vertically reduced by ~40%:
   - nav padding: 20px -> 8px (top/bottom)
   - menuButton padding: 12px -> 8px
   - closeMenuButton position nudged to match new compact bar
   All other code preserved (hero/banner scrubs, GSAP menu animations, sideSocial spacing,
   support section styling, etc.).
*/

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,Inter,sans-serif;background:white;color:black;overflow-x:hidden;}

/* NAV
   reduced vertical presence: padding-top/bottom lowered to 8px to make menu 40% smaller vertically
*/
nav{position:fixed;top:0;left:0;right:0;padding:8px 80px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.7);backdrop-filter:blur(20px);z-index:1200;}
nav ul{display:flex;gap:30px;list-style:none;}
nav a{text-decoration:none;color:black;}
.nav-logo img{height:18px;}

/* side social (unchanged spacing from your requested mod) */
.sideSocial{position:fixed;top:50%;left:20px;transform:translateY(-50%);display:flex;flex-direction:column;gap:28px;z-index:1100;}
.sideSocial img{width:26px;}

/* general scroll section */
.scroll-section{height:300vh;position:relative;}

/* canvas styling */
canvas{position:sticky;top:0;width:100%;height:100vh;will-change:transform;z-index:0;display:block;pointer-events:none;}

/* overlays — above canvas so frames are visible behind text */
.hero-overlay,.banner-overlay{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1000;}
.hero-overlay{z-index:1000;}
#aresValeOverlay{width:60%;opacity:0;}

/* banner text layout */
.bannerText{max-width:1000px;padding:0 40px;opacity:0;z-index:1010;pointer-events:none;color:black;}
.bannerText h1{font-size:52px;font-weight:700;margin-bottom:24px;text-align:center;}
.leadBox{width:100%;margin-bottom:18px;background:transparent;padding:0;border-radius:0;z-index:1015;}
.bannerLead{font-size:25px;line-height:1.8;margin:0;}
.bannerMiniTitle{font-size:14px;margin-top:18px;text-align:center;}
.bannerBody{font-size:16px;line-height:1.9;max-width:760px;margin:18px auto 0 auto;text-align:left;}

@media (min-width:901px){
  .bannerText{text-align:center;}
  .bannerBody{text-align:center;}
  .leadBox{background:transparent;opacity:1;transform:none;}
}

/* mobile translucent lead box */
@media (max-width:900px){
  .bannerText{padding:0 20px;}
  .bannerText h1{font-size:30px;margin-bottom:12px;}
  .leadBox{background:rgba(255,255,255,0.78);backdrop-filter:blur(6px);border-radius:12px;padding:16px;width:min(86%,640px);margin:0 auto 16px;box-shadow:0 8px 30px rgba(0,0,0,0.08);opacity:0;transform:translateY(6px);transition:opacity .35s ease, transform .35s ease;pointer-events:none;}
  .bannerLead{font-size:18px;}
  .bannerMiniTitle{font-size:16px;margin-top:14px;}
  .bannerBody{font-size:13px;text-align:left;}
}

/* BIO + other styles */
.bio-section{padding:160px 12%;}
.bio{font-size:26px;line-height:1.8;max-width:920px;}
.featuredTrack{margin-top:80px;display:flex;gap:40px;align-items:center;padding:40px;border-radius:30px;background:rgba(255,255,255,0.6);backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,0.12);max-width:900px;}
.coverArt{width:200px;border-radius:20px;}
.player{flex:1;display:flex;flex-direction:column;gap:18px;}
.trackInfo p{font-size:14px;opacity:.7;}

/* links grid */
.listenTitle{margin-top:80px;font-size:32px;max-width:920px;}
.linksGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px;max-width:70%;margin-left:auto;margin-right:auto;}
.linkCard{height:180px;display:flex;align-items:center;justify-content:center;border-radius:28px;background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,0.1);transition:.35s;}
.linkCard img{height:80px;}
.linkCard:hover{transform:translateY(-10px) scale(1.05);}

/* responsive adjustments */
@media (max-width:900px){
  nav{padding:10px 24px;} /* compact mobile padding (keeps it visually small) */
  nav ul{gap:18px;font-size:14px;}
  .sideSocial{display:none;}
  #aresValeOverlay{width:80%;}
  .bio-section{padding:120px 24px;}
  .bio{font-size:18px;line-height:1.7;}
  .featuredTrack{flex-direction:column;align-items:flex-start;gap:24px;}
  .coverArt{width:100%;max-width:260px;}
  .player{width:100%;}
  .linksGrid{grid-template-columns:repeat(2,1fr);max-width:100%;gap:24px;}
  .linkCard{height:140px;}
  .linkCard img{height:60px;}
}

/* small phones tweaks */
@media (max-width:500px){
  nav ul{display:none;}
  #aresValeOverlay{width:90%;}
  .bio{font-size:17px;}
}

/* menu button + side menu */
/* menuButton base - smaller padding to match compact nav */
.menuButton{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1400;padding:8px;border-radius:10px;align-items:center;justify-content:center;transition:transform .25s ease;box-sizing:border-box;}
.menuButton:focus{outline:2px solid rgba(0,0,0,0.12);outline-offset:3px;}
.menuButton .bar{width:28px;height:3px;background:black;border-radius:3px;display:block;transform-origin:center;transition:background .25s ease;}
.menuButton .bar2{width:20px;transition:width .25s ease;}
.menuButton.active{transform:scale(0.98);}

/* fallback css-only active state (keeps things consistent if JS fails) */
.menuButton.active .bar1{transform:rotate(45deg) translateY(6px);}
.menuButton.active .bar2{opacity:0;}
.menuButton.active .bar3{transform:rotate(-45deg) translateY(-6px);}

/* primary menu button (in nav) - visible on small screens */
#menuButton { position:relative; }

/* close button (appears when menu open) - nudged to align with compact top bar */
.closeMenuButton{
  position:fixed;
  top:10px;        /* reduced to sit in compact bar */
  right:16px;      /* slightly inward to visually match the smaller open button */
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1450;
  pointer-events:auto;
  opacity:0;
  transform:scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}

/* show close button when class present (JS toggles animation, but CSS fallback helps) */
.closeMenuButton.visible{ opacity:1; transform:scale(1); }

/* side menu styles
   NOTE: we position right:0 but translateX(100%) keeps it offscreen; `.open` class removes the translate as a fallback.
*/
.sideMenu{
  position:fixed;
  top:0;
  right:0;
  width:320px;
  height:100%;
  background:white;
  padding-top:120px;
  display:flex;
  flex-direction:column;
  gap:30px;
  z-index:1300;
  box-shadow:-24px 0 60px rgba(0,0,0,0.12);
  transform:translateX(100%); /* hidden by default */
  transition:transform .4s cubic-bezier(.2,.9,.2,1);
  pointer-events:auto;
}
.sideMenu a{
  text-decoration:none;
  color:black;
  font-size:18px;
  padding-left:40px;
  opacity:0;
  transform:translateX(24px);
  transition:opacity .25s ease, transform .28s cubic-bezier(.2,.9,.2,1);
  display:block;
}

/* fallback class: immediately show links if JS toggles .open (or if JS fails, you can add .open manually) */
.sideMenu.open{
  transform:translateX(0);
}
.sideMenu.open a{
  opacity:1;
  transform:translateX(0);
}

/* overlay to dim the page */
.menuOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(4px);
  z-index:1250;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.menuOverlay.open{
  opacity:1;
  pointer-events:auto;
}

/* when menu is open we will add classes via JS (no CSS-only reliance) */
body.no-scroll{overflow:hidden;height:100vh;}

/* small screen visibility */
@media (max-width:900px){ nav ul{display:none;} .menuButton{display:flex;} }

/* small polish */
.sideMenu a:focus{outline:2px solid rgba(0,0,0,0.08);outline-offset:6px;border-radius:6px;padding:10px 40px;}

/* audio player tweaks */
.controls{display:flex;align-items:center;gap:12px;}
#playButton{background:linear-gradient(135deg,#222,#444);border-radius:10px;padding:10px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#playButton svg{width:22px;height:22px;}
#playButton:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:3px;}
#audioSlider{width:240px;}
@media (max-width:900px){ #audioSlider{width:100%;} }

/* listen grid */
.listenTitle{margin-top:80px;font-size:32px;max-width:920px;}
.linksGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px;max-width:70%;margin-left:auto;margin-right:auto;}
.linkCard{height:180px;display:flex;align-items:center;justify-content:center;border-radius:28px;background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,0.1);transition:.35s;}
.linkCard img{height:80px;}
.linkCard:hover{transform:translateY(-10px) scale(1.05);}

/* responsive adjustments continued */
@media (max-width:900px){
  .linksGrid{grid-template-columns:repeat(2,1fr);max-width:100%;gap:24px;}
  .linkCard{height:140px;}
  .linkCard img{height:60px;}
}

/* small phones tweaks */
@media (max-width:500px){
  .linksGrid{grid-template-columns:1fr;}
}

/* support section spacing & formatting (from mod) */
#support{ text-align:center; padding:100px 20px; }
.contactBox{ margin-top:20px; }

/* footer */
footer{padding:60px;text-align:center;opacity:.6;}