/*
Theme Name: G'd Up Mu'Zik
Theme URI: https://gdupmuzik.com
Author: G'd Up Mu'Zik Entertainment
Description: A candy-coated music storefront with an animated gumball-machine navigation.
Version: 1.0.6
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: gdupmuzik
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;600;700&display=swap');

:root { --pink:#ff3f8e; --yellow:#ffd817; --red:#d90b1c; --ink:#0d090d; --cream:#fff7e7; --muted:#b9aeb5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--cream); background:var(--ink); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
button,a { font:inherit; }
a { color:inherit; }
.site-shell { min-height:100vh; background:radial-gradient(circle at 72% 18%,#5b1029 0,transparent 32%),linear-gradient(145deg,#080608,#160a10 70%,#29100b); }
.site-header { height:250px; display:flex; align-items:center; justify-content:flex-end; gap:24px; padding:0 clamp(22px,5vw,72px); border-bottom:1px solid #ffffff1c; position:relative; z-index:20; }
.brand { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; }
.brand img { display:block; width:230px; height:230px; max-width:none; max-height:none; object-fit:contain; filter:drop-shadow(0 9px 20px #000c); }
.micro-nav { display:flex; gap:24px; align-items:center; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.micro-nav a { text-decoration:none; opacity:.76; transition:.2s; }
.micro-nav a:hover { opacity:1; color:var(--yellow); }
.cart-pill { padding:10px 15px; border:1px solid #ffffff4a; border-radius:99px; }

.hero { min-height:calc(100vh - 250px); display:grid; grid-template-columns:minmax(320px,.72fr) minmax(520px,1.28fr); align-items:center; gap:clamp(20px,4vw,70px); padding:clamp(36px,5vw,80px) clamp(22px,4vw,64px) 100px; position:relative; }
.eyebrow { color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
h1,h2,h3,.machine-title { font-family:'Archivo Black',sans-serif; text-transform:uppercase; }
h1 { font-size:clamp(52px,7vw,102px); line-height:.86; letter-spacing:-.055em; margin:18px 0 24px; max-width:720px; }
h1 span { color:var(--pink); -webkit-text-stroke:1px #ffb8d4; text-shadow:5px 5px 0 #5d071f; }
.hero-copy { max-width:590px; color:#d8ccd3; font-size:clamp(16px,1.4vw,20px); line-height:1.65; }
.now-playing { margin-top:34px; display:flex; gap:15px; align-items:center; }
.play { width:56px; height:56px; border:0; border-radius:50%; background:var(--yellow); color:var(--ink); cursor:pointer; font-size:20px; box-shadow:0 0 0 8px #ffd81718; }
.track-meta small { display:block; color:var(--pink); font-size:10px; letter-spacing:.16em; font-weight:800; text-transform:uppercase; }
.track-meta strong { display:block; margin-top:3px; }

.machine-wrap { min-height:790px; display:grid; place-items:center; position:relative; }
.machine { width:min(585px,94vw); filter:drop-shadow(0 38px 52px #000c); position:relative; }
.machine-top { height:480px; border:18px solid #f6b900; border-bottom:25px solid #d99100; border-radius:48% 48% 24% 24% / 42% 42% 13% 13%; background:radial-gradient(ellipse at 28% 18%,#fff9 0 8%,transparent 9%),linear-gradient(140deg,#ffb2d066,#35152399),#36111e; overflow:hidden; position:relative; box-shadow:inset 0 0 0 7px #fff2a5,inset 0 -45px 70px #21050f; }
.machine-top::after { content:""; position:absolute; inset:18px 28px 110px 34px; border-radius:50%; border-left:12px solid #ffffff4d; transform:rotate(13deg); pointer-events:none; z-index:6; }
.machine-logo { position:absolute; z-index:7; left:50%; top:27%; transform:translate(-50%,-50%); width:205px; border-radius:50%; filter:drop-shadow(0 8px 6px #0009); }
.gumball-pile { position:absolute; inset:0; z-index:3; }
.bubble { position:absolute; border-radius:50%; width:78px; aspect-ratio:1; background:radial-gradient(circle at 27% 22%,#fff 0 7%,#fff8 8%,var(--ball) 17% 58%,color-mix(in srgb,var(--ball),#000 38%) 100%); border:2px solid #fff3; box-shadow:inset -9px -12px 14px #0003,0 5px 9px #0005; transform:rotate(var(--tilt,0deg)); transition:transform .2s; }
.b1{--ball:#ff427f;left:14px;bottom:18px}.b2{--ball:#ffd817;left:82px;bottom:10px}.b3{--ball:#8447ff;left:153px;bottom:17px}.b4{--ball:#ff7426;left:224px;bottom:9px}.b5{--ball:#23d8d0;left:295px;bottom:18px}.b6{--ball:#ff5ab2;right:15px;bottom:9px}
.b7{--ball:#f24b22;left:38px;bottom:78px}.b8{--ball:#29b573;left:110px;bottom:72px}.b9{--ball:#f7bd1f;left:181px;bottom:83px}.b10{--ball:#ec3985;left:252px;bottom:74px}.b11{--ball:#7548da;left:323px;bottom:82px}.b12{--ball:#ff792c;right:7px;bottom:73px}
.b13{--ball:#28c7d1;left:69px;bottom:138px}.b14{--ball:#ff3f8e;left:140px;bottom:145px}.b15{--ball:#ffca24;left:211px;bottom:135px}.b16{--ball:#39a760;left:282px;bottom:143px}.b17{--ball:#f05a28;right:33px;bottom:137px}
.b18{--ball:#ff5fa1;left:116px;bottom:202px}.b19{--ball:#f08124;left:188px;bottom:198px}.b20{--ball:#27c4be;left:260px;bottom:205px}.b21{--ball:#ffd817;right:76px;bottom:199px}.b22{--ball:#8249e8;left:178px;bottom:260px}.b23{--ball:#ff477e;left:254px;bottom:266px}
.machine.dispensing .gumball-pile .bubble { animation:pile-jostle .48s ease-in-out both; animation-delay:calc(var(--i, 1) * 9ms); }
.machine.dispensing .b1,.machine.dispensing .b8,.machine.dispensing .b15,.machine.dispensing .b22{--i:1}.machine.dispensing .b3,.machine.dispensing .b10,.machine.dispensing .b17{--i:2}.machine.dispensing .b5,.machine.dispensing .b12,.machine.dispensing .b19{--i:3}
@keyframes pile-jostle { 0%,100%{transform:translate(0,0) rotate(var(--tilt,0deg))}40%{transform:translate(-5px,-8px) rotate(-8deg)}70%{transform:translate(5px,-2px) rotate(7deg)} }
.machine-body { width:80%; height:255px; margin:-18px auto 0; background:linear-gradient(110deg,#ee1829,#8e0013); border:11px solid #ffcb13; border-radius:28px 28px 62px 62px; position:relative; box-shadow:inset 12px 0 #ff5862,inset -17px 0 #65000c; }
.machine-title { text-align:center; color:var(--yellow); font-size:14px; letter-spacing:.12em; margin:19px 0 9px; }
.machine-nav { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:0 30px; }
.machine-nav button { border:2px solid #fff5; color:white; background:#12090dbc; border-radius:99px; padding:10px 8px; cursor:pointer; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:.2s; }
.machine-nav button:hover,.machine-nav button.active { color:#111; background:var(--yellow); border-color:var(--yellow); transform:translateY(-2px); }
.turn-knob { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:58px; height:58px; background:radial-gradient(circle,#eee 0 20%,#777 23% 36%,#dedede 40% 53%,#252525 56%); border-radius:50%; }
.chute { position:absolute; left:50%; bottom:-44px; transform:translateX(-50%); width:126px; height:70px; background:#180a0e; border:8px solid #ffcb13; border-radius:16px 16px 42px 42px; overflow:hidden; }
.falling-ball { position:absolute; z-index:8; left:calc(50% - 34px); top:340px; width:68px; aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 27% 22%,white 0 8%,#fff9 9%,var(--drop-color,var(--pink)) 18% 60%,color-mix(in srgb,var(--drop-color,var(--pink)),#000 42%)); box-shadow:0 10px 22px #0008; animation:drop-ball 1.15s cubic-bezier(.5,.02,.5,.98) forwards; }
@keyframes drop-ball { 0%{transform:translate(80px,-80px) scale(.72) rotate(0);opacity:0}10%{opacity:1}38%{transform:translate(12px,128px) scale(.82) rotate(80deg)}62%{transform:translate(0,310px) scale(.9) rotate(170deg)}78%{transform:translate(0,450px) scale(1) rotate(230deg)}88%{transform:translate(0,482px) scale(.9,1.08) rotate(270deg)}100%{transform:translate(0,520px) scale(.7) rotate(320deg);opacity:0} }

.content-zone { padding:80px clamp(22px,5vw,72px) 110px; background:var(--cream); color:var(--ink); min-height:650px; }
.page-panel { display:none; animation:reveal .55s ease both; max-width:1250px; margin:auto; }
.page-panel.active { display:block; }
@keyframes reveal { from{opacity:0;transform:translateY(25px)} }
.section-head { display:flex; justify-content:space-between; gap:30px; align-items:end; border-bottom:3px solid #171017; padding-bottom:20px; margin-bottom:32px; }
.section-head h2 { margin:0; font-size:clamp(38px,6vw,78px); letter-spacing:-.055em; line-height:.95; }
.section-head p { max-width:420px; color:#5e5259; }
.release-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.release-card { background:#171017; color:white; border-radius:20px; overflow:hidden; position:relative; }
.release-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; transition:.45s; }
.release-card:hover img { transform:scale(1.035); }
.card-info { padding:19px 20px 21px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.card-info small { display:block; color:var(--pink); text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.buy { border:0; background:var(--yellow); color:#111; text-decoration:none; padding:10px 15px; border-radius:99px; font-weight:800; white-space:nowrap; cursor:pointer; }
.member-drops { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(420px,1.3fr); gap:34px; padding:clamp(26px,4vw,48px); margin-bottom:70px; border-radius:28px; color:white; background:radial-gradient(circle at 10% 10%,#ff3f8e55,transparent 36%),#171017; box-shadow:0 18px 40px #17101720; }
.member-badge { display:inline-block; padding:7px 11px; border-radius:99px; color:#111; background:var(--yellow); font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.member-drops h3,.music-store-head h3 { margin:16px 0 10px; font-size:clamp(29px,4vw,48px); letter-spacing:-.04em; }
.member-drops-intro p { margin:0; color:#cbbfc6; line-height:1.55; }
.member-track-list { display:grid; gap:10px; align-content:center; }
.music-row { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:14px; padding:14px; border:1px solid #ffffff24; border-radius:15px; background:#ffffff09; }
.track-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#111; background:var(--pink); font-size:20px; font-weight:900; }
.music-row-title small,.music-product-info small { display:block; margin-bottom:3px; color:var(--pink); font-size:9px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.download-button { padding:10px 14px; border-radius:99px; color:#111; background:var(--yellow); text-decoration:none; font-size:12px; font-weight:900; white-space:nowrap; }
.download-button.locked { color:white; background:#ffffff1a; border:1px solid #ffffff42; }
.join-link { justify-self:end; color:var(--yellow); font-size:12px; font-weight:800; }
.music-store-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:25px; }
.music-store-head h3 { margin-bottom:0; }
.music-store-head p { max-width:400px; color:#6c5e66; }
.music-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.music-product { overflow:hidden; border-radius:19px; color:white; background:#171017; }
.music-product-art { position:relative; overflow:hidden; aspect-ratio:16/10; }
.music-product-art::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#171017aa,transparent 60%); }
.music-product-art img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.music-product:hover img { transform:scale(1.04); }
.music-product-art span { position:absolute; z-index:2; left:15px; bottom:12px; color:var(--yellow); font-family:'Archivo Black',sans-serif; font-size:14px; line-height:.9; }
.music-product-info { padding:18px; }
.music-product-info h4 { min-height:48px; margin:6px 0 19px; font-family:'Archivo Black',sans-serif; font-size:19px; line-height:1.2; text-transform:uppercase; }
.music-product-buy { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.store-setup { grid-column:1/-1; padding:35px; border:2px dashed #17101750; border-radius:20px; text-align:center; }
.payment-modal[hidden] { display:none; }
.payment-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:20px; background:#080408d9; backdrop-filter:blur(8px); }
.payment-dialog { position:relative; width:min(500px,100%); padding:34px; border:2px solid #ff3f8e66; border-radius:25px; color:white; background:#171017; box-shadow:0 28px 90px #000; }
.payment-dialog h3 { margin:17px 0 5px; font-size:32px; }
.payment-close { position:absolute; top:12px; right:15px; border:0; color:white; background:transparent; font-size:32px; cursor:pointer; }
#square-card-container { min-height:90px; margin:25px 0 15px; padding:15px; border-radius:12px; background:white; }
.payment-submit { width:100%; padding:14px; border:0; border-radius:99px; background:var(--yellow); font-weight:900; cursor:pointer; }
.payment-submit:disabled { opacity:.55; }
.payment-status { min-height:24px; color:#ffb8d4; font-weight:700; }
.payment-status a { color:var(--yellow); }
.modal-open { overflow:hidden; }
.account-page { min-height:calc(100vh - 250px); padding:70px clamp(22px,6vw,90px) 100px; background:radial-gradient(circle at 16% 12%,#ff3f8e2e,transparent 30%),#0d090d; }
.account-panel,.account-auth { max-width:1180px; margin:auto; }
.account-panel > h1,.auth-intro h1 { margin:15px 0 18px; font-size:clamp(48px,7vw,88px); line-height:.92; letter-spacing:-.055em; }
.account-panel > p,.auth-intro p { max-width:590px; color:#c7bac1; font-size:18px; line-height:1.65; }
.account-panel h2 { margin:55px 0 18px; font-size:28px; }
.account-downloads { display:grid; gap:10px; }
.account-track { display:grid; grid-template-columns:45px 1fr auto; align-items:center; gap:15px; padding:17px 20px; border:1px solid #ffffff25; border-radius:15px; background:#ffffff0a; }
.account-track > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#111; background:var(--pink); font-weight:900; }
.account-track a { padding:9px 14px; border-radius:99px; color:#111; background:var(--yellow); text-decoration:none; font-size:12px; font-weight:900; }
.empty-library { padding:25px; border:1px dashed #ffffff35; border-radius:15px; }
.empty-library a { color:var(--yellow); }
.account-logout { display:inline-block; margin-top:45px; color:#aaa; }
.account-auth { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,7vw,90px); align-items:start; }
.auth-forms { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.auth-card { padding:27px; border:1px solid #ffffff20; border-radius:22px; background:#ffffff0a; }
.auth-card h2 { margin-top:0; font-size:26px; }
.auth-card label,.login-username label,.login-password label { display:grid; gap:7px; margin:13px 0; color:#cbbfc6; font-size:12px; font-weight:700; }
.auth-card input { width:100%; padding:12px; border:1px solid #ffffff30; border-radius:9px; color:white; background:#080608; }
.auth-card button,.auth-card input[type="submit"] { width:100%; padding:13px; border:0; border-radius:99px; color:#111; background:var(--yellow); font-weight:900; cursor:pointer; }
.login-remember label { display:flex; gap:8px; align-items:center; font-size:12px; }
.login-remember input { width:auto; }
.auth-error { color:#ff8db9; }
.bio-layout { display:grid; grid-template-columns:minmax(290px,410px) minmax(0,1fr); gap:clamp(38px,6vw,84px); align-items:start; }
.bio-profile { position:sticky; top:28px; }
.bio-profile > img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; border:5px solid #171017; box-shadow:14px 14px 0 var(--pink); }
.bio-facts { margin-top:34px; border-top:3px solid #171017; }
.bio-facts div { display:grid; grid-template-columns:110px 1fr; gap:18px; padding:15px 0; border-bottom:1px solid #17101733; }
.bio-facts small { color:#796b73; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.bio-facts strong { font-size:14px; }
.bio-copy { font-size:17px; line-height:1.75; }
.bio-copy section { position:relative; padding:0 0 44px 62px; margin-bottom:42px; border-bottom:1px solid #17101735; }
.bio-copy h3 { margin:0 0 19px; font-size:clamp(25px,3vw,40px); line-height:1.05; letter-spacing:-.035em; }
.bio-copy p { margin:0 0 18px; }
.bio-number { position:absolute; top:4px; left:0; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--yellow); font-size:12px; font-weight:900; }
.bio-copy blockquote { margin:26px 0; padding:4px 0 4px 22px; border-left:5px solid var(--pink); color:#2a1721; font-family:'Archivo Black',sans-serif; font-size:clamp(21px,2.4vw,31px); line-height:1.25; text-transform:uppercase; }
.bio-copy .bio-legacy { padding:36px 38px 22px 92px; border:0; border-radius:24px; background:#171017; color:white; }
.bio-legacy .bio-number { left:30px; top:38px; color:#111; }
.bio-legacy blockquote { color:var(--yellow); }
.shows-list { border-top:2px solid #171017; }
.show-row { display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:22px; padding:22px 5px; border-bottom:1px solid #17101742; }
.show-date { color:var(--pink); font-weight:900; text-transform:uppercase; }
.contact-box { min-height:330px; display:grid; place-items:center; text-align:center; background:var(--pink); border-radius:30px; padding:45px; }
.contact-box h3 { font-size:clamp(35px,5vw,66px); margin:0 0 15px; }
.contact-box a { display:inline-block; padding:14px 22px; background:#111; color:white; border-radius:99px; text-decoration:none; font-weight:800; }
.site-footer { padding:35px clamp(22px,5vw,72px); border-top:1px solid #ffffff20; display:flex; justify-content:space-between; color:#9b8d95; font-size:13px; }

@media(max-width:1000px){.account-auth{grid-template-columns:1fr}.hero{grid-template-columns:1fr;text-align:center}.hero-copy{margin:auto}.now-playing{justify-content:center}.machine-wrap{min-height:790px}.release-grid{grid-template-columns:1fr 1fr}.music-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.member-drops{grid-template-columns:1fr}.bio-layout{grid-template-columns:1fr}.bio-profile{position:static;display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:36px;align-items:center}.micro-nav a:not(.cart-pill){display:none}}
@media(max-width:600px){.site-header{height:210px;padding:0 16px}.brand{top:46%}.brand img{width:190px;height:190px}.micro-nav{position:absolute;right:16px;bottom:8px}.cart-pill{padding:6px 10px;font-size:10px}.release-grid,.music-catalog,.auth-forms{grid-template-columns:1fr}.account-page{min-height:calc(100vh - 210px);padding-top:45px}.account-track{grid-template-columns:40px 1fr}.account-track a{grid-column:2;justify-self:start}.member-drops{padding:24px 18px}.music-row{grid-template-columns:42px 1fr}.music-row .download-button{grid-column:2;justify-self:start}.join-link{justify-self:start}.music-store-head{display:block}.machine{transform:scale(.72)}.machine-wrap{min-height:610px;margin:-65px -85px -35px}.hero{min-height:calc(100vh - 210px);padding-top:50px}.section-head{display:block}.bio-profile{display:block}.bio-facts{margin-top:30px}.bio-copy section{padding-left:0;padding-top:54px}.bio-number{top:0}.bio-copy .bio-legacy{padding:82px 24px 18px}.bio-legacy .bio-number{left:24px;top:24px}.show-row{grid-template-columns:76px 1fr}.show-row .buy{grid-column:2}.site-footer{display:block;text-align:center}.site-footer span{display:block;margin:8px}.content-zone{padding-top:55px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.falling-ball{animation:none;display:none}.machine.dispensing .gumball-pile .bubble,.page-panel{animation:none}}