/* ============ ALAYA Soundlab ============ */

:root{
  --bg:        #e7d4f7;   /* lilac base sampled from hero image */
  --bg-deep:   #ddd0f6;
  --ink:       #4b3f6b;   /* soft violet ink */
  --ink-strong:#37305a;
  --grad-a:    #c445a4;   /* magenta */
  --grad-b:    #5a5bd8;   /* periwinkle blue */
  --card:      rgba(255,255,255,.45);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Jost', sans-serif;
  font-weight:300;
  color:var(--ink);
  background:linear-gradient(160deg,#f0dff6 0%, var(--bg) 45%, var(--bg-deep) 100%);
  line-height:1.6;
}

h1,h2{
  font-family:'Josefin Sans', sans-serif;
  font-weight:300;
  background:linear-gradient(100deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============ HERO ============ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.hero-media{
  position:absolute; top:0; right:0; bottom:0;
  width:58%;               /* image lives in the right 58% only */
  z-index:0;
}
.hero-media img,
.hero-media video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:right center;
  /* fade the left edge into the page background */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%, #000 42%);
          mask-image:linear-gradient(90deg,transparent 0%, #000 42%);
}

.nav{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:2rem clamp(1.5rem,5vw,4rem);
}
.brand{ display:flex; align-items:baseline; gap:.6rem; text-decoration:none; }
.brand img{ height:44px; width:auto; }
.brand-sub{
  font-family:'Josefin Sans',sans-serif;
  font-size:.62rem; letter-spacing:.45em;
  color:var(--ink); transform:translateY(-6px);
}
.nav-links a{
  font-family:'Josefin Sans',sans-serif;
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-strong); text-decoration:none;
  margin-left:clamp(1.2rem,3vw,2.8rem);
  transition:opacity .2s;
}
.nav-links a:hover{ opacity:.6; }
.nav-links a:focus-visible, .brand:focus-visible, .btn:focus-visible, .scroll-cue:focus-visible{
  outline:2px solid var(--grad-b); outline-offset:4px; border-radius:4px;
}

.hero-copy{
  position:relative; z-index:1;
  width:min(38rem, 52%);
  padding:clamp(2rem,8vh,6rem) clamp(1.5rem,5vw,4rem) 0;
}
.hero-copy h1{
  font-size:clamp(2rem,4.2vw,3.6rem);
  line-height:1.18;
  letter-spacing:.01em;
  overflow-wrap:break-word;
}
.rule{
  width:2.2rem; height:2px; margin:1.8rem 0;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
}
.hero-copy p{
  max-width:20rem;
  font-size:1.02rem;
  color:var(--ink);
}

.scroll-cue{
  position:relative; z-index:1;
  margin:clamp(2.2rem,4vh,3.6rem) 0 3rem clamp(1.5rem,5vw,4rem);
  width:84px; height:84px; display:block;
}
.scroll-cue svg{ width:100%; height:100%; overflow:visible; }
.scroll-cue text{
  font-family:'Josefin Sans',sans-serif;
  font-size:10px; letter-spacing:.28em;
}
.scroll-cue svg{ animation:spin 22s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){
  .scroll-cue svg{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============ SECTIONS ============ */

.section{
  padding:clamp(4rem,10vh,7rem) clamp(1.5rem,5vw,4rem);
  max-width:72rem; margin:0 auto;
}
.eyebrow{
  font-family:'Josefin Sans',sans-serif;
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink); opacity:.75; margin-bottom:.8rem;
}
.section h2{
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  margin-bottom:2.4rem;
}

.albums{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
}
.sub-eyebrow{ margin-top:3.5rem; }

/* ---- subtle song player in the hero ---- */
.player{
  display:flex; align-items:center; gap:.85rem;
  margin-top:2.2rem;
}
.play-btn{
  flex:0 0 auto;
  width:98px; height:44px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:.72rem;
  border:1.5px solid rgba(75,63,107,.4);
  background:var(--card);
  color:var(--ink-strong);
  cursor:pointer;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.play-btn:hover{
  transform:scale(1.06);
  border-color:var(--grad-a);
  box-shadow:0 6px 18px rgba(90,91,216,.22);
}
.play-btn svg{ width:19px; height:19px; transition:opacity .2s, transform .2s; }
.play-btn .ic-pause{ opacity:.42; }
.play-btn.is-playing .ic-play{ opacity:.42; }
.play-btn.is-playing .ic-pause{ opacity:1; transform:scale(1.06); }
.player-title{
  font-size:.82rem; letter-spacing:.04em;
  color:var(--ink); opacity:.75;
}
.player-title em{ font-style:italic; }

.vision{
  max-width:none;
  margin:0;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(231,212,247,.08) 0%, rgba(231,212,247,.28) 30%, rgba(231,212,247,.94) 55%, rgba(231,212,247,1) 100%),
    url("assets/about-bg-wide.webp") left center / cover no-repeat;
}
.vision > .eyebrow,
.vision > h2,
.vision-layout{
  max-width:72rem;
  margin-left:auto;
  margin-right:auto;
}
.vision-layout{
  display:block;
}
.vision-text{
  width:min(38rem, 52vw);
  margin-left:auto;
  padding-top:.35rem;
}
.vision .bio{
  max-width:38rem;
  font-size:1.12rem;
  margin-bottom:1.15rem;
}


/* ============ FOOTER ============ */

.footer{
  text-align:center;
  padding-bottom:3rem;
}
.footer-logo{ height:56px; width:auto; margin-bottom:2rem; }
.platforms{
  display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:2.5rem;
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Josefin Sans',sans-serif;
  font-size:.8rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-strong); text-decoration:none;
  padding:.9rem 1.8rem;
  border:1px solid rgba(75,63,107,.35);
  border-radius:999px;
  background:var(--card);
  backdrop-filter:blur(6px);
  transition:transform .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(90,91,216,.25); }
.btn svg{ width:1.15rem; height:1.15rem; }
.copyright{ font-size:.8rem; opacity:.65; letter-spacing:.08em; }

/* ============ MOBILE ============ */

@media (max-width:720px){
  .vision{
    background:
      linear-gradient(180deg, rgba(231,212,247,.38) 0%, rgba(231,212,247,.86) 42%, rgba(231,212,247,1) 100%),
      url("assets/about-bg-wide.webp") left top / cover no-repeat;
    padding-top:25rem;
  }
  .vision-text{
    width:100%;
    margin-left:0;
  }
  .hero-media{ width:100%; }
  .hero-media img, .hero-media video{
    opacity:.5;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%, #000 30%);
            mask-image:linear-gradient(180deg,transparent 0%, #000 30%);
  }
  .brand img{ height:34px; }
  .nav-links a{ margin-left:1rem; font-size:.68rem; }
  .hero-copy{ width:100%; padding-top:2rem; }
}

.contact-email{margin:0 0 1.25rem;font-size:1rem}
.contact-email a{color:var(--ink-strong);text-decoration:none}
.contact-email a:hover{color:var(--grad-a)}