/* ════════════════════════════════════════════════════════════════════════
   FinalVerse — UI Enhancements  (fv-ui-enhancements.css)
   ────────────────────────────────────────────────────────────────────────
   All improvements in one file — no existing styles are broken.
   Load AFTER styles.css in index.html:
     <link rel="stylesheet" href="./css/fv-ui-enhancements.css">
   ════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (extend existing :root) ───────────────────────────── */
:root {
  --fv-glow-gold:  rgba(232,184,75,.18);
  --fv-glow-gold2: rgba(232,184,75,.08);
  --fv-transition: cubic-bezier(.25,.46,.45,.94);
  --fv-fast:       150ms;
  --fv-mid:        220ms;
  --fv-slow:       350ms;
}

/* ════════════════════════════════════════════════════════════════════════
   1. SCROLL PROGRESS BAR — thin gold line at top of page
   ════════════════════════════════════════════════════════════════════════ */
#fv-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: 10000;
  transition: width 80ms linear;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}

/* ════════════════════════════════════════════════════════════════════════
   2. PAGE TRANSITION — fade + subtle slide on view change
   ════════════════════════════════════════════════════════════════════════ */
@keyframes fvPageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fv-page-enter {
  animation: fvPageIn 200ms var(--fv-transition) both;
}

/* Views that participate in transitions */
#view-home,
#view-browse,
#view-all,
#view-allseries,
#view-recent,
#view-soon,
#view-row-full,
#view-search {
  transition: opacity 180ms ease;
}

/* ════════════════════════════════════════════════════════════════════════
   3. ENHANCED CARD HOVER — gold border glow + scale
      (builds on existing .row-card:hover — just layers the glow)
   ════════════════════════════════════════════════════════════════════════ */
.row-card {
  transition:
    transform 250ms var(--fv-transition),
    box-shadow 250ms var(--fv-transition),
    border-color 200ms ease;
}

.row-card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 16px 40px rgba(0,0,0,.7),
    0 0 0 1px rgba(232,184,75,.4),
    0 0 20px rgba(232,184,75,.12);
  border-color: rgba(232,184,75,.4) !important;
}

/* Subtle watch button upgrade */
.row-card-watch-inner {
  letter-spacing: .3px;
  font-size: .68rem;
  backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════════════
   4. RATING BADGE ON CARD — star + number overlay on poster
   ════════════════════════════════════════════════════════════════════════ */
.row-card .fv-rating-overlay {
  position: absolute;
  bottom: 38px;          /* above title area */
  left: 7px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(9,11,16,.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: .6rem;
  font-weight: 800;
  color: #f5c518;
  pointer-events: none;
  letter-spacing: .2px;
}

.row-card .fv-rating-overlay svg {
  width: 8px; height: 8px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   5. WATCHED BADGE — green checkmark corner on watched cards
   ════════════════════════════════════════════════════════════════════════ */
.row-card.is-watched::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent rgba(34,197,94,.85) transparent transparent;
  z-index: 6;
  border-radius: 0 8px 0 0;
}

.row-card.is-watched::after {
  /* override the default gradient overlay while keeping it */
  z-index: 1;
}

/* Checkmark SVG inside the corner */
.row-card.is-watched .fv-watched-check {
  position: absolute;
  top: 3px; right: 3px;
  z-index: 7;
  width: 10px; height: 10px;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   6. IMPROVED TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════════════ */
.fv-toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(15,18,25,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-weight: 600;
  padding: .7rem 1.2rem;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  z-index: 9999;
  font-size: .85rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .65rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fvToastIn 200ms var(--fv-transition) both;
  max-width: calc(100vw - 3rem);
}

.fv-toast.fv-toast-error {
  border-left-color: var(--accent2);
}

.fv-toast.fv-toast-success {
  border-left-color: #22c55e;
}

.fv-toast-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
}

@keyframes fvToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fvToastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

.fv-toast.fv-toast-hiding {
  animation: fvToastOut 180ms ease forwards;
}

/* ════════════════════════════════════════════════════════════════════════
   7. HERO STAGGER ANIMATION — each element fades up with delay
   ════════════════════════════════════════════════════════════════════════ */
@keyframes fvHeroItem {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow   { animation: fvHeroItem 420ms var(--fv-transition) .05s both; }
.hero-title     { animation: fvHeroItem 420ms var(--fv-transition) .14s both; }
.hero-meta      { animation: fvHeroItem 420ms var(--fv-transition) .22s both; }
.hero-overview  { animation: fvHeroItem 420ms var(--fv-transition) .30s both; }
.hero-btns      { animation: fvHeroItem 420ms var(--fv-transition) .38s both; }

/* Hero content parent — remove conflicting single animation */
.hero-content {
  animation: none !important;
}

/* Hero backdrop subtle zoom on load */
#hero::before {
  transition: transform 8s ease !important;
}

/* ════════════════════════════════════════════════════════════════════════
   8. CAT-TAB BAR — gradient fade + improved active state
   ════════════════════════════════════════════════════════════════════════ */

/* Gradient fade on right edge — signals overflow on mobile */
#cat-tabs-bar {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, black 88%, transparent 100%);
}

/* Active tab: more prominent */
.cat-tab.active {
  background: rgba(232,184,75,.14) !important;
  border-color: rgba(232,184,75,.45) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(232,184,75,.1) inset;
}

/* Hover: subtle glow */
.cat-tab:hover:not(.active) {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.9) !important;
}

