/*
Theme Name: Nasotto Artist
Theme URI: https://iamnasotto.com/
Author: Nasotto
Description: Official Nasotto artist website theme featuring music releases, Spotify playback, mood quiz, artist story, and community signup.
Version: 3.0.0
Text Domain: nasotto-artist
*/

/* Nasotto artist website — mobile-first */
:root{
  --ink:#070706;--paper:#f4efe6;--gold:#d6aa53;--gold2:#f2d18b;
  --muted:#a59f94;--line:rgba(255,255,255,.13);--card:#11100e;
  --serif:"Playfair Display",Georgia,serif;--sans:"Manrope",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;background:linear-gradient(to bottom,rgba(7,7,6,.88),transparent);backdrop-filter:blur(4px)}
.logo,.footer-logo{font-weight:700;letter-spacing:.16em;font-size:1.15rem}.logo span,.footer-logo span{color:var(--gold)}
.desktop-nav{display:flex;gap:34px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}.desktop-nav a{opacity:.72;transition:.2s}.desktop-nav a:hover{opacity:1;color:var(--gold2)}
.header-actions{display:flex;align-items:center;gap:26px}.nav-join{background:none;border:0;color:white;cursor:pointer;padding:0}
.pill{border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:14px 22px;display:inline-flex;gap:10px;align-items:center;justify-content:center;background:transparent;color:white;cursor:pointer;transition:.25s}
.pill:hover{transform:translateY(-2px);border-color:var(--gold)}.pill-small{padding:10px 17px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.pill-primary{background:var(--gold);border-color:var(--gold);color:#12100c;font-weight:700}.pill-primary:hover{background:var(--gold2)}
.hero{min-height:100svh;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:120px 7vw 70px;overflow:hidden}
.hero-glow{position:absolute;width:65vw;height:65vw;border-radius:50%;right:-20vw;top:-24vw;background:radial-gradient(circle,rgba(214,170,83,.23),rgba(7,7,6,0) 65%)}
.orb{position:absolute;border:1px solid rgba(214,170,83,.24);border-radius:50%}.orb-one{width:42vw;height:42vw;right:2vw;top:18vh}.orb-two{width:27vw;height:27vw;right:9vw;top:31vh}
.hero-copy{position:relative;z-index:2;max-width:700px}.eyebrow{font-size:.69rem;letter-spacing:.28em;color:var(--gold2);font-weight:700;margin:0 0 22px}
h1,h2,h3,blockquote{font-family:var(--serif)}h1{font-size:clamp(4rem,8.6vw,9rem);line-height:.82;letter-spacing:-.06em;margin:0 0 38px;font-weight:600}h1 em{color:var(--gold);font-weight:600}
.hero-text{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.75;color:#c7c0b6;max-width:570px}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:38px}.text-link{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:5px}.text-link span{color:var(--gold);margin-left:7px}
.hero-art{position:relative;z-index:2;justify-self:end;width:min(38vw,520px)}.portrait-frame{height:min(66vh,680px);position:relative;border:1px solid rgba(214,170,83,.32);padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,0))}
.portrait-image{width:100%;height:100%;object-fit:cover;display:block}
.vertical-type{position:absolute;right:-42px;top:45%;transform:rotate(90deg);font-size:.55rem;letter-spacing:.36em;color:var(--gold2)}
.now-playing{position:absolute;left:-46px;bottom:-25px;display:flex;align-items:center;gap:16px;background:rgba(18,16,13,.91);border:1px solid rgba(214,170,83,.25);padding:15px 19px;min-width:285px;backdrop-filter:blur(16px)}
.now-playing small{display:block;font-size:.56rem;color:var(--gold2);letter-spacing:.16em;margin-bottom:4px}.now-playing strong{font-family:var(--serif)}.mini-play{width:42px;height:42px;border-radius:50%;border:0;background:var(--gold);cursor:pointer}.equalizer{margin-left:auto;display:flex;align-items:end;gap:3px;height:20px}.equalizer i{width:2px;background:var(--gold);animation:eq 1s infinite alternate}.equalizer i:nth-child(2){height:100%;animation-delay:.2s}.equalizer i:nth-child(3){animation-delay:.4s}.equalizer i:nth-child(4){animation-delay:.6s}@keyframes eq{from{height:4px}to{height:19px}}
.scroll-note{position:absolute;bottom:25px;left:7vw;font-size:.55rem;letter-spacing:.24em;color:#777}.scroll-note span{color:var(--gold);margin-left:9px}
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:#0d0c0a}.ticker-track{display:flex;width:max-content;gap:26px;align-items:center;animation:ticker 25s linear infinite;font-size:.72rem;letter-spacing:.25em}.ticker-track b{color:var(--gold)}@keyframes ticker{to{transform:translateX(-50%)}}
.section{padding:120px 7vw}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px}.section-heading h2,.community h2{font-size:clamp(3rem,6vw,6.6rem);line-height:.95;letter-spacing:-.045em;margin:0}
.release-feature{display:grid;grid-template-columns:minmax(300px,520px) 1fr;gap:7vw;align-items:center}.album-art{aspect-ratio:1;position:relative;overflow:hidden;background:radial-gradient(circle at 65% 25%,#cda854,#342916 27%,#0d0c09 67%);box-shadow:0 40px 100px rgba(0,0,0,.45)}
.second-release{margin-top:90px}
.album-art img{width:100%;height:100%;object-fit:cover;display:block}
.album-art:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.13),transparent 56%);transform:translateX(-100%);animation:shine 7s infinite}@keyframes shine{40%,100%{transform:translateX(100%)}}
.release-info h3{font-size:clamp(2.7rem,5vw,5rem);margin:0 0 20px}.release-info>p:not(.eyebrow){color:#aaa398;line-height:1.8;max-width:650px}.stream-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}.platform-button{padding:14px 20px;border:1px solid var(--line);border-radius:100px;font-size:.78rem}.platform-button:hover{border-color:var(--gold)}
.track-list{border-top:1px solid var(--line)}.track{width:100%;display:grid;grid-template-columns:35px 1fr auto;gap:12px;text-align:left;background:none;color:white;border:0;border-bottom:1px solid var(--line);padding:17px 2px;cursor:pointer}.track span{color:#666}.track em{font-style:normal;color:var(--gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.track:hover b{color:var(--gold2)}
.spotify-embed{margin-top:90px;max-width:1000px;margin-left:auto;margin-right:auto}
.videos{background:#0c0b09}
.sound{background:#0c0b09}
.sound-feature{display:grid;grid-template-columns:1.3fr .7fr;gap:6vw;align-items:start}
.sound-copy p{color:#c7c0b6;line-height:1.9;margin:0 0 24px;max-width:640px}
.sound-copy p em{color:var(--gold2);font-style:normal}
.sound-tags{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;padding:28px;border:1px solid rgba(214,170,83,.28);background:linear-gradient(145deg,#12100d,#090807)}
.sound-tags span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:9px 16px;color:#c7c0b6}
.join-modal-card{max-width:460px;width:100%;background:linear-gradient(145deg,#12100d,#090807);border:1px solid rgba(214,170,83,.28);padding:clamp(30px,5vw,56px)}.join-modal-card h2{font-size:clamp(2.6rem,5vw,3.6rem);margin:14px 0 18px}.join-modal-card>p:not(.eyebrow){color:#aaa398;line-height:1.7;margin-bottom:28px}
.manifesto{min-height:86vh;display:grid;place-items:center;text-align:center;padding:100px 5vw;position:relative;background:radial-gradient(circle at 50% 45%,rgba(214,170,83,.15),transparent 52%)}.manifesto-inner{max-width:1100px}.manifesto blockquote{font-size:clamp(3.2rem,7.4vw,8rem);line-height:.97;letter-spacing:-.045em;margin:25px 0}.manifesto blockquote em{color:var(--gold)}.manifesto-inner>p:not(.eyebrow){max-width:650px;margin:30px auto;color:#aaa398;line-height:1.9}
.mood-card{max-width:760px;margin:0 auto;border:1px solid rgba(214,170,83,.28);padding:clamp(30px,5vw,60px);background:linear-gradient(145deg,#12100d,#090807)}
.mood-progress{height:2px;background:var(--line);margin-bottom:clamp(30px,5vw,50px);position:relative;overflow:hidden}.mood-progress span{position:absolute;inset:0;width:20%;background:var(--gold);transition:width .4s ease}
.mood-prompt{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 30px;letter-spacing:-.01em}
.mood-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mood-option{text-align:left;padding:18px 20px;border:1px solid var(--line);background:transparent;color:white;cursor:pointer;transition:.2s;font-size:.95rem}
.mood-option:hover{border-color:var(--gold);color:var(--gold2);transform:translateY(-2px)}
.mood-result h3{font-size:clamp(2.2rem,4vw,3.2rem);margin:14px 0 16px}
.mood-result-note{color:#aaa398;line-height:1.8;max-width:520px;margin-bottom:32px}
.mood-result-tracks{display:grid;gap:2px;margin-bottom:32px}
.mood-result-tracks .track{background:rgba(255,255,255,.02)}
#moodRestart{background:none;border:0;cursor:pointer}
.community-card{border:1px solid rgba(214,170,83,.28);padding:clamp(30px,6vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;background:linear-gradient(145deg,#12100d,#090807)}.community-card>div>p:last-child{color:#aaa398;line-height:1.8;max-width:550px}
.signup-form{display:grid;gap:15px}.signup-form input{width:100%;background:transparent;border:0;border-bottom:1px solid #575249;padding:18px 3px;color:white;outline:none}.signup-form input:focus{border-color:var(--gold)}.signup-form small{color:#777}.social-row{display:grid;grid-template-columns:repeat(5,1fr);margin-top:30px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.social-row a{padding:25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.social-row a:hover{background:#11100e}.social-row b{color:var(--gold)}
footer{padding:55px 7vw;display:grid;grid-template-columns:1fr auto auto;gap:30px;align-items:center;border-top:1px solid var(--line);color:#777}footer p{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.footer-logo{color:white}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:none;place-items:center;padding:5vw}.modal.open{display:grid}.modal-close{position:absolute;right:3vw;top:2vw;background:none;border:0;color:white;font-size:3rem;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}
.player-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#0d0c0a;border-top:1px solid rgba(214,170,83,.28);box-shadow:0 -12px 40px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .35s ease}
.player-bar.open{transform:translateY(0)}
.player-bar-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px clamp(14px,3vw,20px)}
.player-bar-inner iframe{flex:1;height:80px;border:0;border-radius:10px;display:block}
.player-close{flex-shrink:0;background:none;border:0;color:var(--gold2);font-size:1.7rem;line-height:1;cursor:pointer;padding:4px 6px}
.player-close:hover{color:var(--gold)}
@media(max-width:520px){.player-bar-inner iframe{height:80px}.player-bar-inner{padding:8px 12px}}
@media(max-width:850px){
 .desktop-nav{display:none}.site-header{padding:18px 5vw}.hero{grid-template-columns:1fr;padding:110px 6vw 90px;min-height:auto}.hero-copy{padding-bottom:65px}h1{font-size:clamp(4.2rem,20vw,7rem)}.hero-art{justify-self:center;width:82vw}.portrait-frame{height:62vh}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.scroll-note{display:none}
 .section{padding:85px 6vw}.section-heading{align-items:flex-start;gap:30px;flex-direction:column}.release-feature{grid-template-columns:1fr;gap:45px}.spotify-embed{margin-top:60px}.sound-feature{grid-template-columns:1fr;gap:30px}
 .community-card{grid-template-columns:1fr;gap:35px}.social-row{grid-template-columns:1fr 1fr}footer{grid-template-columns:1fr;align-items:start}.now-playing{left:-14px}.vertical-type{display:none}
 .mood-options{grid-template-columns:1fr}
}
@media(max-width:520px){
 .pill-small{font-size:0;width:42px;height:42px;padding:0}.pill-small:after{content:"▶";font-size:.8rem}.hero-art{width:90vw}.portrait-frame{height:55vh}.now-playing{min-width:255px}.section-heading h2,.community h2{font-size:3.5rem}.social-row{grid-template-columns:1fr}.community-card{padding:30px 22px}.stream-buttons{flex-direction:column}.stream-buttons>*{width:100%}
}