/* 1) Reset */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html:focus-within { scroll-behavior: smooth; }
html, body { min-height: 100%; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* 2) Design tokens */
:root {
  --bg: #0a0a0a;
  --surface-1: #101211;
  --surface-2: #141816;
  --surface-3: #0f0f0f;
  --text-1: #eafff6;
  --text-2: #b7e6d3;
  --muted: #9ad9c3;
  --accent: #00ff99;
  --accent-rgb: 0,255,153;
  --border: rgba(255,255,255,.06);
  --elev-1: 0 6px 20px rgba(0,0,0,.35), 0 0 14px rgba(var(--accent-rgb), .10);
  --elev-2: 0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(var(--accent-rgb), .12);
  --container: min(1120px, 92vw);
  --radius-1: 12px; --radius-2: 16px; --radius-3: 22px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --font: 'Inter', Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-1: clamp(.9rem, .6vw + .7rem, 1.05rem);
  --fs-2: clamp(1.05rem, .8vw + .9rem, 1.25rem);
  --fs-3: clamp(1.25rem, 1.1vw + 1rem, 1.6rem);
  --fs-hero: clamp(1.6rem, 3.2vw + 1rem, 3rem);
  --mx: 50vw; --my: 50vh; /* cursor glow position */
}

/* 3) Base */
body { background: var(--bg); color: var(--text-1); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; text-rendering: optimizeLegibility; position: relative; }
a { color: rgba(var(--accent-rgb), .85); text-decoration: none; }
a:hover { text-shadow: 0 0 10px rgba(var(--accent-rgb), .55); }
.heat-fx-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

body.is-preloading { overflow: hidden; }
#preloader{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #050806;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
body.is-preloading #preloader{
  opacity: 1;
  pointer-events: auto;
}
body.is-loaded #preloader{
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}
.preloader-logo{
  position: relative;
  width: min(620px, 80vw);
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.preloader-logo__image{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.35) brightness(0.7);
  opacity: .35;
}
.preloader-logo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(var(--accent-rgb), .2) 25%, rgba(var(--accent-rgb), .8) 55%, rgba(var(--accent-rgb), 1) 100%);


  mask-image: url('img/logo.png');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url('img/logo.png');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  clip-path: inset(0 100% 0 0);
  animation: logoFill 1.8s ease-out forwards;
  filter: drop-shadow(0 0 38px rgba(var(--accent-rgb), .38));
}
@keyframes logoFill{
  to{ clip-path: inset(0 0 0 0); }
}
@supports not ((mask-image: url('img/logo.png')) or (-webkit-mask-image: url('img/logo.png'))){
  .preloader-logo::after{
    mask-image: none;
    -webkit-mask-image: none;
  }
}
@media (prefers-reduced-motion: reduce){
  #preloader{ transition: none; }
  .preloader-logo::after{
    animation: none;
    clip-path: inset(0 0 0 0);
  }
}

