/* ============================================================
   OUTLAW AI CREATIONS by evolmasterj
   Palette pulled straight off the emblem: charred black,
   ember orange, blood-moon red, bone white.
   ============================================================ */

:root{
  --black:#070402;
  --char:#0d0705;
  --char-2:#140a06;
  --ash:#1c100a;

  --ember:#ff6a12;
  --ember-hot:#ffa227;
  --ember-core:#ffd88a;
  --blood:#e01b0c;
  --blood-deep:#8f1206;

  --bone:#f6ece1;
  --bone-dim:#b9a698;
  --muted:#8a776a;

  --line:rgba(255,106,18,.22);
  --line-soft:rgba(255,255,255,.07);

  --glow-sm:0 0 12px rgba(255,106,18,.55);
  --glow-md:0 0 28px rgba(255,86,10,.5), 0 0 70px rgba(224,27,12,.28);
  --glow-lg:0 0 60px rgba(255,86,10,.45), 0 0 160px rgba(224,27,12,.3);

  --f-display:'Bebas Neue', Impact, sans-serif;
  --f-west:'Rye', Georgia, serif;
  --f-cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:'Barlow', system-ui, -apple-system, sans-serif;

  --wrap:1200px;
  --ease:cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}

::selection{background:var(--blood); color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--ember),var(--blood-deep)); border-radius:99px}

.skip{
  position:fixed; left:-999px; top:12px; z-index:999;
  background:var(--ember); color:#000; padding:.6rem 1rem; border-radius:6px; font-weight:700;
}
.skip:focus{left:12px}

:focus-visible{outline:2px solid var(--ember-hot); outline-offset:3px; border-radius:4px}

/* ============================================================
   ATMOSPHERE
   ============================================================ */
#embers{
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.85;
}
.grain{
  position:fixed; inset:-200%; z-index:2; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-4%,-3%)} 20%{transform:translate(-8%,3%)}
  30%{transform:translate(3%,-8%)} 40%{transform:translate(-3%,9%)} 50%{transform:translate(-8%,4%)}
  60%{transform:translate(6%,0)} 70%{transform:translate(0,6%)} 80%{transform:translate(3%,20%)} 90%{transform:translate(-6%,4%)}
}
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 38%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.9) 100%);
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; position:relative; z-index:5}

.sec{position:relative; padding:clamp(4.5rem,9vw,8.5rem) 0; z-index:5}
.sec--alt{background:
  linear-gradient(180deg, transparent, rgba(255,106,18,.035) 30%, rgba(255,106,18,.035) 70%, transparent),
  var(--char);
}
.sec--alt::before,.sec--alt::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ember),transparent); opacity:.4;
}
.sec--alt::before{top:0} .sec--alt::after{bottom:0}

.sec__head{max-width:44rem; margin-bottom:clamp(2.5rem,5vw,4rem)}

.kicker{
  font-family:var(--f-cond); font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  font-size:.76rem; color:var(--ember-hot); margin:0 0 .9rem;
  display:flex; align-items:center; gap:.75rem;
}
.kicker::after{content:''; height:1px; flex:1; max-width:120px; background:linear-gradient(90deg,var(--ember),transparent)}

.h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.6rem,6.2vw,4.9rem); line-height:.92; letter-spacing:.02em;
  margin:0 0 1rem; text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 0 26px rgba(255,106,18,.28);
}
.h2 em{
  font-style:normal;
  background:linear-gradient(180deg,var(--ember-core),var(--ember-hot) 42%,var(--blood) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,106,18,.55));
}
.lede{color:var(--bone-dim); font-size:1.06rem; margin:0; max-width:52ch}
.note{color:var(--muted); font-size:.85rem; margin-top:2rem; font-family:var(--f-cond); letter-spacing:.06em}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --pad:1rem 2.1rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:var(--pad); border:0; border-radius:2px; overflow:hidden;
  font-family:var(--f-cond); font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  font-size:.95rem; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), color .3s;
}
.btn--sm{--pad:.62rem 1.25rem; font-size:.78rem}
.btn--lg{--pad:1.2rem 2.8rem; font-size:1.05rem}

.btn--fire{
  color:#1a0700;
  background:linear-gradient(135deg,var(--ember-core),var(--ember-hot) 30%,var(--ember) 60%,var(--blood) 100%);
  box-shadow:var(--glow-md), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--fire:hover{transform:translateY(-3px); box-shadow:var(--glow-lg), inset 0 1px 0 rgba(255,255,255,.6)}

.btn--ghost{
  color:var(--bone); background:rgba(255,106,18,.05);
  border:1px solid var(--line); backdrop-filter:blur(4px);
}
.btn--ghost:hover{border-color:var(--ember); color:var(--ember-hot); transform:translateY(-3px); box-shadow:var(--glow-sm)}

.btn__pulse{
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn:hover .btn__pulse{animation:sheen .85s var(--ease)}
@keyframes sheen{to{transform:translateX(120%)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:1.5rem;
  padding:1rem clamp(1rem,3vw,2.2rem);
  transition:background .4s, backdrop-filter .4s, box-shadow .4s, padding .4s;
}
.nav.is-stuck{
  background:rgba(7,4,2,.86); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line), 0 18px 50px rgba(0,0,0,.6);
  padding-block:.6rem;
}
.nav__brand{display:flex; align-items:center; gap:.7rem; margin-right:auto}
.nav__brand img{filter:drop-shadow(0 0 12px rgba(255,106,18,.65)); transition:transform .5s var(--ease)}
.nav__brand:hover img{transform:rotate(-8deg) scale(1.08)}
.nav__brand-txt{display:flex; flex-direction:column; line-height:1}
.nav__brand-txt b{font-family:var(--f-display); font-size:1.32rem; letter-spacing:.12em; color:var(--bone)}
.nav__brand-txt i{font-family:var(--f-west); font-style:normal; font-size:.6rem; letter-spacing:.22em; color:var(--ember-hot)}

.nav__links{display:flex; gap:.35rem}
.nav__links a{
  position:relative; padding:.5rem .85rem;
  font-family:var(--f-cond); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.83rem; color:var(--bone-dim); transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--ember-hot)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}

.nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.55rem}
.nav__burger span{display:block; width:24px; height:2px; background:var(--bone); transition:transform .35s var(--ease), opacity .25s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:rgba(7,4,2,.97); backdrop-filter:blur(18px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
}
.mobile-menu[hidden]{display:none}
.mobile-menu a{
  font-family:var(--f-display); font-size:2.2rem; letter-spacing:.08em; color:var(--bone);
  padding:.4rem 1rem; transition:color .3s, transform .3s var(--ease);
  opacity:0; transform:translateY(14px); animation:mmIn .45s var(--ease) forwards;
}
.mobile-menu a:nth-child(1){animation-delay:.04s} .mobile-menu a:nth-child(2){animation-delay:.09s}
.mobile-menu a:nth-child(3){animation-delay:.14s} .mobile-menu a:nth-child(4){animation-delay:.19s}
.mobile-menu a:nth-child(5){animation-delay:.24s} .mobile-menu a:nth-child(6){animation-delay:.29s}
.mobile-menu a:hover{color:var(--ember-hot); transform:translateX(6px)}
@keyframes mmIn{to{opacity:1; transform:translateY(0)}}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  padding:7rem 1.25rem 5rem; overflow:hidden; z-index:5;
}
.hero__bg{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  opacity:.34; filter:saturate(1.15) contrast(1.1);
  transform:scale(1.08);
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(7,4,2,.25), rgba(7,4,2,.9) 72%),
    linear-gradient(180deg, rgba(7,4,2,.85), transparent 28%, transparent 62%, var(--black) 97%);
}
.hero__glow{
  position:absolute; left:50%; top:38%; width:min(120vw,1100px); aspect-ratio:1; translate:-50% -50%;
  background:radial-gradient(circle, rgba(255,86,10,.2), rgba(224,27,12,.09) 42%, transparent 68%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{50%{opacity:.55; transform:scale(1.12)}}

.hero__inner{position:relative; z-index:6; display:grid; justify-items:center; gap:0}

.hero__emblem{position:relative; width:clamp(180px,26vw,300px); margin-bottom:1.6rem}
.hero__emblem img{
  filter:drop-shadow(0 0 40px rgba(255,86,10,.6)) drop-shadow(0 0 90px rgba(224,27,12,.4));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-12px)}}
