/* ==========================================================================
   HENNA-C — ARTIST WEBSITE v4.0
   Full redesign — dark luxury, glassmorphism, cinematic
   Color palette: preserved from brand
   ========================================================================== */

/* ── Google Fonts loaded in HTML ── */

/* ──────────────────────────────────────────
   DESIGN TOKENS
────────────────────────────────────────── */
:root {
  /* Brand colors */
  --ink:            #050505;
  --charcoal:       #0d0d10;
  --copper:         #c97b45;
  --copper-hi:      #f1b170;
  --copper-lo:      #8f5532;
  --cream:          #f7e2c7;
  --muted:          #bfa78f;
  --smoke:          #7a716d;

  /* Accent glows */
  --purple:         #a855f7;
  --pink:           #ec4899;
  --purple-glow:    rgba(168,85,247,0.22);
  --pink-glow:      rgba(236,72,153,0.22);
  --copper-glow:    rgba(241,177,112,0.18);

  /* Glass system */
  --glass:          rgba(12,12,16,0.48);
  --glass-hover:    rgba(18,18,24,0.62);
  --glass-border:   rgba(255,255,255,0.07);
  --glass-hi:       rgba(255,255,255,0.15);
  --glass-blur:     blur(28px);
  --glass-blur-sm:  blur(16px);
  --glass-shadow:   0 32px 80px rgba(0,0,0,0.82);

  /* Chrome gradient border */
  --chrome: linear-gradient(
    135deg,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.02) 50%,
    rgba(201,123,69,0.28)
  );

  /* Layout */
  --max:      1200px;
  --pad:      clamp(1.25rem, 4vw, 2.5rem);
  --r-card:   22px;
  --r-pill:   50px;

  /* Motion */
  --ease:   cubic-bezier(0.16,1,0.3,1);
  --spring: cubic-bezier(0.175,0.885,0.32,1.275);
  --t:      0.5s var(--ease);
  --ts:     0.6s var(--spring);
}

/* ──────────────────────────────────────────
   RESET
────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: "Outfit","Helvetica Neue",sans-serif;
  line-height: 1.65;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  min-width: 320px;
}

/* Scanline texture */
body::before {
  content:"";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,rgba(255,255,255,0.005) 0 1px,transparent 1px 3px);
  mix-blend-mode: soft-light;
}

img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; transition: var(--t); }
button { font-family: inherit; }
h1,h2,h3,h4 { font-family:"Cinzel",Georgia,serif; font-weight:700; line-height:1.1; color:#fff; letter-spacing:-0.01em; }

/* Scrollbar */
::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:var(--ink); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--copper-hi); }
::selection { background:var(--copper); color:var(--ink); }

/* ──────────────────────────────────────────
   PARTICLE CANVAS
────────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
}

/* ──────────────────────────────────────────
   AMBIENT BLOBS
────────────────────────────────────────── */
.ambient-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(130px);
  opacity: 0.65;
}

.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.blob-a {
  width: clamp(400px,60vw,700px); height: clamp(400px,60vw,700px);
  background: radial-gradient(circle, rgba(201,123,69,0.24) 0%, transparent 70%);
  top: -15%; left: 5%;
  animation: blob-drift-a 28s infinite alternate ease-in-out;
}
.blob-b {
  width: clamp(350px,50vw,600px); height: clamp(350px,50vw,600px);
  background: radial-gradient(circle, rgba(168,85,247,0.22) 0%, transparent 75%);
  bottom: 5%; right: -5%;
  animation: blob-drift-b 34s infinite alternate ease-in-out;
}
.blob-c {
  width: clamp(300px,40vw,500px); height: clamp(300px,40vw,500px);
  background: radial-gradient(circle, rgba(236,72,153,0.15) 0%, transparent 70%);
  top: 42%; left: 58%;
  animation: blob-drift-c 22s infinite alternate ease-in-out;
}

@keyframes blob-drift-a {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(80px,50px) scale(1.1); }
  100% { transform: translate(-40px,90px) scale(0.95); }
}
@keyframes blob-drift-b {
  0%   { transform: translate(0,0) scale(0.9); }
  50%  { transform: translate(-100px,-60px) scale(1.15); }
  100% { transform: translate(50px,40px) scale(1); }
}
@keyframes blob-drift-c {
  0%   { transform: translate(0,0) scale(1.1); }
  50%  { transform: translate(40px,-80px) scale(0.85); }
  100% { transform: translate(-70px,30px) scale(1.05); }
}

/* Cursor glow */
.cursor-glow {
  position: fixed;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241,177,112,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* ──────────────────────────────────────────
   HEADER
────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 2.5rem));
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2rem;
  background: rgba(8,8,10,0.35);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: var(--t);
}
.site-header.scrolled {
  top: 0.7rem;
  background: rgba(6,6,8,0.78);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 25px 60px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 0.65rem 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family:"Cinzel",Georgia,serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.logo-ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--copper-hi);
  box-shadow: 0 0 14px rgba(201,123,69,0.3);
  transition: var(--ts);
}
.brand:hover .logo-ring { transform: rotate(15deg) scale(1.08); border-color:#fff; box-shadow: 0 0 22px rgba(255,255,255,0.4); }
.logo-ring img { width:100%; height:100%; object-fit:cover; }
.brand-name {
  font-size: clamp(0.9rem,2.2vw,1.1rem);
  background: linear-gradient(135deg,#fff,var(--cream));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(1rem,2.5vw,2rem);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.nav-desktop a { position:relative; padding:0.35rem 0.1rem; }
.nav-desktop a::after {
  content:"";
  position:absolute; bottom:0; left:50%;
  transform: translateX(-50%);
  width:0; height:2px;
  background: linear-gradient(90deg,var(--copper-hi),var(--pink));
  border-radius:2px;
  transition: var(--t);
}
.nav-desktop a:hover { color:#fff; }
.nav-desktop a:hover::after { width:100%; }
.nav-btn {
  padding: 0.5rem 1.4rem !important;
  border: 1px solid var(--copper-hi);
  border-radius: var(--r-pill);
  background: rgba(201,123,69,0.1);
  color: #fff !important;
}
.nav-btn::after { display:none !important; }
.nav-btn:hover {
  background: linear-gradient(135deg,var(--copper-hi),var(--copper)) !important;
  color: var(--ink) !important;
  border-color: #fff !important;
  box-shadow: 0 0 18px rgba(241,177,112,0.3);
  transform: translateY(-2px);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px; height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;
}
.hamburger span {
  display:block; width:100%; height:2px;
  background:#fff; border-radius:2px;
  transition: var(--t);
}
.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: rgba(4,4,5,0.97);
  z-index: 999;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.55s ease;
  pointer-events: none;
}
.mobile-drawer.open { transform:translateY(0); opacity:1; pointer-events:auto; }
.nav-mobile {
  display:flex; flex-direction:column;
  align-items:center; gap:2.4rem;
  text-transform:uppercase; font-size:1.4rem; font-weight:800; letter-spacing:0.18em;
}
.nav-mobile a { color:var(--muted); }
.nav-mobile a:hover { color:var(--copper-hi); }
.mobile-nav-btn {
  padding:0.85rem 2.8rem;
  border:1px solid var(--copper-hi);
  border-radius:var(--r-pill);
  background:rgba(201,123,69,0.1);
  color:#fff !important;
}

/* ──────────────────────────────────────────
   SHARED UTILITIES
────────────────────────────────────────── */
.hidden { display:none !important; }

/* Section wrapper */
.section {
  width: 100%;
  position: relative;
  z-index: 2;
}
.section-dark { background: rgba(6,4,10,0.6); }

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8rem var(--pad);
}

/* Eyebrow tag */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--copper-hi);
  margin-bottom: 1.1rem;
}

