/* hanun.ai - Generative Botanical Metropolis */

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

:root{
    --midnight-indigo:#1B1464;
    --botanical-green:#2D936C;
    --parchment-cream:#F5F0E8;
    --dawn-lilac:#C8B8DB;
    --twilight-navy:#0F0A2E;
    --pollen-gold:#E8D5A3;
    --poppy-coral:#D4654A;
    --charcoal-warm:#2C2C34;
    --root-green:#1A5C43;
}

html{scroll-behavior:smooth}

body{
    background:var(--parchment-cream);
    color:var(--charcoal-warm);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Depth Plane 0: Sky */
.sky-canvas{
    position:fixed;
    inset:0;
    z-index:0;
    background:linear-gradient(180deg,var(--dawn-lilac) 0%,var(--parchment-cream) 30%,var(--parchment-cream) 70%,var(--twilight-navy) 100%);
    will-change:transform;
}

/* Depth Plane 1: City */
.city-layer{
    position:fixed;
    bottom:0;left:0;right:0;
    height:60vh;
    z-index:1;
    will-change:transform;
    pointer-events:none;
}

.skyline-svg{
    width:100%;
    height:100%;
}

/* Depth Plane 4: Particles */
.particle-layer{
    position:fixed;
    inset:0;
    z-index:5;
    pointer-events:none;
    overflow:hidden;
}

.pollen{
    position:absolute;
    border-radius:50%;
    background:var(--pollen-gold);
    filter:blur(0.5px);
    animation:pollenDrift linear infinite;
}

@keyframes pollenDrift{
    0%{transform:translateY(0) translateX(0);opacity:0.2}
    25%{transform:translateY(-25vh) translateX(10px);opacity:0.4}
    50%{transform:translateY(-50vh) translateX(-8px);opacity:0.3}
    75%{transform:translateY(-75vh) translateX(12px);opacity:0.45}
    100%{transform:translateY(-100vh) translateX(0);opacity:0.15}
}

/* Depth Plane 3: Botanical */
.botanical-layer{
    position:fixed;
    inset:0;
    z-index:4;
    pointer-events:none;
    will-change:transform;
}

.fern{
    position:absolute;
    opacity:0.2;
    height:50vh;
    width:auto;
}

.fern-left{
    left:-2%;
    top:20%;
}

.fern-right{
    right:-2%;
    top:40%;
    transform:scaleX(-1);
}

.unfurl{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    transition:stroke-dashoffset 2.5s ease-in-out;
}

.unfurl.drawn{
    stroke-dashoffset:0;
}

/* Ripple */
.ripple-container{
    position:fixed;
    inset:0;
    z-index:6;
    pointer-events:none;
}

.ripple{
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    border:2px solid var(--botanical-green);
    opacity:0.3;
    transform:translate(-50%,-50%) scale(0);
    animation:rippleExpand 0.6s ease-out forwards;
}

@keyframes rippleExpand{
    to{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* Content layer */
.content-layer{
    position:relative;
    z-index:3;
}

.section{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:clamp(40px,8vh,100px) clamp(24px,4vw,80px);
    position:relative;
}

.section-content{
    max-width:500px;
}

/* Root */
.section-root{
    align-items:flex-end;
    padding-bottom:clamp(80px,12vh,160px);
}

.root-content{
    margin-left:clamp(40px,8vw,200px);
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,9rem);
    letter-spacing:-0.02em;
    line-height:1.1;
    color:var(--midnight-indigo);
}

.tagline{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.3vw,1.2rem);
    color:var(--charcoal-warm);
    margin-top:16px;
    opacity:0;
    transition:opacity 0.8s ease;
}

.tagline.visible{opacity:1}

.root-svg{
    position:absolute;
    bottom:0;
    left:clamp(40px,10vw,220px);
    width:200px;
    height:150px;
    opacity:0.3;
}

/* Stem */
.stem-content{
    margin-left:clamp(80px,20vw,300px);
}

.section-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.6rem,3vw,3rem);
    letter-spacing:-0.02em;
    color:var(--midnight-indigo);
    margin-bottom:20px;
}

