/* === Smart Video — Cinematic Stack layout === */
.sv-cinematic {
    position: relative;
    perspective: 1200px;
    overflow: visible;
  }
  
  .sv-cin-track {
    position: relative;
    width: 100%;
    height: auto;
  }
  
  .sv-cin-item {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(960px, 100%);
    transition: transform 420ms ease, opacity 420ms ease, filter 420ms ease;
    will-change: transform, opacity, filter;
    pointer-events: none;
  }
  
  .sv-cin-item.active { pointer-events: auto; }
  
  /* Card styling (premium feel) */
  .sv-card {
    border-radius: var(--sv-radius, 16px);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    overflow: hidden;
    background: #000;
  }
  
  .sv-card .svideo-el {
    display: block;
    width: 100%;
    height: 100%;
    /* Fit mode: controlled via data-fit */
    object-fit: var(--sv-fit, cover);
    background: #000;
    filter: none !important;
    opacity: 1 !important;
  }
  
  /* Aspect ratios via data-ratio */
  .sv-card[data-ratio="16x9"] { aspect-ratio: 16/9; }
  .sv-card[data-ratio="9x16"] { aspect-ratio: 9/16; }
  .sv-card[data-ratio="1x1"]  { aspect-ratio: 1/1; }
  .sv-card[data-ratio="4x5"]  { aspect-ratio: 4/5; }
  
  /* Side cards (peek/stack) */
  .sv-cin-side { filter: saturate(.9) brightness(.9); opacity: .8; }
  
  /* Positions (N visible side items) computed by JS; we keep room for them */
  .sv-cin-area {
    position: relative;
    min-height: var(--sv-height, 60vh);
    margin-inline: auto;
  }
  
  /* Controls row under main */
  .sv-cin-controls {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  .sv-cin-btn {
    appearance: none; border:0; cursor:pointer;
    padding: 9px 14px; border-radius: 999px;
    background: #222; color:#fff; font-weight:600;
  }
  
  /* Indicator chip */
  .sv-cin-indicator {
    display:inline-flex; align-items:center; gap:6px;
    background:#2a2a2a; color:#fff; padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px;
  }
  
  /* Hover effects / play icon */
  .sv-card:hover { box-shadow: 0 25px 60px rgba(0,0,0,.45); }
  .sv-play-icon {
    position:absolute; inset:auto auto 12px 12px;
    width:42px; height:42px; border-radius:50%;
    background:#ff0040; display:grid; place-items:center; color:#fff; font-weight:900;
    box-shadow: 0 8px 18px rgba(255,0,64,.35);
  }
  
  /* Lightbox */
  .sv-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.9);
    display: none; align-items: center; justify-content: center;
    z-index: 99999;
  }
  .sv-lightbox.open { display: flex; }
  .sv-lightbox-inner { width:min(90vw,1200px); max-height: 90vh; }
  .sv-lightbox-inner video, .sv-lightbox-inner iframe {
    width:100%; height:100%; object-fit: contain; background:#000;
  }
  .sv-lightbox-close {
    position: absolute; top: 16px; right: 16px;
    background:#111; color:#fff; border:0; border-radius:999px; padding:10px 12px; font-weight:700; cursor:pointer;
  }
  
  /* Mini player (sticky corner) */
  .sv-miniplayer {
    position: fixed; right: 18px; bottom: 18px; width: 340px; z-index: 9999;
    border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.5);
    background:#000; display:none;
  }
  .sv-miniplayer.active { display:block; }
  .sv-miniplayer video, .sv-miniplayer iframe {
    width: 100%; height: 100%; object-fit: contain; background:#000;
  }
  
  /* Responsive: mobile focus on one card, swipeable */
  @media (max-width: 767px){
    .sv-cin-area { --sv-height: calc(100svh - 140px); }
    .sv-card { border-radius: 14px; }
  }
  
  /* Never dim in fullscreen */
  :fullscreen .svideo-el, video:fullscreen { filter:none!important; opacity:1!important; background:#000!important; }