/* Homepage: maroon/white/charcoal theme + animations (append) */

/* Palette */
:root{
  --maroon: #560529;
  --maroon-2: #6f2436;
  --charcoal: #111318;
  --muted-gray: #6b7280;
  --white: #ffffff;
  --glass: rgba(255,255,255,0.06);
  --card-radius: 12px;
  --elev: 0 18px 50px rgba(17,21,26,0.08);
}

/* Hero gradient and image overlay */
.slider {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  height: 340px;
  border: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(135deg, rgba(86,5,41,0.95) 0%, rgba(17,17,23,0.45) 100%);
  box-shadow: var(--elev);
}
.slider img.slide { width:100%; height:100%; object-fit:cover; filter: saturate(.9) contrast(.95); mix-blend-mode: multiply; }
.slider::after {
  content: "";
  position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,8,10,0.12), rgba(255,255,255,0.02));
  pointer-events:none;
}
.slider-caption {
  position:absolute; left:20px; bottom:20px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--white);
  padding:10px 14px; border-radius:10px; font-weight:700;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
}

/* Hero intro */
.hero-intro {
  border-radius: 12px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(86,5,41,0.05), rgba(255,255,255,0.03));
  border: 1px solid rgba(86,5,41,0.06);
  margin-bottom: 12px;
}
.hero-intro h1 { color: var(--maroon); margin:0 0 6px 0; font-size:22px; }
.hero-intro p { color: var(--muted-gray); margin:0; }

/* Stat cards - gradient and animated counters */
.home-stats .panel-card {
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 18px;
  min-height: 120px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow: var(--elev);
  transition: transform .18s ease, box-shadow .18s ease;
  background: linear-gradient(135deg, rgba(86,5,41,0.92), rgba(111,36,60,0.86));
}
.home-stats .panel-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(17,21,26,0.18); }
.home-stats .panel-card.stat-2 { background: linear-gradient(135deg, #ff6b6b, #ff8a65); }
.home-stats .panel-card.stat-3 { background: linear-gradient(135deg, #343a40, #6c757d); }
.home-stats .stat-value { font-size:36px; font-weight:800; margin-top:6px; letter-spacing:0.6px; }

/* Quick links: colorful tiles */
.quick-link-card {
  border-radius: 12px;
  padding: 14px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(17,21,26,0.06);
  transition: transform .16s ease, box-shadow .16s ease;
}
.quick-link-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(17,21,26,0.12); }
.quick-link-card .title { font-weight:700; color:var(--maroon); }
.quick-link-card .desc { color:var(--muted-gray); font-size:13px; }

/* Search card polish */
.search-hero {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 8px 20px rgba(17,21,26,0.04);
}
#file-search-results .list-group-item { border-radius: 10px; margin-bottom:8px; }

/* Reveal and float animations */
.reveal { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.revealed { opacity:1; transform: translateY(0); }

@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}
.float-anim { animation: floaty 6s ease-in-out infinite; }

/* Subtle accent borders */
.accent-border { border-left: 6px solid var(--maroon); padding-left: 12px; }

/* Buttons */
.btn-primary {
  background: linear-gradient(90deg, var(--maroon), var(--maroon-2));
  border: none;
  box-shadow: 0 8px 24px rgba(86,5,41,0.12);
}
.btn-outline-primary {
  color: var(--maroon);
  border-color: rgba(86,5,41,0.14);
}

/* Footer adjustments to fit maroon/charcoal palette if homepage-only */
.home-footer { background: linear-gradient(180deg, #fff 0%, #f7f6f6 100%); border-top:1px solid rgba(0,0,0,0.04); }

/* Responsive tweaks */
@media (max-width:900px){
  .slider{height:220px}
  .hero{flex-direction:column}
  .hero-right{width:100%}
  .panel-grid{grid-template-columns:1fr}
}