/* ME / DREAD RAVEN — compact jukebox ritual.
   The selection has a real payoff: the record seats, emerald wakes,
   then tangible controls surface from the lower edge of the Raven.
   Entirely CSS/DOM; no generated assets and no playback changes. */

/* Restore the intimate proportions. The panel isn't a blank full-size deck. */
#music-overlay .portal-panel {width:min(660px,100%);}
#music-overlay .music-layout {
  width:100%;
  max-width:510px;
  margin-inline:auto;
  padding:clamp(10px,2.2vw,18px);
  grid-template-columns:minmax(0,1fr);
}
#music-overlay .now-playing {
  padding:clamp(12px,2vw,20px);
  overflow:visible;
  background:
    radial-gradient(ellipse at 50% 32%,rgba(59,26,87,.34),transparent 61%),
    linear-gradient(148deg,rgba(14,11,37,.95),rgba(22,10,40,.98));
}
#music-overlay .player-top {position:relative;z-index:9;}
#music-overlay .disc-stage {
  position:relative;
  isolation:isolate;
  width:min(265px,68vw);
  max-width:100%;
  margin:0 auto 4px;
  filter:none;
}
#music-overlay .disc-stage .disc.bey-disc {z-index:2;}
#music-overlay .player-deck {position:relative;}

/* Make the inactive deck actually collapse rather than hiding a huge empty area. */
#music-overlay .player-deck > .loaded-controls {
  display:grid;
  grid-template-rows:1fr;
  box-sizing:border-box;
  padding:0;
  transition:grid-template-rows 680ms cubic-bezier(.2,.7,.25,1);
}
#music-overlay .now-playing.is-dormant .player-deck > .loaded-controls,
#music-overlay .now-playing.is-loading .player-deck > .loaded-controls {
  grid-template-rows:0fr;
  padding:0;
}
#music-overlay .player-deck .loaded-inner {
  min-height:0;
  overflow:hidden;
  visibility:visible;
  opacity:1;
  padding:0;
  transform:none;
  transition:opacity 480ms ease,visibility 0s;
}
#music-overlay .now-playing.is-dormant .player-deck .loaded-inner,
#music-overlay .now-playing.is-loading .player-deck .loaded-inner {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
#music-overlay .now-playing.is-seated .player-deck .loaded-inner {transition-delay:100ms,0ms;}
#music-overlay .player-deck .track-title {
  margin:3px 0 0;
  font:400 clamp(16px,3.6vw,24px)/1.2 var(--pixel);
  text-align:center;
  letter-spacing:-.035em;
}
#music-overlay .player-deck .track-byline {
  margin:4px 0 11px;
  text-align:center;
  font-size:11px;
}
#music-overlay .player-deck .time-row {margin:9px 0 3px;}
#music-overlay .player-deck .player-actions {justify-content:center;gap:9px;margin-top:14px;}
#music-overlay .player-deck .action-button,
#music-overlay .player-deck .action-link {font-size:8px;min-height:39px;padding:10px 11px;}
#music-overlay .player-deck .player-status {text-align:center;}

/* Selector sits directly under the compact Raven before activation,
   and follows the newly revealed controls after activation. */
#music-overlay .player-deck > .archive-shelf,
#music-overlay .player-deck > .archive-shelf.is-absorbed {
  position:relative;
  z-index:12;
  inset:auto;
  top:auto;
  left:auto;
  right:auto;
  bottom:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:5px 0 0;
  padding:0;
  opacity:1;
  overflow:visible;
}
#music-overlay .now-playing.is-loading .player-deck > .archive-shelf.is-absorbing {
  opacity:0;
  pointer-events:none;
}
#music-overlay .player-deck > .archive-shelf .song-selector {align-items:center;}
#music-overlay .player-deck > .archive-shelf.is-absorbed .song-selector > summary {
  min-height:40px;
  width:min(148px,90%);
  padding:8px 10px;
  font-size:9px;
}
#music-overlay .player-deck > .archive-shelf .song-selector[open] > .song-list,
#music-overlay .player-deck > .archive-shelf.is-absorbed .song-selector[open] > .song-list {
  position:absolute;
  z-index:30;
  top:calc(100% + 8px);
  bottom:auto;
  left:50%;
  right:auto;
  width:min(290px,calc(100vw - 66px));
  max-width:100%;
  margin:0;
  transform:translateX(-50%);
  border:1px solid rgba(158,96,238,.58);
  border-radius:9px;
  padding:7px;
  background:linear-gradient(135deg,rgba(10,6,28,.99),rgba(28,9,48,.99));
  box-shadow:0 15px 33px #000b,0 0 17px #9e4fff32;
}