/* 4) Hero (parallax) */
.parallax { height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; background: #050806; }
.parallax::after { content: ""; position: absolute; inset: -12%; background: url('img/parallax.jpg') center / cover; transform-origin: center; animation: parallaxGlide 28s ease-in-out infinite alternate; filter: saturate(110%); will-change: transform; z-index: 0; }
.parallax::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.68) 100%); z-index: 1; pointer-events:none; }
.logo-wrap { position: relative; display: inline-block; animation: floatY 7s ease-in-out infinite; z-index: 2; }
.logo-wrap .logo { display:block; max-width: min(720px, 82vw); position: relative; z-index: 2; filter: url(#heat-warp); transform: translateZ(0); }
.logo-heat { position:absolute; inset:-5%; pointer-events:none; z-index:1; background: radial-gradient(120% 110% at 50% 42%, rgba(20,20,20,.22) 0%, rgba(20,20,20,0) 68%); filter: url(#heat-warp) blur(0.6px); opacity:.34; animation: heatVeil 5s ease-in-out infinite alternate; }
.parallax-embers { position:absolute; inset:-18%; pointer-events:none; z-index:1; mix-blend-mode: screen; opacity:.72; }
.parallax-embers::before,
.parallax-embers::after { content:""; position:absolute; inset:-24%; width: 150%; height: 150%; background: transparent; }
.parallax-embers::before { background:
  radial-gradient(7px 7px at 6% 82%, rgba(0,255,170,.9) 0%, rgba(0,255,170,0) 100%),
  radial-gradient(6px 6px at 18% 64%, rgba(110,255,210,.8) 0%, rgba(110,255,210,0) 100%),
  radial-gradient(6px 6px at 30% 88%, rgba(0,255,153,.85) 0%, rgba(0,255,153,0) 100%),
  radial-gradient(5px 5px at 46% 70%, rgba(0,205,140,.75) 0%, rgba(0,205,140,0) 100%),
  radial-gradient(6px 6px at 60% 90%, rgba(140,255,220,.78) 0%, rgba(140,255,220,0) 100%),
  radial-gradient(5px 5px at 74% 68%, rgba(0,255,180,.82) 0%, rgba(0,255,180,0) 100%),
  radial-gradient(6px 6px at 88% 84%, rgba(0,255,130,.85) 0%, rgba(0,255,130,0) 100%),
  radial-gradient(5px 5px at 40% 40%, rgba(120,255,210,.65) 0%, rgba(120,255,210,0) 100%),
  radial-gradient(5px 5px at 22% 48%, rgba(0,255,153,.7) 0%, rgba(0,255,153,0) 100%),
  radial-gradient(7px 7px at 70% 40%, rgba(0,225,160,.6) 0%, rgba(0,225,160,0) 100%);
  animation: emberDrift 28s linear infinite alternate;
  filter: blur(1.2px);
  opacity:.82;
}
.parallax-embers::after { background:
  radial-gradient(5px 5px at 12% 22%, rgba(160,255,230,.6) 0%, rgba(160,255,230,0) 100%),
  radial-gradient(4px 4px at 26% 10%, rgba(0,255,160,.55) 0%, rgba(0,255,160,0) 100%),
  radial-gradient(4px 4px at 42% 26%, rgba(140,255,210,.58) 0%, rgba(140,255,210,0) 100%),
  radial-gradient(5px 5px at 58% 12%, rgba(0,255,153,.52) 0%, rgba(0,255,153,0) 100%),
  radial-gradient(6px 6px at 72% 24%, rgba(120,255,200,.6) 0%, rgba(120,255,200,0) 100%),
  radial-gradient(5px 5px at 86% 14%, rgba(0,255,130,.55) 0%, rgba(0,255,130,0) 100%),
  radial-gradient(4px 4px at 94% 34%, rgba(150,255,220,.48) 0%, rgba(150,255,220,0) 100%),
  radial-gradient(5px 5px at 50% 8%, rgba(0,255,153,.5) 0%, rgba(0,255,153,0) 100%);
  animation: emberRise 19s linear infinite;
  filter: blur(2px);
  opacity:.7;
}
@keyframes floatY { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
@keyframes heatVeil {
  0% { transform: translateY(0) scale(1) skewY(0deg); opacity:.32; }
  45% { transform: translateY(-1.4%) scale(1.018) skewY(.7deg); opacity:.42; }
  70% { transform: translateY(.6%) scale(.996) skewY(-.6deg); opacity:.35; }
  100% { transform: translateY(0) scale(1) skewY(.2deg); opacity:.32; }
}
@keyframes parallaxGlide {
  0% { transform: translate3d(-1.8%, -1.2%, 0) scale(1.08); }
  30% { transform: translate3d(2.2%, 1.4%, 0) scale(1.05); }
  60% { transform: translate3d(-2.5%, 1.9%, 0) scale(1.09); }
  100% { transform: translate3d(2.8%, -1.6%, 0) scale(1.06); }
}
@keyframes emberDrift {
  0% { transform: translate(-6%, 8%) scale(1); opacity:.55; }
  35% { transform: translate(0%, -6%) scale(1.06); opacity:.78; }
  68% { transform: translate(12%, -12%) scale(1.12); opacity:.64; }
  100% { transform: translate(20%, -20%) scale(1.2); opacity:.58; }
}
@keyframes emberRise {
  0% { transform: translate(6%, 18%) scale(1.05); opacity:.52; }
  33% { transform: translate(-4%, 6%) scale(1.1); opacity:.72; }
  66% { transform: translate(-12%, -6%) scale(1.15); opacity:.6; }
  100% { transform: translate(-22%, -20%) scale(1.24); opacity:.54; }
}

/* Green liquid cursor glow */
body::before { content:""; position: fixed; inset: -10vmax; pointer-events:none; z-index:0; background:
  radial-gradient(30vmax 24vmax at 25% 35%, rgba(0,255,153,.18) 0%, rgba(0,0,0,0) 65%),
  radial-gradient(24vmax 20vmax at 65% 60%, rgba(0,255,120,.12) 0%, rgba(0,0,0,0) 60%),
  radial-gradient(20vmax 18vmax at 40% 75%, rgba(0,200,255,.06) 0%, rgba(0,0,0,0) 60%);
  filter: blur(32px) saturate(1.25); mix-blend-mode: screen; opacity:.7; animation: fireDrift 28s ease-in-out infinite alternate, gooPulse 7s ease-in-out infinite alternate; }
@keyframes gooPulse { 0%{opacity:.68} 50%{opacity:.85} 100%{opacity:.68} }
header.parallax, .links-blocks, .my-music, .description, .other-links, footer { position: relative; z-index: 1; }

/* 5) Containers */
.links-blocks, .description, .other-links, .my-music { width: var(--container); margin: var(--space-7) auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--elev-1); padding: var(--space-6); }
.links-blocks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--elev-1); padding: var(--space-5); }
.block p { font-size: var(--fs-2); color: var(--muted); font-weight: 700; letter-spacing: .02em; margin-bottom: var(--space-3); text-align: center; grid-column: 1 / -1; }

/* 6) Generic link-button (base) */
.link-button { position: relative; display: inline-grid; place-items: center; margin: var(--space-3); width: 84px; height: 84px; border-radius: var(--radius-3); background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.02) 100%), var(--surface-2); border: 1px solid var(--border); box-shadow: var(--elev-1); isolation: isolate; }
.link-button img { width: 58px; height: 58px; transition: transform .25s ease, filter .25s ease; filter: saturate(110%); z-index: 1; }
.link-button::after { content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(60% 60% at 50% 50%, rgba(var(--accent-rgb), .16) 0%, rgba(var(--accent-rgb), 0) 70%); opacity:0; transform:scale(.85); transition: transform .28s ease, opacity .28s ease; pointer-events:none; z-index:0; }
.link-button:hover img { transform: scale(1.06); filter: saturate(118%) contrast(1.05); }
.link-button:hover::after { opacity:1; transform:scale(1); }

