
/* ZUUL FX MUSIC V1.7 — chronological discography, legacy-safe.
   No JS required. Built for old and current browsers. */
body.music-v17 { background:#030303; color:#f1f1f1; }
body.music-v17 .container { max-width:1320px; }

/* Rob-Zombie-inspired top-right social access, kept intentionally simple for old browsers */
.header-socials {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.header-socials a {
  display:inline-block;
  min-width:34px;
  padding:6px 7px 5px;
  border:1px solid #2b2b2b;
  background:#090909;
  color:#cfcfcf;
  text-align:center;
  font-size:10px;
  line-height:1;
  letter-spacing:1px;
  font-weight:bold;
}
.header-socials a:hover { color:#fff; border-color:#b20c0c; background:#140505; }
body.music-v17 .lang-switch { margin-left:10px; }

.music-hero {
  position:relative;
  min-height:510px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid #242424;
  background:#040404;
}
.music-hero:before {
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background-image:url('../img/music-bg-demo.jpg');
  background-size:cover;
  background-position:center 28%;
  background-repeat:no-repeat;
  opacity:.10;
}
.music-hero:after {
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background:linear-gradient(to right, rgba(0,0,0,.94), rgba(0,0,0,.73));
}
.music-hero .container { position:relative; z-index:2; padding-bottom:62px; }
.music-hero h1 {
  margin:0;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size:94px;
  line-height:.92;
  text-transform:uppercase;
}
.music-hero h1 span { color:#e01010; }
.music-hero p { max-width:760px; color:#c9c9c9; font-size:18px; margin:18px 0 0; }
.music-jump {
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.music-jump a {
  border:1px solid #353535;
  background:#090909;
  padding:9px 11px;
  font-size:11px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
}
.music-jump a:hover { border-color:#a50d0d; color:#fff; }

.disco-section {
  position:relative;
  overflow:hidden;
  padding:90px 0;
  border-bottom:1px solid #242424;
}
.disco-section .container { position:relative; z-index:2; }
.disco-section--current { background:#080606; }
.disco-section--current:before {
  content:"";
  position:absolute; inset:0;
  background:url('../img/nothing-is-real-2026.jpg') center/cover no-repeat;
  opacity:.075;
}
.disco-section--current:after {
  content:"";
  position:absolute; inset:0;
  background:rgba(4,4,4,.78);
}
.disco-section--hplus { background:#031012; }
.disco-section--hplus:before {
  content:"";
  position:absolute; inset:0;
  background:url('../img/hplus-bg-01.png') right center/cover no-repeat;
  opacity:.18;
}
.disco-section--hplus:after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(2,5,6,.96), rgba(2,5,6,.83));
}
.disco-section--archive { background:#060606; }
.disco-section--archive:before {
  content:"";
  position:absolute; inset:0;
  background:url('../img/archive-glass.jpg') center/cover no-repeat;
  opacity:.045;
}
.disco-section--archive:after {
  content:"";
  position:absolute; inset:0;
  background:rgba(3,3,3,.91);
}

.disco-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:42px;
}
.disco-head h2 {
  margin:0;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size:68px;
  line-height:.95;
  text-transform:uppercase;
}
.disco-head h2 span { color:#e01010; }
.disco-head p { margin:0; color:#a9a9a9; max-width:510px; }

.release-feature {
  display:grid;
  grid-template-columns:480px 1fr;
  gap:56px;
  align-items:center;
}
.release-art-square {
  position:relative;
  height:0;
  padding-top:100%;
  overflow:hidden;
  border:1px solid #292929;
  background:#0a0a0a;
}
.release-art-square img {
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  object-fit:cover;
}
.release-copy .year {
  color:#e01010;
  font-size:13px;
  font-weight:bold;
  letter-spacing:2px;
  text-transform:uppercase;
}
.release-copy h3 {
  margin:8px 0 14px;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  text-transform:uppercase;
  font-size:64px;
  line-height:.96;
}
.release-copy h3 span { color:#e01010; }
.release-copy .type {
  color:#888;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:12px;
}
.release-copy p { color:#c2c2c2; max-width:650px; font-size:17px; }

.hplus-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.hplus-release {
  border:1px solid #273132;
  background:#071011;
  overflow:hidden;
}
.hplus-release .cover {
  position:relative;
  height:0;
  padding-top:100%;
  overflow:hidden;
  background:#080808;
}
.hplus-release .cover img {
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hplus-release .body { padding:20px; }
.hplus-release .year { color:#e01010; font-size:11px; font-weight:bold; letter-spacing:1.5px; }
.hplus-release h3 { margin:5px 0 5px; text-transform:uppercase; font-size:21px; }
.hplus-release p { margin:0; color:#9ca5a5; font-size:13px; }

.archive-list { border-top:1px solid #292929; }
.archive-release {
  display:grid;
  grid-template-columns:105px 300px 1fr auto;
  gap:30px;
  align-items:center;
  min-height:220px;
  padding:28px 0;
  border-bottom:1px solid #292929;
}
.archive-year {
  font-family:Impact, Arial, sans-serif;
  font-size:43px;
  color:#e01010;
}
.archive-visual {
  position:relative;
  min-height:165px;
  overflow:hidden;
  border:1px solid #252525;
  background:#0b0b0b;
}
.archive-visual:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url('../img/symbol-zuulfx.png');
  background-size:42%;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.075;
}
.archive-visual--demo:before {
  background-image:url('../img/music-bg-demo.jpg');
  background-size:cover;
  opacity:.42;
}
.archive-visual--unleashed:before {
  background-image:url('../img/archive-zombie.jpg');
  background-size:cover;
  opacity:.22;
}
.archive-visual--japan:before {
  background-image:url('../img/logo-zuulfx.png');
  background-size:72%;
  opacity:.16;
}
.archive-visual:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.66));
}
.archive-visual .panel-title {
  position:absolute;
  z-index:2;
  left:17px; right:17px; bottom:15px;
  font-family:Impact, Arial, sans-serif;
  text-transform:uppercase;
  font-size:26px;
  line-height:1;
}
.archive-info h3 {
  margin:0 0 5px;
  font-family:Impact, Arial, sans-serif;
  font-size:37px;
  text-transform:uppercase;
  line-height:1;
}
.archive-info .kind {
  color:#e01010;
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-size:11px;
  font-weight:bold;
}
.archive-info p { color:#a9a9a9; margin:10px 0 0; max-width:600px; }
.archive-actions { text-align:right; }

.music-note {
  margin-top:34px;
  padding:18px 20px;
  border-left:2px solid #a90b0b;
  background:#0b0808;
  color:#a6a6a6;
  font-size:13px;
}
.streaming-strip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border-top:1px solid #333;
  border-bottom:1px solid #333;
  padding:32px 0;
}
.streaming-strip strong {
  font-family:Impact, Arial, sans-serif;
  font-size:42px;
  text-transform:uppercase;
}
.streaming-strip .actions { margin-top:0; }

@media screen and (max-width:1050px) {
  .music-hero h1 { font-size:78px; }
  .release-feature { grid-template-columns:390px 1fr; }
  .release-copy h3 { font-size:54px; }
  .archive-release { grid-template-columns:90px 250px 1fr; }
  .archive-actions { grid-column:3; text-align:left; }
}
@media screen and (max-width:820px) {
  .header-socials { order:2; margin-left:auto; }
  body.music-v17 .lang-switch { order:2; }
  .music-hero { min-height:410px; }
  .music-hero h1 { font-size:64px; }
  .disco-head { display:block; }
  .disco-head p { margin-top:16px; }
  .release-feature { grid-template-columns:1fr; }
  .release-art-square { max-width:560px; }
  .hplus-grid { grid-template-columns:1fr 1fr; }
  .archive-release { grid-template-columns:80px 1fr; }
  .archive-visual { grid-column:2; }
  .archive-info { grid-column:2; }
  .archive-actions { grid-column:2; }
  .streaming-strip { display:block; }
  .streaming-strip .actions { margin-top:20px; }
}
@media screen and (max-width:560px) {
  .header-socials a { min-width:30px; padding-left:5px; padding-right:5px; font-size:9px; }
  .music-hero h1 { font-size:50px; }
  .disco-section { padding:66px 0; }
  .disco-head h2 { font-size:48px; }
  .release-copy h3 { font-size:45px; }
  .hplus-grid { grid-template-columns:1fr; }
  .archive-release { grid-template-columns:1fr; gap:13px; }
  .archive-year, .archive-visual, .archive-info, .archive-actions { grid-column:1; }
  .archive-year { font-size:36px; }
  .archive-info h3 { font-size:32px; }
  .archive-actions .btn { width:100%; text-align:center; }
  .streaming-strip strong { font-size:35px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}


/* V1.8 recovered album covers */
.archive-visual img{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.archive-visual .panel-title{
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.archive-visual--cover:before{
  display:none;
}
.archive-visual--cover:after{
  background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.62));
}

/* V1.9 artwork credits */
.art-credit {
  margin-top:8px;
  color:#777;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.art-credit strong { color:#aaa; }


/* V1.46 — MUSIC readability */
.music-jump a {
  font-size:12px;
}
.release-copy .year {
  font-size:14px;
}
.release-copy .type {
  font-size:14px;
}
.hplus-release .year,
.archive-info .kind {
  font-size:12px;
}
.hplus-release p,
.archive-info p {
  font-size:15px;
  line-height:1.68;
}
.art-credit {
  font-size:11px;
}


/* V1.47 — MUSIC archive platform buttons */
.archive-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.archive-actions .archive-platform-btn {
  min-width:96px;
  text-align:center;
  font-size:11px;
  letter-spacing:.7px;
}
@media screen and (max-width:560px) {
  .archive-actions .archive-platform-btn {
    min-width:0;
    flex:1 1 30%;
    padding-left:8px;
    padding-right:8px;
    font-size:10px;
  }
}
