/* Recreates the Base44 (framer-motion) entrance animations without React.
   Content is always in the HTML; only when JS is running do elements start hidden. */
html.js [data-rv]{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.22,1,.36,1) var(--d,0s),transform 1s cubic-bezier(.22,1,.36,1) var(--d,0s)}
html.js [data-rv].in{opacity:1;transform:none}
html.js [data-intro]{opacity:0;transform:translateY(var(--y,16px))}
html.js.ready [data-intro]{opacity:1;transform:none;transition:opacity var(--t,1.2s) cubic-bezier(.22,1,.36,1) var(--d,0s),transform var(--t,1.2s) cubic-bezier(.22,1,.36,1) var(--d,0s)}
[data-parallax],[data-fade]{will-change:transform,opacity}
#mobile-nav{transition:height .5s cubic-bezier(.22,1,.36,1),opacity .5s}
#lightbox{transition:opacity .5s}
#lightbox.show{opacity:1}#lightbox:not(.show){opacity:0}
#lightbox figure{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
#lightbox:not(.show) figure{opacity:0;transform:scale(.96)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html.js [data-rv],html.js [data-intro]{opacity:1;transform:none;transition:none}}
/* Music catalogue: clean, tight rows; each release opens to play inline (Spotify embed injected on open, removed on close) */
.rel{border-bottom:1px solid rgba(255,255,255,.06);transition:background-color .6s;scroll-margin-top:88px}
.rel[open]{background:linear-gradient(90deg,rgba(255,45,149,.045),rgba(157,80,187,.02) 60%,transparent)}
.rel-sum{display:flex;align-items:center;gap:.9rem;padding:.8rem .2rem;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;outline:none}
.rel-sum::-webkit-details-marker{display:none}.rel-sum::marker{content:''}
.rel-sum:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,45,149,.7);border-radius:10px}
.rel-cover{position:relative;flex:none;width:52px;height:52px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,#2a0f22,#151022);box-shadow:0 6px 24px -12px rgba(255,45,149,.65)}
.rel-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.rel[open] .rel-cover img{transform:scale(1.06)}
.rel-meta{display:flex;min-width:0;flex:1;flex-direction:column;gap:.32rem}
.rel-title{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:500;line-height:1.25;letter-spacing:.01em;color:rgba(255,255,255,.92);transition:color .5s}
.rel-feat{font-size:12px;font-weight:300;letter-spacing:.01em;color:rgba(255,255,255,.42)}
.rel[open] .rel-title{color:#ff5fae}
.rel-top{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem;overflow:hidden;white-space:nowrap;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.rel-yr{color:rgba(255,255,255,.36)}
.rel-new{border:1px solid rgba(255,45,149,.55);border-radius:999px;padding:.12rem .45rem;line-height:1.2;color:#ff2d95;letter-spacing:.24em}
.rel-play{display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:rgba(255,255,255,.8);transition:all .5s}
.rel-play svg{width:13px;height:13px}
.rel-play .i-play{margin-left:2px}.rel-play .i-close,.rel[open] .rel-play .i-play{display:none}.rel[open] .rel-play .i-close{display:block}
.rel[open] .rel-play{background:#ff2d95;border-color:#ff2d95;color:#08080d;box-shadow:0 0 26px -6px rgba(255,45,149,.9)}
.rel-panel{padding:.1rem .2rem 1.3rem}
.rel[open] .rel-panel{animation:rel-in .6s cubic-bezier(.22,1,.36,1)}
@keyframes rel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rel-embed{box-sizing:content-box;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(110deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 70%);background-size:200% 100%;animation:rel-shimmer 1.6s linear infinite;box-shadow:0 0 70px -30px rgba(255,45,149,.55)}
.rel-embed:has(iframe){animation:none;background:rgba(255,255,255,.03)}
.rel-embed iframe{display:block;width:100%;height:100%;border:0;border-radius:12px}
@keyframes rel-shimmer{to{background-position:-200% 0}}
.rel-tracks{margin-top:1rem;display:grid;gap:.45rem}
.rel-tracks li{display:flex;align-items:center;gap:1rem}
.rel-tracks li span:first-child{width:1.5rem;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.3)}
.rel-tracks li span:last-child{font-size:14px;font-weight:300;color:rgba(255,255,255,.7)}
.rel-links{margin-top:.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.rel-links a{color:rgba(255,255,255,.58);transition:color .5s}.rel-links a:hover{color:#ff2d95}
.rel-featline{margin-top:.5rem;font-size:13px;font-weight:300;letter-spacing:.02em;color:rgba(255,255,255,.5)}
@media (min-width:768px){
  .rel-sum{gap:1.4rem;padding:1rem .5rem}
  .rel-cover{width:64px;height:64px;border-radius:12px}
  .rel-title{font-size:17px}
  .rel-feat{font-size:13px}
  .rel-play{width:42px;height:42px}
  .rel-panel{padding:0 .5rem 1.8rem calc(64px + 1.9rem);max-width:calc(64px + 1.9rem + 40rem)}
}
@media (hover:hover){
  .rel:hover{background:linear-gradient(90deg,rgba(255,45,149,.045),rgba(157,80,187,.02) 60%,transparent)}
  .rel:hover .rel-cover img{transform:scale(1.06)}
  .rel:hover .rel-title{color:#ff5fae}
  .rel:hover .rel-play{border-color:rgba(255,45,149,.8);color:#fff}
}
@media (prefers-reduced-motion:reduce){.rel[open] .rel-panel,.rel-embed{animation:none}}
/* Mobile: calmer section headings */
@media (max-width:767px){
  .sec-k{font-size:1.3rem;line-height:1.6rem}
  .sec-h{font-size:1.85rem;letter-spacing:.01em}
  .sec-done{font-size:1.9rem}
}

/* Tight rhythm: no dead space between sections */
main>section.scroll-mt-24.py-24{padding-top:2.25rem;padding-bottom:2.25rem}
main>section.scroll-mt-24.py-24 .mb-10{margin-bottom:1.75rem}
main>section#release.py-24{padding-top:3rem}
.sec-div{opacity:.7}
.planet-mark{font-size:1.15rem;line-height:1;filter:drop-shadow(0 0 8px rgba(255,45,149,.45))}
.about-photo{aspect-ratio:4/5;margin-bottom:2rem}
.about-photo img{object-position:50% 30%}
footer.py-16{padding-top:2.75rem;padding-bottom:2.5rem}
@media (min-width:768px){
  main>section.scroll-mt-24.py-24{padding-top:3.5rem;padding-bottom:3.5rem}
  main>section.scroll-mt-24.py-24 .mb-10{margin-bottom:2.25rem}
  main>section#release.py-24{padding-top:4.5rem}
  .about-photo{aspect-ratio:4/3;max-width:36rem;margin-bottom:2.5rem}
  .about-photo img{object-position:50% 32%}
}

/* Hero: words sit low so his face stays clear */
#home{align-items:flex-start}
#home .hero-copy{padding-top:44vh;padding-top:44svh;padding-bottom:7.25rem}
#home .hero-h1{margin-top:.7rem}
#home .hero-tag{margin-top:1rem}
#home .hero-cta{flex-direction:row;margin-top:1.6rem;gap:.75rem}
#home .hero-cta a{padding-left:1.45rem;padding-right:1.45rem}
@media (min-width:1024px){
  #home .hero-media{left:30%;overflow:hidden}
  #home .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,#08080d 0%,rgba(8,8,13,.55) 22%,rgba(8,8,13,0) 45%);pointer-events:none}
  #home .hero-copy{margin-left:0;max-width:52rem;padding-left:4.5rem;padding-top:48vh;padding-top:48svh;padding-bottom:6rem;text-align:left}
  #home .hero-h1{font-size:clamp(4rem,6.4vw,7rem)}
  #home .hero-tag{margin-left:0}
  #home .hero-cta{justify-content:flex-start;margin-top:2.2rem}
  #home .hero-cta a{padding-left:2rem;padding-right:2rem}
}