/* Pulsing dot */
.glow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--copper-hi);
  box-shadow: 0 0 10px var(--copper-hi), 0 0 22px var(--copper);
  animation: dot-pulse 2.5s infinite alternate ease-in-out;
  flex-shrink: 0;
}
.glow-dot.glow-purple {
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple), 0 0 22px rgba(168,85,247,0.5);
}
@keyframes dot-pulse {
  0%   { transform:scale(0.85); opacity:0.65; }
  100% { transform:scale(1.25); opacity:1; }
}

/* Live blink dot */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f5a550;
  box-shadow: 0 0 10px #f5a550;
  animation: live-blink 1.6s infinite;
  -webkit-text-fill-color: initial;
}
@keyframes live-blink {
  0%,100% { opacity:1; }
  50%      { opacity:0.3; }
}

/* Blink dot purple */
.blink-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple), 0 0 22px rgba(168,85,247,0.5);
  animation: live-blink 1.6s infinite;
  flex-shrink: 0;
}

/* Section title */
.section-title {
  font-size: clamp(2.4rem,6vw,4.4rem);
  margin-bottom: 3.5rem;
  background: linear-gradient(180deg,#fff 40%,#a1a1aa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
.title-gradient-purple {
  background: linear-gradient(135deg,#fff 25%,var(--purple) 65%,var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-sub {
  margin-top: -2rem;
  margin-bottom: 3rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* Glass card mixin (applied via pseudo) */
.glass-card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: var(--t);
}
.glass-card::after {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid transparent;
  background: var(--chrome) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events:none;
}
.glass-card:hover { border-color:var(--glass-hi); background:var(--glass-hover); }

/* Spotlight hover (Vision Pro style) */
.spotlight { position:relative; overflow:hidden; }
.spotlight::before {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.055),transparent 40%);
  opacity:0;
  z-index:2;
  pointer-events:none;
  transition: opacity 0.45s ease;
}
.spotlight:hover::before { opacity:1; }

/* Art Placeholder — shimmer block */
.art-block {
  background-color: rgba(255,255,255,0.03);
  background-image:
    linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.045) 50%,rgba(255,255,255,0) 100%),
    linear-gradient(135deg,rgba(201,123,69,0.07) 0%,rgba(168,85,247,0.07) 50%,rgba(236,72,153,0.07) 100%);
  background-size: 200% 100%, 100% 100%;
  animation: shimmer 2.8s infinite ease-in-out;
  border-radius: inherit;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-block::after {
  content:"▷";
  font-size: 2.2rem;
  color: rgba(255,255,255,0.08);
  pointer-events: none;
}
@keyframes shimmer {
  0%   { background-position: -200% 0, 0 0; }
  100% { background-position:  200% 0, 0 0; }
}

/* Pending link / button */
.pending { opacity:0.42; cursor:default; pointer-events:none; }
.pending::after { content:" Coming Soon"; font-size:0.65em; opacity:0.6; }

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* Kicker label */
.kicker {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--copper-hi);
  display: block;
  margin-bottom: 0.5rem;
}

/* ──────────────────────────────────────────
   SECTION 1 — HERO
────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 8rem var(--pad) 6rem;
  z-index: 2;
}

/* Background image layer (Fixed for entire website) */
.fixed-cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--ink);
  pointer-events: none;
  overflow: hidden;
}
.stars-layer {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-cosmic-galaxy.png');
  background-size: cover;
  background-position: center;
  opacity: 0.65;
  transform: scale(1.06);
  animation: bg-zoom 55s infinite alternate linear;
  filter: brightness(0.75) contrast(1.0) saturate(1.0);
}
@keyframes bg-zoom {
  from { transform:scale(1.06) translate(0,0); }
  to   { transform:scale(1.26) translate(-2%,2%); }
}
.fixed-cosmic-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201,123,69,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(135,116,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at center, transparent 20%, rgba(3,3,4,0.92) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 45%, var(--ink) 100%);
  pointer-events: none;
}
.fixed-cosmic-bg-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,rgba(168,85,247,0.015) 0 1px,transparent 1px 4px);
  pointer-events: none;
  z-index: 2;
}

/* Hero content */
.hero-content {
  position:relative;
  z-index:5;
  text-align:center;
  max-width:960px;
  animation: fade-up 1.2s var(--ease) both;
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(45px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: #ac5f1f;
  margin-bottom: 2.2rem;
  position: relative;
  width: 100%;
}
.hero-eyebrow-text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(to bottom, #f5a550 20%, #b46824 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f5a550; /* fallback */
  text-shadow: 0 0 12px rgba(245, 165, 80, 0.25);
}
.hero-eyebrow-line {
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ac5f1f, #f5a550, #ac5f1f, transparent);
  position: relative;
  margin-top: 4px;
}
.hero-eyebrow-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 
    0 0 8px #fff,
    0 0 20px #f5a550,
    0 0 35px #f5a550;
}

/* Static taller and sharper transform */
.hero-title {
  position: relative;
  font-family: "Bodoni Moda", "Cinzel", Georgia, serif;
  font-size: clamp(4.5rem, 11vw, 8.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  display: inline-block;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #fffbf0 10%,
    #f2ce72 28%,
    #deb03d 46%,
    #8d6610 50%,
    #fcd264 76%,
    #bfa045 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scaleY(1.32) scaleX(0.88);
  transform-origin: center;
  margin-bottom: 1.2rem;
  z-index: 1;
}

/* Sharp outer gold outline edge + 3D extrusion under the main text */
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-text-stroke: 2.5px #ffd54f;
  -webkit-text-fill-color: #8d6610;
  color: #8d6610;
  /* Stacked sharp shadows for 3D depth + dark base shadow */
  text-shadow: 
    0 1px 0 #9c731e,
    0 2px 0 #855f14,
    0 3px 0 #6e4e0b,
    0 4px 0 #563c07,
    0 5px 0 #3f2a03,
    0 6px 10px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}

.hero-sub {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  font-weight: 300;
  color: #cca450;
  letter-spacing: 0.65em;
  text-transform: uppercase;
  margin-bottom: 3.5rem;
  opacity: 0.95;
  text-shadow: 0 0 10px rgba(204, 164, 80, 0.2);
}

