.w-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,3vw,34px);
  margin-top:2.4rem;position:relative;z-index:1;}
.w-play{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;
  border-radius:10px;overflow:hidden;}
.w-thumb{display:block;aspect-ratio:16/9;width:100%;background-size:cover;background-position:center;
  box-shadow:0 24px 50px -28px rgba(20,30,32,.5);transition:transform .5s var(--ease-quint),filter .4s ease;}
.w-card:hover .w-thumb,.w-play:focus-visible .w-thumb{transform:scale(1.03);filter:saturate(1.06);}
.w-icon{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.88);display:grid;place-items:center;
  transition:transform .3s var(--ease-back),background .3s;}
.w-icon::before{content:"";border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--teal-900);margin-left:3px;}
.w-card:hover .w-icon,.w-play:focus-visible .w-icon{transform:translate(-50%,-50%) scale(1.1);background:#fff;}
.w-frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:10px;overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(20,30,32,.5);}
.w-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.w-meta{margin-top:14px;}
.w-meta h3{font-family:var(--serif-jp);font-weight:500;font-size:1.15rem;margin:0;letter-spacing:.02em;}
.w-meta p{font-size:.82rem;color:var(--mist);margin:.2rem 0 0;}
/* 動画ウインドウのリッチな登場：上から開くワイプ＋拡大＋僅かな回り込み
   ※clip-path は内側(.w-play)に適用する。観測対象である .w-card 自身を
     clip-path で面積ゼロにすると、Chrome の IntersectionObserver が交差を
     検知できず .in が付かない（＝カードが opacity:0 のまま空欄になる）。 */
.w-card.cardfx{opacity:0;transform:translateY(26px) scale(.98);transform-origin:center top;
  transition:opacity .7s ease, transform 1.05s var(--ease-quint);}
.w-card.cardfx.in{opacity:1;transform:none;}
.w-card.cardfx .w-play,.w-card.cardfx .w-frame{clip-path:inset(0 7% 100% 7%);
  transition:clip-path 1.05s var(--ease-quint),transform .25s ease;}
.w-card.cardfx.in .w-play,.w-card.cardfx.in .w-frame{clip-path:inset(0 0 0 0);}
/* ⑤ 動画サムネの3Dチルト＋カーソル追従の光沢（PCのみ） */
@media(pointer:fine){
  .w-play::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),rgba(255,255,255,0) 46%);
    opacity:0;transition:opacity .35s ease;}
  .w-play:hover::after{opacity:1;mix-blend-mode:soft-light;}
}
@media(prefers-reduced-motion:reduce){.w-thumb,.w-icon{transition:none;}
  .w-card.cardfx{transform:translateY(10px);transition-duration:.5s;}
  .w-card.cardfx .w-play,.w-card.cardfx .w-frame{clip-path:none;}}