/*
Theme Name: Dino Shadix
Theme URI: https://dinoshadix.com
Author: Dino Shadix
Description: Hand-built single-page theme for Dino Shadix — dark "acid-green" bass-music landing page with SoundCloud player, canvas EQ visualisers, booking + newsletter forms (invisible reCAPTCHA v3 + honeypot). No page builder, no framework.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: dinoshadix
*/

/* ============================ TOKENS ============================ */
:root{
  --bg:#0a0a0a;
  --panel:#0e0e0e;
  --ink:#f4f4ef;
  --muted:#9a9a93;
  --muted2:#7e7e78;
  --faint:#5f5f5a;
  --line:#242424;
  --line2:#1d1d1d;
  --acid:#c8ff00;
  --mono:'Space Mono',ui-monospace,monospace;
  --sans:'Archivo',system-ui,sans-serif;
  --display:'Anton',sans-serif;
}

/* ============================ RESET ============================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--bg);}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;color:var(--ink);}
::selection{background:var(--acid);color:var(--bg);}
/* Brand neon scrollbar */
html{scrollbar-color:var(--acid) var(--bg);scrollbar-width:thin;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--acid);border:3px solid var(--bg);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#d6ff33;}
::-webkit-scrollbar-corner{background:var(--bg);}
a{color:inherit;text-decoration:none;}
input,button,textarea{font-family:inherit;color:inherit;}
input:focus,textarea:focus{outline:none;}
::placeholder{color:var(--faint);}
img{max-width:100%;}

/* ============================ KEYFRAMES ============================ */
@keyframes ds_marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ds_idle{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes ds_blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ds_kenburns{0%{transform:scale(1.06) translate(0,0)}50%{transform:scale(1.13) translate(-1.6%,-1.2%)}100%{transform:scale(1.06) translate(0,0)}}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
  html{scroll-behavior:auto;}
}

/* ============================ SHELL ============================ */
.ds-shell{background:var(--bg);color:var(--ink);min-height:100vh;padding-bottom:80px;position:relative;overflow-x:hidden;}

/* ============================ NAV ============================ */
.ds-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 6vw;height:66px;background:rgba(10,10,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line2);}
.ds-nav__brand{display:flex;align-items:center;gap:14px;}
.ds-nav__brand img{height:26px;width:auto;display:block;}
.ds-nav__links{display:flex;align-items:center;gap:30px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;}
.ds-nav__links a{color:#cfcfca;transition:color .15s;}
.ds-nav__links a:hover{color:var(--acid);}
.ds-nav__right{display:flex;align-items:center;gap:14px;}
.ds-social{display:flex;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;}
.ds-social a{width:30px;height:30px;display:grid;place-items:center;color:#9a9a93;transition:color .15s;}
.ds-social a:hover{color:var(--acid);}
.ds-social a svg{width:15px;height:15px;display:block;fill:currentColor;}
.ds-btn-sub{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;background:var(--acid);color:var(--bg);padding:10px 16px;transition:background .15s;}
.ds-btn-sub:hover{background:#fff;}
.ds-lang{list-style:none;display:flex;align-items:center;margin:0;padding:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.ds-lang li+li{margin-left:8px;}
.ds-lang li+li::before{content:"/";color:#3a3a38;margin-right:8px;}
.ds-lang a{color:#9a9a93;transition:color .15s;}
.ds-lang a:hover,.ds-lang .current-lang a{color:var(--acid);}

/* ============================ HERO ============================ */
.ds-hero{position:relative;min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding:90px 6vw 70px;overflow:hidden;}
.ds-hero__bg{position:absolute;inset:0;background-image:url(assets/img/hero.jpg);background-size:cover;background-position:center 30%;pointer-events:none;animation:ds_kenburns 28s ease-in-out infinite;will-change:transform;}
.ds-hero__veil-v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.6) 38%,rgba(10,10,10,.8) 78%,#0a0a0a 100%);pointer-events:none;}
.ds-hero__veil-h{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.35) 55%,rgba(10,10,10,.5) 100%);pointer-events:none;}
.ds-hero__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;}
.ds-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6.4vw,92px);line-height:.92;letter-spacing:.005em;margin:0;color:var(--ink);text-transform:uppercase;}
.ds-hero h1 span{color:var(--acid);}
.ds-hero__lead{font-family:var(--mono);font-size:clamp(13px,1.4vw,15px);line-height:1.7;letter-spacing:.02em;color:var(--muted);max-width:560px;margin:28px 0 0;}
.ds-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px;}
.ds-cta-primary{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;background:var(--acid);color:var(--bg);border:none;padding:16px 26px;cursor:pointer;transition:background .15s;}
.ds-cta-primary:hover{background:#fff;}
.ds-cta-ghost{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;background:transparent;color:var(--ink);border:1px solid #333;padding:16px 26px;transition:border-color .15s;}
.ds-cta-ghost:hover{border-color:var(--ink);}

/* ============================ SECTION SHARED ============================ */
.ds-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--acid);margin-bottom:18px;}
.ds-section{scroll-margin-top:80px;}