.hero__ring{
  position:absolute; inset:-14%; border-radius:50%;
  border:1px solid rgba(255,106,18,.28);
  border-top-color:rgba(255,162,39,.85);
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.hero__eyebrow{
  display:flex; align-items:center; gap:.7rem; margin:0 0 1rem;
  font-family:var(--f-cond); letter-spacing:.4em; text-transform:uppercase;
  font-size:.72rem; color:var(--ember-hot);
}
.dot{width:5px; height:5px; border-radius:50%; background:var(--ember); box-shadow:var(--glow-sm)}

.hero__title{margin:0; display:grid; justify-items:center; gap:.1rem}
.ttl-line{
  font-family:var(--f-display); font-size:clamp(3.8rem,15vw,11.5rem); line-height:.82;
  letter-spacing:.03em;
  background:linear-gradient(180deg,#fff3e2 0%,var(--ember-core) 22%,var(--ember-hot) 48%,var(--ember) 68%,var(--blood) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(255,86,10,.6));
}
.ttl-sub{
  font-family:var(--f-cond); font-weight:700;
  font-size:clamp(.85rem,2.6vw,1.55rem); letter-spacing:clamp(.28em,1.1vw,.62em);
  text-transform:uppercase; color:var(--bone); margin-top:.15rem;
}
.ttl-by{
  font-family:var(--f-cond); font-size:.9rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-top:.7rem;
}
.ttl-by em{font-family:var(--f-west); font-style:normal; font-size:1.35rem; letter-spacing:.02em; color:var(--ember-hot); text-transform:lowercase; text-shadow:var(--glow-sm)}

.hero__tag{max-width:44ch; margin:1.5rem 0 0; color:var(--bone-dim); font-size:1.05rem}

.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.1rem}

.hero__genres{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  list-style:none; padding:0; margin:2.4rem 0 0;
}
.hero__genres li{
  font-family:var(--f-cond); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-dim); padding:.35rem .85rem;
  border:1px solid var(--line-soft); border-radius:99px; background:rgba(255,255,255,.02);
}

