/* ============== sem360 demo — styles.css ============== */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { height: 100%; margin: 0; padding: 0; }
body { font-family: 'Heebo', 'Inter', sans-serif; cursor: none; }

/* Hide native cursor when custom cursor is shown */
@media (max-width: 1024px) { body { cursor: auto; } #cursor { display: none; } }

/* ============ Intro grid ============ */
.intro-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* ============ Scene container ============ */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 100px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.scene.active { opacity: 1; pointer-events: auto; }
.scene-inner {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  max-height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.scene-bg-1 { background: linear-gradient(135deg, #F9FAFB 0%, #EEF7F4 100%); }
.scene-bg-2 { background: linear-gradient(135deg, #EEF7F4 0%, #F0F4FF 100%); }
.scene-bg-3 { background: linear-gradient(135deg, #FFF7ED 0%, #FEF2F2 100%); }
.scene-bg-4 { background: linear-gradient(135deg, #F0F9FF 0%, #EEF7F4 100%); }
.scene-bg-dark { background: radial-gradient(ellipse at top, #1F2937 0%, #0B1220 100%); color: white; }

/* ============ Floating decorative shapes ============ */
.float-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
}
.float-shape.s1 { width: 320px; height: 320px; background: #4FAB8B; top: -100px; left: -100px; }
.float-shape.s2 { width: 380px; height: 380px; background: #F08A24; bottom: -150px; right: -120px; opacity: 0.25; }
.float-shape.s3 { width: 240px; height: 240px; background: #8B5CF6; top: 30%; right: 10%; opacity: 0.18; }

/* ============ Card primitives ============ */
.card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,45,36,.04), 0 12px 32px -12px rgba(15,45,36,.12);
  border: 1px solid rgba(15,45,36,.06);
}
.card-lg {
  background: white;
  border-radius: 24px;
  box-shadow: 0 4px 8px rgba(15,45,36,.04), 0 24px 64px -16px rgba(15,45,36,.18);
  border: 1px solid rgba(15,45,36,.06);
}

/* ============ Animated gradient border ============ */
.gradient-border {
  position: relative;
  border-radius: 20px;
  background: white;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(135deg, #2A8E6E, #F08A24, #8B5CF6, #2A8E6E);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: gradientShift 6s ease infinite;
  z-index: -1;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============ Pulsing dot ============ */
.pulse-dot {
  position: relative;
  display: inline-flex;
  width: 10px; height: 10px;
}
.pulse-dot::before, .pulse-dot::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: #2A8E6E;
}
.pulse-dot::after {
  animation: pulseRing 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ============ Cursor states ============ */
#cursor.click #cursor-ring {
  opacity: 1;
  animation: cursorClick .5s ease-out;
}
@keyframes cursorClick {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
#cursor.hover #cursor-ring { opacity: 0.6; transform: scale(1.6); }

/* ============ Tooltip ============ */
.tip {
  position: absolute;
  background: rgba(11,18,32,.95);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.tip::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
}
.tip.bottom::after {
  top: -12px; left: 50%; transform: translateX(-50%);
  border-bottom-color: rgba(11,18,32,.95);
}

/* ============ Login mock ============ */
.login-card {
  background: white;
  border-radius: 24px;
  padding: 40px;
  width: 420px;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(15,45,36,.04), 0 24px 64px -16px rgba(15,45,36,.18);
}
.input-mock {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  background: #F9FAFB;
  font-size: 14px;
  color: #111827;
  transition: all .2s;
}
.input-mock:focus, .input-mock.focused {
  outline: none;
  border-color: #2A8E6E;
  background: white;
  box-shadow: 0 0 0 3px rgba(42,142,110,.12);
}

/* ============ Sidebar mock ============ */
.sidebar-mock {
  width: 240px;
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15,45,36,.04), 0 12px 32px -12px rgba(15,45,36,.12);
  height: 100%;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; font-size: 13px;
  color: #374151; cursor: pointer; transition: all .15s;
}
.sidebar-item:hover { background: #F3F4F6; }
.sidebar-item.active { background: #EEF7F4; color: #1F7259; font-weight: 600; }
.sidebar-item .badge {
  margin-right: auto;
  background: #1F7259; color: white;
  border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 700;
}

/* ============ Path option cards ============ */
.path-card {
  background: white; border-radius: 16px; padding: 20px;
  border: 2px solid #E5E7EB; cursor: pointer; transition: all .25s ease;
  text-align: right;
}
.path-card:hover { border-color: #2A8E6E; transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(42,142,110,.25); }
.path-card.selected { border-color: #2A8E6E; background: linear-gradient(135deg, #EEF7F4 0%, #FFFFFF 100%); box-shadow: 0 0 0 4px rgba(42,142,110,.12); }
.path-card .ttl { font-weight: 700; color: #0B1220; font-size: 15px; margin-bottom: 6px; }
.path-card .sub { color: #6B7280; font-size: 12.5px; line-height: 1.6; }

/* ============ Tool cards (LitStatus / LitMap / WorkReview) ============ */
.tool-card {
  background: white; border-radius: 20px; padding: 24px;
  border: 1px solid #E5E7EB;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: all .3s;
}
.tool-card.active {
  box-shadow: 0 0 0 2px #F08A24, 0 24px 64px -16px rgba(240,138,36,.3);
}
.tool-card .stage-num { font-size: 11px; font-weight: 700; color: #6B7280; }
.tool-card .tool-name { font-size: 22px; font-weight: 800; color: #1F7259; }
.tool-card .tool-name .lm { color: #2A8E6E; }
.tool-card .tool-name .ws { color: #F08A24; }
.tool-card .reuse { font-size: 12px; color: #6B7280; }
.tool-card .feature-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
  background: #F3F4F6; color: #374151;
}
.tool-card .feature-pill .ic { width: 16px; height: 16px; display: inline-block; border-radius: 4px; }
.tool-card .cta {
  margin-top: auto; padding: 11px; border-radius: 10px;
  background: #F08A24; color: white; font-weight: 700; font-size: 13px;
  text-align: center; cursor: pointer;
}
.tool-card.dim { opacity: 0.45; }

/* ============ LitStatus side nav ============ */
.litstatus-nav {
  position: sticky; top: 0;
  width: 200px; flex-shrink: 0;
  background: white; border-radius: 16px; padding: 14px;
  box-shadow: 0 1px 2px rgba(15,45,36,.04), 0 12px 32px -12px rgba(15,45,36,.12);
  border: 1px solid #E5E7EB;
}
.litstatus-nav-item {
  padding: 10px 12px; border-radius: 9px; font-size: 12.5px; color: #4B5563;
  font-weight: 500; cursor: pointer; transition: all .15s;
  border-right: 3px solid transparent;
}
.litstatus-nav-item:hover { background: #F9FAFB; }
.litstatus-nav-item.active { background: #EEF7F4; color: #1F7259; font-weight: 700; border-right-color: #2A8E6E; }

/* ============ Article summary card ============ */
.article-summary {
  background: white; border-radius: 14px; padding: 18px 20px;
  border: 1px solid #E5E7EB;
  position: relative;
}
.article-summary .num {
  position: absolute; right: -10px; top: -10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #2A8E6E; color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  box-shadow: 0 4px 10px rgba(42,142,110,.35);
}

/* ============ Glossary table ============ */
.gloss-row { display: grid; grid-template-columns: 160px 200px 1fr 90px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #F3F4F6; font-size: 13px; }
.gloss-row.header { background: #F9FAFB; font-weight: 700; color: #374151; font-size: 12px; }
.relevance-pill { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #EEF7F4; color: #1F7259; }

/* ============ Theory cards ============ */
.theory-card {
  background: white; border-radius: 14px; padding: 16px 18px;
  border: 1px solid #E5E7EB; position: relative;
}
.theory-card.direct { border-right: 4px solid #2A8E6E; }
.theory-card.indirect { border-right: 4px solid #F59E0B; }
.theory-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
}
.theory-tag.direct { background: #DCFCE7; color: #166534; }
.theory-tag.indirect { background: #FEF3C7; color: #92400E; }

/* ============ Bubble map container ============ */
.bubble-svg { width: 100%; height: 480px; max-height: 60vh; }
.bubble-svg circle { cursor: pointer; transition: all .2s; }
.bubble-svg circle:hover { stroke-width: 3; }
.bubble-svg text { pointer-events: none; font-family: 'Heebo'; font-weight: 600; fill: white; text-anchor: middle; }

/* ============ LitMap grid matrix ============ */
.litmap-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr 80px;
  gap: 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 12px;
  align-items: stretch;
}
.litmap-cell {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 14px 12px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.litmap-cell.empty { color: #9CA3AF; font-size: 12px; }
.litmap-cell .badge {
  width: 38px; height: 38px; border-radius: 50%;
  background: #2A8E6E; color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 10px rgba(42,142,110,.35);
  cursor: pointer;
}
.litmap-row .chap-title { font-weight: 700; color: #0B1220; font-size: 13px; padding: 14px 12px; line-height: 1.4; }
.litmap-row .chap-progress {
  background: white; border: 1px solid #E5E7EB; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px; font-size: 11px; gap: 4px;
}

/* ============ Score circle ============ */
.score-ring {
  position: relative;
  width: 110px; height: 110px;
  flex-shrink: 0;
}
.score-ring svg { transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; }
.score-ring .bg { stroke: #F3F4F6; }
.score-ring .fg { stroke: url(#scoreGrad); stroke-linecap: round; transition: stroke-dashoffset 1.2s ease-out; }
.score-ring .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; }
.score-ring .num { font-size: 28px; font-weight: 800; color: #0B1220; }
.score-ring .lbl { font-size: 10px; color: #6B7280; font-weight: 600; }

/* ============ Quality bar ============ */
.qbar { display: grid; grid-template-columns: 90px 1fr 60px; gap: 10px; align-items: center; padding: 6px 0; font-size: 12.5px; }
.qbar-track { height: 8px; border-radius: 4px; background: #F3F4F6; overflow: hidden; }
.qbar-fill { height: 100%; border-radius: 4px; transition: width 1s ease-out; }
.qbar-fill.good { background: linear-gradient(90deg, #22C55E, #16A34A); }
.qbar-fill.mid  { background: linear-gradient(90deg, #F59E0B, #F08A24); }
.qbar-fill.bad  { background: linear-gradient(90deg, #EF4444, #DC2626); }
.qbar-status { font-size: 11px; padding: 3px 8px; border-radius: 999px; text-align: center; font-weight: 700; }
.qbar-status.good { background: #DCFCE7; color: #166534; }
.qbar-status.mid  { background: #FEF3C7; color: #92400E; }
.qbar-status.bad  { background: #FEE2E2; color: #991B1B; }

/* ============ Highlighted text (for advisor) ============ */
.text-block { line-height: 1.9; font-size: 14px; color: #1F2937; }
.text-block .highlightable { padding: 1px 2px; border-radius: 3px; transition: all .2s; cursor: text; }
.text-block .highlightable.selected {
  background: rgba(240,138,36,.18);
  outline: 2px dashed #F08A24;
  outline-offset: 2px;
}

/* ============ Advisor popup ============ */
.advisor-popup {
  background: white; border-radius: 14px; padding: 16px;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,.25);
  border: 2px solid #2A8E6E;
  width: 360px;
}
.advisor-popup .quote {
  background: #FEF3C7; padding: 10px 12px; border-radius: 8px;
  font-size: 12.5px; color: #92400E; margin-bottom: 10px;
  border-right: 3px solid #F59E0B;
}

/* ============ Citation issue cards ============ */
.cite-issue {
  background: white; border-radius: 12px; padding: 14px 16px;
  border: 1px solid #E5E7EB; border-right: 4px solid;
  margin-bottom: 10px;
}
.cite-issue.critical { border-right-color: #EF4444; }
.cite-issue.warning  { border-right-color: #F59E0B; }
.cite-issue.minor    { border-right-color: #3B82F6; }
.cite-issue .tag { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.cite-issue.critical .tag { background: #FEE2E2; color: #991B1B; }
.cite-issue.warning  .tag { background: #FEF3C7; color: #92400E; }
.cite-issue.minor    .tag { background: #DBEAFE; color: #1E40AF; }
.cite-issue .fix {
  margin-top: 8px; padding: 8px 10px; background: #F0FDF4; border-radius: 6px;
  font-size: 12px; color: #166534;
}

/* ============ Stat tile ============ */
.stat-tile {
  background: white; border-radius: 14px; padding: 14px 18px;
  border: 1px solid #E5E7EB; text-align: center;
}
.stat-tile .v { font-size: 28px; font-weight: 800; line-height: 1; }
.stat-tile .l { font-size: 11px; color: #6B7280; margin-top: 4px; font-weight: 500; }

/* ============ Reveal helper ============ */
.reveal { opacity: 0; transform: translateY(12px); }

/* ============ Marquee/scroll fade ============ */
.fade-mask { mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%); }

/* ============ Confetti / sparkles ============ */
.sparkle { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; }

/* ============ Mobile adjustments ============ */
@media (max-width: 768px) {
  .scene { padding: 70px 14px 90px; }
  .scene-inner { gap: 14px; }
  .login-card { padding: 28px; }
  .litmap-row { grid-template-columns: 1fr; }
  .gloss-row { grid-template-columns: 1fr 1fr; font-size: 12px; }
}