/* namu.systems - Design Language CSS */
/* Palette: #1a0e04, #2d1b0e, #3d2a16, #4a3622, #3d2f1e, #e8d5b8, #8B6914, #C47A2B, #6B8F5E, #D4A84B */
/* Fonts: Commissioner 300/700, Nunito Sans 400/600, IBM Plex Mono 300 */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --deep-bark:#1a0e04;
  --dark-wood:#2d1b0e;
  --mid-wood:#3d2a16;
  --wood-brown:#3d2f1e;
  --trunk-brown:#4a3622;
  --gold-sap:#8B6914;
  --amber:#D4A84B;
  --copper:#C47A2B;
  --lichen:#6B8F5E;
  --parchment:#e8d5b8;
  --font-display:'Commissioner',sans-serif;
  --font-body:'Nunito Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --spring:cubic-bezier(0.22,1,0.36,1);
}

html{scroll-behavior:smooth;overflow-x:hidden}

body{
  background:var(--dark-wood);
  color:var(--parchment);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
  background-image:
    repeating-linear-gradient(3deg,rgba(45,27,14,0.4) 0px,transparent 1px,transparent 40px),
    repeating-linear-gradient(7deg,rgba(61,42,22,0.3) 0px,transparent 1px,transparent 60px),
    repeating-linear-gradient(175deg,rgba(26,14,4,0.35) 0px,transparent 1px,transparent 30px);
  filter:url(#wood-grain-filter);
}

/* === SPORE CANVAS === */
#spore-canvas{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:100;
}

/* === BRANCH LINES SVG === */
.branch-lines-svg{
  position:absolute;
  top:0;left:0;
  width:100%;
  pointer-events:none;
  z-index:1;
}

.branch-path{
  fill:none;
  stroke:var(--gold-sap);
  stroke-opacity:0.6;
  stroke-width:1.5;
}

/* === SEED SCROLL INDICATOR === */
.seed-indicator{
  position:fixed;
  top:24px;right:24px;
  width:40px;height:40px;
  z-index:200;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.8s ease;
}

.seed-indicator.visible{opacity:1}

.seed-indicator-svg{width:40px;height:40px}

.seed-dot{
  fill:var(--amber);
  transition:r 0.6s var(--spring);
}

.seed-leaf{
  opacity:0;
  transition:opacity 0.8s ease;
}

.seed-indicator.blooming .seed-dot{r:2}
.seed-indicator.blooming .seed-leaf{opacity:1}
.seed-indicator.blooming .seed-vein,
.seed-indicator.blooming .seed-vein-l,
.seed-indicator.blooming .seed-vein-r{opacity:0.6}

/* === SECTIONS === */
.section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6rem 2rem;
  z-index:2;
  overflow:hidden;
}

.section-inner{
  max-width:1100px;
  width:100%;
  margin:0 auto;
}

/* === KANJI WATERMARKS === */
.kanji-watermark{
  position:absolute;
  font-family:var(--font-display);
  font-weight:300;
  font-size:20vw;
  color:var(--gold-sap);
  opacity:0.04;
  pointer-events:none;
  user-select:none;
  line-height:1;
  z-index:0;
  animation:kanjiSpin 120s linear infinite;
}

@keyframes kanjiSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* === SECTION HEADERS === */
.section-header{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:3rem;
  flex-wrap:wrap;
}

.section-glyph{
  font-size:clamp(2rem,4vw,3.5rem);
  font-family:var(--font-display);
  font-weight:300;
  color:var(--amber);
  opacity:0.4;
  line-height:1;
}

.section-title{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.6rem,3vw,2.6rem);
  letter-spacing:0.04em;
  line-height:1.1;
  color:var(--parchment);
  transition:font-weight 0.4s var(--spring);
}

.section-title:hover{font-weight:700}

.section-label{
  color:var(--gold-sap);
  opacity:0.6;
  font-size:clamp(0.7rem,1vw,0.85rem);
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.mono-label{
  font-family:var(--font-mono);
  font-weight:300;
  font-size:clamp(0.7rem,1vw,0.85rem);
  letter-spacing:0.12em;
}

/* ============================
   SECTION 1: CANOPY
   ============================ */
.section-canopy{
  min-height:100vh;
  background:linear-gradient(175deg,#4a3622 0%,#2d1b0e 40%,#1a0e04 100%);
  text-align:center;
  flex-direction:column;
}

.canopy-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.domain-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem,5vw,5rem);
  letter-spacing:0.04em;
  line-height:1.1;
  color:var(--parchment);
  min-height:1.2em;
}

.domain-name .letter{
  display:inline-block;
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.5s var(--spring),transform 0.8s var(--spring);
}

.domain-name .letter.visible{
  opacity:1;
  transform:translateY(0);
}

.canopy-subtitle{
  font-family:var(--font-mono);
  font-weight:300;
  font-size:clamp(0.8rem,1.2vw,1rem);
  color:var(--parchment);
  opacity:0;
  transition:opacity 0.8s ease;
  margin-top:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  letter-spacing:0.12em;
}

.canopy-subtitle.visible{opacity:0.6}

.subtitle-divider{color:var(--gold-sap);opacity:0.5}
.subtitle-meaning{color:var(--copper)}

.hero-branch-container{
  width:100%;
  max-width:600px;
  height:200px;
  margin-top:3rem;
  opacity:0;
  transition:opacity 1s ease;
}

.hero-branch-container.visible{opacity:1}

.hero-branches-svg{width:100%;height:100%}

.hero-branch-path{
  fill:none;
  stroke:var(--gold-sap);
  stroke-width:1;
  stroke-opacity:0.5;
}

/* ============================
   SECTION 2: TRUNK
   ============================ */
.section-trunk{
  background:transparent;
}

