app/static/styles.css

/* --- ANIMATIONS --- */
@keyframes pulse-gold {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
    filter: brightness(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}
.pulse-core {
  animation: pulse-gold 3s infinite ease-in-out;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes svg-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-slow-reverse {
  animation: svg-spin 60s linear infinite reverse;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes slow-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.loading-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmin;
  height: 150vmin;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  animation: slow-spin 60s linear infinite;
  filter: blur(3px);
}

.loading-fg-logo-container {
  width: 360px;
  height: auto;
  margin: 0 auto 20px auto;
  position: relative;
  z-index: 2;
}

#loading-overlay > div.bg-\[\#1c1c1c\] {
  position: relative;
  z-index: 10;
  background-color: rgba(28, 28, 28, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.main-bg-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70vmin;
  height: 70vmin;
  transform: translate(-50%, -50%);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  animation: gentle-breath 10s ease-in-out infinite,
    slow-spin 180s linear infinite;
  filter: blur(3px);
}

@keyframes gentle-breath {
  0%,
  100% {
    opacity: 0.06;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* --- BASE STYLES --- */
body {
  background-color: #121212;
  color: #e0e0e0;
  font-family: "Outfit", sans-serif;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* --- TAB NAVIGATION --- */
.tab-button {
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  position: relative;
}
.tab-button.active {
  color: #8b5cf6;
  border-bottom-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
}
.tab-button:hover {
  color: #fff;
}

/* TAB CONTENT - FIXED VERSION */
.tab-content {
  display: none;
  z-index: 1;
}

.tab-content.active-tab {
  display: flex;
  flex-direction: column;
  z-index: 10;
}

#tab-browser.active-tab {
  flex-direction: row;
  height: 100%;
  width: 100%;
}

#tab-browser .flex-1 {
  min-height: 0;
  min-width: 0;
}

#thumbnail-gallery {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 0%;
  min-height: 0;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 1.5rem !important;
  padding: 1.5rem !important;
}

#thumbnail-gallery.grid {
  display: grid !important;
}

.thumbnail-card {
  position: relative !important;
  width: 100% !important;
}

#tab-universe {
  z-index: 5;
}

#tab-universe.active-tab {
  z-index: 10;
}

/* --- CLUSTER SIDEBAR --- */
.cluster-button {
  transition: all 0.2s ease;
}
.cluster-button.active {
  background-color: #8b5cf6;
  color: white;
  border-left: 3px solid #c4b5fd;
}

/* --- THUMBNAIL CARDS --- */
.thumbnail-card {
  background-color: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: fit-content;
}

.thumbnail-card:hover {
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 24px -8px rgba(139, 92, 246, 0.4);
  z-index: 10;
}

.thumbnail-card::before,
.thumbnail-card::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid #a78bfa;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

.thumbnail-card::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.thumbnail-card::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.thumbnail-card:hover::before {
  opacity: 1;
  top: 6px;
  left: 6px;
}
.thumbnail-card:hover::after {
  opacity: 1;
  bottom: 6px;
  right: 6px;
}

.thumbnail-card.selected {
  background-color: rgba(139, 92, 246, 0.15);
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px #8b5cf6, 0 0 20px rgba(139, 92, 246, 0.3);
}

.thumbnail-card.best-quality {
  border: 1px solid #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2),
    inset 0 0 10px rgba(16, 185, 129, 0.1);
}

.thumbnail-card:hover .card-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(139, 92, 246, 0.3),
    transparent
  );
  animation: card-scan 1.5s infinite linear;
  pointer-events: none;
}

@keyframes card-scan {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(400%);
  }
}

/* Card Image Container - FIX LAYOUT */
.card-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.card-image-container:hover img {
  opacity: 1;
}

/* Card Checkbox */
.card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  z-index: 15;
  cursor: pointer;
  accent-color: #8b5cf6;
}

/* Card Score Badge */
.card-score {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  z-index: 15;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid;
  backdrop-filter: blur(10px);
}

/* Best Banner */
.best-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(16, 185, 129, 0.9), transparent);
  color: white;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  padding: 4px;
  letter-spacing: 1px;
  z-index: 15;
}

/* Card Filename */
.card-filename {
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* --- CINEMATIC UNIVERSE MAP (FIXED) --- */
#tab-universe {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #000000 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#tab-universe.active-tab {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#plotly-div {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  transition: opacity 0.8s ease;
  width: 100% !important;
  height: 100% !important;
}

#plotly-div canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.star-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.stars-small {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1744px 122px 2px rgba(255, 255, 255, 0.9),
    134px 1321px 1px rgba(255, 255, 255, 0.8),
    92px 859px 1px rgba(139, 92, 246, 0.6), 800px 600px 1px #fff,
    1200px 400px 1px rgba(255, 255, 255, 0.9),
    300px 1100px 1px rgba(167, 139, 250, 0.7),
    1500px 900px 2px rgba(255, 100, 200, 0.8),
    600px 200px 1px rgba(100, 255, 255, 0.7);
  animation: animStar 150s linear infinite, twinkle 3s ease-in-out infinite;
}

.stars-medium {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 122px 231px 3px rgba(139, 92, 246, 0.9),
    421px 521px 2px rgba(255, 255, 255, 0.9),
    900px 300px 2px rgba(167, 139, 250, 0.8),
    600px 800px 2px rgba(255, 255, 255, 0.8),
    1100px 500px 3px rgba(255, 0, 255, 0.9),
    300px 1000px 2px rgba(0, 255, 255, 0.8);
  animation: animStar 100s linear infinite,
    glow 2s ease-in-out infinite alternate;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.5) drop-shadow(0 0 4px rgba(139, 92, 246, 0.6));
  }
}

