/* ═══════════════════════════════════
   COMPONENTS.CSS — cursor · modal · skeletons
   ═══════════════════════════════════ */

/* ── CURSOR ── */
.cursor {
  width: 8px; height: 8px; background: var(--gold);
  border-radius: 50%; position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference; transition: transform 0.1s;
}
.cursor-ring {
  width: 32px; height: 32px; border: 1px solid var(--gold);
  border-radius: 50%; position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998; opacity: 0.6;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

/* ── VIDEO MODAL ── */
.modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(7,11,20,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s;
}
.modal.open { opacity: 1; pointer-events: all; }
.modal-inner {
  width: min(900px, 92vw); position: relative;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.modal.open .modal-inner { transform: scale(1) translateY(0); }
.modal-close-btn {
  position: absolute; top: -3.5rem; right: 0;
  background: none; border: none; color: var(--cream); cursor: none;
  font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.5; transition: opacity 0.2s; display: flex; align-items: center; gap: 0.5rem;
}
.modal-close-btn:hover { opacity: 1; }
.modal-frame {
  width: 100%; aspect-ratio: 16/9;
  border: 1px solid var(--border); background: #080808;
}
.modal-frame iframe { width: 100%; height: 100%; border: none; }

/* ── SKELETON LOADER ── */
.vid-skeleton {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 2px; min-height: 460px;
}
.skeleton-col { display: flex; flex-direction: column; gap: 2px; }
.skeleton-box {
  background: linear-gradient(90deg, #111114 25%, #1a1a1e 50%, #111114 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 2px;
}
.skeleton-box.large { flex: 1; }
.skeleton-box.small { flex: 1; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}