/* ============================ TRACKS ============================ */
.ds-tracks{scroll-margin-top:80px;padding:110px 6vw 90px;max-width:1280px;margin:0 auto;}
.ds-tracks__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:48px;}
.ds-tracks__head h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,8vw,120px);line-height:.88;margin:0;text-transform:uppercase;letter-spacing:.01em;}
.ds-tracks__meta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted2);text-align:right;line-height:1.8;}
.ds-tracks__meta span{color:var(--ink);}
.ds-tracklist{border-bottom:1px solid var(--line);}
.ds-track-row{position:relative;display:grid;grid-template-columns:64px 46px minmax(150px,1.3fr) 2.2fr 96px;align-items:center;gap:22px;padding:24px 16px;border-top:1px solid var(--line);cursor:pointer;transition:background .15s;}
.ds-track-row:hover{background:#ffffff05;}
.ds-track-row__spine{position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;}
.ds-track-row.is-active .ds-track-row__spine{background:var(--acid);}
.ds-track-row__num{font-family:var(--display);font-size:40px;line-height:1;color:#2d2d2b;}
.ds-track-row.is-active .ds-track-row__num{color:var(--acid);}
.ds-track-row__play{width:44px;height:44px;border-radius:50%;border:1px solid #333;background:transparent;color:#cfcfca;cursor:pointer;display:grid;place-items:center;font-size:13px;padding:0;transition:border-color .15s;}
.ds-track-row__play:hover{border-color:var(--acid);}
.ds-track-row.is-active .ds-track-row__play{border-color:var(--acid);color:var(--acid);}
.ds-track-row.is-active.is-playing .ds-track-row__play{background:var(--acid);color:var(--bg);}
.ds-track-row__title-wrap{min-width:0;}
.ds-track-row__title{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ds-track-row__tags{display:flex;align-items:center;gap:10px;margin-top:7px;}
.ds-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--bg);background:var(--acid);padding:2px 6px;}
.ds-track-row__src{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted2);}
.ds-wave{position:relative;height:40px;display:flex;align-items:center;cursor:pointer;}
.ds-wave__bars{display:flex;align-items:center;gap:2px;width:100%;height:100%;color:#363634;}
.ds-track-row.is-active .ds-wave__bars{color:var(--acid);}
.ds-wave__bars span{flex:1;min-width:2px;background:currentColor;border-radius:1px;}
.ds-wave__head{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;box-shadow:0 0 8px var(--acid);left:0;opacity:0;}
.ds-track-row.is-active .ds-wave__head{opacity:1;}
.ds-track-row__time{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--faint);text-align:right;}
.ds-track-row.is-active .ds-track-row__time{color:var(--acid);}
.ds-tracks__hint{margin-top:32px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--faint);}