.hero__scroll{
  position:absolute; bottom:1.8rem; left:50%; translate:-50% 0; z-index:6;
  width:24px; height:40px; border:1px solid var(--line); border-radius:99px;
  display:grid; place-items:start center; padding-top:7px;
}
.hero__scroll span{width:3px; height:8px; border-radius:99px; background:var(--ember); animation:wheel 1.9s ease-in-out infinite}
@keyframes wheel{50%{transform:translateY(14px); opacity:.2}}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  position:relative; z-index:5; overflow:hidden;
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(224,27,12,.12),rgba(255,106,18,.07),rgba(224,27,12,.12));
  padding:.85rem 0;
}
.ticker__track{display:flex; gap:2.6rem; width:max-content; animation:marquee 34s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{
  font-family:var(--f-display); font-size:1.35rem; letter-spacing:.13em;
  color:var(--bone); opacity:.72; display:flex; align-items:center; gap:2.6rem; white-space:nowrap;
}
.ticker__track span::after{content:'✦'; color:var(--ember); font-size:.85rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   PLATFORMS
   ============================================================ */
.platforms{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.plat{
  position:relative; display:flex; align-items:center; gap:.95rem;
  padding:1.05rem 1.15rem; overflow:hidden;
  background:linear-gradient(140deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line-soft); border-radius:4px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s;
}
.plat__ico{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,106,18,.09); border:1px solid var(--line);
  transition:background .35s, box-shadow .35s, transform .45s var(--ease);
}
.plat__ico svg{width:19px; height:19px; fill:var(--ember-hot); transition:fill .35s}
.plat__txt{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.plat__txt b{font-family:var(--f-cond); font-weight:700; font-size:1rem; letter-spacing:.07em; text-transform:uppercase}
.plat__txt i{font-style:normal; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.plat__go{margin-left:auto; color:var(--ember); opacity:0; transform:translateX(-6px); transition:.35s var(--ease); font-size:1.1rem}

a.plat:hover{
  transform:translateY(-4px);
  border-color:var(--ember);
  background:linear-gradient(140deg,rgba(255,106,18,.16),rgba(224,27,12,.05));
  box-shadow:0 14px 40px rgba(0,0,0,.55), var(--glow-sm);
}
a.plat:hover .plat__ico{background:var(--ember); box-shadow:var(--glow-md); transform:rotate(-10deg) scale(1.06)}
a.plat:hover .plat__ico svg{fill:#1a0700}
a.plat:hover .plat__go{opacity:1; transform:translateX(0)}

/* Linked platform — clickable, with a live pulse on the label. */
.plat.is-live .plat__txt i{color:var(--ember-hot); display:flex; align-items:center; gap:.4rem}
.plat.is-live .plat__txt i::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--ember);
  box-shadow:var(--glow-sm); animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{50%{opacity:.25; transform:scale(.7)}}

/* On the platform via DistroKid, but no direct artist link wired up yet.
   Still reads as available — just not clickable. */
.plat.is-nolink{opacity:.82}
.plat.is-nolink .plat__txt i{color:var(--bone-dim)}

/* ============================================================
   ALBUMS
   ============================================================ */
/* Two collections — Country and EDM — so the cards run wide and side by side. */
.albums{display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}

.album{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(0,0,0,.35));
  border:1px solid var(--line-soft); border-radius:5px;
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.album:hover{transform:translateY(-8px); border-color:var(--line); box-shadow:0 26px 70px rgba(0,0,0,.65), var(--glow-sm)}

.album__art-link{display:block}
.album__art{position:relative; aspect-ratio:1; overflow:hidden; background:#000}
.album__art img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s}
.album:hover .album__art img{transform:scale(1.07); filter:saturate(1.2) brightness(1.05)}
.album__art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,4,2,.9));
}
.album__tag{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-family:var(--f-cond); font-weight:700; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:2px;
  background:linear-gradient(135deg,var(--ember-hot),var(--blood)); color:#1a0700;
  box-shadow:var(--glow-sm);
}
/* Release-date badge (upcoming / just-dropped). */
.album__soon{
  position:absolute; top:.85rem; right:.85rem; z-index:3;
  font-family:var(--f-cond); font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.32rem .72rem; border:1px solid var(--line); border-radius:2px;
  background:rgba(7,4,2,.78); color:var(--bone-dim); backdrop-filter:blur(4px);
}
.album__soon.is-hot{
  color:#1a0700; border-color:transparent;
  background:linear-gradient(135deg,var(--ember-core),var(--ember-hot) 45%,var(--blood));
  box-shadow:var(--glow-md);
  animation:badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse{50%{box-shadow:0 0 10px rgba(255,106,18,.35)}}
@media (prefers-reduced-motion:reduce){ .album__soon.is-hot{animation:none} }

.album__play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  opacity:0; transition:opacity .4s;
}
.album:hover .album__play{opacity:1}
.album__play i{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,106,18,.9); box-shadow:var(--glow-md);
  transform:scale(.8); transition:transform .4s var(--ease);
}
.album:hover .album__play i{transform:scale(1)}
.album__play svg{width:22px; height:22px; fill:#1a0700; margin-left:3px}

.album__body{padding:1.25rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.album__meta{
  display:flex; gap:.6rem; align-items:center;
  font-family:var(--f-cond); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-hot);
}
.album__meta span{color:var(--muted)}
.album__title{
  font-family:var(--f-display); font-size:1.85rem; line-height:1; letter-spacing:.04em;
  margin:0; text-transform:uppercase; color:var(--bone);
}
.album__blurb{margin:0; font-size:.9rem; color:var(--bone-dim)}

/* ---- tracklist ---- */
.album__tracks{
  list-style:none; margin:.7rem 0 0; padding:0; flex:1;
  border-top:1px solid var(--line-soft);
  counter-reset:none;
}
.album__tracks li{border-bottom:1px solid var(--line-soft)}
.album__tracks a,.album__trow{
  display:flex; align-items:center; gap:.75rem; padding:.5rem .3rem;
  transition:background .3s, padding-left .3s var(--ease);
}
.album__tart{
  flex:none; width:40px; height:40px; border-radius:3px; object-fit:cover;
  border:1px solid var(--line-soft);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.album__tracks li:hover .album__tart{
  transform:scale(1.06); border-color:var(--ember); box-shadow:var(--glow-sm);
}
.album__tracks a{cursor:pointer}
.album__tracks a:hover{background:rgba(255,106,18,.08); padding-left:.7rem}
.album__tno{
  flex:none; font-family:var(--f-cond); font-size:.72rem; letter-spacing:.12em;
  color:var(--ember); opacity:.7; min-width:1.5rem;
}
.album__tname{font-family:var(--f-cond); font-weight:500; font-size:1rem; letter-spacing:.03em; color:var(--bone)}
.album__tracks a:hover .album__tname{color:var(--ember-hot)}
.album__tgo{margin-left:auto; color:var(--ember); opacity:0; transform:translateX(-5px); transition:.3s var(--ease)}
.album__tracks a:hover .album__tgo{opacity:1; transform:translateX(0)}

.album__empty{
  margin:.9rem 0 0; padding:.9rem 0; flex:1;
  border-top:1px solid var(--line-soft);
  font-family:var(--f-cond); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

.album__links{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line-soft)}
.album__links a{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,106,18,.07);
  transition:.3s var(--ease);
}
.album__links a svg{width:15px; height:15px; fill:var(--ember-hot); transition:fill .3s}
.album__links a:hover{background:var(--ember); box-shadow:var(--glow-sm); transform:translateY(-2px)}
.album__links a:hover svg{fill:#1a0700}
.album__links .soon{
  font-family:var(--f-cond); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  align-self:center;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:center}
@media (max-width:880px){ .about{grid-template-columns:1fr} }

.about__media{position:relative}
.about__frame{
  position:relative; border-radius:4px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.7), var(--glow-sm);
}
.about__frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(255,106,18,.14),transparent 45%,rgba(224,27,12,.16));
  mix-blend-mode:screen; pointer-events:none;
}
.about__frame img{transition:transform 1s var(--ease)}
.about__media:hover .about__frame img{transform:scale(1.05)}

