/* polish.css — Motion + interaction polish.
   Loaded last so we can override inline-style edge cases via dedicated classes.
   All motion is gated by prefers-reduced-motion. */

/* Press-to-scale for any tappable surface */
.vh-tap {
  transition: transform 140ms cubic-bezier(.2,.7,.2,1),
              opacity 140ms ease,
              box-shadow 180ms ease;
  will-change: transform;
}
.vh-tap:active {
  transform: scale(0.965);
}

/* Cards lift on hover (desktop). On touch this is harmless. */
.vh-card {
  transition: transform 220ms cubic-bezier(.2,.7,.2,1),
              box-shadow 220ms ease;
}
@media (hover: hover) {
  .vh-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.05) inset;
  }
}

/* Shimmer skeleton */
@keyframes vhShimmer {
  0%   { background-position: -240px 0; }
  100% { background-position: 240px 0; }
}
.vh-skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 240px 100%;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.04);
  animation: vhShimmer 1.6s infinite linear;
  border-radius: 8px;
}

/* Locked overlay glow pulse */
@keyframes vhLockGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,0.0), 0 0 0 0 rgba(225,29,72,0.0) inset; }
  50%      { box-shadow: 0 0 22px 2px rgba(225,29,72,0.30), 0 0 0 1px rgba(225,29,72,0.25) inset; }
}
.vh-lock-glow {
  animation: vhLockGlow 2.6s ease-in-out infinite;
}

/* Heart pop */
@keyframes vhHeartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.vh-heart-pop { animation: vhHeartPop 420ms cubic-bezier(.2,.7,.2,1); }

/* Filter chip enter/swap */
@keyframes vhChipPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.vh-chip-pop { animation: vhChipPop 220ms cubic-bezier(.2,.9,.2,1); }

/* Active bottom tab indicator pill (drawn behind the icon) */
.vh-tab-glow {
  position: absolute; inset: 0;
  margin: auto; height: 4px; width: 24px; bottom: -2px; top: auto;
  border-radius: 99px;
  filter: blur(4px);
  opacity: 0.85;
  transition: background-color 200ms ease;
}

/* Disable scrollbar everywhere by default in the device frame */
.vh-no-scrollbar { scrollbar-width: none; }
.vh-no-scrollbar::-webkit-scrollbar { display: none; }

/* Responsive video/cast grid — mobile 2col → desktop 4-5col */
.vh-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 4px 16px;
}
@media (min-width: 640px)  { .vh-video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .vh-video-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .vh-video-grid { grid-template-columns: repeat(5, 1fr); } }

.vh-cast-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px;
}
@media (min-width: 640px)  { .vh-cast-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .vh-cast-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .vh-cast-grid { grid-template-columns: repeat(5, 1fr); } }

/* Bottom nav constrain on wide desktop */
@media (min-width: 1280px) {
  .vh-bottom-nav-inner { max-width: 1280px; margin: 0 auto; }
}

/* Auth spinner */
@keyframes vhSpin { to { transform: rotate(360deg); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vh-tap, .vh-card { transition: none !important; }
  .vh-tap:active    { transform: none !important; }
  .vh-card:hover    { transform: none !important; }
  .vh-skel          { animation: none !important; }
  .vh-lock-glow     { animation: none !important; }
  .vh-heart-pop     { animation: none !important; }
  .vh-chip-pop      { animation: none !important; }
}