/* ===== RESET & BASE ===== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito',sans-serif;
  background:#f0f7ee;
  color:#2d3a1e;
  overflow-x:hidden;
}

/* ===== VARIABLES ===== */
:root{
  --green-dark:#1f6b2e;
  --green:#2e8b4a;
  --green-light:#4caf50;
  --green-pale:#d4edda;
  --brown:#7b4f2e;
  --brown-light:#c8956c;
  --yellow:#f4c430;
  --yellow-light:#fff3cd;
  --sky:#87ceeb;
  --sky-dark:#3a8fc8;
  --orange:#e07b39;
  --purple:#6a5acd;
  --red-dark:#8b1a1a;
  --white:#ffffff;
  --shadow:0 8px 32px rgba(30,80,20,0.13);
  --radius:18px;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: 80px 20px;
  background:linear-gradient(160deg,#1a4d2e 0%,#2e6e44 40%,#3a8c5c 70%,#5aad7a 100%);
}
.hero-bg{
  position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");
  animation:bgMove 20s linear infinite;
}
@keyframes bgMove{from{background-position:0 0;}to{background-position:60px 60px;}}
.hero-content{position:relative;z-index:2;padding:40px 24px;}
.hero-badge{
  display:inline-block;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
  padding:8px 20px;
  border-radius:50px;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.05em;
  margin-bottom:22px;
  backdrop-filter:blur(6px);
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.8rem);
  color:#fff;
  line-height:1.15;
  margin-bottom:16px;
  text-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.hero h1 .accent{color:#f4c430;}
.hero-sub{
  color:rgba(255,255,255,0.88);
  font-size:clamp(1rem,2vw,1.2rem);
  max-width:640px;
  margin:0 auto 36px;
  line-height:1.7;
}
.hero-stats{
  display:flex;gap:32px;justify-content:center;flex-wrap:wrap;
}
.stat{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:14px;
  padding:14px 28px;
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;
  transition:transform .3s;
}
.stat:hover{transform:translateY(-4px);}
.stat-n{font-size:2rem;font-weight:900;color:#f4c430;}
.stat-l{font-size:.85rem;color:rgba(255,255,255,.8);font-weight:600;}
.scroll-hint{
  position:absolute;bottom:30px;
  color:rgba(255,255,255,.65);
  font-size:.95rem;letter-spacing:.08em;
  animation:bounce 2s infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

/* ===== SECTIONS ===== */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.container.wide{max-width:1400px;margin:0 auto;padding:0 16px;}
.section-title{
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--green-dark);
  margin-bottom:10px;
}
.section-title.light{color:#fff;}
.section-sub{text-align:center;color:#5a7a4a;margin-bottom:24px;font-size:1rem;}

/* INTRO */
.intro-section{padding:60px 0;}
.intro-card{
  background:#fff;
  border-radius:24px;
  padding:clamp(24px, 5vw, 40px);
  box-shadow:var(--shadow);
  border-left:6px solid var(--green);
  font-size:clamp(0.95rem, 2vw, 1.05rem);
  line-height:1.8;
}
.intro-card h2{color:var(--green-dark);margin-bottom:16px;font-size:clamp(1.3rem, 4vw, 1.8rem);font-family:'Playfair Display',serif;}
.intro-card p+p{margin-top:14px;}

/* LEGEND */
.legend-section{padding:20px 0 40px;}
.legend-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-top:15px;
}
.legend-item{
  display:flex;align-items:center;gap:10px;
  background:#fff;
  border-radius:50px;
  padding:10px 18px;
  font-weight:700;
  font-size:.85rem;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.legend-dot{width:14px;height:14px;border-radius:50%;display:inline-block;}
.legend-item.producer .legend-dot{background:#2e8b4a;}
.legend-item.producer{color:#2e8b4a;}
.legend-item.primary .legend-dot{background:#e07b39;}
.legend-item.primary{color:#c05a20;}
.legend-item.secondary .legend-dot{background:#3a8fc8;}
.legend-item.secondary{color:#2070a8;}
.legend-item.higher .legend-dot{background:#6a5acd;}
.legend-item.higher{color:#4a3aad;}
.legend-item.decomposer .legend-dot{background:#7b4f2e;}
.legend-item.decomposer{color:#5a3010;}

/* ===== FOOD WEB ===== */
.foodweb-section{padding:40px 0 60px;background:linear-gradient(180deg,#f0f7ee 0%,#e8f5e0 100%);}
.svg-wrapper{
  background:#fff;
  border-radius:24px;
  box-shadow:var(--shadow);
  overflow-x:auto;
  overflow-y:visible;
  padding:20px 16px 28px;
  margin-top:16px;
}
#foodwebSVG{
  width:100%;
  min-width:900px;
  height:auto;
  display:block;
}

/* ARROWS */
.arrow{
  stroke:rgba(60,140,70,0.55);
  stroke-width:2;
  fill:none;
  stroke-dasharray:6 3;
  animation:dashMove 3s linear infinite;
}
.arrow-dec{
  stroke:rgba(139,90,43,0.55);
  stroke-width:2;
  fill:none;
  stroke-dasharray:5 4;
  animation:dashMove 4s linear infinite reverse;
}
@keyframes dashMove{to{stroke-dashoffset:-40;}}

/* NODES — Fixed trembling by scaling internal elements instead of the whole group */
.node{
  cursor:pointer;
  pointer-events: all;
}

.node .node-circle, 
.node .node-emoji {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  transform-box: fill-box;
  transform-origin: center;
}

.node:hover .node-circle,
.node:hover .node-emoji {
  transform: scale(1.15);
}

.node:hover .node-circle {
  filter: url(#glow);
}

.node-circle {
  stroke-width: 3.5;
  transition: fill .2s, stroke .2s;
}

.prod-c{fill:#d4f5d8;stroke:#2e8b4a;}
.prim-c{fill:#fde8d2;stroke:#e07b39;}
.sec-c{fill:#d2eaf8;stroke:#3a8fc8;}
.high-c{fill:#e6e0f8;stroke:#6a5acd;}
.dec-c{fill:#f0e0c8;stroke:#7b4f2e;}

.node-emoji{
  text-anchor:middle;
  dominant-baseline:central;
  pointer-events: none;
}

.node-label{
  text-anchor:middle;
  font-family:'Nunito',sans-serif;
  font-size: 15px; /* Bigger name */
  font-weight: 800;
  fill:#1a2a10;
  pointer-events:none;
  transition: transform .3s ease;
}

.node:hover .node-label {
  transform: translateY(4px); /* Slight nudge when hovering */
}

/* Active state on node circle only — not the group transform */
.producer-node.active .node-circle{stroke:#1f6b2e;fill:#a8e6ae;stroke-width:5;}
.primary-node.active .node-circle{stroke:#c05a20;fill:#f8c8a0;stroke-width:5;}
.secondary-node.active .node-circle{stroke:#2070a8;fill:#a0d0f0;stroke-width:5;}
.higher-node.active .node-circle{stroke:#4a3aad;fill:#c8c0f0;stroke-width:5;}
.decomposer-node.active .node-circle{stroke:#5a3010;fill:#d8b898;stroke-width:5;}

/* NARRATION BAR */
.narration-bar{
  background:#fff;
  border-radius:50px;
  padding:10px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:0 4px 18px rgba(30,80,20,.1);
  border:1px solid var(--green-pale);
  margin-bottom:16px;
  flex-wrap:wrap;
}
.narration-info{display:flex;align-items:center;gap:10px;flex:1;}
.narration-icon{font-size:1.4rem;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
#narrationLabel{font-weight:700;color:var(--green-dark);font-size:.95rem;}
.narration-controls{display:flex;gap:8px;}
.ctrl-btn{
  background:var(--green-pale);
  border:none;
  border-radius:8px;
  padding:8px 14px;
  font-size:1.1rem;
  cursor:pointer;
  transition:background .2s,transform .15s;
}
.ctrl-btn:hover:not(:disabled){background:#b8dfc8;transform:scale(1.1);}
.ctrl-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ===== OVERLAY ===== */
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.50);
  z-index:200;
  backdrop-filter:blur(4px);
  transition:opacity .3s;
}
.overlay.hidden{opacity:0;pointer-events:none;}

/* ===== INFO PANEL (Modal) ===== */
.info-panel{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.92);
  background:#fff;
  border-radius:24px;
  width:min(600px, 94vw);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  z-index:300;
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  overflow:hidden;
}
.info-panel.hidden{transform:translate(-50%,-50%) scale(.88);opacity:0;pointer-events:none;}
.info-panel:not(.hidden){transform:translate(-50%,-50%) scale(1);opacity:1;}

/* --- Modal Header --- */
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:20px 24px 18px;
  border-bottom:1px solid #e8f5e0;
  background:linear-gradient(135deg,#f6fff8 0%,#edf9f0 100%);
  flex-shrink:0;
}
.modal-header-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.info-emoji{
  font-size:3rem;
  line-height:1;
  flex-shrink:0;
}
.modal-title-group{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.info-badge{
  display:inline-flex;
  align-self:flex-start;
  border-radius:50px;
  padding:3px 14px;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.info-panel h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.2rem, 4vw, 1.55rem);
  color:var(--green-dark);
  margin:0;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.close-btn{
  flex-shrink:0;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.06);
  border:none;
  border-radius:50%;
  font-size:1rem;
  cursor:pointer;
  color:#666;
  transition:background .2s, color .2s, transform .2s;
}
.close-btn:hover{background:rgba(200,0,0,.12);color:#c00;transform:scale(1.1);}

/* --- Modal Body (scrollable) --- */
.modal-body{
  flex:1;
  overflow-y:auto;
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Detail cards grid */
.info-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.detail-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#f7fdf8;
  border:1px solid #d9f0df;
  border-radius:12px;
  padding:12px 14px;
  transition:background .2s;
}
.detail-card:hover{background:#edf8f1;}
.detail-card--wide{
  grid-column:1 / -1;
}
.detail-icon{
  font-size:1.25rem;
  flex-shrink:0;
  margin-top:1px;
}
.detail-content{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.detail-label{
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--green);
}
.detail-value{
  font-size:.88rem;
  color:#3a4a2a;
  line-height:1.55;
  word-break:break-word;
}

/* Narration block */
.narration-block{
  background:#f8fdf5;
  border:1px solid #d4edda;
  border-radius:14px;
  overflow:hidden;
}
.narration-block-title{
  padding:9px 16px;
  background:linear-gradient(90deg,#e8f5e0,#f3fbf0);
  border-bottom:1px solid #d4edda;
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--green-dark);
}
.info-narration-text{
  padding:14px 16px;
  font-size:.9rem;
  line-height:1.75;
  color:#3a4a2a;
  margin:0;
}

/* --- Modal Footer (sticky) --- */
.modal-footer{
  padding:14px 24px;
  border-top:1px solid #e8f5e0;
  background:#fafffe;
  flex-shrink:0;
}
.speak-btn{
  width:100%;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  border:none;
  border-radius:12px;
  padding:13px 20px;
  font-size:1rem;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.speak-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(46,139,74,.4);}

/* Badge colors */
.badge-producer{background:#d4f5d8;color:#1f6b2e;}
.badge-primary{background:#fde8d2;color:#c05a20;}
.badge-secondary{background:#d2eaf8;color:#2070a8;}
.badge-higher{background:#e6e0f8;color:#4a3aad;}
.badge-decomposer{background:#f0e0c8;color:#5a3010;}

/* Responsive — mobile full-screen */
@media(max-width:600px){
  .info-panel{
    width:100vw;
    max-height:100dvh;
    border-radius:0;
    top:0;left:0;
    transform:none !important;
  }
  .info-panel.hidden{transform:translateY(100%) !important;opacity:1;}
  .info-panel:not(.hidden){transform:translateY(0) !important;opacity:1;}
  .info-details-grid{
    grid-template-columns:1fr;
  }
  .detail-card--wide{
    grid-column:auto;
  }
  .modal-header{padding:16px 18px 14px;}
  .modal-body{padding:16px 18px;}
  .modal-footer{padding:12px 18px;}
}

/* ===== SUMMARY ===== */
.summary-section{
  padding:70px 0 60px;
  background:linear-gradient(160deg,#1a4d2e 0%,#2e6e44 60%,#3a8c5c 100%);
}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  margin-top:36px;
}
.sum-card{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:28px 24px;
  backdrop-filter:blur(8px);
  transition:transform .3s,background .3s;
}
.sum-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.18);}
.sum-icon{font-size:2.4rem;margin-bottom:12px;}
.sum-card h3{color:#f4c430;font-size:1.1rem;margin-bottom:10px;}
.sum-card p{color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.7;}
.conclusion{
  margin-top:40px;
  background:rgba(244,196,48,.12);
  border:1px solid rgba(244,196,48,.35);
  border-radius:16px;
  padding:24px 28px;
  text-align:center;
  color:rgba(255,255,255,.9);
  font-size:1.05rem;
  line-height:1.8;
  font-style:italic;
}

/* ===== FOOTER ===== */
footer {
  padding: 40px 20px;
  background: #102e1b;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 5px;
}
.footer-class {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: #f4c430;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}
.developers {
  font-size: 0.95rem;
  line-height: 1.6;
}
.developers strong {
  color: #fff;
}
.developers p {
  margin-top: 5px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#f0f7ee;}
::-webkit-scrollbar-thumb{background:#4caf50;border-radius:4px;}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hero-content h1 { font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.2; }
  .hero-stats { gap: 15px; }
  .stat { min-width: 80px; }
  .section-title { font-size: 1.8rem; }
  .svg-wrapper { margin-left: -16px; margin-right: -16px; border-radius: 0; }
}

@media(max-width:600px){
  .hero { padding: 60px 15px; }
  .hero-badge { font-size: 0.75rem; }
  .hero-stats { flex-wrap: wrap; justify-content: center; }
  .intro-card { margin-top: -30px; border-radius: 16px; }
  .conclusion { font-size: 0.95rem; padding: 20px; }
}