/* ── Hero Logo Heading & Image with Shimmer ── */
.hero-logo-heading {
  margin-top: 1rem;
  margin-bottom: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.logo-shimmer-wrapper {
  position: relative;
  display: inline-block;
  max-width: min(90vw, 680px);
  transform: translateZ(0);
}
.hero-logo-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.25));
  animation: logo-glow-pulse 6s infinite alternate ease-in-out;
  transform: translateZ(0);
}
.logo-shimmer-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 248, 220, 0.75) 50%,
    rgba(255, 255, 255, 0) 60%,
    transparent 65%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  -webkit-mask: url('assets/henna-c-header-logo.png') no-repeat center / 100% 100%;
  mask: url('assets/henna-c-header-logo.png') no-repeat center / 100% 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: logo-shimmer 7s infinite ease-in-out;
  z-index: 3;
}
@keyframes logo-glow-pulse {
  0% {
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.2)) drop-shadow(0 0 2px rgba(212, 175, 55, 0.1));
    transform: scale(0.99) translateZ(0);
  }
  100% {
    filter: drop-shadow(0 0 28px rgba(212, 175, 55, 0.5)) drop-shadow(0 0 8px rgba(255, 213, 79, 0.25));
    transform: scale(1.02) translateZ(0);
  }
}
@keyframes logo-shimmer {
  0%, 15% {
    background-position: 150% 0;
  }
  50%, 65% {
    background-position: -150% 0;
  }
  100% {
    background-position: -150% 0;
  }
}



/* ── Capsule Platforms ── */
.capsule-platforms {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 2.5rem;
  margin-bottom: 3.5rem;
}

.platform-capsule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  background: rgba(6, 5, 8, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s var(--ease);
  min-width: 172px;
  height: 52px;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.12), inset 0 0 8px rgba(212, 175, 55, 0.05);
  -webkit-box-reflect: bottom 6px linear-gradient(transparent 55%, rgba(255, 255, 255, 0.06) 100%);
}

.pc-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.pc-logo svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Specific styling for the Amazon Music logo puck to be transparent */
.amazon-logo-puck {
  background: transparent !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 22px !important;
  color: #00a8e1;
}

.amazon-logo-puck svg {
  width: 100% !important;
  height: 100% !important;
}

.pc-label {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fffaeb;
  text-align: left;
  line-height: 1;
  transition: all 0.3s ease;
}

