/* freedom.study - Bauhaus Neon-Electric Freedom Manifesto */

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

:root{
    --void:#08080F;
    --indigo:#0D0D2B;
    --cyan:#00FFEF;
    --magenta:#FF00D4;
    --lime:#ADFF2F;
    --orange:#FF6B00;
    --blue:#3D5AFE;
    --violet:#B388FF;
    --phosphor:#F0F0FF;
    --steel:#3A3A52;
    --body-text:#E8E8F0;
    --body-muted:#A0A0B8;
}

body{
    background:var(--void);
    color:var(--body-text);
    font-family:'Inter',system-ui,sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Section navigation */
.section-nav{
    position:fixed;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.nav-icon{
    width:28px;
    height:28px;
    border:none;
    background:transparent;
    cursor:pointer;
    color:var(--steel);
    padding:0;
    transition:color 0.3s ease;
}

.nav-icon svg{width:100%;height:100%}

.nav-icon.active{
    color:var(--cyan);
    filter:drop-shadow(0 0 6px rgba(0,255,239,0.5));
}

/* Freedom sections */
.freedom-section{
    min-height:100svh;
    position:relative;
    display:flex;
    align-items:center;
    padding:clamp(2rem,4vw,4rem) clamp(60px,8vw,120px);
    overflow:hidden;
}

.sec-f{background:var(--void)}
.sec-r{background:var(--indigo)}
.sec-e1{background:var(--void)}
.sec-e2{background:var(--indigo)}
.sec-d{background:var(--void)}
.sec-o{background:var(--indigo)}
.sec-m{background:#0F0808}

/* Geometric primitives */
.geo-primitive{
    position:absolute;
    width:60vw;
    height:60vw;
    max-width:700px;
    max-height:700px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    opacity:0.08;
}

.geo-circle{
    border-radius:50%;
    border:2px solid var(--cyan);
    animation:geoSpin 120s linear infinite;
}

.geo-triangle{
    width:0;height:0;
    border-left:30vw solid transparent;
    border-right:30vw solid transparent;
    border-bottom:52vw solid transparent;
    border-bottom-color:transparent;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    /* Use outline via SVG instead */
}

/* For non-circle primitives, use box-shadow or SVG-like outlines */
.geo-triangle,.geo-square,.geo-hexagon,.geo-diamond,.geo-circles,.geo-arrow{
    border:2px solid;
    animation:geoSpin 120s linear infinite;
}

.geo-triangle{border-color:var(--magenta);clip-path:polygon(50% 5%,95% 95%,5% 95%)}
.geo-square{border-color:var(--lime);border-radius:0}
.geo-hexagon{border-color:var(--orange);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.geo-diamond{border-color:var(--blue);transform:translate(-50%,-50%) rotate(45deg);animation:geoDiamondSpin 120s linear infinite}
.geo-circles{border-color:var(--violet);border-radius:50%}
.geo-arrow{border-color:var(--phosphor);clip-path:polygon(50% 0%,100% 60%,75% 60%,75% 100%,25% 100%,25% 60%,0% 60%)}

@keyframes geoSpin{
    from{transform:translate(-50%,-50%) rotate(0deg)}
    to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes geoDiamondSpin{
    from{transform:translate(-50%,-50%) rotate(45deg)}
    to{transform:translate(-50%,-50%) rotate(405deg)}
}

/* Section content */
.section-content{
    position:relative;
    z-index:2;
    max-width:600px;
}

/* Hero title */
.hero-title{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.02em;
    line-height:1.15;
}

.hero-letter{
    display:inline-block;
    opacity:0;
    transform:perspective(600px) rotateY(45deg);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.hero-letter.visible{
    opacity:1;
    transform:perspective(600px) rotateY(0deg);
}

.hero-dot{
    color:var(--steel);
    display:inline-block;
}

.hero-subtitle{
    font-family:'Space Mono',monospace;
    font-size:0.85rem;
    letter-spacing:0.06em;
    color:var(--steel);
    margin-top:1.5rem;
    opacity:0;
    transition:opacity 0.8s ease;
}

.hero-subtitle.visible{opacity:1}

/* Section letter */
.section-letter{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:700;
    font-size:clamp(5rem,12vw,10rem);
    line-height:1;
    opacity:0.15;
    position:absolute;
    top:10%;
    right:10%;
    z-index:0;
}

/* Section headings */
.section-heading{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4.5rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--phosphor);
    margin-bottom:1.5rem;
}

.section-body{
    margin-bottom:1.2rem;
    max-width:38em;
    color:var(--body-text);
}

/* Reveal animation */
.reveal-content{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.reveal-content.shown{
    opacity:1;
    transform:translateY(0);
}

/* Botanical illustrations */
.botanical{
    position:absolute;
    right:8%;
    bottom:10%;
    width:clamp(200px,25vw,300px);
    z-index:1;
    opacity:0.6;
}

.botanical-svg{
    width:100%;
    height:auto;
}

.bot-path{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 3s cubic-bezier(0.22,1,0.36,1);
}

.botanical-draw.drawing .bot-path{
    stroke-dashoffset:0;
}

/* Closing domain */
.closing-domain{
    font-family:'EB Garamond',Georgia,serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--phosphor);
    margin-top:3rem;
    text-shadow:0 0 8px rgba(240,240,255,0.3);
}

/* Responsive */
@media(max-width:768px){
    .section-nav{
        left:auto;right:8px;
        top:auto;bottom:12px;
        transform:none;
        flex-direction:row;
        gap:8px;
    }
    .nav-icon{width:22px;height:22px}
    .freedom-section{padding:clamp(2rem,4vw,4rem) clamp(1rem,4vw,2rem)}
    .geo-primitive{width:80vw;height:80vw}
    .section-letter{font-size:clamp(4rem,10vw,8rem);right:5%}
    .botanical{display:none}
}

@media(prefers-reduced-motion:reduce){
    .geo-primitive{animation:none}
    .hero-letter{opacity:1;transform:none;transition:none}
    .hero-subtitle{opacity:1;transition:none}
    .reveal-content{opacity:1;transform:none;transition:none}
    .bot-path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}