/* Tab transitions */
.cat-tab {
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease !important;
}

/* ════════════════════════════════════════════════════════════════════════
   9. SEARCH BAR — focus expansion with golden ring
   ════════════════════════════════════════════════════════════════════════ */
#searchInput {
  transition: width 280ms var(--fv-transition), border-color 200ms ease, background 200ms ease !important;
}

#searchInput:focus {
  border-color: rgba(232,184,75,.55) !important;
  box-shadow: 0 0 0 3px rgba(232,184,75,.08) !important;
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   10. KEYBOARD FOCUS RING — accessible gold outline on all interactive
   ════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid rgba(232,184,75,.7) !important;
  outline-offset: 2px !important;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   11. SKELETON LOADING — improved shimmer rows
   ════════════════════════════════════════════════════════════════════════ */
@keyframes fvShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.fv-skel {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    rgba(255,255,255,.04) 50%,
    var(--surface) 75%
  );
  background-size: 800px 100%;
  animation: fvShimmer 1.5s infinite;
  border-radius: 6px;
}

/* Override existing shimmer with improved version */
.card-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.05) 40%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.05) 60%,
    transparent 100%
  ) !important;
  background-size: 400px 100% !important;
  animation: fvShimmer 1.4s infinite linear !important;
}

/* Home row skeleton pulse */
.home-row-skel-card {
  width: 160px;
  aspect-ratio: 2/3;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: var(--surface2);
}

.home-row-skel-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.05) 50%,
    transparent 100%
  );
  background-size: 400px 100%;
  animation: fvShimmer 1.5s infinite;
}

/* ════════════════════════════════════════════════════════════════════════
   12. MODAL ENHANCEMENTS — smoother open + backdrop
   ════════════════════════════════════════════════════════════════════════ */
#modal-overlay {
  transition: opacity 220ms ease !important;
}

/* detail action buttons polish */
.detail-actions button {
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}

.detail-actions button:hover {
  transform: translateY(-1px);
}

.detail-actions button:active {
  transform: translateY(0) scale(.98);
}

/* ════════════════════════════════════════════════════════════════════════
   13. NAV PILL — active state more visible
   ════════════════════════════════════════════════════════════════════════ */
.nav-pill {
  transition: color 180ms ease, background 180ms ease !important;
}

.nav-pill.active {
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   14. HOME ROW TITLE — subtle accent underline on hover
   ════════════════════════════════════════════════════════════════════════ */
.home-row-title {
  position: relative;
  display: inline-block;
  transition: color 200ms ease;
}

.home-row-header:hover .home-row-title {
  color: rgba(255,255,255,.95);
}

/* ════════════════════════════════════════════════════════════════════════
   15. BUTTONS — micro bounce on click
   ════════════════════════════════════════════════════════════════════════ */
.hero-btn,
.wf-btn,
.adm-btn,
.cat-back-btn {
  transition: transform 120ms ease, box-shadow 120ms ease, background 180ms ease !important;
}

.hero-btn:active,
.wf-btn:active,
.adm-btn:active,
.cat-back-btn:active {
  transform: scale(.97) !important;
}

/* Primary watch button glow */
.hero-btn.hero-btn-watch:hover,
button[onclick*="openWatchPageFor"]:hover {
  box-shadow: 0 4px 20px rgba(232,184,75,.35) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   16. HOME ROW SCROLL ARROWS — bigger + more visible
   ════════════════════════════════════════════════════════════════════════ */
.home-row-arrow {
  transition: opacity 180ms ease, background 180ms ease, transform 150ms ease !important;
}

.home-row-arrow:hover {
  transform: translateY(-50%) scale(1.08) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   17. COMING SOON CARD — golden pulsing border
   ════════════════════════════════════════════════════════════════════════ */
@keyframes fvSoonPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,184,75,.25); }
  50%       { box-shadow: 0 0 0 2px rgba(232,184,75,.45), 0 0 12px rgba(232,184,75,.12); }
}

.row-card.is-soon {
  animation: fvSoonPulse 2.8s ease-in-out infinite !important;
}

.row-card.is-soon:hover {
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   18. SEARCH DROPDOWN — smoother open
   ════════════════════════════════════════════════════════════════════════ */
.search-dropdown {
  transition: opacity 200ms ease, transform 200ms var(--fv-transition) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   19. REDUCED MOTION — respect user preference
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  #fv-scroll-progress { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   20. MOBILE REFINEMENTS
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Slightly larger tap targets */
  .cat-tab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Toast full-width on mobile */
  .fv-toast {
    left: 1rem;
    right: 1rem;
    width: auto;
    transform: translateY(0);
    white-space: normal;
  }

  @keyframes fvToastIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}