/* Flat official brand colors — clean, no dome */
.spotify-logo-puck    { background: #1DB954; color: #0c0a0f; }
.apple-logo-puck      { background: linear-gradient(135deg, #fc3c54, #fa233b); color: #fff; border-radius: 7px; }
.youtube-logo-puck    { background: #FF0000; color: #fff; }
.tidal-logo-puck      { background: #000000; color: #ffffff; }
.deezer-logo-puck     { background: #121216; color: #A238FF; }
.audiomack-logo-puck  { background: #ffa200; color: #0c0a0f; }

/* Hover effects */
.platform-capsule:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 213, 79, 0.85);
  box-shadow: 0 0 25px rgba(255, 213, 79, 0.35), inset 0 0 12px rgba(255, 213, 79, 0.1);
  background: rgba(12, 10, 15, 0.75);
}

.platform-capsule:hover .pc-logo {
  transform: scale(1.08);
}

.platform-capsule:hover .pc-label {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Responsive adjustments for mobile grid layout */
@media (max-width: 768px) {
  .platform-capsule {
    min-width: 152px;
    height: 48px;
    padding: 8px 14px 8px 10px;
    gap: 8px;
  }
  .pc-logo {
    width: 28px;
    height: 28px;
  }
  .pc-logo svg {
    width: 16px;
    height: 16px;
  }
  .amazon-logo-puck {
    width: 38px !important;
    height: 18px !important;
  }
  .pc-label {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .capsule-platforms {
    gap: 0.8rem;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .platform-capsule {
    min-width: 135px;
    height: 44px;
    padding: 6px 10px 6px 8px;
    gap: 6px;
  }
  .pc-logo {
    width: 24px;
    height: 24px;
  }
  .pc-logo svg {
    width: 14px;
    height: 14px;
  }
  .amazon-logo-puck {
    width: 32px !important;
    height: 15px !important;
  }
  .pc-label {
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}



/* Scroll progress bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--copper-hi), var(--pink), var(--purple));
  z-index: 10001;
  box-shadow: 0 0 10px rgba(241, 177, 112, 0.5), 0 0 20px rgba(236, 72, 153, 0.3);
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* Scroll cue */
.scroll-cue {
  position:absolute; bottom:2.5rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.8rem;
  pointer-events:none; opacity:0.7;
  font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.28em; color:var(--smoke);
  transition: opacity 0.4s ease;
}
.scroll-cue.scrolled {
  opacity: 0;
}
.scroll-arrow {
  width: 22px;
  height: 22px;
  color: var(--copper-hi);
  filter: drop-shadow(0 0 4px rgba(241,177,112,0.3));
  animation: arrow-bounce 1.8s ease-in-out infinite;
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ──────────────────────────────────────────
   SECTION 2 — OUT NOW
────────────────────────────────────────── */
.release-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: center;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow);
  padding: 3.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: var(--t);
}
.release-card::after {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid transparent;
  background: var(--chrome) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events:none;
}
.release-card:hover { border-color:var(--glass-hi); background:var(--glass-hover); box-shadow:0 45px 95px rgba(0,0,0,0.88); }

/* Art column */
.rc-art-col {
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 20px 50px rgba(0,0,0,0.7);
}
.rc-art-col .art-block { width:100%; height:100%; border-radius:14px; }
.rc-art-col .art-block::after { font-size:3.5rem; }
.rc-art-img { width:100%; height:100%; object-fit:cover; border-radius:14px; transition:transform 0.8s var(--ease); }
.release-card:hover .rc-art-img { transform:scale(1.06) rotate(1deg); }

.rc-badge {
  position:absolute; top:1rem; left:1rem;
  background:linear-gradient(135deg,var(--copper-hi),var(--copper));
  color:var(--ink); font-size:0.58rem; font-weight:900;
  text-transform:uppercase; letter-spacing:0.24em;
  padding:0.3rem 0.85rem; border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(201,123,69,0.4);
}

/* Info column */
.rc-info-col { display:flex; flex-direction:column; }
.rc-title {
  font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; margin-bottom:0.3rem;
  background:linear-gradient(135deg,#fff 40%,var(--cream) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rc-meta { font-size:0.88rem; font-weight:700; color:var(--copper-hi); margin-bottom:1.6rem; }
.rc-desc { color:var(--muted); font-size:clamp(0.92rem,2vw,1.05rem); line-height:1.8; margin-bottom:2.2rem; }

.rc-actions { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }

/* Liquid glass play button */
.liquid-btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:0.65rem;
  padding:0.85rem 2.2rem;
  background:linear-gradient(135deg,rgba(201,123,69,0.22),rgba(168,85,247,0.18));
  border:1px solid rgba(201,123,69,0.45);
  border-radius:var(--r-pill);
  color:#fff;
  font-size:0.85rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.16em;
  cursor:pointer;
  transition:var(--ts);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.btn-glow {
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,rgba(201,123,69,0.35),rgba(168,85,247,0.25));
  opacity:0; transition:opacity 0.4s ease;
}
.liquid-btn:hover .btn-glow { opacity:1; }
.liquid-btn:hover { transform:translateY(-3px); box-shadow:0 0 35px rgba(201,123,69,0.35); }
.liquid-btn svg { width:20px; height:20px; }

/* Stream chips */
.rc-stream-links { display:flex; gap:0.75rem; flex-wrap:wrap; }
.stream-chip {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.45rem 0.9rem;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r-pill);
  font-size:0.74rem; font-weight:700; letter-spacing:0.1em;
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  transition:var(--t);
}
.stream-chip:not(.pending):hover { color:#fff; background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.25); }
.stream-chip.spotify-chip:not(.pending):hover  { border-color:rgba(30,215,96,0.5); color:#1db954; }
.stream-chip.apple-chip:not(.pending):hover    { border-color:rgba(252,60,81,0.5); color:#fc3c51; }
.stream-chip.audiomack-chip:not(.pending):hover{ border-color:rgba(255,178,0,0.5); color:#ffb200; }

/* Dropdown Wrapper & Button Dropdown System */
.rc-actions.dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.rc-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: rgba(10, 10, 14, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.rc-dropdown-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cream);
  transition: background 0.2s ease, color 0.2s ease;
  text-align: left;
}
.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.8;
  color: var(--copper-hi);
}
.dropdown-item:hover svg {
  opacity: 1;
  color: #fff;
}
.play-btn .icon-chevron {
  transition: transform 0.3s ease;
}
.play-btn.open .icon-chevron {
  transform: rotate(180deg);
}

/* Mini grid & carousel container */
.mini-grid-container {
  position: relative;
  width: 100%;
  margin-top: 3.5rem;
}
.mini-grid {
  display: flex;
  gap: 1.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding: 1rem 0.5rem 2rem 0.5rem;
  margin: -1rem -0.5rem -2rem -0.5rem;
}
.mini-grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(12, 12, 16, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: var(--t);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-50%) scale(1.05);
}
.carousel-arrow svg {
  width: 20px;
  height: 20px;
}
.prev-arrow {
  left: -22px;
}
.next-arrow {
  right: -22px;
}
@media (max-width: 768px) {
  .carousel-arrow {
    display: none;
  }
}
.mini-card {
  flex: 0 0 310px;
  scroll-snap-align: start;
  background:var(--glass);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  transition:var(--t);
}
.mini-card::after {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid transparent;
  background:var(--chrome) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  pointer-events:none;
}
.mini-card:hover { border-color:var(--glass-hi); transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,0.7); }

.mini-art-wrap { position:relative; aspect-ratio:1/1; overflow:hidden; }
.mini-art-block { width:100%; height:100%; border-radius:0; }
.mini-art-block::after { font-size:2.2rem; }
.mini-art-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.mini-card:hover .mini-art-wrap img { transform:scale(1.08); }

.mini-play-btn {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.45);
  opacity:0; transition:opacity 0.3s ease;
  border:none; cursor:pointer; color:#fff;
}
.mini-play-btn svg { width:36px; height:36px; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.mini-art-wrap:hover .mini-play-btn { opacity:1; }

.mini-text { padding:1.2rem 1.3rem; }
.mini-kicker { font-size:0.64rem; font-weight:900; text-transform:uppercase; letter-spacing:0.24em; color:var(--copper-hi); display:block; margin-bottom:0.3rem; }
.mini-title { font-family:"Cinzel",serif; font-size:0.95rem; font-weight:800; margin-bottom:0.25rem; }
.mini-genre { font-size:0.78rem; color:var(--muted); margin-bottom:0.6rem; }
.mini-listen-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--copper-hi);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--t);
}
.mini-listen-btn:hover {
  color: #fff;
  transform: translateX(3px);
}

.mini-link { font-size:0.74rem; font-weight:800; color:var(--copper-hi); text-transform:uppercase; letter-spacing:0.12em; }
.mini-link:not(.pending):hover { color:#fff; }

.more-card {
  display:flex; align-items:center; justify-content:center;
  min-height:200px;
  border:1px dashed rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.015);
  cursor:default;
}
.more-inner { text-align:center; color:var(--smoke); }
.more-plus { font-size:2.5rem; font-weight:200; line-height:1; margin-bottom:0.5rem; }
.more-inner span { font-size:0.78rem; line-height:1.6; }

/* ──────────────────────────────────────────
   SECTION 3 — COMING OUT SOON
────────────────────────────────────────── */
.coming-soon-bg {
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.cs-orb {
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:0.7;
}
.cs-orb-left {
  width:50vw; height:50vw;
  background:radial-gradient(circle,rgba(168,85,247,0.2) 0%,transparent 70%);
  top:-20%; left:-10%;
  animation:orb-drift 20s infinite alternate ease-in-out;
}
.cs-orb-right {
  width:40vw; height:40vw;
  background:radial-gradient(circle,rgba(236,72,153,0.18) 0%,transparent 70%);
  bottom:-10%; right:-5%;
  animation:orb-drift 26s 4s infinite alternate ease-in-out;
}
@keyframes orb-drift {
  0%   { transform:scale(0.9) translate(0,0); }
  100% { transform:scale(1.12) translate(40px,-40px); }
}
.cs-grid-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(168,85,247,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,85,247,0.05) 1px,transparent 1px);
  background-size:60px 60px;
}

/* Announcement banner */
.announce-banner {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:3.5rem;
  align-items:center;
  background:rgba(8,5,16,0.6);
  backdrop-filter:blur(34px);
  -webkit-backdrop-filter:blur(34px);
  border:1px solid rgba(168,85,247,0.2);
  border-radius:var(--r-card);
  padding:3.5rem;
  margin-bottom:4rem;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset, 0 40px 80px rgba(0,0,0,0.72), 0 0 80px rgba(168,85,247,0.1);
}
.announce-banner::after {
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:1px solid transparent;
  background:linear-gradient(135deg,rgba(168,85,247,0.3),rgba(255,255,255,0.04) 40%,rgba(236,72,153,0.22)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out; mask-composite:exclude;
  pointer-events:none;
}

.ab-art-col { flex-shrink:0; }
.ab-art-block {
  width:260px; height:260px;
  border-radius:18px;
  border:1px solid rgba(168,85,247,0.2);
  box-shadow:0 0 50px rgba(168,85,247,0.18), 0 24px 60px rgba(0,0,0,0.65);
  position:relative; overflow:hidden;
}
.ab-art-block::after { font-size:3.8rem; color:rgba(255,255,255,0.09); }

.ab-art-img {
  width:260px; height:260px;
  border-radius:18px;
  border:1px solid rgba(168,85,247,0.2);
  box-shadow:0 0 50px rgba(168,85,247,0.18), 0 24px 60px rgba(0,0,0,0.65);
  object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.announce-banner:hover .ab-art-img {
  transform:scale(1.03);
}

.banner-countdown {
  margin:0.8rem 0;
  gap:0.6rem;
}
.banner-countdown .cd-seg {
  min-width:50px;
}
.banner-countdown .cd-num {
  background:rgba(255,255,255,0.08);
  font-size:1.8rem;
  padding:0.4rem 0.8rem;
}
.banner-countdown .cd-label {
  font-size:0.6rem;
}
.banner-countdown .cd-colon {
  font-size:1.6rem;
}

.banner-preview-btn {
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* Pulsing ring in art placeholder */
.ab-pulse-ring {
  position:absolute; inset:0; border-radius:inherit;
  border:2px solid rgba(168,85,247,0.28);
  animation:ring-pulse 3s infinite ease-in-out;
}
@keyframes ring-pulse {
  0%,100% { opacity:0.3; transform:scale(0.96); }
  50%      { opacity:1;   transform:scale(1); }
}

.ab-content { display:flex; flex-direction:column; gap:1rem; }
.ab-eyebrow {
  display:flex; align-items:center; gap:0.7rem;
  font-size:0.7rem; font-weight:900; text-transform:uppercase;
  letter-spacing:0.3em; color:var(--purple);
}
.ab-title {
  font-family:"Cinzel",serif;
  font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:900; line-height:1.1;
  background:linear-gradient(135deg,#fff 28%,var(--purple) 68%,var(--pink) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 14px rgba(168,85,247,0.3));
}
.ab-meta { font-size:0.84rem; font-weight:700; color:var(--copper-hi); text-transform:uppercase; letter-spacing:0.16em; }
.ab-teaser { font-size:1rem; color:var(--muted); line-height:1.75; max-width:520px; }
.ab-ctas { display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:0.4rem; }

.ab-btn-primary {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.78rem 1.9rem;
  background:linear-gradient(135deg,rgba(168,85,247,0.26),rgba(236,72,153,0.2));
  border:1px solid rgba(168,85,247,0.45);
  border-radius:var(--r-pill);
  color:#fff; font-size:0.82rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.16em;
  transition:var(--ts); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 22px rgba(168,85,247,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ab-btn-primary:not(.pending):hover {
  background:linear-gradient(135deg,rgba(168,85,247,0.52),rgba(236,72,153,0.42));
  border-color:rgba(168,85,247,0.85);
  box-shadow:0 0 38px rgba(168,85,247,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
  transform:translateY(-3px);
}

.ab-btn-ghost {
  padding:0.78rem 1.6rem;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r-pill);
  color:var(--muted); font-size:0.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  transition:var(--t); background:rgba(255,255,255,0.03);
}
.ab-btn-ghost:not(.pending):hover { color:#fff; border-color:rgba(255,255,255,0.28); background:rgba(255,255,255,0.07); transform:translateY(-2px); }

/* Upcoming grid */
.upcoming-grid {
  display:grid;
  grid-template-columns:minmax(0,540px);
  justify-content:center;
  gap:1.8rem;
}

.upcoming-card {
  position:relative; border-radius:var(--r-card); overflow:hidden;
  background:rgba(8,5,16,0.55);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(168,85,247,0.15);
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
  transition:var(--t);
}
.upcoming-card:hover { border-color:rgba(168,85,247,0.3); transform:translateY(-4px); }

.uc-glow {
  position:absolute; top:-60px; left:50%;
  transform:translateX(-50%);
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,0.2) 0%,transparent 70%);
  pointer-events:none; filter:blur(30px);
}

.uc-art-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  background: rgba(0, 0, 0, 0.2);
}
.uc-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.upcoming-card:hover .uc-art-img {
  transform: scale(1.05);
}

.placeholder-art {
  background: linear-gradient(135deg, rgba(8, 5, 16, 0.8), rgba(168, 85, 247, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
}
.uc-art-placeholder-content {
  text-align: center;
  padding: 2rem;
}
.music-note-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6));
  animation: float-note 3s ease-in-out infinite;
}
.placeholder-text {
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  color: var(--smoke);
  letter-spacing: 0.1em;
}

@keyframes float-note {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.uc-body { padding:2.4rem; display:flex; flex-direction:column; gap:0.9rem; position:relative; z-index:2; }
.uc-badge {
  display:inline-block; padding:0.3rem 0.9rem;
  border:1px solid rgba(168,85,247,0.35);
  border-radius:var(--r-pill);
  font-size:0.64rem; font-weight:900; text-transform:uppercase; letter-spacing:0.2em;
  color:var(--purple); background:rgba(168,85,247,0.1);
}
.uc-name {
  font-family:"Cinzel",serif; font-size:clamp(1.3rem,3vw,1.8rem);
  font-weight:800; color:#fff; line-height:1.1;
}
.uc-meta { font-size:0.82rem; color:var(--muted); }

/* Countdown */
.countdown {
  display:flex; align-items:center; gap:0.4rem;
  margin:0.4rem 0;
}
.cd-seg { display:flex; flex-direction:column; align-items:center; min-width:44px; }
.cd-num {
  font-family:"Cinzel",serif; font-size:1.6rem; font-weight:900; color:#fff;
  background:rgba(255,255,255,0.06); border-radius:8px;
  padding:0.3rem 0.6rem; width:100%; text-align:center;
  border:1px solid rgba(255,255,255,0.06);
}
.cd-label { font-size:0.55rem; font-weight:800; text-transform:uppercase; letter-spacing:0.18em; color:var(--smoke); margin-top:0.3rem; }
.cd-colon { font-size:1.4rem; font-weight:700; color:var(--purple); align-self:flex-start; margin-top:0.4rem; }

/* Progress */
.progress-row { display:flex; justify-content:space-between; align-items:center; }
.progress-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:var(--muted); }
.progress-pct { font-size:0.72rem; font-weight:900; color:var(--purple); }
.progress-track {
  height:4px; border-radius:4px;
  background:rgba(255,255,255,0.07);
  overflow:hidden;
}
.progress-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--purple),var(--pink));
  box-shadow:0 0 8px rgba(168,85,247,0.5);
}

.uc-preview-btn {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.65rem 1.4rem; margin-top:0.3rem;
  border:1px solid rgba(168,85,247,0.28);
  border-radius:var(--r-pill);
  background:rgba(168,85,247,0.1);
  color:var(--purple); font-size:0.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.14em;
  cursor:pointer; transition:var(--ts); width:fit-content;
}
.uc-preview-btn svg { width:14px; height:14px; }
.uc-preview-btn:hover { background:rgba(168,85,247,0.22); border-color:rgba(168,85,247,0.55); transform:translateY(-2px); color:#fff; }

/* ──────────────────────────────────────────
   SECTION 4 — LATEST TRACKS (PLAYER)
────────────────────────────────────────── */
.player-shell {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:2rem;
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  box-shadow:var(--glass-shadow);
  padding:2.8rem;
  position:relative; overflow:hidden;
}
.player-shell::after {
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:1px solid transparent;
  background:var(--chrome) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out; mask-composite:exclude;
  pointer-events:none;
}
.player-shell.playing { border-color:rgba(201,123,69,0.25); }

/* Now playing tag */
.now-playing-tag {
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.65rem; font-weight:900; text-transform:uppercase;
  letter-spacing:0.24em; color:var(--copper-hi);
  margin-bottom:1.6rem;
}

/* Wave viz */
.wave-viz {
  display:flex; align-items:flex-end; gap:3px; height:18px;
}
.wave-viz span {
  display:block; width:3px;
  background:linear-gradient(180deg,var(--copper-hi),var(--pink));
  border-radius:2px;
  animation:wave-idle 1.6s ease infinite;
  height:4px;
  transition:var(--t);
}
.wave-viz span:nth-child(1){ animation-delay:0s; }
.wave-viz span:nth-child(2){ animation-delay:0.15s; }
.wave-viz span:nth-child(3){ animation-delay:0.3s; }
.wave-viz span:nth-child(4){ animation-delay:0.45s; }
.wave-viz span:nth-child(5){ animation-delay:0.6s; }
@keyframes wave-idle {
  0%,100%{ height:4px; }
  50%     { height:8px; }
}
.wave-viz.playing span { animation-name:wave-play; }
@keyframes wave-play {
  0%,100%{ height:4px; }
  25%     { height:18px; }
  50%     { height:10px; }
  75%     { height:15px; }
}

/* Art frame */
.player-art-frame {
  position:relative;
  width:100%; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 12px 35px rgba(0,0,0,0.6);
  margin-bottom:1.6rem;
}
.player-art-block { width:100%; height:100%; border-radius:14px; }
.player-art-block::after { font-size:2.8rem; }
.player-art-img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.player-art-glow {
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 55%);
  pointer-events:none;
}

.player-track-info { margin-bottom:1.4rem; }
.player-track-title { font-size:clamp(1.1rem,2.5vw,1.5rem); font-weight:900; margin-bottom:0.25rem; }
.player-track-meta { font-size:0.82rem; color:var(--copper-hi); font-weight:700; }

/* Progress bar */
.player-progress { margin-bottom:1.4rem; cursor:pointer; }
.pp-track {
  position:relative; height:4px; border-radius:4px;
  background:rgba(255,255,255,0.08); margin-bottom:0.4rem; overflow:visible;
}
.pp-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--copper-hi),var(--pink));
  width:0%;
}
.pp-handle {
  position:absolute; top:50%;
  transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px rgba(241,177,112,0.5);
  left:0%; transition:left 0.1s linear;
}
.pp-times { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--smoke); font-weight:600; }