/* ============================ ABOUT ============================ */
.ds-about{scroll-margin-top:80px;background:var(--panel);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);}
.ds-about__inner{max-width:1280px;margin:0 auto;padding:110px 6vw;display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start;}
.ds-about h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.6vw,82px);line-height:.9;margin:0 0 36px;text-transform:uppercase;}
.ds-about__lead{font-size:clamp(18px,1.9vw,24px);line-height:1.55;color:#d6d6d0;max-width:620px;margin:0 0 22px;text-wrap:pretty;}
.ds-about__lead span{color:var(--acid);}
.ds-about__sub{font-size:17px;line-height:1.7;color:var(--muted);max-width:620px;margin:0;text-wrap:pretty;}
.ds-about__sub span{color:var(--ink);}
.ds-about__photo{position:relative;width:100%;aspect-ratio:4/5;background:var(--bg);overflow:hidden;}
.ds-about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(1) contrast(1.04);animation:ds_kenburns 28s ease-in-out infinite;will-change:transform;}
.ds-about__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.2) 40%,rgba(10,10,10,.55) 100%);pointer-events:none;}

/* ============================ BOOKING ============================ */
.ds-booking{scroll-margin-top:80px;max-width:1280px;margin:0 auto;padding:110px 6vw 90px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.ds-booking h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.6vw,82px);line-height:.9;margin:0 0 28px;text-transform:uppercase;}
.ds-booking__copy{font-size:18px;line-height:1.6;color:var(--muted);max-width:460px;margin:0 0 32px;}
.ds-booking__mail{font-family:var(--mono);font-size:clamp(15px,2vw,22px);font-weight:700;letter-spacing:.02em;color:var(--acid);border-bottom:2px solid var(--acid);padding-bottom:4px;transition:color .15s,border-color .15s;}
.ds-booking__mail:hover{color:#fff;border-color:#fff;}
.ds-form-card{border:1px solid var(--line);padding:34px;background:var(--panel);}
.ds-form{display:flex;flex-direction:column;gap:18px;}
.ds-field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted2);display:block;margin-bottom:8px;}
.ds-field input,.ds-field textarea{width:100%;background:var(--bg);border:1px solid #2a2a2a;color:var(--ink);padding:14px 16px;font-size:15px;transition:border-color .15s;}
.ds-field textarea{resize:vertical;}
.ds-field input:focus,.ds-field textarea:focus{border-color:var(--acid);}
.ds-form__submit{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;background:var(--acid);color:var(--bg);border:none;padding:16px;cursor:pointer;margin-top:4px;transition:background .15s;}
.ds-form__submit:hover{background:#fff;}
.ds-form__submit:disabled{opacity:.6;cursor:default;}
.ds-form__err{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#ff5b5b;}
.ds-form-done{padding:40px 8px;text-align:center;}
.ds-form-done__title{font-family:var(--display);font-size:34px;color:var(--acid);text-transform:uppercase;margin-bottom:12px;}
.ds-form-done__sub{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.06em;}

/* honeypot — visually hidden, still in DOM for bots */
.ds-hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden;}

/* ============================ NEWSLETTER ============================ */
.ds-sub{scroll-margin-top:80px;background:var(--acid);color:var(--bg);}
.ds-sub__inner{max-width:1280px;margin:0 auto;padding:90px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.ds-sub__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--bg);opacity:.6;margin-bottom:18px;}
.ds-sub h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,6.4vw,96px);line-height:.9;margin:0;text-transform:uppercase;}
.ds-sub__copy{font-size:18px;line-height:1.5;max-width:420px;margin:34px 0 0;opacity:.78;}
.ds-sub__row{display:flex;border:2px solid var(--bg);}
.ds-sub__row input{flex:1;min-width:0;background:transparent;border:none;color:var(--bg);padding:20px 22px;font-size:17px;font-weight:500;}
.ds-sub__row input::placeholder{color:rgba(10,10,10,.45);}
.ds-sub__row button{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;background:var(--bg);color:var(--acid);border:none;padding:0 30px;cursor:pointer;white-space:nowrap;transition:background .15s;}
.ds-sub__row button:hover{background:#1a1a1a;}
.ds-sub__msg{font-family:var(--mono);font-size:11px;letter-spacing:.1em;margin-top:14px;color:rgba(10,10,10,.55);}
.ds-sub__msg.is-err{color:var(--bg);}
.ds-sub-done{border:2px solid var(--bg);padding:40px 28px;background:var(--bg);color:var(--acid);}
.ds-sub-done__title{font-family:var(--display);font-size:38px;text-transform:uppercase;margin-bottom:10px;}
.ds-sub-done__sub{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:#cfcfca;}

/* ============================ FOOTER ============================ */
.ds-footer{padding:80px 6vw 64px;max-width:1280px;margin:0 auto;}
.ds-footer__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;border-bottom:1px solid var(--line2);padding-bottom:48px;}
.ds-footer__logo{width:min(420px,72vw);height:auto;display:block;}
.ds-footer__links{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;}
.ds-social--footer{margin-left:4px;}
.ds-footer__links a{padding:12px 18px;border:1px solid #2a2a2a;color:#cfcfca;transition:border-color .15s,color .15s;}
.ds-footer__links a:hover{border-color:var(--acid);color:var(--acid);}
.ds-footer__legal{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--faint);}

/* ============================ PERSISTENT PLAYER ============================ */
.ds-player{position:fixed;left:0;right:0;bottom:0;z-index:60;height:80px;background:rgba(9,9,9,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(180px,1fr);align-items:center;gap:20px;padding:0 24px;}
.ds-player__left{display:flex;align-items:center;gap:16px;min-width:0;}
.ds-player__art{width:46px;height:46px;border:1px solid #2a2a2a;display:grid;place-items:center;flex-shrink:0;background:var(--bg);}
.ds-player__art span{font-family:var(--display);font-size:22px;color:var(--acid);}
.ds-player__meta{min-width:0;}
.ds-player__title{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ds-player__status{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted2);margin-top:3px;}
.ds-player__center{display:flex;flex-direction:column;align-items:center;gap:9px;width:min(520px,44vw);}
.ds-player__controls{display:flex;align-items:center;gap:20px;}
.ds-player__skip{background:none;border:none;color:#cfcfca;cursor:pointer;font-size:14px;padding:4px;transition:color .15s;}
.ds-player__skip:hover{color:var(--acid);}
.ds-player__toggle{width:42px;height:42px;border-radius:50%;background:var(--acid);color:var(--bg);border:none;cursor:pointer;display:grid;place-items:center;font-size:14px;transition:background .15s;}
.ds-player__toggle:hover{background:#fff;}
.ds-player__progress{display:flex;align-items:center;gap:12px;width:100%;}
.ds-player__pos,.ds-player__dur{font-family:var(--mono);font-size:11px;color:var(--muted2);min-width:38px;}
.ds-player__pos{text-align:right;}
.ds-player__bar{flex:1;height:5px;background:#262626;cursor:pointer;position:relative;}
.ds-player__bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acid);}
.ds-player__bar-knob{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);left:0;}
.ds-player__right{display:flex;align-items:center;justify-content:flex-end;gap:18px;}
.ds-player__eq{width:90px;height:30px;display:block;}
.ds-player__open{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);border:1px solid #2a2a2a;padding:9px 12px;white-space:nowrap;transition:border-color .15s,color .15s;}
.ds-player__open:hover{border-color:var(--acid);color:var(--acid);}

.ds-engine{position:absolute;width:1px;height:1px;left:-9999px;top:0;opacity:0;border:0;pointer-events:none;}

[hidden]{display:none !important;}

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .ds-nav__links{display:none;}
  .ds-about__inner,.ds-booking,.ds-sub__inner{grid-template-columns:1fr;gap:40px;}
  .ds-track-row{grid-template-columns:44px 40px 1fr 70px;gap:14px;}
  .ds-wave{display:none;}
  .ds-player{grid-template-columns:1fr auto;gap:12px;padding:0 14px;}
  .ds-player__right{display:none;}
  .ds-player__center{width:auto;}
}
@media (max-width:560px){
  .ds-nav .ds-social{display:none;} /* hide only the header icons on mobile; footer FB/IG stay */
  .ds-track-row__num{font-size:30px;}
  .ds-track-row__title{font-size:18px;}
  .ds-footer__top{flex-direction:column;align-items:flex-start;}
}