.trunk-card{
  background:rgba(61,42,22,0.5);
  border:1px solid rgba(139,105,20,0.2);
  padding:2.5rem;
  border-radius:4px;
  clip-path:polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
  transform:rotate(-1.5deg) scale(0.95);
  opacity:0;
  transition:transform 0.8s var(--spring),opacity 0.8s ease,box-shadow 0.3s ease;
  max-width:680px;
}

.trunk-card.visible{
  transform:rotate(-1.5deg) scale(1);
  opacity:1;
}

.trunk-card:hover{
  box-shadow:0 8px 40px rgba(139,105,20,0.15);
}

.trunk-text{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.7;
  letter-spacing:0.01em;
  color:var(--parchment);
  opacity:0.85;
  margin-bottom:1.2rem;
}

.trunk-text:last-child{margin-bottom:0}

/* Growth ring decoration */
.growth-ring-decoration{
  position:absolute;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  width:180px;height:180px;
  animation:ringPulse 4s ease-in-out infinite;
}

@keyframes ringPulse{
  0%,100%{transform:translateY(-50%) scale(1)}
  50%{transform:translateY(-50%) scale(1.02)}
}

.growth-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--gold-sap);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}

.ring-1{width:40px;height:40px;opacity:0.5}
.ring-2{width:80px;height:80px;opacity:0.35}
.ring-3{width:120px;height:120px;opacity:0.2}
.ring-4{width:160px;height:160px;opacity:0.12}

/* ============================
   SECTION 3: ROOT NETWORK
   ============================ */
.section-roots{
  background:transparent;
}

.root-network-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:24px;
  max-width:700px;
  margin:0 auto;
  padding:2rem 0;
}

.root-node{
  width:16px;height:16px;
  border-radius:50%;
  background:var(--gold-sap);
  justify-self:center;
  align-self:center;
  position:relative;
  cursor:pointer;
  transition:transform 0.3s var(--spring),box-shadow 0.3s ease,background 0.3s ease;
  opacity:0;
}

.root-node.visible{opacity:1}

.root-node:hover{
  transform:scale(1.4);
  background:var(--amber);
  box-shadow:0 0 12px rgba(212,168,75,0.5);
}

.root-node-label{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-weight:300;
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--amber);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
}

.root-node:hover .root-node-label{opacity:1}

/* Node connection lines */
.root-network-grid svg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
}

/* Signal pulse animation */
@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 rgba(139,105,20,0)}
  50%{box-shadow:0 0 8px rgba(139,105,20,0.6)}
}

.root-node.pulse{animation:nodePulse 2s ease-in-out}

/* ============================
   SECTION 4: LEAVES
   ============================ */
.section-leaves{
  background:transparent;
}

.leaves-layout{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  max-width:800px;
}

.leaf-card{
  background:rgba(61,42,22,0.4);
  border:1px solid rgba(139,105,20,0.2);
  padding:2rem 2.5rem;
  border-radius:4px;
  max-width:340px;
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s var(--spring),transform 0.6s var(--spring),box-shadow 0.3s ease;
}

.leaf-card.visible{
  opacity:1;
  transform:translateY(0);
}

.leaf-card:hover{
  transform:scale(1.03);
  box-shadow:0 8px 32px rgba(139,105,20,0.25);
}

/* Sharp-angle clip-paths alternating corners */
.leaf-card-1{
  clip-path:polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  margin-left:0;
}
.leaf-card-2{
  clip-path:polygon(0 40px, 40px 0, 100% 0, 100% 100%, 0 100%);
  margin-left:60px;
}
.leaf-card-3{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  margin-left:120px;
}

.leaf-glyph{
  font-family:var(--font-display);
  font-weight:300;
  font-size:2.4rem;
  color:var(--amber);
  opacity:0.4;
  display:block;
  margin-bottom:0.6rem;
}

.leaf-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--parchment);
  letter-spacing:0.04em;
  margin-bottom:0.4rem;
}

.leaf-desc{
  font-family:var(--font-body);
  font-size:0.9rem;
  color:var(--parchment);
  opacity:0.65;
  line-height:1.6;
}

/* ============================
   SECTION 5: SEED
   ============================ */
.section-seed{
  background:var(--deep-bark);
  text-align:center;
  min-height:60vh;
}

.seed-convergence{
  display:flex;
  justify-content:center;
  margin-bottom:3rem;
}

.convergence-ring{
  width:60px;height:60px;
  border-radius:50%;
  border:1px solid var(--gold-sap);
  opacity:0.3;
  animation:convergeShrink 4s ease-in-out infinite;
}

@keyframes convergeShrink{
  0%,100%{transform:scale(1);opacity:0.3}
  50%{transform:scale(0.3);opacity:0.6}
}

.seed-domain{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.08em;
  color:var(--parchment);
  opacity:0.5;
  margin-bottom:0.8rem;
}

.seed-tagline{
  color:var(--gold-sap);
  opacity:0.4;
  font-size:0.75rem;
  letter-spacing:0.15em;
}

/* === SCROLL REVEAL === */
.section .section-inner{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease,transform 0.8s ease;
}

.section.in-view .section-inner{
  opacity:1;
  transform:translateY(0);
}

/* === RESPONSIVE === */
@media(max-width:768px){
  .section{padding:4rem 1.2rem}
  .section-header{flex-direction:column;gap:0.5rem}
  .growth-ring-decoration{display:none}
  .leaf-card-2{margin-left:30px}
  .leaf-card-3{margin-left:60px}
  .root-network-grid{grid-template-columns:repeat(4,1fr);gap:16px}
}

@media(max-width:480px){
  .leaf-card-1,.leaf-card-2,.leaf-card-3{
    margin-left:0;
    max-width:100%;
    clip-path:none;
  }
}