/* 7) Social/Music tiles fixed grid */
.links-blocks .block {
  display: grid;
  grid-template-columns: repeat(3, 140px);
  justify-content: center;
  align-content: start;
  row-gap: 26px;
  column-gap: 28px;
  padding: 22px 18px;
}

.links-blocks .block .link-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 140px;
  height: 152px;
  margin: 0;
  padding: 20px 14px;
  border-radius: 20px;
}

.links-blocks .block .link-button img {
  width: 72px;
  height: 72px;
}

.links-blocks .block .link-button::before {
  content: attr(aria-label);
  position: static;
  margin: 0;
  text-align: center;
  font-size: .95rem;
  line-height: 1.25;
  color: var(--text-2);
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

@media (max-width: 1279px) {
  .links-blocks {
    grid-template-columns: 2fr;
    gap: 18px;
  }

  .links-blocks .block {
    grid-template-columns: repeat(6, 120px);
    row-gap: 22px;
    column-gap: 22px;
  }

  .links-blocks .block .link-button {
    max-width: 120px;
    max-height: 136px;
    padding: 8px 6px;
    gap: 10px;
  }

  .links-blocks .block .link-button img {
    max-width: 200px;
    max-height: 200px;
  }
}

@media (max-width: 1000px) {
  .links-blocks {
    grid-template-columns: 2fr;
    gap: 18px;
  }

  .links-blocks .block {
    grid-template-columns: repeat(3, 120px);
    row-gap: 22px;
    column-gap: 22px;
  }

  .links-blocks .block .link-button {
    max-width: 120px;
    max-height: 136px;
    padding: 8px 6px;
    gap: 10px;
  }

  .links-blocks .block .link-button img {
    max-width: 200px;
    max-height: 200px;
  }
}

@media (max-width: 720px) {
  .links-blocks {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .links-blocks .block {
    grid-template-columns: repeat(2, 120px);
    row-gap: 22px;
    column-gap: 22px;
  }

  .links-blocks .block .link-button {
    max-width: 120px;
    max-height: 136px;
    padding: 8px 6px;
    gap: 10px;
  }

  .links-blocks .block .link-button img {
    max-width: 200px;
    max-height: 200px;
  }
}

/* 8) My Music carousel */
.my-music { text-align: center; }
.my-music h2 { font-size: var(--fs-3); color: var(--accent); }
.my-music-ctrls { display: none; }
.music-carousel { position: relative; overflow: hidden; }
.music-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width: none; }
.music-track::-webkit-scrollbar { display: none; }
.release-card { position:relative; flex:0 0 auto; width: clamp(160px, 28vw, 220px); aspect-ratio:1/1; border-radius: var(--radius-2); background: var(--surface-3); border:1px solid var(--border); box-shadow: var(--elev-2); overflow: visible; transition: transform .25s ease, box-shadow .25s ease; }
.release-card::after { content:""; position:absolute; inset:-10%; border-radius: inherit; pointer-events:none; background: radial-gradient(60% 60% at 50% 50%, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), 0) 70%); filter: blur(16px); opacity: 0; transition: opacity .28s ease, filter .28s ease; }
.release-card img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(108%); transition: transform .35s ease, filter .35s ease; border-radius: inherit; }
.release-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 22px rgba(var(--accent-rgb), .14); }
.release-card:hover img { transform: scale(1.04); filter: saturate(115%) contrast(1.06); }
.release-card:hover::after { opacity:.65; filter: blur(18px); }
.release-title { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 58%); color: var(--text-1); font-weight:600; text-shadow:0 0 10px rgba(var(--accent-rgb), .25); }
.edge-fade { position:absolute; top:0; bottom:0; width: 50px; pointer-events:none; z-index:2; }
.edge-fade.left { left:0; background: linear-gradient(90deg, var(--surface-1) 0%, rgba(17,17,17,0) 100%); }
.edge-fade.right { right:0; background: linear-gradient(270deg, var(--surface-1) 0%, rgba(17,17,17,0) 100%); }
.carousel-btn { position:absolute; top:50%; transform: translateY(-50%); width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); border:1px solid rgba(var(--accent-rgb), .38); background: rgba(15,15,15,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--elev-1); cursor:pointer; z-index:3; transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; }
.carousel-btn.prev { left:8px; } .carousel-btn.next { right:8px; }
.carousel-btn:hover { transform: translateY(-50%) translateY(-1px); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .6); }
.carousel-btn:active { transform: translateY(-50%) scale(.96); }
.carousel-btn:disabled { opacity:.45; cursor: default; }