/* Controls */
.player-controls {
  display:flex; align-items:center; gap:1rem;
}
.ctrl-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--ts);
}
.ctrl-btn:hover { background:rgba(255,255,255,0.1); color:#fff; border-color:var(--glass-hi); transform:scale(1.08); }

.ctrl-play-btn {
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--copper-hi),var(--copper));
  border:none; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:var(--ts);
  box-shadow:0 8px 22px rgba(201,123,69,0.4);
}
.play-btn-ring {
  position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(201,123,69,0.3);
  animation:ring-idle 2s ease infinite;
}
@keyframes ring-idle {
  0%,100%{ opacity:0.4; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.06); }
}
.ctrl-play-btn:hover { transform:scale(1.1); box-shadow:0 12px 30px rgba(201,123,69,0.55); }
.ctrl-play-btn.playing { background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 8px 22px rgba(168,85,247,0.4); }

.vol-group { display:flex; align-items:center; gap:0.5rem; margin-left:auto; }
.vol-slider {
  -webkit-appearance:none; appearance:none;
  width:80px; height:3px; border-radius:3px;
  background:rgba(255,255,255,0.1); cursor:pointer; outline:none;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--copper-hi); cursor:pointer;
  box-shadow:0 0 6px rgba(241,177,112,0.4);
}

