/* ============================================================
   HOME — 3D curved cover strip
   ============================================================ */
body.home{ height:100dvh; overflow:hidden; }

.stage{
  position:fixed; inset:0;
  perspective:680px;
  perspective-origin:50% 50%;
  display:grid; place-items:center;
  touch-action:none;
}

/* soft vignette so cards fade into black top & bottom */
.stage-veil{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(180deg,
     #050506 4%, rgba(5,5,6,0) 26%,
     rgba(5,5,6,0) 74%, #050506 96%);
}

.cylinder{
  position:absolute; top:50%; left:50%;
  width:0; height:0;
  transform-style:preserve-3d;
}

.card{
  position:absolute; top:0; left:0;
  width:var(--card, 174px); height:var(--card, 174px);
  margin-left:calc(var(--card, 174px) / -2);
  margin-top:calc(var(--card, 174px) / -2);
  border-radius:0; overflow:visible;
  transform-style:preserve-3d;
  will-change:transform, opacity;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85);
  cursor:pointer;
}
.card img{ width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; }

/* caption under the strip */
.stage-caption{
  position:absolute; z-index:6; bottom:15%; left:0; right:0;
  text-align:center; pointer-events:none; padding:0 20px;
}
.stage-caption .eyebrow{ opacity:.7; }
.stage-caption h1{
  font-size:clamp(1.5rem,7vw,2.4rem); margin-top:6px;
  text-shadow:0 4px 30px rgba(0,0,0,.7);
  transition:opacity .25s;
}

.scroll-hint{
  position:fixed; bottom:22px; left:0; right:0; z-index:6; text-align:center;
  color:var(--muted-2); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  animation:hintPulse 2.6s ease-in-out infinite; pointer-events:none;
}
@keyframes hintPulse{ 0%,100%{opacity:.35} 50%{opacity:.8} }

/* Archive easter-egg lock (beneath the MKE3X wordmark) */
.lock-egg{
  position:fixed; top:calc(var(--nav-h) + 8px); left:20px; z-index:85;
  width:28px; height:28px; display:grid; place-items:center;
  color:var(--muted-2); opacity:.45;
  transition:opacity .25s, color .25s, transform .3s var(--ease);
}
.lock-egg:hover{ opacity:1; color:var(--text); }
.lock-egg.unlocked{ color:var(--accent); opacity:1; transform:scale(1.15); }
.lock-egg svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Sideways "ALBUM" spine label on album covers.
   Reads bottom-to-top with the baseline (bottom of the text) facing the cover. */
.card .album-tag{
  position:absolute; right:calc(100% + 9px); top:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-body); font-weight:700;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  white-space:nowrap; color:#fff; opacity:.24; pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* NEW badge on a cover */
.card .new-badge{
  position:absolute; top:8px; left:8px; z-index:3;
  background:#22c55e; color:#04120a;
  font-family:var(--font-body); font-weight:700;
  font-size:.56rem; letter-spacing:.18em; padding:3px 7px;
  border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* Apple Music PNG logo in the corner */
#cornerApple img{ width:25px; height:25px; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* ---------- Home music player (top center) ---------- */
.home-player{
  position:fixed; top:0; left:50%; transform:translateX(calc(-50% + 23px));
  height:var(--nav-h); z-index:90;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hp-controls{ display:flex; align-items:center; gap:14px; }
.hp-btn{
  width:32px; height:32px; display:grid; place-items:center;
  color:var(--text); opacity:.7;
  transition:transform .15s var(--ease), opacity .2s, color .2s;
}
.hp-btn:hover{ opacity:1; }
.hp-btn:active{ transform:scale(.88); }
.hp-btn svg{ width:19px; height:19px; fill:currentColor; }
.hp-play{ width:40px; height:40px; background:none; color:var(--text); opacity:1; box-shadow:none; }
.hp-play:hover{ background:none; opacity:1; transform:scale(1.05); }
.hp-play svg{ width:27px; height:27px; }
.hp-btn.on{ color:var(--accent); opacity:1; }   /* shuffle enabled */
.hp-title{
  position:absolute; top:calc(var(--nav-h) - 4px); white-space:nowrap;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
body.player-live .hp-title{ opacity:1; }
body.player-live .brand{ opacity:0; visibility:hidden; transition:opacity .3s; }

@media (min-width:720px){
  .card{ --card:210px; }
}