/* 9) Other-links vertical list */
.other-links h2 { font-size: var(--fs-3); margin-bottom: var(--space-4); color: var(--text-1); }
.other-links .links-list { display:grid; grid-template-columns:1fr; gap: 6px; }
.other-links .links-list a.list-item { position: relative;  width:100%; display:grid; grid-template-columns:56px 1fr; align-items:center; min-height:64px; padding:12px 16px; border:1px solid var(--border); border-radius: var(--radius-1); background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.015) 100%), var(--surface-2); box-shadow: var(--elev-1); box-sizing: border-box; }
.other-links .links-list a.list-item img { width:44px; height:44px; justify-self:start; align-self:center; }
.other-links .links-list a.list-item::before { content: attr(aria-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 72px); justify-self: center; text-align:center; color: var(--text-2); font-size: var(--fs-1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; pointer-events: none; }
.other-links .links-list a.list-item:hover { border-color: rgba(var(--accent-rgb), .35); background: linear-gradient(180deg, rgba(var(--accent-rgb), .06) 0%, rgba(var(--accent-rgb), .03) 100%), var(--surface-2); }
.other-links .links-list a.list-item:hover::before { color: var(--text-1); }

/* 10) Footer */
footer { background: var(--surface-1); border-top:1px solid var(--border); color: var(--text-2); padding: var(--space-6) 0; text-align:center; }
.footer-links { width: var(--container); margin: 0 auto var(--space-4); display:flex; justify-content:center; gap: var(--space-6); }
.footer-block { display:flex; flex-direction:column; align-items:center; gap: var(--space-2); padding: var(--space1);}
.footer-block h3 { color: var(--text-1); font-size: var(--fs-2); }
.footer-block a img { width:50px; height:50px; transition: transform .25s ease; }
.footer-block a img:hover { transform: scale(1.06); }
.copyright { margin-top: var(--space-2); font-size:.9rem; color: var(--muted); }

/* 11) Reveal on scroll */
.reveal-fade { opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }
.reveal-fade.is-visible { opacity:1; transform: none; }




/* Unified section titles */
.section-title{ display:block; margin: 0 0 var(--space-4); color: var(--accent); font-weight: 800; text-align:center; letter-spacing:.01em; font-size: var(--fs-3); }
.links-blocks .block .section-title{ grid-column:1 / -1; margin: 0 0 18px; }
.my-music .section-title{ margin-bottom: var(--space-4); }
.description .section-title{ margin-bottom: var(--space-4); }
.description .stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.description .stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.description .stat-card{
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: 18px 22px;
  border-radius: var(--radius-1);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.012) 100%), var(--surface-2);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.description .stat-card::after{
  content:"";
  position: absolute;
  inset: -45% 12% auto -15%;
  width: 120%;
  height: 160%;
  background: radial-gradient(65% 65% at 20% 50%, rgba(var(--accent-rgb), .18) 0%, rgba(var(--accent-rgb), 0) 70%);
  opacity: .6;
  pointer-events: none;
  filter: blur(18px);
}
.description .stat-card__icon{
  width: 52px;
  height: 52px;
  justify-self: center;
  filter: saturate(120%);
  z-index: 1;
}
.description .stat-card__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 1;
}
.description .stat-card__label{
  font-size: var(--fs-1);
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: .03em;
}
.description .stat-card__value{
  font-size: clamp(1.4rem, 2.1vw + 1rem, 2.2rem);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px){
    
  .description .stat-card{
    grid-template-columns: 2fr;
    gap: var(--space-3);
    padding: 16px 18px;
  }
  .description .stat-card__icon{
    width: 144px;
    height: 144px;
  }
  .description .stat-card__label{
    letter-spacing: .02em;
    justify-items: center;
  }
}
.other-links .section-title{ margin-bottom: var(--space-4); }

