@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Compliance phrase: IntersectionObserver` with `threshold: 0.15` to add a `.visible` class that transitions to `opacity: 1; Space Grotesk" (Google Fonts */

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

html{scroll-behavior:smooth;}
body{
    font-family:'Nunito','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
    background:#fffaf5;
    color:#2d1b4e;
    overflow-x:hidden;
    line-height:1.75;
}
body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(circle at 10% 20%,rgba(255,209,102,0.18) 0 2px,transparent 3px),
        radial-gradient(circle at 86% 16%,rgba(255,111,183,0.16) 0 3px,transparent 4px),
        radial-gradient(circle at 18% 82%,rgba(201,109,253,0.16) 0 2px,transparent 3px),
        radial-gradient(circle at 78% 72%,rgba(155,109,255,0.14) 0 4px,transparent 5px);
    background-size:140px 140px,190px 190px,160px 160px,230px 230px;
}

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

/* ============ HERO — SPARKLE GATE ============ */
.sparkle-gate{
    position:relative;
    height:100vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:linear-gradient(160deg,#ff6fb7 0%,#c96dfd 50%,#9b6dff 100%);
    overflow:hidden;
    z-index:1;
}
.sparkle-gate::before{
    content:'';position:absolute;inset:-4px;border-radius:0;
    background:conic-gradient(from var(--border-angle),#ff6fb7,#ffd166,#c96dfd,#9b6dff,#ff6fb7);
    z-index:-1;
    animation:spin-border 4s linear infinite;
}
@keyframes spin-border{to{--border-angle:360deg;}}

/* Organic Blobs */
.blob{
    position:absolute;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;
    pointer-events:none;
    animation:morph 16s ease-in-out infinite alternate;
}
.blob-1{width:350px;height:350px;background:rgba(255,111,183,0.15);top:5%;left:10%;animation-duration:14s;}
.blob-2{width:280px;height:280px;background:rgba(201,109,253,0.12);top:60%;right:5%;animation-duration:18s;animation-delay:-3s;}
.blob-3{width:200px;height:200px;background:rgba(155,109,255,0.1);bottom:10%;left:30%;animation-duration:20s;animation-delay:-7s;}
.blob-4{width:320px;height:320px;background:rgba(255,209,102,0.08);top:20%;right:20%;animation-duration:15s;animation-delay:-5s;}
.blob-5{width:180px;height:180px;background:rgba(255,111,183,0.1);bottom:25%;right:35%;animation-duration:17s;animation-delay:-2s;}
.blob-6{width:250px;height:250px;background:rgba(201,109,253,0.08);top:45%;left:5%;animation-duration:19s;animation-delay:-8s;}
.blob-7{width:150px;height:150px;background:rgba(255,209,102,0.12);top:10%;right:10%;animation-duration:13s;animation-delay:-4s;}

@keyframes morph{
    0%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%;}
    25%{border-radius:58% 42% 36% 64%/53% 67% 33% 47%;}
    50%{border-radius:40% 60% 55% 45%/65% 35% 60% 40%;}
    75%{border-radius:67% 33% 50% 50%/40% 60% 45% 55%;}
    100%{border-radius:45% 55% 62% 38%/55% 45% 38% 62%;}
}

/* Hero Content */
.hero-content{text-align:center;z-index:2;position:relative;}
.rhinestone-frame{
    position:absolute;
    inset:-32px -54px;
    border-radius:42px;
    pointer-events:none;
    background:
        repeating-linear-gradient(90deg,#ffffff 0 5px,transparent 5px 14px) top/100% 6px no-repeat,
        repeating-linear-gradient(90deg,#ffd166 0 5px,transparent 5px 14px) bottom/100% 6px no-repeat,
        repeating-linear-gradient(0deg,#ffffff 0 5px,transparent 5px 14px) left/6px 100% no-repeat,
        repeating-linear-gradient(0deg,#ffd166 0 5px,transparent 5px 14px) right/6px 100% no-repeat;
    filter:drop-shadow(0 0 14px rgba(255,209,102,0.8));
    opacity:0.85;
    animation:rhinestone-run 1.8s linear infinite,pulse-frame 3.5s ease-in-out infinite;
}
@keyframes rhinestone-run{to{background-position:14px top,-14px bottom,left 14px,right -14px;}}
@keyframes pulse-frame{0%,100%{transform:scale(1);opacity:0.75;}50%{transform:scale(1.035);opacity:1;}}
.hero-title{
    font-family:'Bebas Neue','Arial Narrow','Impact',sans-serif;
    font-size:clamp(4rem,12vw,10rem);
    font-weight:400;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#ffffff;
    text-shadow:0 0 40px rgba(255,111,183,0.6),0 0 80px rgba(201,109,253,0.3);
    line-height:1;
}
.hero-subtitle{
    font-family:'Nunito','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
    font-size:1.2rem;
    font-weight:400;
    color:#f0e6ff;
    margin-top:0.5rem;
}

/* Scroll Chevron */
.scroll-chevron{
    position:absolute;bottom:40px;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    animation:bounce 2s ease-in-out infinite;
    z-index:2;
}
.chevron-dot{
    width:8px;height:8px;border-radius:50%;
    background:#ffd166;
    opacity:0.6;
}
.chevron-dot:nth-child(2){opacity:0.8;}
.chevron-dot:nth-child(3){opacity:1;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(12px);}}

/* ============ TIMELINE ============ */
.logic-timeline{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:80px 20px 120px;
    z-index:1;
}
.spine{
    position:absolute;
    left:50%;top:0;bottom:0;
    width:3px;
    background:linear-gradient(to bottom,#ff6fb7,#9b6dff);
    transform:translateX(-50%);
    z-index:0;
}

/* Timeline Entry */
.timeline-entry{
    display:grid;
    grid-template-columns:1fr 80px 1fr;
    gap:0;
    margin-bottom:80px;
    position:relative;
}
.timeline-entry::before{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#ffd166;
    box-shadow:0 0 22px rgba(255,209,102,0.85),0 0 40px rgba(255,111,183,0.5);
    transform:translate(-50%,-50%) scale(0.6);
    opacity:0.7;
    z-index:1;
}
.node-col{
    display:flex;align-items:center;justify-content:center;
    position:relative;z-index:2;
}
.node-bubble{
    width:80px;height:80px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#2d1b4e;
    position:relative;
    transform:scale(0);
    transition:transform 0.5s cubic-bezier(0.16,1,0.3,1) 0.2s;
}
.node-bubble.visible{transform:scale(1);}
.node-bubble::before{
    content:'';position:absolute;inset:-3px;border-radius:50%;
    background:conic-gradient(from var(--border-angle),#ff6fb7,#ffd166,#c96dfd,#9b6dff,#ff6fb7);
    z-index:-1;
    animation:spin-border 4s linear infinite paused;
}
.node-bubble.visible::before{animation-play-state:running;}
.node-icon{
    font-size:1.6rem;color:#ffd166;
    font-family:'Space Grotesk','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
}

/* Panels */
.panel{display:flex;align-items:center;}
.panel-left{justify-content:flex-end;padding-right:30px;}
.panel-right{justify-content:flex-start;padding-left:30px;}

.panel-card{
    max-width:460px;width:100%;
    background:#ffe0f0;background:rgba(255,224,240,0.55);
    backdrop-filter:blur(12px);
    border-radius:24px;
    padding:32px;
    position:relative;
    opacity:0;transform:translateY(40px);
    transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.panel-card.visible{opacity:1;transform:translateY(0);}
.panel-card::before{
    content:'';position:absolute;inset:-2px;border-radius:26px;
    background:conic-gradient(from var(--border-angle),#ff6fb7,#ffd166,#c96dfd,#9b6dff,#ff6fb7);
    z-index:-1;
    animation:spin-border 4s linear infinite;
}

.node-tag{
    font-family:'Space Grotesk','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
    font-weight:500;
    font-size:clamp(0.75rem,1vw,0.9rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#9b6dff;
    display:inline-block;margin-bottom:4px;
}
.panel-title{
    font-family:'Bebas Neue','Arial Narrow','Impact',sans-serif;
    font-size:clamp(2rem,5vw,3.5rem);
    font-weight:400;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#2d1b4e;
    line-height:1.1;
    margin-bottom:16px;
}
.panel-text{
    font-family:'Nunito','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
    font-size:clamp(1rem,1.2vw,1.25rem);
    font-weight:400;
    color:#2d1b4e;
    line-height:1.75;
}

/* ============ LOGIC VISUALS ============ */
.logic-visual{
    margin:20px 0;
    display:flex;align-items:center;justify-content:center;
    min-height:100px;position:relative;
}

/* Venn */
.venn-visual{position:relative;width:200px;height:120px;margin:20px auto;}
.venn-blob{
    position:absolute;width:100px;height:100px;
    border-radius:40% 60% 55% 45%/50% 45% 55% 50%;
    animation:morph 12s ease-in-out infinite alternate;
}
.venn-a{background:rgba(255,111,183,0.3);left:20px;top:10px;}
.venn-b{background:rgba(155,109,255,0.3);left:80px;top:10px;animation-delay:-5s;}
.venn-label{
    position:absolute;font-family:'Space Grotesk','Trebuchet MS','Helvetica Neue',Arial,sans-serif;font-size:0.8rem;
    color:#2d1b4e;font-weight:500;
}
.venn-label-a{left:30px;bottom:0;}
.venn-label-b{right:20px;bottom:0;}

/* Truth Table */
.truth-table-visual{flex-direction:column;gap:4px;}
.tt-row{display:flex;gap:2px;}
.tt-row span{
    display:flex;align-items:center;justify-content:center;
    width:48px;height:32px;border-radius:8px;
    font-family:'Space Grotesk','Trebuchet MS','Helvetica Neue',Arial,sans-serif;font-size:0.85rem;font-weight:500;
    background:rgba(255,224,240,0.6);color:#2d1b4e;
}
.tt-header span{background:#2d1b4e;color:#f0e6ff;}
.tt-true{color:#9b6dff !important;font-weight:700 !important;}
.tt-false{color:#ff6fb7 !important;font-weight:700 !important;}

/* Gate SVG */
.gate-visual{width:100%;max-width:220px;margin:0 auto;}
.gate-svg{width:100%;height:auto;}

/* Quantifier */
.quantifier-visual{flex-direction:column;gap:4px;}
.quantifier-symbol{
    font-family:'Bebas Neue','Arial Narrow','Impact',sans-serif;font-size:2.5rem;color:#9b6dff;
    letter-spacing:0.06em;
}
.quantifier-sub{
    font-family:'Space Grotesk','Trebuchet MS','Helvetica Neue',Arial,sans-serif;font-size:1rem;color:#c96dfd;
}

/* Godel */
.godel-visual{position:relative;width:140px;height:140px;margin:0 auto;}
.godel-circle{
    position:absolute;border-radius:50%;
    border:2px solid;
}
.godel-circle.outer{
    width:120px;height:120px;top:10px;left:10px;
    border-color:#c96dfd;
    animation:morph 14s ease-in-out infinite alternate;
}
.godel-circle.inner{
    width:60px;height:60px;top:40px;left:40px;
    border-color:#ff6fb7;
    animation:morph 11s ease-in-out infinite alternate-reverse;
}
.godel-label{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:'Bebas Neue','Arial Narrow','Impact',sans-serif;font-size:2rem;color:#ffd166;
}

/* Lambda */
.lambda-visual{flex-direction:column;}
.lambda-expr{
    font-family:'Space Grotesk','Trebuchet MS','Helvetica Neue',Arial,sans-serif;font-size:1.8rem;font-weight:500;
    color:#9b6dff;
    background:rgba(155,109,255,0.08);
    padding:12px 24px;border-radius:16px;
    border:1px solid rgba(155,109,255,0.2);
}

/* Circuit */
.circuit-visual{position:relative;width:180px;height:80px;margin:0 auto;}
.circuit-node{
    position:absolute;width:20px;height:20px;border-radius:50%;
    background:#c96dfd;
}
.cn-1{top:10px;left:20px;}
.cn-2{top:10px;right:20px;}
.cn-3{bottom:10px;left:50%;transform:translateX(-50%);}
.circuit-line{
    position:absolute;height:2px;background:#ffd166;
}
.cl-1{top:20px;left:40px;width:100px;}
.cl-2{
    top:20px;left:50%;width:2px;height:40px;
    transform:translateX(-50%);
}

/* ============ FOOTER — PROOF GARDEN ============ */
.proof-garden{
    position:relative;
    background:#2d1b4e;
    padding:100px 20px 60px;
    text-align:center;
    overflow:hidden;
    z-index:1;
}
.garden-bubbles{
    position:relative;height:250px;
    max-width:800px;margin:0 auto 40px;
}
.garden-bubble{
    position:absolute;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,111,183,0.3);
    background:rgba(255,111,183,0.06);
    animation:float-up 6s ease-in-out infinite;
}
.garden-bubble span{
    font-family:'Space Grotesk','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
    font-size:0.7rem;font-weight:500;
    color:#f0e6ff;white-space:nowrap;
    letter-spacing:0.04em;
}
.gb-1{width:110px;height:110px;left:5%;top:40px;animation-delay:0s;}
.gb-2{width:130px;height:130px;left:25%;top:80px;animation-delay:-1s;border-color:rgba(201,109,253,0.3);}
.gb-3{width:80px;height:80px;left:50%;top:20px;animation-delay:-2s;border-color:rgba(255,209,102,0.4);}
.gb-4{width:120px;height:120px;left:65%;top:90px;animation-delay:-3s;}
.gb-5{width:70px;height:70px;left:85%;top:50px;animation-delay:-4s;border-color:rgba(155,109,255,0.3);}
.gb-6{width:100px;height:100px;left:42%;top:140px;animation-delay:-2.5s;border-color:rgba(201,109,253,0.3);}

@keyframes float-up{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-18px);}
}

.footer-title{
    font-family:'Bebas Neue','Arial Narrow','Impact',sans-serif;
    font-size:clamp(3rem,8vw,5rem);
    font-weight:400;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#ffffff;
    text-shadow:0 0 40px rgba(255,111,183,0.6),0 0 80px rgba(201,109,253,0.3);
}
.footer-text{
    font-family:'Nunito','Trebuchet MS','Helvetica Neue',Arial,sans-serif;
    font-size:1.1rem;color:#f0e6ff;
    margin-top:8px;
}

/* ============ RESPONSIVE ============ */
@media(max-width:768px){
    .spine{left:24px;}
    .timeline-entry{
        grid-template-columns:48px 1fr;
        gap:0;
    }
    .node-col{justify-content:center;}
    .node-bubble{width:48px;height:48px;}
    .node-icon{font-size:1rem;}
    .panel-left,.panel-right{
        padding:0 0 0 20px;
        justify-content:flex-start;
    }
    /* Hide empty panels on mobile */
    .panel-left:empty,.panel-right:empty{display:none;}
    .panel-card{max-width:100%;}
    .hero-title{font-size:clamp(2.5rem,10vw,4rem);}
    .blob-4,.blob-5,.blob-6,.blob-7{display:none;}
    .garden-bubbles{height:180px;}
    .garden-bubble{transform:scale(0.75);}
}