/* music.css — editable source. See docs/ARCHITECTURE.md for cascade order. */

:root { --gloss-strength:.55; --holo-strength:.65; --holo-size:18px; --surface-return:600ms }
.record .album-art {
  isolation:isolate; cursor:grab; touch-action:pan-y; user-select:none;
  transform:perspective(850px) translate3d(calc(var(--surface-x,0)*1px),calc(var(--surface-y,0)*1px),0) rotateX(calc(var(--surface-rx,0)*1deg)) rotateY(calc(var(--surface-ry,0)*1deg));
  transition:transform var(--surface-return) cubic-bezier(.16,1,.3,1),box-shadow var(--surface-return) ease;
  overflow:visible
}
.record .album-art img { pointer-events:none; -webkit-user-drag:none }
.record .album-art.surface-active { z-index:2; box-shadow:0 14px 26px #0002 }
.record .album-art.surface-dragging { cursor:grabbing; transition:transform 60ms linear,box-shadow 180ms ease }
.record .album-art .album-sheen {
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0;
  background:linear-gradient(var(--foil-angle,120deg),transparent 24%,#ffffff05 34%,#ffffffe6 48%,#ffffff44 53%,transparent 67%);
  background-size:220% 220%; background-position:var(--light-x,50%) var(--light-y,50%);
  mix-blend-mode:screen; transition:opacity 240ms ease
}
.record .album-art.surface-active .album-sheen { opacity:var(--gloss-strength) }
.record .album-art[data-finish=holo] .album-sheen {
  background-image:repeating-conic-gradient(from var(--foil-angle,120deg) at var(--light-x,50%) var(--light-y,50%),#ff3e9c99 0deg,#ffeb8199 22deg,#67ffc999 42deg,#45bfff99 64deg,#b558ff99 88deg,#ff3e9c99 120deg),repeating-radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#fff9 0 1px,#0007 2px 4px,transparent 5px var(--holo-size));
  background-size:150% 150%,100% 100%; mix-blend-mode:color-dodge
}
.record .album-art[data-finish=holo].surface-active .album-sheen { opacity:var(--holo-strength) }
.record .album-play { z-index:3 }
@media(prefers-reduced-motion:reduce) { .record .album-art { transform:none!important; transition:none!important } }

.music-screen {
  height:100dvh;
  overflow:hidden
}



#music-deck {
  height:calc(100dvh - var(--header-height));
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  overscroll-behavior-y:contain;
  outline-offset:-3px
}

#music-deck::-webkit-scrollbar {
  display:none
}

.music-row {
  min-height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:32px 3% 90px;
  display:flex;
  align-items:center
}

.music-row .record-grid {
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:start
}

.music-animated .music-row>* {
  opacity:var(--row-opacity,1);
  transform:translateY(calc((1 - var(--row-opacity,1))*14px))
}

.music-intro {
  align-items:stretch;
  flex-direction:column;
  justify-content:space-between
}

.music-intro>span {
  font-size:13px
}

.music-intro h1 {
  font-weight:300;
  font-size:clamp(65px,12vw,180px);
  letter-spacing:-.065em;
  line-height:.9;
  margin:28px 0
}

.music-intro h1 em {
  font-size:.65em;
  font-weight:250
}

.music-intro h1 strong {
  font-weight:900
}

.music-intro-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px
}

.music-intro-bottom p {
  font-size:clamp(24px,2.6vw,42px);
  letter-spacing:-.035em;
  line-height:1.15;
  font-weight:300;
  margin:0
}

.music-intro-bottom>span {
  font-size:13px;
  text-align:right
}

.record {
  min-width:0;
  width:100%;
  max-width:max(140px,calc(100dvh - var(--header-height) - 380px));
  margin:0 auto
}

.record .album-art {
  width:100%;
  margin:0 auto
}

.record-date {
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid;
  margin:18px 0 10px;
  padding-top:10px;
  font-size:13px;
  line-height:1.3;
  letter-spacing:0
}

.record-artist {
  font-size:17px;
  line-height:1.25;
  font-weight:400;
  margin:0 0 7px;
  min-height:2.5em
}

.record h2 {
  font-size:clamp(22px,2.2vw,35px);
  font-weight:750;
  line-height:1.05;
  letter-spacing:-.035em;
  margin:0 0 18px;
  min-height:2.1em;
  overflow-wrap:normal
}

.record-album {
  font-size:14px;
  line-height:1.3;
  margin:-10px 0 15px
}

.record .card-link {
  font-size:14px;
  min-height:44px;
  align-items:center
}

.music-controls {
  position:fixed;
  bottom:22px;
  right:3%;
  z-index:35;
  display:flex;
  gap:8px;
  align-items:center;
  background:#fff
}

.music-controls>span {
  font-size:12px;
  margin-right:10px;
  letter-spacing:0
}

.music-controls button {
  width:46px;
  height:46px;
  border:1px solid #111;
  background:#fff;
  font-size:26px;
  cursor:pointer
}

.music-controls button:disabled {
  opacity:.3;
  cursor:default
}

.music-controls button:hover:not(:disabled) {
  background:#111;
  color:#fff
}

@media(max-width:650px) {
  .music-row {
    padding:24px 5% 95px
  }
  .music-row .record-grid {
    gap:10px
  }
  .music-intro h1 {
    font-size:21vw;
    margin:25px 0
  }
  .music-intro-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:18px
  }
  .music-intro-bottom p {
    font-size:26px
  }
  .music-intro-bottom>span {
    font-size:12px
  }
  .record .album-art {
    width:100%
  }
  .record {
    max-width:none
  }
  .record .album-play {
    width:26px;
    height:26px;
    font-size:19px;
    right:5px;
    bottom:5px
  }
  .record-date {
    font-size:11px;
    gap:4px;
    flex-direction:column;
    margin-top:12px;
    padding-top:8px
  }
  .record-date>span {
    display:none
  }
  .record-artist {
    font-size:12px;
    line-height:1.4;
    min-height:4.2em
  }
  .record h2 {
    font-size:16px;
    line-height:1.15;
    letter-spacing:-.025em;
    min-height:3.45em;
    overflow-wrap:anywhere
  }
  .record-album {
    font-size:11px;
    line-height:1.4
  }
  .record .card-link {
    font-size:12px;
    gap:3px;
    align-items:center;
    line-height:1.2
  }
  .music-controls {
    bottom:20px;
    right:5%
  }
  .music-controls>span {
    font-size:11px;
    margin-right:4px
  }

}

@media(max-height:600px) and (min-width:651px) {
  .music-row {
    padding-top:16px;
    padding-bottom:76px
  }
  .record .album-art {
    width:min(100%,140px)
  }
  .record-artist {
    font-size:14px;
    min-height:1.3em
  }
  .record h2 {
    font-size:21px;
    min-height:1.1em;
    margin-bottom:8px
  }
  .record-date {
    margin-top:8px;
    padding-top:6px
  }
}