/* My Music: full-width slide layout and non-overlapping arrows */
.my-music{ text-align:left; }
.my-music .music-carousel{
  position:relative;
  overflow:hidden;
}
.my-music .music-carousel .carousel-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.my-music .music-carousel .carousel-bg::after{
  content:"";
  inset:0;
}
.my-music .music-carousel .carousel-bg img{
  width:110%;
  height:110%;
  object-fit:cover;
  transform: translate(-5%, -5%);
  filter: blur(24px) brightness(.35) saturate(1.2);
  opacity: 1;
  transition: opacity .45s ease;
}
.my-music .music-track{
  position:relative;
  z-index:1;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.my-music .music-track::-webkit-scrollbar{ display:none; }

.release-slide{
  position:relative;
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align:center;
  overflow:hidden;
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}
.release-slide::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.25;
  pointer-events:none;
}
.release-slide .slide-content{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: min(50%, 360px) 1fr;
  align-items:center;
}
.release-slide .slide-cover{
  display:flex;
  justify-content:center;
}
.release-slide .slide-cover img{
  width:100%;
  max-width: 500px;
  aspect-ratio:1/1;
  object-fit:cover;
  box-shadow: none !important;
}
.release-slide .slide-meta{
  color: var(--text-1);
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}
.rel-title{
  margin:0 0 12px;
  font-size: clamp(1.2rem, 1.2vw + 1rem, 2rem);
  color:#fff;
  font-weight: 800;
}
.rel-artist{
  margin:6px 0;
  font-size: 1.05rem;
  color: var(--text-2);
  font-weight:700;
}
.rel-feat,
.rel-date{
  margin:4px 0;
  font-size: .98rem;
  color:var(--text-2);
}
.slide-meta a{
  color:#fff;
  text-decoration:none;
}
.slide-meta a:hover{
  border-bottom-color: rgba(255,255,255,.55);
}

