/* LifeReel — custom styles that complement Tailwind Play CDN */

:root {
  --lr-accent: #FE2C55;
  --lr-accent-2: #00C2FF;
}

html, body {
  height: 100%;
  background: #000;
  color: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hide scrollbars but keep scrolling */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Vertical snap container for the home feed */
.feed-scroll {
  height: 100dvh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.feed-scroll::-webkit-scrollbar { display: none; }
.feed-scroll { scrollbar-width: none; }

.snap-slide {
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
}

/* Spinning music disc used on home feed action rail */
.music-disc {
  animation: lr-spin 6s linear infinite;
}
@keyframes lr-spin { to { transform: rotate(360deg); } }

/* Like heart pop animation */
.heart-pop { animation: lr-pop 0.35s ease; }
@keyframes lr-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Toast used on upload page */
.lr-toast {
  animation: lr-toast-in 0.3s ease forwards;
}
@keyframes lr-toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtle fade-in used when rendering grids/cards */
.lr-fade { animation: lr-fade 0.45s ease both; }
@keyframes lr-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drag-over highlight for upload drop zone */
.drop-active {
  border-color: var(--lr-accent) !important;
  background: rgba(254, 44, 85, 0.08) !important;
}

/* Action rail button hover ring */
.rail-btn { transition: transform 0.15s ease; }
.rail-btn:hover { transform: scale(1.08); }
.rail-btn:active { transform: scale(0.94); }

/* Top nav blur on scroll (toggled via JS) */
.nav-blur { backdrop-filter: blur(12px); background: rgba(0,0,0,0.45); }

/* Truncate helper for video titles */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gradient overlays on the feed slides */
.slide-bottom-gradient {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100%);
}
.slide-top-gradient {
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

/* Custom checkbox/radio accent */
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
  color: var(--lr-accent);
}

/* Selection */
::selection { background: var(--lr-accent); color: #fff; }