/* ==========================================================================
   theme-modern.css — sleek refinement layer for theblackbox
   Loaded AFTER style.css; purely additive so it can be removed to revert.
   Original styling (not copied from any other site).
   ========================================================================== */

:root {
  --tm-line: rgba(255, 255, 255, 0.08);
  --tm-line-soft: rgba(255, 255, 255, 0.05);
  --tm-glass: rgba(255, 255, 255, 0.05);
  --tm-glass-hover: rgba(255, 255, 255, 0.09);
  --tm-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---- Global feel: crisper text rendering ---- */
body.app-shell {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Top nav: slim, glassy, floating ---- */
.topbar {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  background: linear-gradient(180deg, rgba(5, 8, 22, 0.82) 0%, rgba(5, 8, 22, 0.45) 70%, rgba(5, 8, 22, 0) 100%);
  border-bottom: 1px solid var(--tm-line-soft);
  box-shadow: none;
}

/* nav links — quieter pills that brighten on hover/active */
.topbar a.btn,
.topbar button.btn,
.topbar .btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 600;
}
.topbar a.btn:hover,
.topbar button.btn:hover,
.topbar .btn--ghost:hover {
  background: var(--tm-glass);
  border-color: var(--tm-line);
  color: var(--ink);
  transform: none;
}

/* ---- Buttons: pill-shaped, flatter, smoother ---- */
.btn {
  border-radius: 999px;
  padding: 0.62rem 1.25rem;
  letter-spacing: 0.01em;
  border: 1px solid var(--tm-line);
  background: var(--tm-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
  transition: transform 0.18s var(--tm-ease), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  background: var(--tm-glass-hover);
  border-color: var(--tm-line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}
.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: rgba(3, 25, 18, 0.95);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.30);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  filter: brightness(1.04);
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.42);
}
.btn--ghost {
  background: var(--tm-glass);
}

/* ---- Search: sleek rounded field with focus glow ---- */
.search-bar input[type="search"] {
  border-radius: 999px;
  background: var(--tm-glass);
  border: 1px solid var(--tm-line);
  padding: 0.72rem 1.05rem 0.72rem 2.7rem;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-bar input[type="search"]::placeholder {
  color: var(--muted);
}
.search-bar input[type="search"]:focus {
  background: var(--tm-glass-hover);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}

/* ---- Cards: smooth lift + zoom, subtle ring on hover ---- */
.card {
  border-radius: 16px;
  border: 1px solid var(--tm-line-soft);
  overflow: hidden;
  transition: transform 0.28s var(--tm-ease), box-shadow 0.28s ease, border-color 0.28s ease;
}
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
  border-color: rgba(var(--accent-rgb), 0.32);
}
.card img {
  transition: transform 0.4s var(--tm-ease);
}
.card:hover img {
  transform: scale(1.05);
}

/* ---- Section headers: tighter, with accent tick ---- */
.carousel__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 14px;
}
.carousel__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}
.carousel__arrow {
  border-radius: 999px;
  background: var(--tm-glass);
  border: 1px solid var(--tm-line);
  transition: background 0.2s ease, transform 0.2s var(--tm-ease);
}
.carousel__arrow:hover {
  background: var(--tm-glass-hover);
  transform: scale(1.06);
}