.about__badge{
  position:absolute; right:-.9rem; bottom:-.9rem;
  display:grid; justify-items:center; gap:.1rem;
  padding:.9rem 1.2rem; border-radius:3px;
  background:linear-gradient(135deg,var(--ember-hot),var(--blood));
  box-shadow:var(--glow-md); color:#1a0700;
}
.about__badge b{font-family:var(--f-display); font-size:1.7rem; line-height:1; letter-spacing:.1em}
.about__badge i{font-family:var(--f-cond); font-style:normal; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700}

.about__copy p{color:var(--bone-dim); margin:0 0 1.05rem}
.about__copy p b{color:var(--bone); font-weight:600}

.stats{list-style:none; display:flex; flex-wrap:wrap; gap:2.2rem; padding:1.6rem 0; margin:.6rem 0 1.8rem; border-block:1px solid var(--line-soft)}
.stats li{display:grid; gap:.15rem}
.stats b{
  font-family:var(--f-display); font-size:2.1rem; line-height:1;
  background:linear-gradient(180deg,var(--ember-core),var(--blood));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats i{font-style:normal; font-family:var(--f-cond); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ============================================================
   COMING SOON
   The one section with no artwork, so it has to carry itself on
   type and light. Sits between Music and About.
   ============================================================ */
.soon{position:relative; overflow:hidden; text-align:center; isolation:isolate}
.soon[hidden]{display:none}

/* slow-breathing ember pool behind the card */
.soon__aura{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(150vw,1400px); aspect-ratio:1; z-index:-2; pointer-events:none;
  background:radial-gradient(circle, rgba(255,86,10,.22), rgba(224,27,12,.1) 40%, transparent 66%);
  animation:soonAura 8s ease-in-out infinite;
}
@keyframes soonAura{50%{opacity:.5; transform:scale(1.15)}}

/* faint rotating light rays */
.soon__rays{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(180vw,1700px); aspect-ratio:1; z-index:-2; pointer-events:none; opacity:.16;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,106,18,.5) 0deg 4deg, transparent 4deg 22deg);
  mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  animation:spin 90s linear infinite;
}