/* Luminous feather geometry waits behind Dread Raven, then awakens. */
#music-overlay .raven-aura {
  position:absolute;
  z-index:0;
  inset:-6%;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:scale(.81) rotate(-7deg);
  filter:blur(8px);
  transition:opacity 1050ms ease,transform 1400ms cubic-bezier(.12,.7,.2,1),filter 1150ms ease;
}
#music-overlay .raven-aura:before {
  content:"";
  position:absolute;
  inset:2%;
  border-radius:50%;
  background:repeating-conic-gradient(
    from -28deg,
    transparent 0deg 13deg,
    rgba(27,255,164,.0) 14deg,
    rgba(61,252,190,.68) 15deg,
    transparent 17deg 31deg,
    rgba(177,90,252,.65) 32deg,
    transparent 35deg 48deg
  );
  -webkit-mask:radial-gradient(circle,transparent 0 59%,#000 65% 66%,transparent 80%);
  mask:radial-gradient(circle,transparent 0 59%,#000 65% 66%,transparent 80%);
  filter:drop-shadow(0 0 10px rgba(20,255,174,.35));
}
#music-overlay .raven-aura:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 50% 58%,transparent 49%,rgba(50,255,183,.17) 66%,transparent 75%);
}
#music-overlay .raven-aura i {
  position:absolute;
  z-index:1;
  display:block;
  width:8%;
  height:22%;
  opacity:.72;
  background:linear-gradient(180deg,transparent,rgba(133,77,255,.16) 25%,rgba(31,255,165,.7) 68%,transparent);
  clip-path:polygon(50% 0,96% 51%,64% 100%,50% 79%,36% 100%,4% 51%);
  filter:drop-shadow(0 0 8px rgba(40,255,177,.3));
}
#music-overlay .raven-aura i:nth-child(1){top:10%;left:13%;transform:rotate(-43deg);}
#music-overlay .raven-aura i:nth-child(2){top:10%;right:13%;transform:rotate(43deg);}
#music-overlay .raven-aura i:nth-child(3){bottom:7%;left:10%;transform:rotate(-133deg);}
#music-overlay .raven-aura i:nth-child(4){bottom:7%;right:10%;transform:rotate(133deg);}
#music-overlay .now-playing.is-loading .raven-aura {opacity:.52;transform:scale(.94) rotate(-2deg);filter:blur(4px);}
#music-overlay .now-playing.is-seated .raven-aura {opacity:.86;transform:scale(1) rotate(0);filter:blur(0);}
#music-overlay .now-playing.is-seated .disc-stage.is-playing .raven-aura {
  animation:raven-aura-breathe 4.1s ease-in-out 1400ms infinite alternate;
}
@keyframes raven-aura-breathe {
  from {opacity:.56;filter:brightness(.88);}
  to {opacity:1;filter:brightness(1.38);}
}

