/* song-video.css —「動画で聴く」フルスクリーン再生（音反応ビジュアル） */
.sv-overlay{
  position:fixed; inset:0; z-index:10000; display:none;
  background:#070910; font-family:"Noto Serif JP",serif; color:#F2F2F5; -webkit-font-smoothing:antialiased;
}
.sv-overlay.open{ display:block; animation:svFade .35s ease; }
@keyframes svFade{ from{opacity:0;} to{opacity:1;} }
.sv-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.sv-lower{ position:absolute; left:clamp(20px,5vw,64px); bottom:clamp(70px,12vh,120px); z-index:3; max-width:min(82vw,640px); }
.sv-eyebrow{ font-family:"Cormorant Garamond","Noto Serif JP",serif; font-style:italic; letter-spacing:.2em;
  font-size:clamp(12px,1.6vw,16px); color:#D8C39A; margin-bottom:.5em; }
.sv-title{ font-weight:600; font-size:clamp(24px,4.4vw,48px); line-height:1.15; text-shadow:0 2px 30px rgba(0,0,0,.6); }
.sv-composer{ margin-top:.4em; font-size:clamp(14px,2vw,20px); color:#9aa0b3; letter-spacing:.05em; }
.sv-credit{ margin-top:1em; font-size:11px; color:#5b6075; letter-spacing:.04em; font-family:"Cormorant Garamond",serif; }

.sv-ctrl{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; gap:14px;
  padding:16px clamp(20px,5vw,64px) 22px; background:linear-gradient(0deg,rgba(7,9,16,.85),transparent); }
.sv-ctrl button{ background:transparent; border:none; cursor:pointer; color:#cfd3df; display:flex; padding:4px; transition:color .2s; }
.sv-ctrl button:hover{ color:#fff; }
.sv-track{ flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.16); overflow:hidden; transition:height .15s ease; }
.sv-track:hover{ height:7px; }
.sv-bar{ height:100%; width:0; background:linear-gradient(90deg,#7E9BFF,#D8C39A); }
.sv-time{ font-family:"Cormorant Garamond",serif; font-variant-numeric:tabular-nums; font-size:13px; color:#9aa0b3; min-width:90px; text-align:right; letter-spacing:.04em; }

.sv-close{ position:absolute; top:clamp(14px,3vw,24px); right:clamp(14px,3vw,24px); z-index:5;
  width:40px; height:40px; border:0; border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.1); display:grid; place-items:center; transition:background .2s; }
.sv-close:hover{ background:rgba(255,255,255,.22); }

@media (prefers-reduced-motion: reduce){ .sv-overlay.open{ animation:none; } }