.soon__inner{display:grid; justify-items:center}
.soon .kicker{justify-content:center}
.soon .kicker::after{display:none}

.soon__card{
  position:relative; width:min(100%, 54rem);
  padding:clamp(2.4rem,6vw,4rem) clamp(1.4rem,4vw,3.2rem);
  border:1px solid var(--line); border-radius:6px;
  background:linear-gradient(165deg, rgba(255,106,18,.09), rgba(7,4,2,.72) 55%);
  box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  display:grid; justify-items:center; gap:.2rem;
}
/* ember corner ticks */
.soon__card::before,.soon__card::after{
  content:''; position:absolute; width:26px; height:26px; pointer-events:none;
  border:2px solid var(--ember); opacity:.75;
}
.soon__card::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.soon__card::after{bottom:-1px; right:-1px; border-left:0; border-top:0}

.soon__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-cond); font-weight:700; font-size:.7rem;
  letter-spacing:.32em; text-transform:uppercase; color:#1a0700;
  padding:.4rem 1rem; border-radius:99px; margin-bottom:.5rem;
  background:linear-gradient(135deg,var(--ember-core),var(--ember-hot) 45%,var(--blood));
  box-shadow:var(--glow-md);
  animation:soonBadge 2.4s ease-in-out infinite;
}
@keyframes soonBadge{50%{box-shadow:0 0 14px rgba(255,106,18,.4)}}

.soon__title{
  position:relative; margin:.1rem 0 .4rem;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(4.2rem,17vw,11rem); line-height:.86; letter-spacing:.06em;
  background:linear-gradient(180deg,#fff3e2 0%,var(--ember-core) 24%,var(--ember-hot) 50%,var(--ember) 70%,var(--blood) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 38px rgba(255,86,10,.55));
}
/* light sweeping across the letterforms */
.soon__title::after{
  content:attr(data-text); position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; background-repeat:no-repeat;
  animation:soonSweep 4.5s ease-in-out infinite;
}
@keyframes soonSweep{
  0%,62%{background-position:150% 0}
  100%{background-position:-70% 0}
}

.soon__lede{
  max-width:46ch; margin:.3rem 0 0; color:var(--bone-dim); font-size:1.03rem;
}
.soon__note{
  display:flex; align-items:center; gap:.55rem; margin:1.1rem 0 1.6rem;
  font-family:var(--f-cond); font-weight:600; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember-hot);
}
.soon__dot{
  width:7px; height:7px; border-radius:50%; background:var(--ember);
  box-shadow:var(--glow-sm); animation:livePulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .soon__aura,.soon__rays,.soon__badge,.soon__dot{animation:none}
  .soon__title::after{display:none}
}