#tab-universe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 20% 30%,
      rgba(139, 92, 246, 0.25) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      rgba(255, 0, 255, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 255, 255, 0.15) 0%,
      transparent 60%
    );
  animation: nebulaPulse 8s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes nebulaPulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

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

/* --- STATS & CHARTS --- */
.stat-box {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.stat-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #333;
}
.stat-box.purple::after {
  background: #8b5cf6;
}
.stat-box.green::after {
  background: #10b981;
}
.stat-box.red::after {
  background: #ef4444;
}
.stat-box.blue::after {
  background: #3b82f6;
}

.stat-box {
  position: relative;
  overflow: hidden;
}
.stat-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transform: skewX(-25deg);
  animation: scan-light 4s infinite linear;
  pointer-events: none;
}
@keyframes scan-light {
  0% {
    left: -100%;
  }
  20% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}

/* --- GLASS PANELS --- */
.glass-panel-ui {
  background: rgba(20, 20, 25, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  z-index: 50;
}

.search-container {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  max-width: 90%;
  border-radius: 99px;
  padding: 4px;
  display: flex;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: floatIn 0.8s ease-out;
}

.search-container:focus-within {
  background: rgba(20, 20, 25, 0.95);
  border-color: #8b5cf6;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4), 0 0 60px rgba(139, 92, 246, 0.2),
    inset 0 0 20px rgba(139, 92, 246, 0.1);
  transform: translateX(-50%) scale(1.02);
}

.search-input {
  background: transparent;
  border: none;
  color: white;
  padding: 8px 16px;
  width: 100%;
  outline: none;
  font-size: 14px;
}

.bottom-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 16px;
  padding: 8px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  animation: floatIn 1s ease-out 0.3s backwards;
  transition: all 0.3s ease;
}

.bottom-controls:hover {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.2);
  transform: translateX(-50%) translateY(-2px);
}

.toggle-switch {
  appearance: none;
  width: 36px;
  height: 20px;
  background: #334155;
  border-radius: 20px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch:checked {
  background: #8b5cf6;
}
.toggle-switch:checked::after {
  transform: translateX(16px);
}

/* --- HIGHLIGHT CARDS --- */
.highlight-card {
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid #333;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.highlight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

.highlight-card:hover {
  transform: translateY(-4px);
  border-color: #6366f1;
  background: rgba(40, 40, 45, 0.9);
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.3);
}

.highlight-card:hover::before {
  transform: scaleX(1);
}

.highlight-img-container {
  position: relative;
  overflow: hidden;
}

.highlight-img-container::after {
  content: "REVIEW CLUSTER";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.highlight-card:hover .highlight-img-container::after {
  opacity: 1;
}

.impact-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}

/* --- DELETE ANIMATION --- */
@keyframes vortex-implode {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1) contrast(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.9) rotate(-10deg);
    filter: brightness(1.5) hue-rotate(90deg);
  }
  100% {
    transform: scale(0) rotate(720deg);
    opacity: 0;
    filter: brightness(0);
  }
}

.thumbnail-card.being-deleted {
  position: relative;
  pointer-events: none;
  animation: vortex-implode 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 50;
}

.thumbnail-card.being-deleted input,
.thumbnail-card.being-deleted .card-score,
.thumbnail-card.being-deleted .best-banner,
.thumbnail-card.being-deleted .card-filename {
  opacity: 0;
  transition: opacity 0.2s;
}

.thumbnail-card.being-deleted::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0%;
  height: 0%;
  background: black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px 5px rgba(139, 92, 246, 0.9), inset 0 0 10px #fff;
  z-index: 60;
  animation: singularity-expand 0.8s ease-out forwards;
}

@keyframes singularity-expand {
  0% {
    width: 0%;
    height: 0%;
    opacity: 0;
  }
  50% {
    opacity: 1;
    width: 40%;
    height: 40%;
  }
  100% {
    width: 0%;
    height: 0%;
    opacity: 0;
  }
}

/* --- MODAL & MISC --- */
.modal-img-anim {
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.modal-img-anim.show {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 50px rgba(139, 92, 246, 0.2);
}

.bg-scanline {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 51%
  );
  background-size: 100% 4px;
}

@keyframes shimmer {
  from {
    transform: skewX(-20deg) translateX(-150%);
  }
  to {
    transform: skewX(-20deg) translateX(150%);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite linear;
}

@keyframes holo-reveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: brightness(0) blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0);
  }
}

.thumbnail-card {
  animation: holo-reveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.thumbnail-card:nth-child(1) {
  animation-delay: 50ms;
}
.thumbnail-card:nth-child(2) {
  animation-delay: 100ms;
}
.thumbnail-card:nth-child(3) {
  animation-delay: 150ms;
}
.thumbnail-card:nth-child(4) {
  animation-delay: 200ms;
}
.thumbnail-card:nth-child(5) {
  animation-delay: 250ms;
}

@keyframes cinematic-float {
  0%,
  100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  }
  50% {
    transform: translateY(-25px) scale(1.02);
    filter: drop-shadow(0 25px 40px rgba(139, 92, 246, 0.3));
  }
}

.hero-floating {
  animation: cinematic-float 6s ease-in-out infinite;
}

@keyframes nebula-pan {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-bg-animated {
  background: radial-gradient(
    circle at center,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(124, 58, 237, 0.05) 30%,
    rgba(18, 18, 18, 0) 70%
  );
  background-size: 200% 200%;
  animation: nebula-pan 15s ease infinite, gentle-breath 8s ease-in-out infinite;
}

.spin-cinematic {
  animation: svg-spin 20s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.spin-cinematic-reverse {
  animation: svg-spin 25s linear infinite reverse;
  transform-origin: center;
  transform-box: fill-box;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}