/* ═══════════════════════════════════════════════
   CARDS — YouTube video cards, Instagram reels,
            3D tilt shine, views badge, shorts
═══════════════════════════════════════════════ */

/* ── YouTube section wrapper ── */
#youtube{background:var(--bg)}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* ── Base video card ── */
.video-card{
  background:var(--surface-2);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border-soft);cursor:none;text-decoration:none;display:block;
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
  transition:border-color .35s,box-shadow .35s,transform .55s cubic-bezier(.23,1,.32,1);
  will-change:transform;position:relative;
}
.video-card:hover{border-color:rgba(200,168,75,.35);box-shadow:0 28px 60px rgba(0,0,0,.7),0 0 0 1px rgba(200,168,75,.08) inset}

/* ── Shine overlay ── */
.card-shine{position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;z-index:10;opacity:0;transition:opacity .3s}
.video-card:hover .card-shine{opacity:1}

/* ── Thumbnail ── */
.video-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.25,.46,.45,.94)}
.video-card:hover .vid-bg{transform:scale(1.08)}
.play-ring{position:relative;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:all .3s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2}
.video-card:hover .play-ring{background:rgba(255,0,0,.85);border-color:transparent;transform:scale(1.12)}
.play-tri{width:0;height:0;border-style:solid;border-width:7px 0 7px 14px;border-color:transparent transparent transparent white;margin-left:3px}
.thumb-vignette{position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.yt-stamp{position:absolute;top:9px;left:9px;display:flex;align-items:center;gap:4px;padding:2px 7px;background:rgba(0,0,0,.65);border-radius:4px;z-index:2}
.yt-stamp-txt{font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.video-body{padding:.9rem 1rem;position:relative;z-index:1}
.video-ttl{font-size:.85rem;font-weight:500;color:var(--text);line-height:1.45;margin-bottom:.3rem}
.video-meta{font-size:.7rem;color:var(--text-dim)}

/* ── Views badge ── */
.views-badge{
  position:absolute;bottom:9px;right:9px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:4px;
  font-size:.6rem;font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.9);
  opacity:0;transition:opacity .4s ease .1s;
}
.views-badge svg{flex-shrink:0;opacity:.7}
.video-card .views-badge.loaded{opacity:1}

/* ── Shorts cards (vertical 9:16 within grid) ── */
.video-card.shorts-card{height:400px}
.video-card.shorts-card .video-thumb{aspect-ratio:auto;height:100%}
.video-card.shorts-card .thumb-vignette{
  height:100%;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.32) 52%,rgba(0,0,0,0) 100%);
}
.video-card.shorts-card .play-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.video-card.shorts-card:hover .play-ring{transform:translate(-50%,-50%) scale(1.12)}
.video-card.shorts-card .video-body{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:1rem}
.video-card.shorts-card .video-ttl{color:#fff;margin-bottom:.2rem}
.video-card.shorts-card .video-meta{color:rgba(255,255,255,.82)}
.video-card.shorts-card .views-badge{top:9px;right:9px;bottom:auto}

/* ── Full-thumbnail cards (Instagram style in YouTube grid) ── */
.video-card.full-thumb{overflow:hidden}
.video-card.full-thumb .video-thumb{height:100%}
.video-card.full-thumb img.vid-bg{object-fit:cover;width:100%;height:100%}

/* ── Instagram reels grid ── */
#instagram{background:var(--surface)}
.reels-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem}
.reel-card{aspect-ratio:9/16;border-radius:10px;overflow:hidden;position:relative;cursor:none;border:1px solid var(--border-soft);transform-style:preserve-3d;transform:perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);transition:border-color .35s,box-shadow .35s,transform .55s cubic-bezier(.23,1,.32,1);text-decoration:none;display:block;will-change:transform}
.reel-card:hover{border-color:rgba(193,53,132,.4);box-shadow:0 20px 48px rgba(0,0,0,.6)}
.reel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.25,.46,.45,.94)}
.reel-card:hover .reel-bg{transform:scale(1.06)}
.reel-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.18) 55%,transparent 100%);transition:opacity .3s}
.reel-card:hover .reel-veil{opacity:.65}
.reel-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.75);opacity:0;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;transition:all .3s;backdrop-filter:blur(4px);z-index:2}
.reel-card:hover .reel-play-btn{opacity:1;transform:translate(-50%,-50%) scale(1)}
.reel-tri{width:0;height:0;border-style:solid;border-width:5px 0 5px 10px;border-color:transparent transparent transparent white;margin-left:2px}
.reel-bottom{position:absolute;bottom:.65rem;left:.65rem;right:.65rem;z-index:2}
.reel-tag{font-size:.6rem;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.65);text-transform:uppercase}
.ig-stamp{position:absolute;top:.55rem;right:.55rem;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:2}

/* ── Responsive: cards ── */
@media(max-width:1100px){
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .reels-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .video-grid{grid-template-columns:1fr}
  .reels-grid{grid-template-columns:repeat(2,1fr)}
}