/* ============================================================
   GENRES
   ============================================================ */
.genres{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.genre{
  position:relative; padding:1.7rem 1.5rem; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:4px;
  background:linear-gradient(150deg,rgba(255,255,255,.04),transparent);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.genre::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--ember-hot),var(--blood));
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease);
}
.genre:hover{transform:translateY(-5px); border-color:var(--line); box-shadow:0 18px 50px rgba(0,0,0,.5)}
.genre:hover::before{transform:scaleY(1)}
.genre b{
  display:block; font-family:var(--f-display); font-size:1.75rem; letter-spacing:.06em;
  color:var(--bone); margin-bottom:.35rem;
}
.genre span{font-size:.88rem; color:var(--bone-dim)}
.genre i{
  position:absolute; right:1rem; top:.9rem; font-style:normal;
  font-family:var(--f-display); font-size:2.6rem; color:rgba(255,106,18,.09);
}

/* ============================================================
   GALLERY
   ============================================================ */
/* Album art is square — uniform square tiles show each cover uncropped. */
.gallery{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));
}
.gal{
  position:relative; overflow:hidden; border-radius:4px; padding:0; border:1px solid var(--line-soft);
  background:#000; display:block; width:100%; aspect-ratio:1;
  transition:border-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .5s; filter:saturate(.9) brightness(.85)}
.gal::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(7,4,2,.92));
  opacity:.85; transition:opacity .4s;
}
.gal__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem;
  display:grid; gap:.25rem; text-align:left;
  transform:translateY(6px); opacity:0; transition:.45s var(--ease);
}
.gal__cap b{font-family:var(--f-cond); font-weight:700; font-size:.95rem; letter-spacing:.05em; color:var(--bone)}
.gal__cap i{font-style:normal; font-family:var(--f-cond); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ember-hot)}
.gal:hover{border-color:var(--ember); box-shadow:0 22px 60px rgba(0,0,0,.6), var(--glow-sm); transform:translateY(-4px)}
.gal:hover img{transform:scale(1.08); filter:saturate(1.15) brightness(1)}
.gal:hover::after{opacity:1}
.gal:hover .gal__cap,.gal:focus-visible .gal__cap{transform:translateY(0); opacity:1}
.gal__zoom{
  position:absolute; top:.8rem; right:.8rem; z-index:2;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,4,2,.7); border:1px solid var(--line); backdrop-filter:blur(4px);
  opacity:0; transform:scale(.8); transition:.4s var(--ease);
}
.gal__zoom svg{width:14px; height:14px; fill:var(--ember-hot)}
.gal:hover .gal__zoom{opacity:1; transform:scale(1)}

@media (max-width:560px){
  .gallery{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr)); gap:.7rem}
  .gal__cap{padding:.7rem}
  .gal__cap b{font-size:.8rem}
}

/* ============================================================
   CREW
   ============================================================ */
.crew{text-align:center; overflow:hidden}
.crew__bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; filter:blur(2px)}
.crew__scrim{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(224,27,12,.16), rgba(7,4,2,.93) 68%)}
.crew__inner{display:grid; justify-items:center}
.crew .kicker{justify-content:center}
.crew .kicker::after{display:none}
.crew .lede{margin-bottom:2.2rem; text-align:center}

.socials{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:3rem}
.soc{
  display:flex; align-items:center; gap:.6rem; padding:.7rem 1.15rem;
  border:1px solid var(--line-soft); border-radius:99px;
  background:rgba(255,255,255,.03); backdrop-filter:blur(6px);
  transition:.35s var(--ease);
}
.soc svg{width:17px; height:17px; fill:var(--bone-dim); transition:fill .35s}
.soc span{font-family:var(--f-cond); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); transition:color .35s}
a.soc:hover{border-color:var(--ember); background:rgba(255,106,18,.14); transform:translateY(-3px); box-shadow:var(--glow-sm)}
a.soc:hover svg{fill:var(--ember-hot)}
a.soc:hover span{color:var(--bone)}
.soc.is-soon{opacity:.4}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start}
@media (max-width:880px){ .contact{grid-template-columns:1fr} }