/* The controls are born from the edge of the record, not from a blank slab. */
#music-overlay .disc-stage > .transport {
  position:absolute;
  z-index:8;
  left:-4%;
  right:-4%;
  bottom:4%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0;
  pointer-events:none;
}
#music-overlay .disc-stage > .transport button {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:48px;
  min-width:48px;
  height:46px;
  min-height:46px;
  border:1px solid rgba(108,244,215,.72);
  border-radius:14px;
  padding:0 4px;
  background:linear-gradient(150deg,rgba(6,19,35,.93),rgba(43,18,76,.93));
  box-shadow:inset 0 0 17px rgba(25,253,178,.09),0 6px 22px #000a;
  color:#bbfff4;
  font:400 9px/1 var(--pixel);
  backdrop-filter:blur(12px);
  pointer-events:auto;
  opacity:1;
  filter:blur(0);
  transform:translateY(0) scale(1);
  transition:border-color 200ms,box-shadow 200ms;
}
#music-overlay .disc-stage > .transport .play-main {
  width:56px;
  min-width:56px;
  height:56px;
  min-height:56px;
  border-radius:50%;
  background:linear-gradient(145deg,#bfffee,#80f0d5 25%,#aa96fa 73%,#e4b9ec);
  box-shadow:0 0 20px rgba(41,247,178,.34),0 8px 27px #000a;
  color:#11192d;
  font:600 23px/1 var(--body);
}
#music-overlay .now-playing.is-dormant .disc-stage > .transport button,
#music-overlay .now-playing.is-loading .disc-stage > .transport button {
  opacity:0;
  filter:blur(12px);
  transform:translateY(32px) scale(.45);
  pointer-events:none;
}
#music-overlay .now-playing.is-seated .disc-stage > .transport button {
  animation:raven-controls-surface 900ms cubic-bezier(.16,.8,.2,1.12) both;
}
#music-overlay .now-playing.is-seated .disc-stage > .transport button:nth-child(1) {animation-delay:120ms;}
#music-overlay .now-playing.is-seated .disc-stage > .transport button:nth-child(2) {animation-delay:270ms;}
#music-overlay .now-playing.is-seated .disc-stage > .transport button:nth-child(3) {animation-delay:420ms;}
@keyframes raven-controls-surface {
  0% {opacity:0;filter:blur(13px) brightness(2);transform:translateY(40px) scale(.35);}
  50% {opacity:.77;filter:blur(4px) brightness(1.7);transform:translateY(-5px) scale(1.06);}
  100% {opacity:1;filter:blur(0) brightness(1);transform:translateY(0) scale(1);}
}

/* Song details also condense out of the ether, instead of jumping on-screen. */
#music-overlay .now-playing.is-dormant .player-deck .loaded-inner .track-title,
#music-overlay .now-playing.is-loading .player-deck .loaded-inner .track-title,
#music-overlay .now-playing.is-dormant .player-deck .loaded-inner .track-byline,
#music-overlay .now-playing.is-loading .player-deck .loaded-inner .track-byline,
#music-overlay .now-playing.is-dormant .player-deck .loaded-inner .seek,
#music-overlay .now-playing.is-loading .player-deck .loaded-inner .seek,
#music-overlay .now-playing.is-dormant .player-deck .loaded-inner .time-row,
#music-overlay .now-playing.is-loading .player-deck .loaded-inner .time-row,
#music-overlay .now-playing.is-dormant .player-deck .loaded-inner .player-actions,
#music-overlay .now-playing.is-loading .player-deck .loaded-inner .player-actions {
  transform:translateY(13px) scale(.97);
  filter:blur(7px);
  opacity:0;
}
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .track-title,
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .track-byline,
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .seek,
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .time-row,
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .player-actions {
  filter:blur(0);
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity 640ms,transform 800ms cubic-bezier(.14,.74,.24,1),filter 760ms;
}
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .track-title{transition-delay:80ms;}
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .track-byline{transition-delay:170ms;}
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .seek,
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .time-row{transition-delay:270ms;}
#music-overlay .now-playing.is-seated .player-deck .loaded-inner .player-actions{transition-delay:410ms;}
@media(max-width:420px) {
  #music-overlay .disc-stage{width:min(245px,66vw);}
  #music-overlay .now-playing{padding:12px;}
  #music-overlay .player-deck .action-button,
  #music-overlay .player-deck .action-link{font-size:8px;padding-inline:9px;}
  #music-overlay .disc-stage > .transport{left:-6%;right:-6%;}
}
@media(max-height:670px){
  #music-overlay .disc-stage{width:min(210px,58vw);}
  #music-overlay .now-playing{padding:10px 12px;}
  #music-overlay .player-deck .player-actions{margin-top:9px;}
}
@media(prefers-reduced-motion:reduce){
  #music-overlay .raven-aura,
  #music-overlay .player-deck > .loaded-controls,
  #music-overlay .player-deck .loaded-inner,
  #music-overlay .now-playing.is-seated .disc-stage > .transport button,
  #music-overlay .now-playing.is-seated .player-deck .loaded-inner>* {
    transition:none!important;
    animation:none!important;
    filter:none!important;
  }
  #music-overlay .now-playing.is-seated .disc-stage > .transport button {
    opacity:1;transform:none;
  }
}