/* =========================================
   Piano Hero — compact layout + 15% more visible keys
   ========================================= */

:root{
  --bg: #faf9f3;             /* page background */

  /* Keys color closer to original (#f0ebdd) */
  --band-color: 240,235,221;   /* rgb of #f0ebdd */

  /* Transparency levels */
  --band-top-alpha: 0.34;   /* top */
  --band-mid-alpha: 0.67;   /* middle */
  --band-bot-alpha: 1.00;   /* bottom (fully solid) */
}

#jpiano{
  position: relative;
  width: 100%;
  height: 78vh;
  margin: 0 auto 2rem;
  background: var(--bg);
  overflow: hidden;
}

/* soft top fade */
#jpiano::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height: 22vh;
  pointer-events:none;
  background: linear-gradient(to bottom,
              var(--bg) 0%,
              rgba(250,249,243,.9) 35%,
              rgba(250,249,243,0) 100%);
  z-index: 1;
}

.piano{
  position:absolute; inset:0;
  display:flex; align-items:stretch;
  user-select:none;

  /* more side breathing room + compact keys */
  padding-left: 14vw;
  padding-right: 14vw;
  gap: 2.2vw;
}

.piano .key{
  flex: 1 1 0;
  position: relative;
  height: 100%;
  background: transparent;
  cursor: pointer;
  border: none;
  box-shadow: none;
}

/* Keys bands */
.piano .key::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  width: 68%;  /* narrower keys */
  height: 90%;
  background: linear-gradient(
    to bottom,
    rgba(var(--band-color), var(--band-top-alpha)) 0%,
    rgba(var(--band-color), var(--band-mid-alpha)) 50%,
    rgba(var(--band-color), var(--band-bot-alpha)) 100%
  );
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  transition: filter .12s ease;
}
.piano .key.active::before{ filter: brightness(0.95); }
.piano .key:hover::before { filter: brightness(0.98); }

/* Heights (symmetry left→right) */
.piano .key:nth-child(1)::before{ height: 64%; }
.piano .key:nth-child(2)::before{ height: 72%; }
.piano .key:nth-child(3)::before{ height: 82%; }
.piano .key:nth-child(4)::before{ height: 92%; }
.piano .key:nth-child(5)::before{ height: 98%; }
.piano .key:nth-child(6)::before{ height: 82%; }
.piano .key:nth-child(7)::before{ height: 72%; }
.piano .key:nth-child(8)::before{ height: 64%; }

/* responsive */
@media (max-width: 992px){
  #jpiano{ height: 70vh; }
  .piano{ padding: 0 11vw; gap: 3vw; }
  .piano .key::before{ width: 70%; border-bottom-left-radius: 88px; border-bottom-right-radius: 88px; }
}
@media (max-width: 600px){
  #jpiano{ height: 62vh; }
  .piano{ padding: 0 9vw; gap: 3.6vw; }
  .piano .key::before{ width: 72%; border-bottom-left-radius: 72px; border-bottom-right-radius: 72px; }
}

/* =====================================
   Text overlay on Piano Hero
   ===================================== */
.piano-hero-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #1a1a1a; /* dark text */
  z-index: 2;     /* above the keys */
  width: 90%;
  max-width: 1000px;
}

.piano-hero-text h5{
  font-size: 14px;
  letter-spacing: 2px;
  color: #b85c4c; /* reddish tone */
  margin-bottom: 1.2rem;
}

.piano-hero-text h1{
  font-size: 42px;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.piano-hero-text h1 span{
  color: #b85c4c; /* same reddish accent */
}

.piano-hero-text p{
  font-size: 14px;
  line-height: 1.6;
  color: #a34c3c;
  margin-bottom: 2.5rem;
}

.scroll-indicator{
  font-size: 12px;
  letter-spacing: 3px;
  color: #a34c3c;
}