/* Playlist panel */
.player-right {
  border-left:1px solid var(--glass-border);
  padding-left:2rem;
  display:flex; flex-direction:column;
}
.playlist-label {
  font-family:"Cinzel",serif; font-size:0.65rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.28em;
  color:var(--muted); margin-bottom:1rem;
}
.playlist { display:flex; flex-direction:column; gap:0.5rem; flex:1; }

.playlist-header {
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd54f;
  text-transform: uppercase;
  padding: 1.2rem 1rem 0.6rem;
  border-bottom: 1px solid rgba(255, 213, 79, 0.15);
  margin-bottom: 0.4rem;
  opacity: 0.85;
}
.playlist-header:first-of-type {
  padding-top: 0.4rem;
}

.pl-row {
  display:flex; align-items:center; gap:1rem;
  padding:0.9rem 1rem; border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid transparent;
  cursor:pointer; transition:var(--t);
}
.pl-row:hover { background:rgba(255,255,255,0.07); border-color:var(--glass-border); }
.pl-row.active { background:rgba(201,123,69,0.1); border-color:rgba(201,123,69,0.22); }

.pl-num-wrap { position:relative; width:24px; text-align:center; flex-shrink:0; }
.pl-num { font-size:0.78rem; font-weight:700; color:var(--smoke); }
.pl-play-arrow { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--copper-hi); opacity:0; transition:opacity 0.2s; }
.pl-row:hover .pl-num { opacity:0; }
.pl-row:hover .pl-play-arrow { opacity:1; }
.pl-row.active .pl-num { opacity:0; }
.pl-row.active .pl-play-arrow { opacity:1; }

.pl-info { display:flex; flex-direction:column; flex:1; min-width:0; }
.pl-name { font-size:0.88rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-tag { font-size:0.7rem; color:var(--smoke); margin-top:0.15rem; }

.playlist-note { font-size:0.75rem; color:var(--smoke); margin-top:1rem; text-align:center; }

/* ──────────────────────────────────────────
   SECTION 5 — GALLERY
────────────────────────────────────────── */
.masonry {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(2,220px);
  gap:1.2rem;
}
.gallery-item {
  position:relative; overflow:hidden;
  border-radius:16px;
  border:1px solid var(--glass-border);
  cursor:pointer;
  transition:var(--t);
}
.gallery-item:hover { border-color:var(--glass-hi); transform:scale(1.012); box-shadow:0 20px 50px rgba(0,0,0,0.65); }
.gi-large { grid-column:1/6; grid-row:1/3; }
.gi-wide  { grid-column:6/13; grid-row:1/2; }
.gi-tall  { grid-column:6/9; grid-row:2/3; }
.gallery-item:last-child { grid-column:9/13; grid-row:2/3; }

.gi-img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); filter:brightness(0.85); }
.gallery-item:hover .gi-img { transform:scale(1.06); filter:brightness(1); }

.gi-overlay {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,0.75) 0%,transparent 55%);
  padding:1.4rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; transition:opacity 0.4s ease;
}
.gallery-item:hover .gi-overlay { opacity:1; }
.gi-tag { font-size:0.62rem; font-weight:900; text-transform:uppercase; letter-spacing:0.22em; color:var(--copper-hi); margin-bottom:0.35rem; }
.gi-overlay h4 { font-size:0.95rem; font-weight:800; color:#fff; margin-bottom:0.2rem; }
.gi-overlay p { font-size:0.76rem; color:var(--muted); }

.gi-sheen {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 50%);
  pointer-events:none;
}

/* ──────────────────────────────────────────
   SECTION 6 — ABOUT
────────────────────────────────────────── */
.about-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,0.95fr);
  gap:2rem 3rem;
  align-items:stretch;
  background:
    radial-gradient(circle at 78% 24%,rgba(241,177,112,0.08),transparent 28%),
    linear-gradient(135deg,rgba(8,8,10,0.9),rgba(6,6,8,0.74));
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  box-shadow:var(--glass-shadow);
  padding:2.1rem 2rem 1.5rem;
  position:relative; overflow:hidden;
}
.about-grid::after {
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:1px solid transparent;
  background:var(--chrome) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out; mask-composite:exclude;
  pointer-events:none;
}

