/* ═══════════════════════════════════════════════
   GLOMERIDA PAGE STYLES — Northern Pill Millipedes
   Page-specific accent: teal / poison green
   ═══════════════════════════════════════════════ */

/* ─── PAGE-SPECIFIC VARIABLES ─── */
:root {
  --teal: #4ecdc4;
  --teal2: #2da89f;
  --teal3: rgba(78,205,196,0.15);
  --sage3: #2c4e38;
  --poison: #7dde92;
  --poison2: #3db855;
  --poison3: rgba(125,222,146,0.12);
  --amber: #e8a030;
  --muted2: #2a4035;
}

[data-theme="light"] {
  --teal: #1a8a82;
  --teal2: #15706a;
  --teal3: rgba(26,138,130,0.15);
  --sage3: #8ab89a;
  --poison: #2a8a3e;
  --poison2: #1e6e30;
  --poison3: rgba(42,138,62,0.12);
  --amber: #a07018;
  --muted2: #b0a898;
}

/* ─── SUBTLE SCANLINE TEXTURE ─── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.015) 0px,rgba(0,0,0,0.015) 1px,transparent 1px,transparent 3px);
}

/* ─── HERO BANNER ─── */
.hero-banner-bg {
  background: url('../images/banner.png') center/cover no-repeat;
}

/* ─── HERO ─── */
.hero{ padding: 7rem 2rem 5rem; }
.hero-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.hero-rings svg{width:min(900px,110vw);height:min(900px,110vw);animation:slowSpin 90s linear infinite;opacity:0.2;}
@keyframes slowSpin{to{transform:rotate(360deg);}}

/* HERO CHEMICAL PARTICLES */
.chem-particle{
  position:absolute;border-radius:50%;pointer-events:none;
  animation:chemFloat var(--dur,8s) var(--delay,0s) infinite linear;
  opacity:0;
}
@keyframes chemFloat{
  0%{opacity:0;transform:translate(0,0) scale(1);}
  10%{opacity:var(--max-op,0.6);}
  90%{opacity:var(--max-op,0.3);}
  100%{opacity:0;transform:translate(var(--tx,20px),var(--ty,-60px)) scale(0.3);}
}

.hero-eyebrow{color:var(--teal);opacity:0.85;}
.millipede-wrap{cursor:pointer;margin:0 auto 1.5rem;display:inline-flex;align-items:center;justify-content:center;user-select:none;position:relative;}
.hero h1 em{color:var(--teal);}
.hero-subtitle{color:var(--text2);font-size:0.9rem;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:3rem;font-family:'Jost',sans-serif;font-style:normal;}
.hero-stats{display:flex;gap:2.8rem;justify-content:center;flex-wrap:wrap;}
.hero-stat{text-align:center;}
.hero-stat-num{display:block;font-family:'Cormorant Garamond',serif;font-size:2.8rem;color:var(--gold);font-weight:300;line-height:1;margin-bottom:0.3rem;}
.hero-stat-label{font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);}
.scroll-hint{opacity:0.5;}
.scroll-line{height:40px;background:linear-gradient(to bottom,var(--teal),transparent);animation:scrollPulse 2.2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{opacity:0.3;transform:scaleY(0.8);}50%{opacity:1;transform:scaleY(1);}}

/* ─── DIVIDER ─── */
.divider{opacity:0.4;}
.divider.teal{background:linear-gradient(to right,transparent,var(--teal2),transparent);opacity:0.25;}

/* ─── SECTION OVERRIDES ─── */
.section-label{opacity:0.75;}
.section-title em{color:var(--teal);}
.section-title em.gold{color:var(--gold);}
.section-body{color:var(--text);font-size:1rem;line-height:1.8;margin-bottom:2.5rem;}
.section-body p+p{margin-top:0.9rem;}

/* ─── REVEAL DELAYS ─── */
.rd1{transition-delay:0.1s;}.rd2{transition-delay:0.2s;}.rd3{transition-delay:0.3s;}

/* ─── GRIDS ─── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;margin-top:3rem;}
@media(max-width:768px){.two-col{grid-template-columns:1fr;gap:2rem;}}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-top:3rem;}
@media(max-width:768px){.three-col{grid-template-columns:1fr;}}

/* ─── INFO CARDS ─── */
.info-card{border:1px solid var(--teal3);border-left:3px solid var(--clr,var(--teal));border-radius:5px;padding:1.4rem;background:rgba(255,255,255,0.015);transition:transform 0.3s;}
[data-theme="light"] .info-card{background:rgba(0,0,0,0.02);}
.info-card:hover{transform:translateX(4px);}
.ic-icon{font-size:1.4rem;margin-bottom:0.6rem;}
.ic-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--cream2);margin-bottom:0.4rem;font-weight:400;}
.ic-text{font-size:0.85rem;color:var(--text);line-height:1.7;}
.ic-tag{display:inline-block;margin-top:0.7rem;font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--clr,var(--teal));opacity:0.8;}