.rel-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.rel-actions .rel-badges{
  flex:0 0 auto;
}
.rel-actions .rel-platforms{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.badge-ym{
  margin:0;
  padding:0;
  background: transparent;
  border:none;
  box-shadow:none;
}
.badge-ym img{
  height: 60px;
}
.rel-platforms{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.plat-square{
  width:48px;
  height:48px;
  background: transparent;
  border:none;
  box-shadow:none;
}
.plat-square img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Navigation arrows placed in reserved paddings */
.my-music .carousel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border:1px solid rgba(var(--accent-rgb), .38);
  background: rgba(15,15,15,.55);
  color: var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  pointer-events:auto;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.my-music .carousel-btn.prev{ left: 10px; }
.my-music .carousel-btn.next{ right: 10px; }
.my-music .carousel-btn:hover{
  transform: translateY(-50%) translateY(-1px);
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .6);
}
.my-music .carousel-btn:active{
  transform: translateY(-50%) scale(.96);
}
.my-music .carousel-btn.is-disabled{
  opacity:.4;
  cursor: default;
}

@media (max-width: 959px) {

  .release-slide .slide-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap: 20px;
  }
  .release-slide .slide-cover img{
    max-width: min(72vw, 260px);
    margin-top: var(--space-2);
    margin-bottom: var(--space-5);
  }
  .release-slide .slide-meta{
    text-align:center;
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .rel-actions{
    flex-direction:column;
    align-items:center;
    gap: 20px;
    width:100%;
  }
  .rel-actions .rel-badges{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .rel-actions .rel-platforms{
    justify-content:center;
    width:100%;
    gap: 14px;
  }
  .rel-platforms{
    justify-content:center;
  }
  .badge-ym img{
    height: 48px;
  }
  .plat-square{
    width:44px;
    height:44px;
  }
  .my-music .carousel-btn{
    width: 30px;
    height: 30px;
  }
}

/* Translucent surfaces to reveal cursor glow */
.links-blocks, .description, .other-links, .my-music{
  background: rgba(16,18,17,.68) !important;
  border-color: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.block{
  background: rgba(20,24,22,.55) !important;
  border-color: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}
.my-music .release-slide{
  background: rgba(20, 24, 22, 0.274) !important;
  backdrop-filter: blur(5px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.55);
}

/* Background sparks and flares layer */
#fx-layer{ position: fixed; inset: 0; pointer-events:none; z-index: 0; contain: layout style; }
.spark{ position:absolute; width:6px; height:2px; border-radius: 2px; background: linear-gradient(90deg, rgba(0,255,153,.9) 0%, rgba(0,255,153,.25) 60%, rgba(0,0,0,0) 100%); filter: drop-shadow(0 0 6px rgba(0,255,153,.35)); will-change: transform, opacity; opacity: 0; }
.flare{ position:absolute; width:120px; height:120px; border-radius:50%; background: radial-gradient(circle, rgba(0,255,153,.55) 0%, rgba(0,255,153,.18) 35%, rgba(0,0,0,0) 70%); filter: blur(8px) saturate(1.2); will-change: transform, opacity; opacity:0; mix-blend-mode: screen; }

@keyframes sparkMove{
  0%{ transform: translate(0,0) scale(var(--s)) rotate(var(--r)); opacity: 0; }
  10%{ opacity: var(--o); }
  90%{ opacity: var(--o); }
  100%{ transform: translate(var(--dx), var(--dy)) scale(calc(var(--s)*.85)) rotate(var(--r)); opacity: 0; }
}
@keyframes flarePulse{
  0%{ transform: translate(-50%, -50%) scale(.65); opacity: 0.1; }
  30%{ opacity:0.85; }
  100%{ transform: translate(-50%, -50%) scale(1.55); opacity: 1; }
}

@keyframes fireDrift { 0%{ transform: translate3d(0,0,0) scale(1) } 50%{ transform: translate3d(2vmax,-1vmax,0) scale(1.03) } 100%{ transform: translate3d(-2vmax,2vmax,0) scale(1.02) } }

/* Ensure content sits above effects */
.content-layer{ position:relative; z-index:2 }

/* Cursor glow fixed layer */
#cursor-glow{ position: fixed; inset: 0; pointer-events: none; z-index: 1; background:
  radial-gradient(30vmax 30vmax at var(--mx) var(--my), rgba(0,255,153,.18) 0%, rgba(0,255,153,.08) 35%, rgba(0,0,0,0) 65%),
  radial-gradient(16vmax 16vmax at calc(var(--mx) + 8vmax) calc(var(--my) + 6vmax), rgba(0,200,255,.06) 0%, rgba(0,0,0,0) 60%);
  filter: blur(24px) saturate(1.2); mix-blend-mode: screen; opacity: .8; }

/* fx-layer above base fire, below content */
#fx-layer{ z-index: 1; }
.content-layer{ position: relative; z-index: 2; }

/* Make fire drift more noticeable */
@keyframes fireDrift { 0%{ transform: translate3d(0,0,0) scale(1) } 50%{ transform: translate3d(4vmax,-3vmax,0) scale(1.04) } 100%{ transform: translate3d(-4vmax,3vmax,0) scale(1.02) } }
body::before { animation: fireDrift 30s ease-in-out infinite alternate, gooPulse 8s ease-in-out infinite alternate; }

/* Ensure sparks visible even if reduce-motion is on */
#fx-layer{ display:block !important; }

/* Disabled visual state for custom disabled class */
.carousel-btn.is-disabled{ opacity:.45; cursor: default; pointer-events:auto; }

/* Fullscreen cover modal */
#cover-modal{ position: fixed; inset: 0; z-index: 9998; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#cover-modal.is-open{ display: flex; }
#cover-modal img{ max-width: 92vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(0,255,153,.25); }
#cover-modal .modal-close{ position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color:#eafff6; background: rgba(15,15,15,.55); border:1px solid rgba(0,255,153,.35); cursor: pointer; box-shadow: var(--elev-1); }