/* MadhavAI interactive learning demos.
   Designed for smooth mobile + desktop rendering with SVG/CSS only. */

.mv-demo-card,
.mv-science-demo {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0 !important;
  border-radius: 28px;
  background: #ffffff !important;
  color: #0f172a;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .10) !important;
}

.mv-demo-card::after,
.mv-science-demo::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -90px;
  top: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.10), transparent 70%);
  pointer-events: none;
}

.mv-demo-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 12px;
}

.mv-demo-kicker {
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mv-demo-head h2 {
  margin-top: 4px;
  max-width: 24rem;
  color: #0f172a;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -.025em;
}

.mv-demo-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 750;
}

.mv-demo-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}

.mv-math-question {
  margin: 0 22px 10px;
  padding: 11px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.mv-math-canvas {
  position: relative;
  margin: 0 16px;
  overflow: hidden;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}

.mv-math-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

.mv-grid-line { stroke: #e8edf3; stroke-width: 1; }
.mv-axis-line { stroke: #64748b; stroke-width: 1.5; }
.mv-axis-text { fill: #64748b; font: 700 12px Inter, system-ui, sans-serif; }
.mv-math-source-fill { fill: rgba(37,99,235,.14); }
.mv-math-source-line { fill:none; stroke:#2563eb; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.mv-math-target-fill { fill: rgba(34,197,94,.13); }
.mv-math-target-line { fill:none; stroke:#22c55e; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.mv-math-point { fill:#2563eb; }
.mv-math-target-point { fill:#22c55e; }
.mv-math-mirror { stroke:#94a3b8; stroke-width:2; stroke-dasharray:7 8; opacity:.7; }
.mv-math-guide { stroke:#60a5fa; stroke-width:1.7; stroke-dasharray:5 6; opacity:0; }
.mv-math-label { fill:#334155; font:700 12px Inter,system-ui,sans-serif; }

.mv-math-target {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.mv-answer-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  padding: 14px 16px 10px;
}

.mv-answer {
  min-width: 0;
  padding: 11px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #475569;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 5px 14px rgba(15,23,42,.035);
}

.mv-answer--correct {
  position: relative;
}

.mv-answer--correct::after {
  content: "✓";
  position: absolute;
  right: 7px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.7);
}

.mv-demo-cursor {
  position: absolute;
  z-index: 8;
  width: 30px;
  height: 38px;
  left: 84%;
  top: -6px;
  background: #0f172a;
  clip-path: polygon(0 0, 0 92%, 28% 67%, 43% 100%, 57% 94%, 42% 63%, 78% 63%);
  filter: drop-shadow(0 4px 5px rgba(15,23,42,.28));
  opacity: 0;
}

.mv-demo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 18px 18px;
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
}

.mv-demo-progress {
  display:flex;
  gap:5px;
}
.mv-demo-progress span {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
}
.mv-demo-progress span:first-child { background:#60a5fa; }

/* Maths animation: observe -> choose -> reveal -> reset. */
@keyframes mvTargetReveal {
  0%,42% { opacity:0; transform:translateX(-28px) scaleX(.72); }
  55%,88% { opacity:1; transform:translateX(0) scaleX(1); }
  100% { opacity:0; transform:translateX(-12px) scaleX(.9); }
}
@keyframes mvGuideReveal {
  0%,40% { opacity:0; }
  50%,88% { opacity:.9; }
  100% { opacity:0; }
}
@keyframes mvCorrectChoice {
  0%,38% { border-color:#e2e8f0; background:#fff; color:#475569; transform:translateY(0); }
  47%,84% { border-color:#86efac; background:#f0fdf4; color:#166534; transform:translateY(-2px); box-shadow:0 9px 22px rgba(34,197,94,.12); }
  100% { border-color:#e2e8f0; background:#fff; color:#475569; transform:translateY(0); }
}
@keyframes mvCheckIn {
  0%,43% { opacity:0; transform:scale(.7); }
  50%,86% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(.7); }
}
@keyframes mvCursorMath {
  0%,20% { opacity:0; transform:translate(0,-4px) rotate(-8deg); }
  28% { opacity:1; }
  46%,62% { opacity:1; transform:translate(-112px,52px) rotate(-8deg); }
  68%,100% { opacity:0; transform:translate(-112px,52px) rotate(-8deg); }
}
@keyframes mvSourceBreathe {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-2px); }
}

.mv-math-source { animation: mvSourceBreathe 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.mv-math-target { animation: mvTargetReveal 7.2s cubic-bezier(.2,.75,.25,1) infinite; }
.mv-math-guide { animation: mvGuideReveal 7.2s ease-in-out infinite; }
.mv-answer--correct { animation: mvCorrectChoice 7.2s ease-in-out infinite; }
.mv-answer--correct::after { animation: mvCheckIn 7.2s ease-in-out infinite; }
.mv-demo-cursor { animation: mvCursorMath 7.2s cubic-bezier(.22,.7,.24,1) infinite; }

/* Science section */
#mv-science-visual {
  background: #f8fafc;
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
}

.mv-science-wrap {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(34px,5vw,74px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px,8vw,96px) 24px;
}

.mv-science-copy .mv-demo-kicker { display:inline-block; }
.mv-science-copy h2 {
  margin-top: 10px;
  color:#0f172a;
  font-size:clamp(32px,4.4vw,54px);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.045em;
}
.mv-science-copy p {
  margin-top:16px;
  max-width:34rem;
  color:#64748b;
  font-size:16px;
  line-height:1.7;
}
.mv-science-copy ul {
  display:grid;
  gap:9px;
  margin-top:20px;
  padding:0;
  list-style:none;
}
.mv-science-copy li {
  display:flex;
  gap:9px;
  align-items:center;
  color:#334155;
  font-size:13px;
  font-weight:650;
}
.mv-science-copy li::before {
  content:"✓";
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ecfeff;
  color:#0891b2;
  font-size:11px;
  font-weight:900;
}

.mv-science-stage {
  position:relative;
  margin:0 16px 12px;
  overflow:hidden;
  border:1px solid #edf2f7;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.mv-science-stage svg { display:block; width:100%; height:auto; }
.mv-vessel { fill:#f8fafc; stroke:#cbd5e1; stroke-width:2; }
.mv-liquid-base { fill:#dbeafe; opacity:.65; }
.mv-particle { fill:#2563eb; opacity:.9; transform-box:fill-box; transform-origin:center; }
.mv-heat-bar { fill:#e2e8f0; }
.mv-heat-fill { fill:url(#mvHeatGradient); transform-origin:left center; }
.mv-heat-knob { fill:#f59e0b; stroke:#fff; stroke-width:3; filter:drop-shadow(0 3px 4px rgba(245,158,11,.25)); }
.mv-science-state-label { fill:#475569; font:800 13px Inter,system-ui,sans-serif; }
.mv-science-state--liquid,.mv-science-state--gas { opacity:0; }

.mv-science-answer-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 16px 16px;
}
.mv-science-answer {
  padding:11px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  color:#475569;
  text-align:center;
  font-size:12px;
  font-weight:750;
}
.mv-science-answer--correct { position:relative; }
.mv-science-answer--correct::after {
  content:"✓";
  margin-left:6px;
  color:#16a34a;
  font-weight:900;
  opacity:0;
}

@keyframes mvHeatGrow {
  0%,18% { transform:scaleX(.15); }
  45% { transform:scaleX(.55); }
  72%,92% { transform:scaleX(1); }
  100% { transform:scaleX(.15); }
}
@keyframes mvHeatKnob {
  0%,18% { transform:translateX(0); }
  45% { transform:translateX(110px); }
  72%,92% { transform:translateX(220px); }
  100% { transform:translateX(0); }
}
@keyframes mvParticleSpread {
  0%,18% { transform:translate(0,0) scale(1); }
  42%,55% { transform:translate(var(--lx),var(--ly)) scale(1); }
  72%,92% { transform:translate(var(--gx),var(--gy)) scale(.92); }
  100% { transform:translate(0,0) scale(1); }
}
@keyframes mvLiquidLabel {
  0%,26% { opacity:0; }
  38%,58% { opacity:1; }
  68%,100% { opacity:0; }
}
@keyframes mvGasLabel {
  0%,60% { opacity:0; }
  72%,92% { opacity:1; }
  100% { opacity:0; }
}
@keyframes mvSolidLabel {
  0%,24% { opacity:1; }
  35%,94% { opacity:0; }
  100% { opacity:1; }
}
@keyframes mvScienceCorrect {
  0%,52% { border-color:#e2e8f0; background:#fff; color:#475569; transform:translateY(0); }
  62%,90% { border-color:#86efac; background:#f0fdf4; color:#166534; transform:translateY(-2px); }
  100% { border-color:#e2e8f0; background:#fff; color:#475569; transform:translateY(0); }
}
@keyframes mvScienceCheck {
  0%,58% { opacity:0; }
  66%,90% { opacity:1; }
  100% { opacity:0; }
}

.mv-heat-fill { animation:mvHeatGrow 8s ease-in-out infinite; }
.mv-heat-knob { animation:mvHeatKnob 8s ease-in-out infinite; }
.mv-particle { animation:mvParticleSpread 8s ease-in-out infinite; }
.mv-science-state--solid { animation:mvSolidLabel 8s linear infinite; }
.mv-science-state--liquid { animation:mvLiquidLabel 8s linear infinite; }
.mv-science-state--gas { animation:mvGasLabel 8s linear infinite; }
.mv-science-answer--correct { animation:mvScienceCorrect 8s ease-in-out infinite; }
.mv-science-answer--correct::after { animation:mvScienceCheck 8s linear infinite; }

@media (max-width:1023px) {
  .mv-science-wrap { grid-template-columns:1fr; max-width:760px; }
  .mv-science-copy { text-align:center; }
  .mv-science-copy p { margin-left:auto; margin-right:auto; }
  .mv-science-copy ul { max-width:420px; margin-left:auto; margin-right:auto; text-align:left; }
}

@media (max-width:639px) {
  .mv-demo-card,.mv-science-demo { border-radius:22px; box-shadow:0 14px 36px rgba(15,23,42,.08) !important; }
  .mv-demo-head { padding:16px 16px 10px; }
  .mv-demo-live { display:none; }
  .mv-math-question { margin:0 16px 9px; font-size:12px; }
  .mv-math-canvas,.mv-science-stage { margin-left:10px; margin-right:10px; border-radius:16px; }
  .mv-answer-row { padding:11px 10px 8px; gap:6px; }
  .mv-answer { font-size:10px; padding:10px 4px; }
  .mv-demo-cursor { display:none; }
  .mv-demo-footer { padding:2px 12px 14px; }
  .mv-science-wrap { padding:52px 16px; gap:26px; }
  .mv-science-copy h2 { font-size:34px; }
  .mv-science-answer-row { padding:0 10px 12px; }
}

@media (prefers-reduced-motion:reduce) {
  .mv-demo-card *, .mv-demo-card *::before, .mv-demo-card *::after,
  .mv-science-demo *, .mv-science-demo *::before, .mv-science-demo *::after {
    animation:none !important;
    transition:none !important;
  }
  .mv-math-target,.mv-math-guide,.mv-science-state--solid { opacity:1 !important; transform:none !important; }
  .mv-science-state--liquid,.mv-science-state--gas { opacity:0 !important; }
  .mv-heat-fill { transform:scaleX(.25) !important; }
}