/* ─── FAMILY ACCORDION ─── */
.family-list{list-style:none;margin-top:0;}
.family-item{border:1px solid var(--teal3);border-radius:6px;margin-bottom:0.5rem;overflow:hidden;cursor:pointer;transition:border-color 0.3s;}
.family-item.open{border-color:var(--teal2);}
.family-header{display:flex;align-items:center;gap:0.8rem;padding:0.85rem 1rem;background:rgba(255,255,255,0.015);}
[data-theme="light"] .family-header{background:rgba(0,0,0,0.02);}
.family-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.family-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--cream2);font-style:italic;}
.family-region{margin-left:auto;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}
.family-chevron{color:var(--muted);font-size:0.9rem;transition:transform 0.3s;margin-left:0.5rem;}
.family-item.open .family-chevron{transform:rotate(90deg);}
.family-body{display:none;padding:1rem;font-size:0.85rem;color:var(--text);line-height:1.7;background:rgba(255,255,255,0.01);border-top:1px solid var(--teal3);}
[data-theme="light"] .family-body{background:rgba(0,0,0,0.01);}
.family-item.open .family-body{display:block;}

/* ─── CHEMICAL DEFENSE ─── */
#defense{background:linear-gradient(180deg,transparent 0%, rgba(78,205,196,0.03) 50%, transparent 100%);}
.defense-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center;margin-top:3rem;}
@media(max-width:768px){.defense-hero{grid-template-columns:1fr;}}

.ozopore-label{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;}
.ozopore-caption{font-size:0.8rem;text-align:center;margin-top:0.8rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;}
.ozopore-interactive{
  background:rgba(255,255,255,0.02);border:1px solid var(--teal3);
  border-radius:10px;padding:1.5rem;cursor:pointer;
  transition:border-color 0.4s;
}
[data-theme="light"] .ozopore-interactive{background:rgba(0,0,0,0.02);}
.ozopore-interactive:hover{border-color:var(--teal2);}
.ozopore-interactive.firing{border-color:var(--teal);box-shadow:0 0 30px rgba(78,205,196,0.08);}

.chem-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0;}
.chem-stat-card{background:rgba(255,255,255,0.015);border:1px solid var(--teal3);border-radius:6px;padding:1rem;text-align:center;}
[data-theme="light"] .chem-stat-card{background:rgba(0,0,0,0.02);}
.chem-stat-val{display:block;font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--teal);font-weight:300;line-height:1;margin-bottom:0.2rem;}
.chem-stat-lbl{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}

.alkaloid-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem;}
.alkaloid-card{
  background:rgba(255,255,255,0.02);border:1px solid var(--poison3);
  border-radius:8px;padding:1.4rem;
}
[data-theme="light"] .alkaloid-card{background:rgba(0,0,0,0.02);}
.alk-name{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--poison);margin-bottom:0.3rem;font-weight:400;font-style:italic;}
.alk-formula{font-size:0.75rem;letter-spacing:0.12em;color:var(--muted);font-family:'Jost',sans-serif;margin-bottom:0.8rem;font-weight:400;}
.alk-text{font-size:0.82rem;color:var(--text);line-height:1.65;}

/* PREDATOR EFFECT CARDS */
.predator-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem;margin-top:2rem;}
.pred-card{
  border:1px solid var(--teal3);border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,0.015);transition:transform 0.3s,border-color 0.3s;cursor:default;
}
[data-theme="light"] .pred-card{background:rgba(0,0,0,0.02);}
.pred-card:hover{transform:translateY(-3px);border-color:var(--teal2);}
.pred-card-top{padding:1.2rem 1.2rem 0.6rem;border-bottom:1px solid var(--teal3);}
.pred-icon{font-size:1.8rem;margin-bottom:0.5rem;}
.pred-title{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--cream2);font-weight:400;}
.pred-card-body{padding:0.9rem 1.2rem 1.2rem;}
.pred-effect{font-size:0.82rem;color:var(--text);line-height:1.65;}
.pred-severity{
  display:inline-block;margin-top:0.6rem;font-size:0.65rem;
  letter-spacing:0.2em;text-transform:uppercase;padding:0.18rem 0.6rem;
  border-radius:2px;
}
.sev-high{background:rgba(217,96,96,0.12);color:var(--red);}
.sev-med{background:rgba(201,149,43,0.12);color:var(--gold);}
.sev-low{background:var(--teal3);color:var(--teal);}

