/* 墙上播放器的视频模式（首页和 Podcast 页共用，配 /js/hero-video.js）：选到有视频的一期，玻璃转成横屏，
   画面是视频封面；点画面进入全屏，只在全屏里嵌 YouTube。规则原样来自 Podcast 结构稿 v15（原来在 podcast.css），
   只改了两处过渡，让首页原有的手感不丢：「节目单」按钮悬停时的背景渐变（.25s）、播放键按下的缩放（.15s）。
   视频画面的图（.pv-pic）用 --pv-d / --pv-n（白天 / 夜晚），由 hero-video.js 按这一期设置。 */
/* on the wall: the disc gives way to a screen */
#hero .pl-video{ position:absolute; left:36px; top:246px; width:550px; height:309px; padding:0; border:0; border-radius:22px; overflow:hidden; cursor:pointer;
  background:#1b1720; opacity:0; pointer-events:none; transform:scale(.94); transition:opacity .45s ease, transform .45s ease;
  box-shadow:0 18px 40px rgba(40,24,48,.35), inset 0 0 0 2px rgba(255,255,255,.18); }
#hero .pg.is-video .pl-video{ opacity:1; pointer-events:auto; transform:none; }
#hero .pg.is-video :is(.pl-cd, .pl-halo, .pl-album){ opacity:0 !important; pointer-events:none; }
.pv-pic{ position:absolute; inset:-6%; background:var(--pv-d) 30% 60% / cover; animation:pv-drift 18s ease-in-out infinite alternate; animation-play-state:paused; }
#hero .pg.is-playing .pv-pic, .vbox.is-playing .pv-pic{ animation-play-state:running; }
#hero.is-night .pv-pic, :root[data-theme="dark"] .vbox .pv-pic{ background-image:var(--pv-n, var(--pv-d)); }
@keyframes pv-drift{ from{ transform:scale(1) translate(0, 0); } to{ transform:scale(1.08) translate(-2%, -1%); } }
#hero .pv-tag{ position:absolute; left:18px; top:16px; padding:6px 12px; border-radius:99px; background:rgba(0,0,0,.35); color:#fff; font:500 15px/1 var(--sans); letter-spacing:.2em; }
#hero .pv-full{ position:absolute; right:16px; bottom:16px; width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.35); display:grid; place-items:center; opacity:.85; transition:opacity .2s, transform .2s; }
#hero .pv-full svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#hero .pl-video:hover .pv-full{ opacity:1; transform:scale(1.08); }
#hero .pl-video:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
/* the full-screen viewer */
.vbox{ position:fixed; inset:0; z-index:70; display:grid; grid-template-rows:minmax(0,1fr) auto; background:#0c0a0d; color:#F3ECDF; opacity:0; transition:opacity .35s ease; }
.vbox.up{ opacity:1; }
.vbox[hidden]{ display:none; }   /* 首页不加载 inner.css（那里有全局的 [hidden]），这里自己写：不写的话，看不见的全屏层会挡住整页的点击 */
html.vb-open{ overflow:hidden; }
.vb-stage{ position:relative; overflow:hidden; margin:calc(24px + env(safe-area-inset-top,0px)) 24px 0; border-radius:18px; }
.vb-note{ position:absolute; left:20px; bottom:16px; font:300 12px/1.6 var(--sans); letter-spacing:.08em; color:rgba(255,255,255,.75); }
.vb-bar{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; align-items:center; gap:1rem; padding:1rem 24px calc(1.2rem + env(safe-area-inset-bottom,0px)); }
.vb-play{ width:52px; height:52px; border-radius:50%; border:0; background:#F3ECDF; color:#0c0a0d; display:grid; place-items:center; cursor:pointer; }
.vb-play svg{ width:18px; height:18px; fill:currentColor; grid-area:1 / 1; }
.vb-play .i-pa{ display:none; } .vb-play.on .i-pa{ display:block; } .vb-play.on .i-pl{ display:none; }
.vb-t b{ display:block; font:600 1rem/1.4 var(--read-zh); letter-spacing:.06em; }
.vb-t span{ font:300 .76rem/1.6 var(--sans); letter-spacing:.1em; color:rgba(243,236,223,.7); }
.vb-track{ position:relative; height:24px; cursor:pointer; }
.vb-track::before, .vb-track i{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; translate:0 -50%; border-radius:3px; background:rgba(243,236,223,.2); }
.vb-track i{ background:#F3ECDF; transform-origin:0 50%; transform:scaleX(0); transition:transform .25s linear; }
.vb-time{ font:.78rem var(--sans); color:rgba(243,236,223,.75); font-variant-numeric:tabular-nums; }
.vb-x{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,236,223,.3); background:none; color:#F3ECDF; display:grid; place-items:center; cursor:pointer; }
.vb-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.vbox button:focus-visible{ outline:2px solid #E6B08E; outline-offset:3px; }
@media (max-width:640px){ .vb-bar{ grid-template-columns:auto minmax(0,1fr) auto; } .vb-track, .vb-time{ display:none; } .vb-stage{ margin:calc(12px + env(safe-area-inset-top,0px)) 12px 0; } }
@media (prefers-reduced-motion: reduce){ .pv-pic{ animation:none; } }
/* ---------- v6: for video the glass itself turns on its side ---------- */
/* the painted glass (both day and night), its shadow and its reflections rotate a quarter turn about the pane's centre */
#hero .pg-art, #hero .pg-shade{ transform-origin:311px 593px; transition:transform .9s cubic-bezier(.65,0,.35,1); }
/* the shade box starts at (-26, 74) in player space, so the same turning point is (337, 519) in its own box */
#hero .pg-shade{ transform-origin:337px 519px; }
#hero .pg.is-video .pg-art, #hero .pg.is-video .pg-shade{ transform:rotate(90deg); }
/* the wall shadow lives inside the turned glass: turn its offset back so it still falls right and down, away from the window */
#hero .pg.is-video .pg-cast{ transform:translate(40px, -56px); box-shadow:-22px 30px 14px 2px rgba(54,28,64,.32); }
#hero.is-night .pg.is-video .pg-cast{ transform:translate(30px, -44px); }
#hero .pl-pill, #hero .pl-listbtn{ transition:opacity .4s ease; }
#hero .pg.is-video .pl-pill{ opacity:0 !important; pointer-events:none; }
/* the screen fills the pane; the controls lie over its lower edge */
#hero .pl-video{ left:-190px; top:318px; width:980px; height:551px; border-radius:20px; transition:opacity .45s ease .35s, transform .45s ease .35s; }
#hero .pg:not(.is-video) .pl-video{ transition-delay:0s; }
#hero .pl-video::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 52%, rgba(20,12,24,.62)); pointer-events:none; }
#hero .pv-full{ top:16px; bottom:auto; }
#hero .pl-title, #hero .pl-sub, #hero .pl-seek, #hero .pl-time, #hero .pl-play, #hero .pl-prev, #hero .pl-next{
  transition:left .7s cubic-bezier(.65,0,.35,1), top .7s cubic-bezier(.65,0,.35,1), width .7s ease, opacity .3s ease, transform .15s ease; }
#hero .pg.is-video .pl-title{ left:-160px; top:748px; max-width:600px; font-size:36px; }
#hero .pg.is-video .pl-sub{ left:-159px; top:796px; max-width:600px; font-size:22px; }
#hero .pg.is-video .pl-seek{ left:-160px; top:826px; width:920px; }
#hero .pg.is-video .pl-time{ top:884px; font-size:20px; }
#hero .pg.is-video .pl-time.cur{ left:-160px; }
#hero .pg.is-video .pl-time.rem{ right:-94px; }
#hero .pg.is-video .pl-play{ left:628px; top:728px; width:88px; height:88px; }
#hero .pg.is-video .pl-play svg{ width:40px; height:40px; }
#hero .pg.is-video .pl-prev{ left:566px !important; top:750px !important; }
#hero .pg.is-video .pl-next{ left:730px !important; top:750px !important; }
/* the episode list button comes back: under the landscape glass, on the wall */
#hero .pl-listbtn{ transition:background .25s ease, color .25s ease, opacity .4s ease, top .7s cubic-bezier(.65,0,.35,1), left .7s cubic-bezier(.65,0,.35,1); }
#hero .pg.is-video .pl-listbtn{ top:966px; left:137px; }
/* new glass (2026-10-08): the pane is 674 × 1038 (art px), so on its side it spans x −208…830, y 256…930 */
#hero .pl-video{ left:-178px; top:327px; width:948px; height:533px; }
#hero .pg.is-video .pl-title{ left:-150px; top:742px; max-width:560px; }
#hero .pg.is-video .pl-sub{ left:-149px; top:790px; max-width:560px; }
#hero .pg.is-video .pl-seek{ left:-150px; top:814px; width:890px; }
#hero .pg.is-video .pl-time{ top:874px; }
#hero .pg.is-video .pl-time.cur{ left:-150px; }
#hero .pg.is-video .pl-time.rem{ right:-74px; }
#hero .pg.is-video .pl-play{ left:620px; top:722px; width:84px; height:84px; }
#hero .pg.is-video .pl-play svg{ width:38px; height:38px; }
#hero .pg.is-video .pl-prev{ left:560px !important; top:742px !important; }
#hero .pg.is-video .pl-next{ left:712px !important; top:742px !important; }
#hero .pg.is-video .pl-listbtn{ top:962px; }
/* ---------- 网站加的：全屏里嵌入的 YouTube 播放器铺满画面（原型里只有示例画面） ---------- */
.vb-stage.has-yt .pv-pic{ display:none; }
.vb-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }