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

/* looping video background at ~7% over the black base */
.bg-video{
  position:fixed; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-3; opacity:.07;
  pointer-events:none;
}

.stage{
  position:fixed; inset:0;
  perspective:1800px;
  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,
     #04060a 4%, rgba(4,6,10,0) 26%,
     rgba(4,6,10,0) 74%, #04060a 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;
  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} }

/* 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:var(--accent); color:#04121a;
  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)); }

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