.about-label { font-size:0.7rem; font-weight:900; text-transform:uppercase; letter-spacing:0.28em; color:var(--copper-hi); margin-bottom:0.6rem; }
.about-headline { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:900; margin-bottom:1.6rem; line-height:1.15; }

.about-bio {
  color: #f1f1f3; /* Brighter cream for maximum contrast */
  line-height: 1.82;
  margin-bottom: 1.1rem;
  font-size: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 4px 15px rgba(0,0,0,0.85);
}
.about-headline {
  text-shadow: 0 2px 5px rgba(0,0,0,0.95), 0 4px 20px rgba(0,0,0,0.85);
}
/* Portrait BG styles (Permanent SCREEN blend mode styling) */
.about-portrait-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  border-radius: 0;
  overflow: visible;
  border: none;
  box-shadow: none;
  clip-path: none;
  -webkit-mask-image: linear-gradient(to right, transparent 5%, rgba(0,0,0,0.3) 25%, black 50%, black 100%);
  mask-image: linear-gradient(to right, transparent 5%, rgba(0,0,0,0.3) 25%, black 50%, black 100%);
}

.about-portrait-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.7) contrast(1.2);
}

.about-copy {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  padding: 0.6rem 0 0.2rem;
}
.about-text-content {
  position: relative;
  width: 100%;
  z-index: 2;
}
.about-portrait {
  position:relative;
  min-height:438px;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  align-self:stretch;
  z-index:1;
}
.about-portrait img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  opacity:0.84;
  filter:saturate(0.95) contrast(1.05);
}
.about-portrait::before,
.about-portrait::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.about-portrait::before {
  background:linear-gradient(90deg,rgba(6,6,8,0.72),transparent 34%);
}
.about-portrait::after {
  background:
    radial-gradient(circle at 52% 18%,rgba(255,255,255,0.12),transparent 18%),
    linear-gradient(180deg,transparent 62%,rgba(6,6,8,0.48));
}
.about-quote {
  grid-column: 1 / -1;
  margin-top:0.5rem; padding:1.6rem 2rem;
  border-left:3px solid var(--copper-hi);
  background:rgba(255,255,255,0.03);
  border-radius:0 12px 12px 0;
  position:relative;
  z-index: 2;
}
.q-mark { font-family:"Cinzel",serif; font-size:3rem; color:var(--copper-hi); opacity:0.4; line-height:0; vertical-align:-0.5em; margin-right:0.3rem; }
.about-quote { font-style:italic; color:var(--cream); line-height:1.7; font-size:0.98rem; }
.about-quote cite { display:block; margin-top:0.8rem; font-style:normal; font-size:0.78rem; font-weight:700; color:var(--copper-hi); letter-spacing:0.1em; }

/* HUD panel */
.about-hud {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(90px,0.62fr) repeat(4,minmax(0,1fr));
  align-items:stretch;
  gap:0;
  background:rgba(10,10,12,0.78);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:1.15rem 1rem;
  position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.hud-status-cell {
  display:flex;
  justify-content:center;
  padding:0.15rem 1rem 0;
}
.hud-status { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.65rem; font-weight:900; text-transform:uppercase; letter-spacing:0.22em; color:var(--copper-hi); }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--copper-hi); box-shadow:0 0 8px var(--copper-hi); animation:dot-pulse 2s infinite alternate; }
.hud-label { font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.22em; color:var(--smoke); }
.hud-line { height:1px; background:linear-gradient(90deg,rgba(201,123,69,0.4),transparent); margin-bottom:1.4rem; }

.hud-list { display:contents; }
.hud-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0.65rem;
  min-height:4.8rem;
  padding:0 0.9rem;
  border-left:1px solid rgba(255,255,255,0.05);
}
.hud-row dt { font-size:0.62rem; font-weight:900; text-transform:uppercase; letter-spacing:0.2em; color:var(--smoke); white-space:nowrap; text-align:center; }
.hud-row dd { font-size:0.82rem; line-height:1.5; color:var(--cream); font-weight:700; text-align:center; }

.hud-deco { position:absolute; bottom:-20px; right:-20px; width:100px; height:100px; opacity:0.12; pointer-events:none; }
.hud-ring { width:100%; height:100%; border-radius:50%; border:2px solid var(--copper-hi); }
.hud-scan { position:absolute; bottom:50%; right:50%; width:140%; height:1px; background:linear-gradient(90deg,transparent,var(--copper-hi)); transform-origin:right; animation:scan-line 3s linear infinite; }
@keyframes scan-line { 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }

/* ──────────────────────────────────────────
   SECTION 7 — CONTACT
────────────────────────────────────────── */
.contact-card {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:3rem;
  align-items:start;
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  box-shadow:var(--glass-shadow);
  padding:3.5rem;
  position:relative; overflow:hidden;
}
.contact-card::after {
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:1px solid transparent;
  background:var(--chrome) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out; mask-composite:exclude;
  pointer-events:none;
}
.contact-headline {
  font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; margin-bottom:1.2rem;
  background:linear-gradient(135deg,#fff 40%,var(--cream) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.contact-desc { color:var(--muted); line-height:1.78; margin-bottom:2rem; font-size:1rem; max-width:480px; }

.email-btn {
  display:inline-flex; align-items:center; gap:0.75rem;
  padding:1rem 2rem; margin-bottom:2.5rem;
  background:linear-gradient(135deg,rgba(201,123,69,0.18),rgba(168,85,247,0.12));
  border:1px solid rgba(201,123,69,0.35);
  border-radius:var(--r-pill);
  color:#fff; font-size:0.9rem; font-weight:700;
  transition:var(--ts);
  backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(201,123,69,0.15);
}
.email-btn:hover { background:linear-gradient(135deg,rgba(201,123,69,0.32),rgba(168,85,247,0.22)); border-color:rgba(201,123,69,0.6); transform:translateY(-3px); box-shadow:0 0 35px rgba(201,123,69,0.3); }

.follow-label { font-size:0.68rem; font-weight:900; text-transform:uppercase; letter-spacing:0.26em; color:var(--smoke); margin-bottom:1rem; }
.contact-socials { display:flex; flex-wrap:wrap; gap:0.7rem; }
.cs-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.55rem 1.1rem;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,0.04);
  color:var(--muted); font-size:0.76rem; font-weight:700;
  transition:var(--t);
}
.cs-btn:hover { color:#fff; background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.22); transform:translateY(-2px); }

/* Contact portrait */
.contact-right { position:relative; }
.contact-art-frame { position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); box-shadow:0 20px 50px rgba(0,0,0,0.6); }
.contact-portrait { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.contact-art-glow { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.09) 0%,transparent 50%); pointer-events:none; }
.contact-stamp { text-align:center; margin-top:1.2rem; }
.contact-stamp span { display:block; font-family:"Cinzel",serif; font-size:0.95rem; font-weight:900; letter-spacing:0.18em; color:#fff; }
.stamp-sub { font-family:"Outfit",sans-serif; font-size:0.72rem; font-weight:600; letter-spacing:0.16em; color:var(--smoke); margin-top:0.25rem; }

/* ──────────────────────────────────────────
   FOOTER
────────────────────────────────────────── */
.site-footer {
  background:rgba(4,4,6,0.95);
  border-top:1px solid var(--glass-border);
  padding:2.5rem var(--pad);
  position:relative; z-index:2;
}
.footer-inner { max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; flex-wrap:wrap; gap:1rem; }
.footer-brand { display:flex; align-items:center; gap:0.8rem; }
.footer-logo { width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--copper-hi); }
.footer-name { font-family:"Cinzel",serif; font-size:0.95rem; font-weight:800; letter-spacing:0.12em; color:#fff; }
.footer-copy { font-size:0.8rem; color:var(--smoke); }
.footer-legal { max-width:var(--max); margin:0 auto; font-size:0.75rem; color:var(--smoke); line-height:1.6; opacity:0.7; }

/* ──────────────────────────────────────────
   STICKY FLOATING PLAYER
────────────────────────────────────────── */
.sticky-player {
  position:fixed;
  bottom:-100px;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,calc(100% - 2rem));
  z-index:900;
  background:rgba(8,8,12,0.88);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:0 -10px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  padding:0.9rem 1.8rem;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.5rem;
  transition:bottom 0.6s var(--ease);
}
.sticky-player.active { bottom:1.2rem; }

