body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:serif;
  text-align:center;
}

section{
  padding:0 0 14px;
}

.hero{
  height:80vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}

.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
}

.hero-inner{
  position:relative;
  z-index:2;
}

.logo{
  width:80px;
  border-radius:50%;
  margin:0 auto 20px;
  display:block;
}

.hero h1{
  font-size:clamp(2.5rem, 6vw, 5rem);
  letter-spacing:0.1em;
  margin:0;
}

h2{
  margin:0;
  padding:0 20px;
}

/* ===== FEATURED ===== */
.featured-release-section{
  padding:46px 20px 28px;
}

.featured-release{
  max-width:300px;
  margin:18px auto 0;
}

.featured-release img{
  width:100%;
  display:block;
  border-radius:10px;
}

/* ===== BANNER ===== */
.banner{
  height:220px;
  background-size:cover;
  background-position:center;
  margin:56px 0 42px;
}

.fade-banner{
  position:relative;
  overflow:hidden;
}

.fade-banner::before,
.fade-banner::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:54px;
  z-index:1;
  pointer-events:none;
}

.fade-banner::before{
  top:0;
  background:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 100%);
}

.fade-banner::after{
  bottom:0;
  background:linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%);
}

/* ===== GRID ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap:24px;
  padding:26px 24px 12px;
  max-width:1200px;
  margin:0 auto;
}

/* ===== CARD ===== */
.card{
  cursor:pointer;
  transition:transform 0.28s ease 0.08s;
  will-change:transform;
}

/* HOVER */
.card:hover{
  transform:scale(1.035);
}

.card-image-wrap{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#111;
}

.card img{
  width:100%;
  border-radius:10px;
  display:block;
  transition:
    transform 0.28s ease 0.08s,
    filter 0.28s ease 0.08s,
    box-shadow 0.28s ease;
}

.card:hover img{
  transform:scale(1.045);
  filter:brightness(1.08);
}

/* HOVER OVERLAY */
.card-image-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.05);
  opacity:0;
  transition:opacity 0.28s ease 0.08s;
  pointer-events:none;
}

.card:hover .card-image-wrap::after{
  opacity:1;
}

/* ===== PLAYING STATE ===== */
.card.is-playing{
  transform:scale(1.04);
}

.card.is-playing img{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25),
    0 0 30px rgba(43,227,138,0.25);
}

/* ===== GREEN EDGE (IMAGE ONLY) ===== */
.card.is-playing .card-image-wrap{
  position: relative;
}

.card.is-playing .card-image-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:10px;
  padding:1px;
  background:linear-gradient(120deg, transparent, #2be38a, transparent);
  background-size:200% 200%;
  animation:edgePulse 2.5s linear infinite;
  pointer-events:none;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

@keyframes edgePulse{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* ===== PLAY DOT ===== */
.play-indicator{
  position:absolute;
  right:12px;
  bottom:12px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2be38a;
  box-shadow:0 0 10px rgba(43,227,138,0.5);
  opacity:0;
  transform:scale(0.8);
  transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
}

.card.is-playing .play-indicator{
  opacity:1;
  transform:scale(1);
  animation:dotPulse 1.8s ease-in-out infinite;
}

@keyframes dotPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:0.7; }
}

/* ===== TEXT ===== */
.title{
  margin-top:10px;
  font-size:14px;
}

/* ===== LINKS ===== */
.listen-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-top:20px;
}

.listen-links img{
  height:60px;
  object-fit:contain;
  transition:transform 0.2s ease, opacity 0.2s ease;
}

.listen-links a:hover img{
  transform:scale(1.05);
  opacity:0.85;
}

/* ===== SUBTEXT ===== */
.section-sub{
  font-size:0.9rem;
  color:rgba(255,255,255,0.7);
  margin-top:8px;
  margin-bottom:10px;
}

.album-line{
  font-size:0.98rem;
  color:rgba(255,255,255,0.78);
  margin:10px 20px 8px;
}

/* ===== FORM ===== */
input,
textarea,
button{
  font:inherit;
}

input,
textarea{
  width:min(460px, 86vw);
  margin:6px 0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
  background:#0b0b0b;
  color:#fff;
}

textarea{
  min-height:120px;
  resize:vertical;
}

button{
  margin-top:8px;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:6px;
  background:#161616;
  color:#fff;
  cursor:pointer;
}

button:hover{
  background:#1f1f1f;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){
  .hero{
    height:64vh;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    padding:20px 16px 8px;
  }

  .banner{
    height:170px;
    margin:44px 0 34px;
  }

  .featured-release{
    max-width:260px;
  }

  .title{
    font-size:13px;
  }
}