/* ZUUL FX HOME V1.5 — FULL BAND / ATMOSPHERIC BACKGROUNDS / LEGACY SAFE
   Built on the V1.3 compatibility core.
   No JavaScript is required. All content is visible by default.
   Decorative CSS effects are optional and never control visibility.
*/

body.home-v15 { background:#030303; color:#f1f1f1; }
body.home-v15 .container { max-width:1340px; }

/* HEADER — keep the logo and navigation readable, never squeezed into one word */
body.home-v15 .site-header { background:#020202; border-bottom:1px solid #1d1d1d; }
body.home-v15 .nav-wrap { padding-top:12px; }
body.home-v15 .brand img { width:232px; max-height:68px; }
body.home-v15 .lang-switch { margin-top:2px; }
body.home-v15 .main-nav {
  margin-top:12px;
  flex-wrap:wrap;
  justify-content:center;
  overflow:visible;
}
body.home-v15 .main-nav a {
  width:auto;
  min-width:72px;
  padding:13px 12px 11px;
  margin:0 5px;
  border-left:0;
  border-right:0;
  font-size:12px;
  letter-spacing:1.5px;
  text-align:center;
}
body.home-v15 .main-nav a:first-child { border-left:0; }

/* SHARED HOME TYPE */
.home-eyebrow { color:#e31515; font-size:12px; font-weight:bold; letter-spacing:3px; text-transform:uppercase; }
.home-display { margin:0; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:1px; line-height:.94; }
.home-copy { color:#c6c6c6; font-size:17px; line-height:1.7; max-width:680px; }
.home-rule { width:78px; height:2px; background:#d10d0d; margin:18px 0 24px; }
.home-actions { margin-top:26px; }
.home-actions .btn { margin-right:8px; margin-bottom:8px; }

/* HERO — the complete band photo is an actual image, never background-cropped */
.home-hero { position:relative; overflow:hidden; background:#020202; border-bottom:1px solid #242424; }
.hero-photo-stage { position:relative; max-width:1600px; margin:0 auto; background:#000; }
.hero-photo-stage img { width:100%; height:auto; display:block; }
.hero-photo-stage:before {
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 68%, rgba(0,0,0,.18) 100%);
}
.hero-photo-stage:after {
  content:"";
  position:absolute;
  left:0; bottom:0; width:100%; height:3px;
  background:#b20c0c;
  opacity:.55;
}
.hero-caption { background:#040404; border-top:1px solid #151515; }
.hero-caption-inner { min-height:156px; padding:27px 0 29px; display:flex; align-items:center; justify-content:space-between; }
.hero-identity { padding-right:35px; }
.hero-identity h1 { font-size:58px; line-height:.94; }
.hero-identity h1 span { display:block; color:#e31515; font-size:31px; margin-top:8px; letter-spacing:3px; }
.hero-caption .home-actions { margin-top:0; text-align:right; flex:0 0 auto; }
.hero-caption .btn { min-width:142px; text-align:center; }

/* FEATURED RELEASE — foreground artwork + almost invisible visual echo behind */
.home-release { min-height:690px; position:relative; border-bottom:1px solid #222; background:#070707; overflow:hidden; box-shadow:inset 0 0 120px rgba(0,0,0,.55); }
.home-release:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background-image:url('../img/nothing-is-real-2026.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:.12;
}
.home-release:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:rgba(4,4,4,.62);
}
.release-layout { display:flex; min-height:690px; position:relative; z-index:2; }
.release-art { width:54%; position:relative; overflow:hidden; background:#090909; }
.release-art img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; }
.release-art:after { content:""; position:absolute; top:0; right:0; bottom:0; width:38%; background:linear-gradient(to right, rgba(7,7,7,0), #070707); }
.release-copy { width:46%; display:flex; align-items:center; padding:70px 5% 70px 4%; }
.release-copy-inner { max-width:520px; }
.release-copy h2 { font-size:68px; }
.release-copy h2 span { color:#e31515; }
.release-note { color:#9c9c9c; margin-top:17px; text-transform:uppercase; letter-spacing:1.3px; font-size:12px; }

/* LIVE — background is deliberately ghosted */
.home-live { position:relative; overflow:hidden; padding:105px 0 95px; border-bottom:1px solid #222; background:#030303; box-shadow:inset 0 0 140px rgba(0,0,0,.60); }
.home-live:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background-image:url('../img/live-bg-band.png');
  background-size:cover; background-position:center 43%; background-repeat:no-repeat;
  opacity:.15;
}
.home-live:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:linear-gradient(to bottom, rgba(2,2,2,.80), rgba(2,2,2,.91));
}
.home-live .container { position:relative; z-index:2; }
.live-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:50px; }
.live-heading h2 { font-size:92px; }
.live-heading p { max-width:440px; color:#aaa; margin:0 0 8px 30px; }
.live-stats { display:flex; border-top:1px solid #343434; border-bottom:1px solid #343434; background:rgba(3,3,3,.56); }
.live-stat { width:25%; min-height:150px; padding:27px 24px; border-right:1px solid #303030; }
.live-stat:last-child { border-right:0; }
.live-stat strong { display:block; font-family:Impact, Arial, sans-serif; color:#e31515; font-size:46px; line-height:1; }
.live-stat span { display:block; margin-top:12px; color:#ddd; font-size:12px; text-transform:uppercase; letter-spacing:1.4px; }
.japan-teaser { margin-top:48px; border-left:3px solid #e31515; padding:6px 0 6px 22px; display:flex; justify-content:space-between; align-items:center; }
.japan-teaser .japan-title { font-family:Impact, Arial, sans-serif; font-size:40px; line-height:1; text-transform:uppercase; letter-spacing:1px; }
.japan-teaser .japan-date { color:#e31515; font-weight:bold; letter-spacing:2px; text-transform:uppercase; font-size:14px; }

/* MUSIC — old visual DNA is present only as a very faint texture */
.home-music { position:relative; overflow:hidden; padding:100px 0 90px; border-bottom:1px solid #222; background:#080808; box-shadow:inset 0 0 130px rgba(0,0,0,.58); }
.home-music: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 34%; background-repeat:no-repeat;
  opacity:.11;
}
.home-music:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:rgba(5,5,5,.80);
}
.home-music .container { position:relative; z-index:2; }
.music-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; }
.music-head h2 { font-size:72px; }
.music-row { display:flex; margin-left:-8px; margin-right:-8px; }
.music-item { width:25%; padding:0 8px; }
.music-cover { display:block; position:relative; overflow:hidden; background:#111; border:1px solid #2b2b2b; height:0; padding-top:100%; }
.music-cover img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .6s ease; }
.music-cover:hover img { transform:scale(1.035); }
.music-title { margin-top:15px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; font-size:14px; }
.music-meta { margin-top:4px; color:#e31515; font-size:11px; font-weight:bold; letter-spacing:1.2px; text-transform:uppercase; }

/* H+ — more visible, because this is the visual break into the future */
.home-hplus { min-height:760px; position:relative; overflow:hidden; border-bottom:1px solid #222; background:#031012; }
.home-hplus:before {
  content:""; position:absolute; top:0; right:0; bottom:0; width:72%;
  background-image:url('../img/hplus-bg-01.png');
  background-repeat:no-repeat; background-size:cover; background-position:center;
  opacity:.62;
}
.home-hplus:after {
  content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(to right, #020708 0%, rgba(2,7,8,.97) 35%, rgba(2,7,8,.72) 60%, rgba(2,7,8,.28) 100%);
}
.hplus-inner { position:relative; z-index:2; min-height:760px; display:flex; align-items:center; }
.hplus-copy { width:560px; max-width:49%; }
.hplus-copy h2 { font-size:132px; color:#e31515; }
.hplus-tagline { font-family:Impact, Arial, sans-serif; font-size:44px; line-height:1.08; text-transform:uppercase; max-width:550px; margin:8px 0 20px; }
.hplus-modes { margin-top:28px; color:#f4f4f4; font-size:13px; font-weight:bold; text-transform:uppercase; letter-spacing:1.8px; line-height:2; }
.hplus-modes span { color:#e31515; padding:0 8px; }

/* ARCHIVE — horror roots stay in the background rather than taking over the homepage */
.home-archive { min-height:560px; position:relative; overflow:hidden; border-bottom:1px solid #222; background:#0d0807; box-shadow:inset 0 0 140px rgba(0,0,0,.62); }
.home-archive:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background-image:url('../img/archive-zombie.jpg');
  background-position:center 34%; background-size:cover; background-repeat:no-repeat;
  opacity:.30;
}
.home-archive:after {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:linear-gradient(to left, #070504 0%, rgba(7,5,4,.95) 42%, rgba(7,5,4,.70) 68%, rgba(7,5,4,.52) 100%);
}
.archive-texture {
  position:absolute; left:0; top:0; right:0; bottom:0; z-index:1;
  background-image:url('../img/archive-glass.jpg');
  background-position:left center; background-size:cover; background-repeat:no-repeat;
  opacity:.09;
}
.archive-inner { position:relative; z-index:2; min-height:560px; display:flex; justify-content:flex-end; align-items:center; }
.archive-copy { width:46%; padding-left:30px; }
.archive-copy h2 { font-size:58px; }
.archive-copy h2 span { color:#e31515; }
.archive-note { color:#9a8e87; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }

/* PROFESSIONAL — clean, with the symbol barely present */
.home-pro { position:relative; overflow:hidden; padding:90px 0; background:#050505; border-bottom:1px solid #222; }
.home-pro:before {
  content:""; position:absolute; right:4%; top:50%; width:430px; height:430px; margin-top:-215px;
  background-image:url('../img/symbol-zuulfx.png'); background-repeat:no-repeat; background-size:contain; background-position:center;
  opacity:.08;
}
.home-pro .container { position:relative; z-index:2; }
.pro-shell { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #333; border-bottom:1px solid #333; padding:38px 0; }
.pro-shell h2 { font-size:54px; }
.pro-shell .home-copy { margin:12px 40px 0 0; max-width:650px; }
.pro-actions { flex:0 0 auto; }

/* STORE — explicit product image, with a subtle echo across the whole section */
.home-store { min-height:460px; position:relative; overflow:hidden; display:flex; border-bottom:1px solid #222; background:#080808; box-shadow:inset 0 0 120px rgba(0,0,0,.55); }
.home-store:before {
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background-image:url('../img/merch-home.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:.12;
}
.store-image { width:52%; position:relative; z-index:2; background-image:url('../img/merch-home.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; }
.store-copy { width:48%; position:relative; z-index:2; padding:70px 6%; display:flex; align-items:center; background:rgba(5,5,5,.90); }
.store-copy h2 { font-size:62px; }

/* FOOTER */
body.home-v15 .footer { padding-top:42px; }

/* Decorative CSS only — safe if ignored by an older browser */
@keyframes redPulse { 0%,100% { opacity:.70; } 50% { opacity:1; } }
.hero-photo-stage:after { animation:redPulse 5s ease-in-out infinite; }
.home-hplus .home-eyebrow { animation:redPulse 4s ease-in-out infinite; }
.btn { transition:background-color .25s ease, border-color .25s ease, transform .25s ease; }
.btn:hover { transform:translateY(-2px); }

@media screen and (max-width:1100px) {
  body.home-v15 .brand img { width:205px; }
  body.home-v15 .main-nav a { margin:0 3px; padding-left:9px; padding-right:9px; font-size:11px; min-width:66px; }
  .hero-identity h1 { font-size:50px; }
  .hero-identity h1 span { font-size:27px; }
  .release-copy h2 { font-size:56px; }
  .live-heading h2 { font-size:76px; }
  .music-head h2 { font-size:62px; }
  .hplus-copy h2 { font-size:110px; }
  .hplus-tagline { font-size:38px; }
}

@media screen and (max-width:820px) {
  body.home-v15 .main-nav { justify-content:flex-start; }
  body.home-v15 .main-nav a { width:33.3333%; margin:0; min-width:0; border-bottom:1px solid #202020; }
  .hero-caption-inner { display:block; min-height:0; padding:24px 0 28px; }
  .hero-identity { padding-right:0; }
  .hero-identity h1 { font-size:47px; }
  .hero-identity h1 span { font-size:25px; }
  .hero-caption .home-actions { margin-top:22px; text-align:left; }
  .release-layout { display:block; min-height:0; }
  .release-art { width:100%; height:560px; }
  .release-art:after { top:auto; left:0; right:0; bottom:0; width:auto; height:34%; background:linear-gradient(to bottom, rgba(7,7,7,0), #070707); }
  .release-copy { width:100%; padding:55px 6% 70px; }
  .release-copy h2 { font-size:52px; }
  .live-heading { display:block; }
  .live-heading p { margin:18px 0 0; }
  .live-stats { flex-wrap:wrap; }
  .live-stat { width:50%; border-bottom:1px solid #262626; }
  .japan-teaser { display:block; }
  .japan-teaser .japan-date { margin-top:11px; }
  .music-row { flex-wrap:wrap; }
  .music-item { width:50%; margin-bottom:36px; }
  .home-hplus, .hplus-inner { min-height:680px; }
  .home-hplus:before { width:100%; opacity:.44; }
  .home-hplus:after { background:rgba(0,6,8,.70); }
  .hplus-copy { width:100%; max-width:620px; }
  .hplus-copy h2 { font-size:96px; }
  .home-archive:before { opacity:.28; }
  .home-archive:after { background:rgba(8,6,5,.72); }
  .archive-inner { justify-content:flex-start; }
  .archive-copy { width:100%; max-width:620px; padding-left:0; }
  .pro-shell { display:block; }
  .pro-actions { margin-top:25px; }
  .home-store { display:block; min-height:0; }
  .store-image { width:100%; height:420px; }
  .store-copy { width:100%; padding:55px 6% 65px; }
}

@media screen and (max-width:560px) {
  body.home-v15 .brand img { width:172px; }
  body.home-v15 .main-nav a { width:50%; font-size:10px; margin:0; padding:11px 8px; }
  .hero-identity h1 { font-size:42px; }
  .hero-identity h1 span { font-size:22px; letter-spacing:2px; }
  .hero-caption .btn { width:100%; margin-right:0; }
  .release-art { height:430px; }
  .release-copy h2 { font-size:43px; }
  .live-heading h2 { font-size:62px; }
  .live-stat { width:100%; border-right:0; }
  .japan-teaser .japan-title { font-size:34px; }
  .music-head { display:block; }
  .music-head .btn { margin-top:18px; }
  .music-head h2 { font-size:52px; }
  .music-item { width:100%; }
  .hplus-copy h2 { font-size:82px; }
  .hplus-tagline { font-size:32px; }
  .archive-copy h2 { font-size:46px; }
  .pro-shell h2 { font-size:44px; }
  .store-copy h2 { font-size:50px; }
  .home-actions .btn { width:100%; margin-right:0; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-stage:after, .home-hplus .home-eyebrow { animation:none; }
  .music-cover img, .btn { transition:none; }
}


/* V1.20 — studio HERO + untouched post-apocalyptic secondary visual */
.home-secondary-visual {
  position:relative;
  overflow:hidden;
  background:#020202;
  border-bottom:1px solid #222;
  border-top:1px solid #161616;
}
.secondary-photo-stage {
  position:relative;
  max-width:1600px;
  margin:0 auto;
  background:#000;
}
.secondary-photo-stage img {
  width:100%;
  height:auto;
  display:block;
}
.secondary-photo-stage:after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:#9f0c0c;
  opacity:.45;
}
.secondary-caption {
  background:#050505;
  border-top:1px solid #151515;
}
.secondary-caption-inner {
  min-height:96px;
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.secondary-title {
  margin-top:5px;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size:28px;
  line-height:1;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
@media screen and (max-width:700px) {
  .secondary-caption-inner {
    display:block;
    min-height:0;
  }
  .secondary-caption .btn {
    margin-top:16px;
  }
  .secondary-title {
    font-size:24px;
  }
}


/* V1.21 — cleaner HOME + immediate ZUUL FX identification */
body.home-v15 .home-brand-full img {
  width:330px;
  max-height:none;
  height:auto;
  object-fit:contain;
  object-position:left center;
}
body.home-v15 .home-brand-full {
  padding:5px 0 7px;
}

/* The V1.20 post-apocalyptic secondary image is intentionally removed from HOME.
   H+ now follows MUSIC directly, keeping the landing page tighter. */

@media screen and (max-width:1100px) {
  body.home-v15 .home-brand-full img { width:290px; max-height:none; }
}
@media screen and (max-width:820px) {
  body.home-v15 .home-brand-full img { width:250px; max-height:none; }
}
@media screen and (max-width:560px) {
  body.home-v15 .home-brand-full img { width:205px; max-height:none; }
}


/* V1.46 — HOME readability */
.home-eyebrow {
  font-size:14px;
}
.live-stat span {
  font-size:14px;
}
.music-meta {
  font-size:13px;
}
.hplus-modes {
  font-size:15px;
}
.archive-note {
  font-size:14px;
  line-height:1.55;
}

/* ================================================================
   V1.53 — HOME NEON TREATMENT
   Keep the real band photo, but give it a subtle Blade Runner split tone.
   ================================================================ */
.hero-photo-stage {
  background:
    radial-gradient(circle at 24% 24%, rgba(52,110,255,.14), rgba(0,0,0,0) 34%),
    radial-gradient(circle at 76% 26%, rgba(255,34,74,.16), rgba(0,0,0,0) 34%),
    #000;
}
.hero-photo-stage img {
  filter: saturate(1.08) contrast(1.05) brightness(.95);
}
.hero-photo-stage:before {
  background:
    linear-gradient(90deg, rgba(26,92,255,.20) 0%, rgba(12,18,36,.10) 28%, rgba(0,0,0,0) 48%, rgba(40,6,12,.08) 70%, rgba(228,24,44,.20) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 62%, rgba(0,0,0,.20) 100%);
}
.hero-caption {
  background:linear-gradient(90deg, rgba(6,10,22,.92) 0%, rgba(10,10,10,.94) 46%, rgba(26,6,10,.94) 100%);
}
.home-hero {
  box-shadow: inset 0 0 120px rgba(0,0,0,.22);
}