.body-text{
    margin-bottom:16px;
    color:var(--charcoal-warm);
}

.annotation{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
}

.caveat-text{
    font-family:'Caveat',cursive;
    font-size:clamp(0.85rem,1.1vw,1.1rem);
    color:var(--botanical-green);
    opacity:0.7;
}

.dotted-line{
    flex:1;
    height:1px;
    border-bottom:1px dotted var(--botanical-green);
    opacity:0.3;
    max-width:80px;
}

/* Canopy */
.canopy-content{
    margin-left:auto;
    margin-right:clamp(40px,8vw,200px);
}

.concept-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:24px;
}

.concept-card{
    background:var(--parchment-cream);
    border:1px solid var(--botanical-green);
    padding:clamp(16px,2vw,24px);
    border-radius:4px;
    box-shadow:0 4px 20px rgba(27,20,100,0.05);
}

.concept-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    color:var(--midnight-indigo);
    margin-bottom:8px;
}

.concept-desc{
    font-size:0.9rem;
    line-height:1.6;
    color:var(--charcoal-warm);
}

/* Bloom */
.section-bloom{
    justify-content:center;
}

.bloom-content{
    max-width:700px;
    text-align:center;
    position:relative;
}

.bloom-statement{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,5rem);
    line-height:1.2;
    letter-spacing:-0.02em;
    color:var(--midnight-indigo);
}

.dandelion-seeds{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.seed{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--pollen-gold);
    opacity:0;
}

.seed:nth-child(1){top:10%;left:5%}
.seed:nth-child(2){top:5%;right:10%}
.seed:nth-child(3){bottom:15%;left:8%}
.seed:nth-child(4){bottom:10%;right:5%}
.seed:nth-child(5){top:50%;left:-5%}
.seed:nth-child(6){top:50%;right:-5%}
.seed:nth-child(7){top:-5%;left:40%}
.seed:nth-child(8){bottom:-5%;right:40%}

.seed.scatter{
    animation:seedScatter 1.5s ease-out forwards;
}

@keyframes seedScatter{
    0%{opacity:0.8;transform:translate(0,0) scale(1)}
    100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0.3)}
}

/* Sky */
.section-sky{
    background:var(--twilight-navy);
    justify-content:center;
    text-align:center;
}

.sky-content{
    max-width:none;
}

.sky-tagline{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4rem);
    color:var(--pollen-gold);
    letter-spacing:-0.02em;
}

.sky-sub{
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    color:var(--pollen-gold);
    opacity:0.5;
    margin-top:12px;
}

/* Seed nav */
.seed-nav{
    position:fixed;
    top:24px;right:24px;
    z-index:10;
    background:rgba(245,240,232,0.9);
    border:1px solid rgba(45,147,108,0.3);
    border-radius:50%;
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background 0.3s;
    animation:navPulse 3s ease-in-out infinite;
}

.seed-nav:hover{background:rgba(245,240,232,1)}

@keyframes navPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(45,147,108,0.2)}
    50%{box-shadow:0 0 0 8px rgba(45,147,108,0)}
}

.seed-overlay{
    position:fixed;
    top:0;right:0;
    z-index:9;
    background:rgba(245,240,232,0.95);
    padding:80px 40px 40px;
    display:flex;
    flex-direction:column;
    gap:20px;
    transform:translateX(100%);
    transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    min-width:200px;
    height:100vh;
    justify-content:center;
}

.seed-overlay.open{
    transform:translateX(0);
}

.seed-link{
    font-family:'Caveat',cursive;
    font-size:1.4rem;
    color:var(--botanical-green);
    text-decoration:none;
    transition:color 0.3s;
}

.seed-link:hover{color:var(--poppy-coral)}

/* Reveal */
.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
               transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .root-content,.stem-content{margin-left:clamp(20px,4vw,40px)}
    .canopy-content{margin-right:clamp(20px,4vw,40px);margin-left:0}
    .concept-cards{grid-template-columns:1fr}
    .fern{opacity:0.1}
}