.mailto{
  display:inline-block; margin-top:1.6rem;
  font-family:var(--f-cond); font-size:1.25rem; letter-spacing:.06em; color:var(--ember-hot);
  border-bottom:1px solid var(--line); padding-bottom:.2rem; transition:.3s;
}
.mailto:hover{color:var(--ember-core); border-color:var(--ember); text-shadow:var(--glow-sm)}

.form{display:grid; gap:1rem}
.form label{
  display:grid; gap:.4rem;
  font-family:var(--f-cond); font-weight:600; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.form input,.form select,.form textarea{
  font-family:var(--f-body); font-size:.95rem; color:var(--bone);
  background:rgba(255,255,255,.035); border:1px solid var(--line-soft); border-radius:3px;
  padding:.85rem 1rem; transition:border-color .3s, box-shadow .3s, background .3s;
  letter-spacing:0; text-transform:none;
}
.form textarea{resize:vertical; min-height:110px}
.form input::placeholder,.form textarea::placeholder{color:#5d4f45}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--ember); background:rgba(255,106,18,.06); box-shadow:var(--glow-sm);
}
.form select option{background:var(--char); color:var(--bone)}
.form .btn{justify-self:start; margin-top:.4rem}
.hp{position:absolute; left:-9999px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative; z-index:5; padding:3.5rem 0 2.5rem; border-top:1px solid var(--line); background:var(--black)}
.foot__inner{display:grid; gap:1.8rem; justify-items:center; text-align:center}
.foot__brand{display:flex; align-items:center; gap:1rem}
.foot__brand img{filter:drop-shadow(0 0 20px rgba(255,106,18,.5))}
.foot__brand span{display:grid; text-align:left; line-height:1.2}
.foot__brand b{font-family:var(--f-display); font-size:1.25rem; letter-spacing:.13em; color:var(--bone)}
.foot__brand i{font-family:var(--f-cond); font-style:normal; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.foot__nav{display:flex; flex-wrap:wrap; gap:1.3rem; justify-content:center}
.foot__nav a{font-family:var(--f-cond); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); transition:color .3s}
.foot__nav a:hover{color:var(--ember-hot)}
.foot__legal{margin:0; font-size:.75rem; color:#5d4f45; letter-spacing:.05em}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(4,2,1,.96); backdrop-filter:blur(10px);
  padding:clamp(1rem,5vw,4rem);
  animation:fade .3s var(--ease);
}
.lb[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.lb__fig{margin:0; display:grid; gap:1rem; justify-items:center; max-height:100%}
.lb__fig img{
  max-height:78svh; width:auto; border-radius:4px;
  border:1px solid var(--line); box-shadow:0 0 80px rgba(255,86,10,.28);
  animation:pop .38s var(--ease);
}
@keyframes pop{from{transform:scale(.94); opacity:0}}
.lb__fig figcaption{
  font-family:var(--f-cond); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); text-align:center;
}
.lb__close,.lb__nav{
  position:absolute; background:rgba(255,255,255,.05); border:1px solid var(--line-soft);
  color:var(--bone); border-radius:50%; display:grid; place-items:center;
  transition:.3s var(--ease);
}
.lb__close{top:1.2rem; right:1.2rem; width:44px; height:44px; font-size:1.7rem; line-height:1}
.lb__nav{top:50%; translate:0 -50%; width:50px; height:50px; font-size:2rem; line-height:1}
.lb__nav--prev{left:1rem} .lb__nav--next{right:1rem}
.lb__close:hover,.lb__nav:hover{background:var(--ember); color:#1a0700; border-color:var(--ember); box-shadow:var(--glow-sm)}

/* ============================================================
   REVEAL
   ============================================================ */
/* Scoped to .js so the site is fully readable if JavaScript never runs. */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  #embers{display:none}
}