/* static/css/fancy.css */
/* ===== Balanced academic + modern UI (light) + scroll reveal + premium cards ===== */

/* ---------- Color system ---------- */
:root{
  /* Core palette (balanced) */
  --primary: #4F46E5;   /* indigo */
  --secondary: #0EA5A4; /* teal */
  --accent: #EC4899;    /* rose (small touches) */

  /* Neutrals */
  --text: #111827;
  --muted: #4B5563;
  --muted-light: #6B7280;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --card: rgba(255,255,255,.85);

  /* Lines & depth */
  --border: rgba(17,24,39,.10);
  --border-strong: rgba(79,70,229,.20);

  --shadow-sm: 0 8px 20px rgba(17,24,39,.06);
  --shadow-md: 0 18px 45px rgba(17,24,39,.10);

  --radius: 18px;
}

*{ box-sizing: border-box; }
html { scroll-behavior: smooth; }

body{
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% 0%,
      rgba(79,70,229,.08), transparent 55%),
    radial-gradient(800px 500px at 90% 0%,
      rgba(14,165,164,.06), transparent 55%),
    radial-gradient(900px 520px at 50% 100%,
      rgba(236,72,153,.05), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-soft));
}

/* ---------- Typography polish ---------- */
.title{
  letter-spacing: -0.02em;
}
.title.is-3{
  color: var(--primary);
}
.title.is-4{
  color: #1F2937;
}
.subtitle{
  color: var(--muted);
}
.content p,
.content li{
  color: var(--muted);
}

/* ---------- Links ---------- */
a{
  color: var(--primary);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(79,70,229,.35);
  text-underline-offset: 3px;
  transition: color .16s ease, text-decoration-color .16s ease, transform .16s ease;
}
a:hover{
  color: var(--secondary);
  text-decoration-color: rgba(14,165,164,.5);
}

/* ---------- Navbar ---------- */
.navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar-item,
.navbar-link{
  color: var(--text);
}
.navbar-item:hover,
.navbar-link:hover{
  color: var(--primary);
  background: transparent !important;
}
.navbar-dropdown{
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* ---------- Sections spacing ---------- */
.section{
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

/* ---------- Hero ---------- */
.hero{
  background: transparent;
}
.hero .publication-title{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .subtitle{
  color: var(--muted-light);
}

/* ---------- Images ---------- */
img{
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-sm);
}

/* ---------- Bulma cards/boxes polish ---------- */
.card, .box{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--card);
}
.card:hover, .box:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* =========================================================
   Premium project cards
   ========================================================= */
.project-card-link{
  display: block;
  height: 100%;
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit;
}

.project-card-link .card{
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* soft accent glow layer */
.project-card-link .card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius) + 2px);
  background:
    radial-gradient(600px 200px at 15% 0%,
      rgba(79,70,229,.18), transparent 55%),
    radial-gradient(600px 200px at 85% 0%,
      rgba(14,165,164,.14), transparent 55%),
    radial-gradient(700px 260px at 50% 120%,
      rgba(236,72,153,.08), transparent 60%);
  opacity: 0;
  transition: opacity .20s ease;
  pointer-events:none;
}

.project-card-link .card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .20s ease;
  pointer-events:none;
}

.project-card-link:hover .card{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79,70,229,.35);
}
.project-card-link:hover .card::before{ opacity: 1; }
.project-card-link:hover .card::after{ opacity: .25; }

/* Thumbnail polish */
.project-card-link .card-image img{
  filter: saturate(1.02) contrast(1.02);
  transition: transform .22s ease, filter .22s ease;
}
.project-card-link:hover .card-image img{
  transform: translateY(-2px) scale(1.02);
  filter: saturate(1.06) contrast(1.04);
}

/* Title + subtitle feel tighter */
.project-card-link .card-content .title{
  margin-bottom: .35rem !important;
  letter-spacing: -.01em;
}
.project-card-link .card-content .subtitle{
  margin-top: 0 !important;
  color: rgba(17,24,39,.68);
}

/* Clickable hint icon */
.project-card-link .card-content{
  position: relative;
}
.project-card-link .card-content::after{
  content:"↗";
  position:absolute;
  top: 18px;
  right: 18px;
  font-size: 16px;
  opacity: .32;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.project-card-link:hover .card-content::after{
  opacity: .58;
  transform: translateY(-2px);
}

/* =========================================================
   Scroll reveal animations
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.reveal.fade-in{ transform: none; }
.reveal.slide-up{ transform: translateY(18px); }
.reveal.slide-left{ transform: translateX(18px); }
.reveal.slide-right{ transform: translateX(-18px); }
.reveal.zoom-in{ transform: scale(.985); }

.reveal.is-visible.fade-in{ transform: none; }
.reveal.is-visible.slide-up{ transform: translateY(0); }
.reveal.is-visible.slide-left{ transform: translateX(0); }
.reveal.is-visible.slide-right{ transform: translateX(0); }
.reveal.is-visible.zoom-in{ transform: scale(1); }

/* Stagger support */
.reveal{ transition-delay: var(--d, 0ms); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* .bg-ambient {
  background:
    radial-gradient(800px 400px at 15% 10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(800px 400px at 85% 15%, rgba(167,139,250,.15), transparent 60%),
    linear-gradient(
      to bottom,
      #ffffff,
      #faf7ff
    );
} */


/* ===============================
   Purple Ambient Background
   =============================== */

.bg-ambient {
  background:
    radial-gradient(1200px 600px at 20% 12%, rgba(139,92,246,.35), transparent 55%),
    radial-gradient(900px 500px at 85% 18%, rgba(167,139,250,.28), transparent 52%),
    radial-gradient(1000px 700px at 50% 85%, rgba(196,181,253,.25), transparent 60%),
    linear-gradient(
      to bottom,
      #ffffff,
      #faf5ff
    );
  min-height: 100vh;
}