*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --mist:#E8F0E4;--frosted:#F5F8F2;--sky:#7EC8D9;--fern:#A8D5A2;
  --petal:#E8B4C8;--loam:#2C3527;--moss:#5A6B58;--dew:#B8D8E8;
  --amber:#E8C87A;
}
body{background:var(--mist);color:var(--loam);font-family:'Nunito',sans-serif;font-weight:300;font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.72;overflow-x:hidden}

/* Depth Column */
.depth-column{position:fixed;left:8%;top:0;bottom:0;width:2px;background:rgba(184,216,232,0.3);z-index:10;pointer-events:none}
.depth-node{position:absolute;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;border:2px solid var(--dew);background:var(--mist)}
.node-1{top:10%}.node-2{top:30%}.node-3{top:50%}.node-4{top:70%}.node-5{top:90%}

/* Glass Viewport / Hero */
.glass-viewport{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;background:radial-gradient(ellipse at center,var(--mist) 0%,#D4E8D0 100%);padding:clamp(16px,4vw,48px)}
.glass-viewport::before{content:'';position:absolute;inset:10%;background:var(--frosted);opacity:0.88;border-radius:16px;border:1px solid rgba(255,255,255,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 2px rgba(255,255,255,0.5),0 8px 32px rgba(0,0,0,0.06)}
.condensation{position:absolute;inset:10%;border-radius:16px;pointer-events:none;background:radial-gradient(circle at 25% 30%,rgba(255,255,255,0.6) 0%,transparent 3%),radial-gradient(circle at 60% 20%,rgba(255,255,255,0.5) 0%,transparent 2%),radial-gradient(circle at 80% 45%,rgba(255,255,255,0.4) 0%,transparent 2.5%),radial-gradient(circle at 35% 70%,rgba(255,255,255,0.5) 0%,transparent 2%),radial-gradient(circle at 70% 65%,rgba(255,255,255,0.3) 0%,transparent 3%);z-index:2}
.hero-title{font-family:'Poiret One',cursive;font-size:clamp(3rem,8vw,6rem);letter-spacing:0.15em;text-transform:uppercase;color:var(--loam);position:relative;z-index:3}
.hero-cue{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--moss);position:absolute;bottom:clamp(32px,6vh,64px);z-index:3;animation:cuePulse 2s ease-in-out infinite}
@keyframes cuePulse{0%,100%{opacity:0.3}50%{opacity:0.7}}
.hero-curve{position:absolute;bottom:0;left:0;width:100%;height:40px;z-index:3}

/* Timeline Labels */
.timeline-label{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--moss);display:block;margin-bottom:0.5rem}
.timeline-label--light{color:var(--frosted)}

/* Section Headings */
.section-heading{font-family:'Poiret One',cursive;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:0.15em;text-transform:uppercase;color:var(--loam);margin-bottom:1em;line-height:1.2}
.section-heading--light{color:var(--frosted)}
.sub-heading{font-family:'Nunito',sans-serif;font-weight:600;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--loam);margin:1.5em 0 0.5em}

/* Glass Capsule */
.glass-capsule{background:rgba(245,248,242,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.5);border-radius:16px;padding:clamp(20px,3vw,40px);box-shadow:inset 0 1px 2px rgba(255,255,255,0.5),0 8px 32px rgba(0,0,0,0.06);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.glass-capsule:hover{transform:scale(1.02)}
.glass-capsule p{max-width:58ch;margin-bottom:1em;color:var(--loam)}

/* Dawn Phase */
.dawn-phase{padding:clamp(4rem,8vh,8rem) clamp(48px,10vw,120px);display:flex;gap:clamp(24px,4vw,48px);align-items:flex-start;position:relative}
.dawn-content{flex:1;max-width:500px}
.dawn-leaves{flex:1;position:relative;min-height:300px}
.leaf{position:absolute;opacity:0.6}
.leaf-oak{width:40px;top:10%;left:20%;animation:leafSway 8s ease-in-out infinite}
.leaf-fern{width:30px;top:40%;left:55%;animation:leafSway 10s ease-in-out infinite 1s}
.leaf-ginkgo{width:50px;top:60%;left:30%;animation:leafSway 9s ease-in-out infinite 2s}
@keyframes leafSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(3deg)}}

/* Growth Phase */
.growth-phase{padding:clamp(4rem,8vh,8rem) clamp(48px,10vw,120px);position:relative}
.growth-grid{display:grid;grid-template-columns:1fr 20px 1.5fr;gap:clamp(16px,3vw,32px);align-items:start}
.flow-divider{height:100%}
.flow-path{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 3s ease-out}
.growth-phase.visible .flow-path{stroke-dashoffset:0}

/* Leaf Particles */
.leaf-particle{position:absolute;width:16px;height:20px;background:linear-gradient(135deg,rgba(168,213,162,0.3),rgba(232,180,200,0.2));clip-path:polygon(50% 0%,100% 40%,80% 100%,20% 100%,0% 40%);pointer-events:none}
.lp1{top:20%;right:10%;animation:leafDrift 30s linear infinite}
.lp2{top:40%;right:25%;animation:leafDrift 25s linear infinite 5s}
.lp3{top:60%;right:5%;animation:leafDrift 35s linear infinite 10s}
.lp4{top:80%;right:20%;animation:leafDrift 28s linear infinite 15s}
@keyframes leafDrift{0%{transform:translate(0,0) rotate(0deg);opacity:0}10%{opacity:0.3}90%{opacity:0.3}100%{transform:translate(-30px,200px) rotate(45deg);opacity:0}}

/* Canopy Phase */
.canopy-phase{min-height:100vh;position:relative;background:#C8DCC4;overflow:hidden;display:flex;align-items:flex-end}
.canopy-shapes{position:absolute;inset:0;pointer-events:none}
.canopy-cluster{position:absolute;border-radius:50%;background:rgba(168,213,162,0.25);filter:blur(2px)}
.c1{width:200px;height:180px;top:5%;left:10%}
.c2{width:300px;height:250px;top:0;left:35%;opacity:0.4}
.c3{width:180px;height:200px;top:8%;right:15%}
.c4{width:250px;height:220px;top:2%;right:35%;opacity:0.3}
.canopy-overlay{background:rgba(44,53,39,0.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:clamp(24px,4vw,48px);margin:0;width:100%;position:relative;z-index:2}
.canopy-overlay p{color:rgba(245,248,242,0.85);max-width:58ch;margin-bottom:1em}

/* Dusk Phase */
.dusk-phase{padding:clamp(4rem,8vh,8rem) 0;background:linear-gradient(180deg,var(--mist) 0%,#D8E4E8 100%);display:flex;flex-direction:column;align-items:center;position:relative}
.dusk-content{max-width:480px;padding:0 clamp(16px,4vw,48px);text-align:center}
.dusk-content p{margin-bottom:1em;color:var(--loam)}
.dusk-fragment{font-family:'Poiret One',cursive;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:0.1em;color:var(--moss);margin-top:2rem}

/* Root Network */
.root-network{width:200px;margin-top:2rem;opacity:0.5}
.root-svg{width:100%}
.root-path{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 3s ease-out}
.dusk-phase.visible .root-path{stroke-dashoffset:0}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(0.23,1,0.32,1),transform 0.6s cubic-bezier(0.23,1,0.32,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
  .depth-column{left:4%}
  .dawn-phase{flex-direction:column}
  .dawn-leaves{min-height:150px}
  .growth-grid{grid-template-columns:1fr}
  .flow-divider{display:none}
  .leaf-particle{display:none}
}