/* Track info */
.sp-track { display:flex; align-items:center; gap:0.9rem; }
.sp-art-placeholder,.sp-art-img { width:46px; height:46px; border-radius:8px; flex-shrink:0; }
.sp-art-placeholder {
  background-color:rgba(255,255,255,0.04);
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.04) 50%,rgba(255,255,255,0) 100%);
  background-size:200% 100%;
  animation:shimmer 2.8s infinite ease-in-out;
}
.sp-text { display:flex; flex-direction:column; }
.sp-title { font-size:0.86rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.sp-artist { font-size:0.72rem; color:var(--muted); }

/* Center controls */
.sp-center { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.sp-btns { display:flex; align-items:center; gap:0.7rem; }
.sp-btn {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:var(--ts);
}
.sp-btn:hover { background:rgba(255,255,255,0.12); color:#fff; }
.sp-btn svg { width:15px; height:15px; }
.sp-play-btn {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--copper-hi),var(--copper));
  border:none; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--ts); box-shadow:0 4px 14px rgba(201,123,69,0.4);
}
.sp-play-btn:hover { transform:scale(1.1); }
.sp-play-btn svg { width:17px; height:17px; }

.sp-progress { display:flex; align-items:center; gap:0.6rem; font-size:0.68rem; color:var(--smoke); width:260px; }
.sp-bar { flex:1; height:3px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; cursor:pointer; }
.sp-fill { height:100%; background:linear-gradient(90deg,var(--copper-hi),var(--pink)); width:0%; border-radius:3px; }

/* Right side */
.sp-right { display:flex; align-items:center; gap:0.75rem; justify-content:flex-end; }
.sp-eq { display:flex; align-items:flex-end; gap:2px; height:16px; }
.sp-eq span {
  display:block; width:3px; border-radius:2px;
  background:linear-gradient(180deg,var(--copper-hi),var(--pink));
  height:4px;
}
.sp-eq.playing span:nth-child(1){ animation:eq-bar 0.8s 0s ease infinite alternate; }
.sp-eq.playing span:nth-child(2){ animation:eq-bar 0.8s 0.15s ease infinite alternate; }
.sp-eq.playing span:nth-child(3){ animation:eq-bar 0.8s 0.3s ease infinite alternate; }
.sp-eq.playing span:nth-child(4){ animation:eq-bar 0.8s 0.45s ease infinite alternate; }
@keyframes eq-bar { 0%{ height:3px; } 100%{ height:16px; } }

.sp-vol-slider {
  -webkit-appearance:none; appearance:none;
  width:72px; height:3px; border-radius:3px;
  background:rgba(255,255,255,0.1); cursor:pointer; outline:none;
}
.sp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:10px; height:10px; border-radius:50%;
  background:var(--copper-hi); cursor:pointer;
}

/* ──────────────────────────────────────────
   LIGHTBOX
────────────────────────────────────────── */
.lightbox {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.4s ease;
}
.lightbox.open { opacity:1; pointer-events:auto; }
.lb-close {
  position:absolute; top:1.5rem; right:2rem;
  font-size:2.5rem; line-height:1; color:var(--muted);
  background:transparent; border:none; cursor:pointer;
  transition:var(--t);
}
.lb-close:hover { color:#fff; }
.lb-inner { max-width:min(90vw,900px); text-align:center; }
.lb-img { max-height:80vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.8); }
.lb-caption { margin-top:1rem; font-size:0.82rem; color:var(--muted); }

/* ──────────────────────────────────────────
   PARTICLE CANVAS
────────────────────────────────────────── */
#particle-canvas { opacity: 0.92; }

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */
@media (max-width:1024px) {
  .release-card { grid-template-columns:280px 1fr; gap:2.5rem; padding:2.5rem; }
  .player-shell { grid-template-columns:1fr; }
  .player-right { border-left:none; border-top:1px solid var(--glass-border); padding-left:0; padding-top:1.5rem; margin-top:1.5rem; }
  .about-grid { grid-template-columns:1fr; }
  .about-portrait { min-height:430px; max-height:560px; }
  .about-hud { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; padding:1rem; }
  .hud-status-cell { justify-content:flex-start; padding:0.8rem 1rem; border-left:0; }
  .hud-row { align-items:flex-start; min-height:auto; padding:0.8rem 1rem; border-left:0; border-top:1px solid rgba(255,255,255,0.05); }
  .hud-row dt,
  .hud-row dd { text-align:left; }
  .contact-card { grid-template-columns:1fr; }
  .contact-right { display:none; }
  .announce-banner { grid-template-columns:1fr; padding:2.5rem; gap:2rem; }
  .ab-art-block { width:200px; height:200px; margin:0 auto; }
}

@media (max-width:768px) {
  .nav-desktop { display:none; }
  .hamburger { display:flex; }
  .section-inner { padding:5rem var(--pad); }
  .release-card { grid-template-columns:1fr; padding:1.8rem; }
  .rc-art-col { max-width:260px; margin:0 auto; }
  .mini-grid { grid-template-columns:1fr 1fr; }
  .more-card { display:none; }
  .masonry { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gi-large { grid-column:1/3; grid-row:auto; }
  .gi-wide  { grid-column:1/3; grid-row:auto; }
  .gi-tall  { grid-column:1/2; grid-row:auto; }
  .gallery-item:last-child { grid-column:2/3; }
  .upcoming-grid { grid-template-columns:1fr; }
  .announce-banner { padding:1.8rem; }
  .about-grid { padding:2rem 1.5rem; }
  .about-portrait { min-height:360px; }
  .contact-card { padding:2rem 1.5rem; }
  .sticky-player { grid-template-columns:1fr auto; padding:0.8rem 1.2rem; }
  .sp-track { display:none; }
  .sp-right { display:none; }
  .sp-center { width:100%; }
  .sp-progress { width:100%; }
}

@media (max-width:480px) {
  .hero-title { font-size:clamp(3rem,16vw,5rem); }
  .mini-grid { grid-template-columns:1fr; }
  .about-hud { grid-template-columns:1fr; }
  .about-portrait { min-height:330px; }
}

/* End of stylesheet */