/* REPLENISHMENT METER */
.replen-wrap{
  margin-top:1.5rem;background:rgba(255,255,255,0.02);
  border:1px solid var(--poison3);border-radius:8px;padding:1.4rem;
}
[data-theme="light"] .replen-wrap{background:rgba(0,0,0,0.02);}
.replen-label{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.8rem;}
.replen-month{display:flex;align-items:center;gap:0.8rem;margin-bottom:0.6rem;}
.replen-dot-row{display:flex;gap:0.3rem;}
.replen-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--muted2);transition:background 0.4s,box-shadow 0.4s;
}
.replen-dot.filled{background:var(--poison);box-shadow:0 0 6px rgba(125,222,146,0.4);}
.replen-month-label{font-size:0.78rem;color:var(--text2);}

/* ─── MORPHOLOGY ─── */
.morph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;margin-top:2.5rem;}

/* LEG FORMULA */
.leg-formula-wrap{
  background:rgba(255,255,255,0.015);border:1px solid var(--teal3);
  border-radius:8px;padding:1.5rem;margin-top:2rem;
}
[data-theme="light"] .leg-formula-wrap{background:rgba(0,0,0,0.02);}
.leg-formula-title{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;}
.leg-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.leg-sex{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--cream2);width:60px;font-weight:400;}
.leg-dots{display:flex;flex-wrap:wrap;gap:3px;flex:1;}
.leg-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--sage3);border:1px solid var(--sage2);
}
.leg-dot.telopod{background:var(--teal2);border-color:var(--teal);box-shadow:0 0 4px rgba(78,205,196,0.4);}
.leg-count{font-size:0.82rem;color:var(--muted);white-space:nowrap;}

/* ─── VOLVATION ─── */
.vol-section{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-top:3rem;}
@media(max-width:768px){.vol-section{grid-template-columns:1fr;}}
.vol-steps{counter-reset:step;}
.vol-step{position:relative;padding:1rem 1rem 1rem 3rem;margin-bottom:0.8rem;border-radius:6px;border:1px solid var(--teal3);background:rgba(255,255,255,0.01);cursor:pointer;transition:all 0.3s;counter-increment:step;}
[data-theme="light"] .vol-step{background:rgba(0,0,0,0.02);}
.vol-step::before{content:counter(step,'0');position:absolute;left:0.9rem;top:50%;transform:translateY(-50%);font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--sage2);font-weight:300;}
.vol-step.active{border-color:var(--teal);background:rgba(78,205,196,0.04);}
.vol-step.active::before{color:var(--gold);}
.vol-step h4{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--cream2);margin-bottom:0.2rem;font-weight:400;}
.vol-step p{font-size:0.82rem;color:var(--text);line-height:1.6;}
.vs-note{font-size:0.82rem;color:var(--teal);font-style:italic;margin-top:0.4rem;}
.vol-visual{display:flex;flex-direction:column;align-items:center;gap:1.2rem;}
.vol-progress{display:flex;gap:0.5rem;}
.vol-pip{width:6px;height:6px;border-radius:50%;background:var(--muted2);transition:background 0.3s;}
.vol-pip.active{background:var(--teal);}
.vol-btn-row{display:flex;gap:0.8rem;}
.vol-btn{background:none;border:1px solid var(--teal3);color:var(--teal);font-family:'Jost',sans-serif;font-size:0.78rem;letter-spacing:0.15em;padding:0.5rem 1.1rem;cursor:pointer;border-radius:3px;transition:all 0.3s;}
.vol-btn:hover{background:rgba(78,205,196,0.07);border-color:var(--teal);}

/* ─── REPRODUCTION ─── */
.repro-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3rem;}
@media(max-width:768px){.repro-layout{grid-template-columns:1fr;}}
.section-body-inline{font-size:0.95rem;color:var(--text);line-height:1.8;margin-bottom:1.2rem;}
.pheromone-box{background:rgba(255,255,255,0.02);border:1px solid var(--teal3);border-radius:8px;padding:1.5rem;margin-top:1.5rem;}
[data-theme="light"] .pheromone-box{background:rgba(0,0,0,0.02);}
.pheromone-box h4{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--teal);margin-bottom:0.8rem;font-weight:400;}
.pheromone-box p{font-size:0.85rem;color:var(--text);line-height:1.7;margin-bottom:0.7rem;}
.repro-timeline{position:relative;padding-left:1.5rem;}
.repro-timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--teal2),transparent);}
.rt-step{position:relative;margin-bottom:1.8rem;padding-left:0.5rem;}
.rt-step::before{content:'';position:absolute;left:-1.56rem;top:0.42rem;width:7px;height:7px;border-radius:50%;background:var(--teal2);border:1px solid var(--teal);}
.rt-step h4{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--cream2);margin-bottom:0.25rem;font-weight:400;}
.rt-step p{font-size:0.85rem;color:var(--text);line-height:1.65;}

