/* ===============================
   LPME – Full-width Piano Keyboard
   =============================== */

:root{
  --kb-bg: #ffffff;

  /* white keys */
  --kb-white-top: #ffffff;
  --kb-white-mid: #ffffff;
  --kb-white-bot: #ffffff;

  /* grey-for-black keys (towards black) */
  --kb-black-1: #fdfdfd;   /* top */
  --kb-black-2: #f0f1f2;   /* bottom */

  --kb-sep: rgba(0,0,0,.10);   /* hairline between whites */
  --kb-press: brightness(0.975);

  --gold-1: #ffe7a6;          /* active gold gradient for black keys */
  --gold-2: #ffe7a6;

  --accent: #ac0000;          /* LPME red used in headings & scroll */
}

/* full bleed + full height */
#jpianoKB.kb-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  background: var(--kb-bg);
  overflow: hidden;
}

/* top / bottom soft fades (visual only) */
#jpianoKB.kb-hero::before,
#jpianoKB.kb-hero::after{
  content:"";
  position:absolute; left:0; right:0; pointer-events:none; z-index:5;
}
#jpianoKB.kb-hero::before{
  top:0; height:18vh;
  background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#jpianoKB.kb-hero::after{
  bottom:0; height:8vh;
  background:linear-gradient(to top, rgba(0,0,0,.06), rgba(0,0,0,0));
}

/* keys wrapper = grid of whites; blacks are absolutely positioned */
#jpianoKB .kb-keys{
  position:absolute; inset:0;
  display:grid; grid-auto-flow:column;
  /* IMPORTANT so each white key gets equal width */
  grid-auto-columns: 1fr;
  align-items:stretch;
}

/* ===== WHITE KEYS ===== */
#jpianoKB .white-key{
  position:relative;
  height:100%;
  cursor:pointer;
  background:linear-gradient(
    to bottom,
    var(--kb-white-top) 0%,
    var(--kb-white-top) 18%,
    var(--kb-white-mid) 55%,
    var(--kb-white-bot) 100%
  );
  transition:filter .1s ease;
  z-index:1;

  /* hairline on EVERY white key (no double-borders) */
  box-shadow: inset 1px 0 0 var(--kb-sep);
}
#jpianoKB .white-key:first-child{ box-shadow:none; }

/* deeper “top transparency” overlay — comes further down */
#jpianoKB .white-key::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:32%;
  background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,0));
  pointer-events:none;
}
#jpianoKB .white-key:active{ filter:var(--kb-press); }

/* ===== BLACK KEYS (darker grey, NO shadow) ===== */
#jpianoKB .black-key{
  position:absolute; top:0; transform:translateX(-50%);
  width:min(3.6vw, 31px);        /* thickness of black keys */
  height:50%;
  background:linear-gradient(to bottom, var(--kb-black-1), var(--kb-black-2));
  border-radius:0 0 6px 6px;
  cursor:pointer; z-index:3;
  transition:filter .1s ease, background .12s ease;
}
#jpianoKB .black-key::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:62%;
  background:linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none; border-radius:0 0 6px 6px;
}
/* active = gold */
#jpianoKB .black-key.is-down,
#jpianoKB .black-key:active{
  background:linear-gradient(to bottom, var(--gold-1), var(--gold-2));
  filter:none;
}

/* responsive (desktop/tablet black key size) */
@media (max-width: 992px){
  #jpianoKB .black-key{ width:min(4vw, 26px); height:46%; }
}
@media (max-width: 600px){
  #jpianoKB .black-key{ width:min(4.8vw, 22px); height:43%; }
}

/* =====================================
   Overlay Text (does NOT block clicks)
   ===================================== */
.kb-hero-text{
  position:absolute;
  inset:auto 0 12vh 0;          /* keep clear of scroll indicator */
  top: 50%;
  transform: translateY(-50%);
  text-align:center;
  z-index: 6;
  pointer-events: none;         /* keys remain clickable underneath */
  padding: 0 6vw;
  color:#111;
}
.kb-hero-text .kb-eyebrow{
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--accent);
  margin: 0 0 1.2rem 0;
  font-weight: 400;
}
.kb-hero-text .kb-title{
  font-family: "Tinos", serif;
  font-weight: 400;
  font-size: clamp(20px, 3vw, 40px);
  line-height: 1.25;
  margin: 0;
}
.kb-hero-text .kb-title .amp{ color: var(--accent); }

/* allow clickable items if needed */
.kb-hero-text .clickable{ pointer-events: auto; }

/* =====================================
   Scroll indicator (same as before)
   ===================================== */
.kb-scroll-line{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 56px;
  width: 2px; height: 64px;
  background: #c0493b;
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 7;
}
.kb-scroll-line::after{
  content:"";
  position:absolute; left:0; right:0; top:-40%;
  width:100%; height:32%;
  background: rgba(255,255,255,0.96);
  border-radius:2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
  animation: kbScrollSlug 2.2s ease-in-out infinite;
}
@keyframes kbScrollSlug {
  0%   { top: -40%; }
  50%  { top: 35%;  }
  100% { top: 110%; }
}
.kb-scroll-indicator{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 10px;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--accent);
  pointer-events: none;
  z-index: 7;
}
#jpianoKB .kb-hero-text h5 {
  margin-bottom: 4rem; /* increase this for more space */
}
#jpianoKB .kb-hero-text { top: 45%; }

/* === Simple, robust fade-up for keyboard hero === */
@keyframes kbFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kbFadeUpStayCentered {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Eyebrow, Title, Sub */
#jpianoKB .kb-hero-text :is(.kb-eyebrow, h5){
  opacity: 0; transform: translateY(18px);
  animation: kbFadeUp .8s ease-out .00s both;
}
#jpianoKB .kb-hero-text :is(.kb-title, h1){
  opacity: 0; transform: translateY(18px);
  animation: kbFadeUp .9s ease-out .15s both;
}

/* Scroll line + label (stay centered while moving up) */
#jpianoKB .kb-scroll-line{
  opacity: 0; left: 50%; transform: translate(-50%, 18px);
  animation: kbFadeUpStayCentered .8s ease-out .15s both;
}
#jpianoKB .kb-scroll-indicator{
  opacity: 0; left: 50%; transform: translate(-50%, 18px);
  animation: kbFadeUpStayCentered .8s ease-out .25s both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #jpianoKB .kb-hero-text :is(.kb-eyebrow, h5),
  #jpianoKB .kb-hero-text :is(.kb-title, h1),
  #jpianoKB .kb-scroll-line,
  #jpianoKB .kb-scroll-indicator{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ===== Mobile-only tweaks (bigger black keys since fewer whites) ===== */
@media (max-width: 768px){
  #jpianoKB .black-key{ width:min(8vw, 36px); height:56%; }
}