/* ─── ECOLOGY ─── */
.eco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem;margin-top:3rem;}
.eco-card{border:1px solid var(--teal3);border-radius:8px;overflow:hidden;background:rgba(255,255,255,0.015);transition:transform 0.3s;}
[data-theme="light"] .eco-card{background:rgba(0,0,0,0.02);}
.eco-card:hover{transform:translateY(-3px);}
.eco-card-inner{padding:1.8rem;}
.eco-card h3{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--cream2);margin-bottom:0.8rem;font-weight:400;display:flex;align-items:center;gap:0.5rem;}
.eco-card h3 span{font-size:1.3rem;}
.eco-card p{font-size:0.88rem;color:var(--text);line-height:1.75;}
.eco-stat-row{display:flex;gap:1.5rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--teal3);}
.eco-stat-item{text-align:center;}
.eco-stat-val{display:block;font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:var(--gold);font-weight:300;line-height:1;margin-bottom:0.2rem;}
.eco-stat-lbl{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}

/* HEMIANAMORPHOSIS STAGES */
.hemi-stages{display:flex;align-items:flex-end;gap:1.2rem;margin-top:1.5rem;flex-wrap:wrap;}
.hemi-stage{text-align:center;flex:1;min-width:80px;}
.hemi-svg-wrap{display:flex;justify-content:center;margin-bottom:0.5rem;}
.hemi-label{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}
.hemi-detail{font-size:0.72rem;color:var(--teal);margin-top:0.2rem;}
.hemi-arrow{font-size:1.2rem;color:var(--sage2);align-self:center;flex:0;}

/* ─── FOSSIL ─── */
.amber-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem;}
@media(max-width:768px){.amber-grid{grid-template-columns:1fr;}}
.amber-card{
  background:rgba(255,255,255,0.015);border:1px solid rgba(201,149,43,0.15);
  border-radius:10px;padding:2rem;
}
[data-theme="light"] .amber-card{background:rgba(0,0,0,0.02);}
.amber-card h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--gold);margin-bottom:0.3rem;font-weight:400;font-style:italic;}
.amber-age{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;}
.amber-card p{font-size:0.88rem;color:var(--text);line-height:1.75;margin-bottom:0.8rem;}

/* QUOTE */
.quote-block{border-left:2px solid var(--teal);padding:1rem 1.5rem;margin:2rem 0;background:rgba(78,205,196,0.03);border-radius:0 6px 6px 0;}
.quote-block p{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:var(--text2);line-height:1.7;}

/* ─── MAP SECTION ─── */
.map-section{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3rem;}
@media(max-width:768px){.map-section{grid-template-columns:1fr;}}
.world-map-wrap{position:sticky;top:6rem;}
.world-map-label{font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:0.8rem;text-align:center;}
#world-map{width:100%;aspect-ratio:2/1;border-radius:8px;border:1px solid var(--teal3);overflow:hidden;}
.map-legend{display:flex;flex-wrap:wrap;gap:0.6rem 1.2rem;margin-top:1rem;justify-content:center;}
.legend-item{display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:var(--muted);}
.legend-dot{width:8px;height:8px;border-radius:50%;}
.family-item.map-active{border-color:var(--teal);background:rgba(78,205,196,0.08);}

/* BADGE */
.badge{display:inline-block;font-size:0.65rem;letter-spacing:0.22em;text-transform:uppercase;padding:0.2rem 0.65rem;border-radius:2px;margin-bottom:1rem;}
.badge-teal{background:rgba(78,205,196,0.1);color:var(--teal);}

/* COMPARISON NOTE */
.compare-note{
  display:flex;gap:0.6rem;align-items:flex-start;
  background:rgba(255,255,255,0.02);border:1px solid var(--teal3);
  border-radius:6px;padding:1rem 1.2rem;margin-top:1.2rem;font-size:0.85rem;color:var(--text);line-height:1.65;
}
[data-theme="light"] .compare-note{background:rgba(0,0,0,0.02);}
.compare-note::before{content:'≠';color:var(--teal);font-family:'Cormorant Garamond',serif;font-size:1.3rem;flex-shrink:0;line-height:1;}