/* layer2.id -- corporate pastel layered-depth */

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

:root{
    --lavender:#C8B6E2;
    --mint:#B8E8D2;
    --blush:#F2C6C2;
    --peach:#F5DEC4;
    --paper:#FAF8F5;
    --card:#FFFFFF;
    --deep:#E8E0F0;
    --text:#3A3540;
    --text2:#8A8094;
    --shadow:#7B6F8E;
    --retro:#D4A5A0;
}

html{scroll-behavior:smooth;font-size:16px}

body{
    background:var(--paper);
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Navigation dots */
.nav-dots{
    position:fixed;
    right:2rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    z-index:100;
}

.nav-dot{
    width:14px;height:14px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    position:relative;
    transition:transform 0.3s ease;
}

.nav-dot:nth-child(1){background:var(--lavender)}
.nav-dot:nth-child(2){background:var(--mint)}
.nav-dot:nth-child(3){background:var(--blush)}
.nav-dot:nth-child(4){background:var(--peach)}

.nav-dot.active{
    animation:dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.4)}
}

.dot-label{
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    font-family:'DM Sans',sans-serif;
    font-size:0.75rem;
    font-weight:500;
    color:var(--text2);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease;
}

.nav-dot:hover .dot-label{opacity:1}

/* Layers / Sections */
.layer{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:4rem 2rem;
}

/* Shapes */
.shape{
    position:absolute;
    border-radius:24px;
    pointer-events:none;
}

/* Section 1: Surface Layer */
.surface-layer{
    background:var(--paper);
}

.shape-circle{
    width:min(500px,70vw);height:min(500px,70vw);
    border-radius:50%;
    background:var(--lavender);
    background-image:radial-gradient(circle,var(--retro) 1px,transparent 1px);
    background-size:6px 6px;
    opacity:0.5;
    top:10%;left:-5%;
    z-index:1;
}

.shape-rect{
    width:min(400px,55vw);height:min(300px,40vw);
    border-radius:32px;
    background:var(--mint);
    background-image:repeating-linear-gradient(45deg,var(--retro) 0px,var(--retro) 1px,transparent 1px,transparent 8px);
    opacity:0.4;
    top:20%;right:-2%;
    z-index:1;
}

.shape-pill{
    width:min(200px,30vw);height:min(400px,55vw);
    border-radius:100px;
    background:var(--blush);
    background-image:repeating-linear-gradient(45deg,var(--retro) 0px,var(--retro) 1px,transparent 1px,transparent 8px),
                      repeating-linear-gradient(-45deg,var(--retro) 0px,var(--retro) 1px,transparent 1px,transparent 8px);
    opacity:0.35;
    bottom:5%;left:35%;
    z-index:2;
}

.pulse-1{animation:shape-pulse 4s ease-in-out infinite}
.pulse-2{animation:shape-pulse 5.3s ease-in-out infinite}
.pulse-3{animation:shape-pulse 4.7s ease-in-out infinite}

@keyframes shape-pulse{
    0%,100%{transform:scale(1);opacity:0.5}
    50%{transform:scale(1.015);opacity:0.42}
}

.hero-title{
    font-family:'Outfit',sans-serif;
    font-weight:300;
    font-size:clamp(5rem,12vw,14rem);
    color:var(--text);
    letter-spacing:-0.02em;
    line-height:0.95;
    z-index:3;
    text-align:center;
    position:relative;
}

.hero-dot{
    color:var(--lavender);
}

.subtitle-card{
    background:var(--card);
    padding:1rem 2.5rem;
    border-radius:16px;
    box-shadow:0 8px 32px rgba(123,111,142,0.06);
    margin-top:2rem;
    z-index:4;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

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

.subtitle-text{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:var(--text2);
    letter-spacing:0.01em;
}

/* Section 2: Protocol Layer */
.protocol-layer{
    background:var(--paper);
}

.shape-bg-lavender{
    width:300px;height:300px;
    border-radius:50%;
    background:var(--lavender);
    opacity:0.25;
    top:10%;left:-5%;
    z-index:0;
}

.shape-bg-mint{
    width:200px;height:350px;
    border-radius:100px;
    background:var(--mint);
    opacity:0.2;
    bottom:5%;right:2%;
    z-index:0;
}

.card-stack{
    position:relative;
    width:min(500px,80vw);
    z-index:2;
}

.protocol-card{
    background:var(--card);
    border-radius:24px;
    padding:clamp(1.5rem,3vw,2.5rem);
    position:relative;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

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

.card-1{
    z-index:1;
    box-shadow:0 20px 60px rgba(123,111,142,0.06);
}

.card-2{
    margin-top:-60px;
    margin-left:40px;
    z-index:2;
    box-shadow:0 14px 40px rgba(123,111,142,0.07);
}

.card-3{
    margin-top:-60px;
    margin-left:80px;
    z-index:3;
    box-shadow:0 8px 24px rgba(123,111,142,0.08);
}

.card-heading{
    font-family:'Outfit',sans-serif;
    font-weight:600;
    font-size:clamp(1.3rem,2vw,2rem);
    color:var(--text);
    letter-spacing:0em;
    line-height:1.15;
    margin-bottom:0.75rem;
}

.card-body{
    color:var(--text);
    line-height:1.7;
}

/* Pulse highlight */
.pulse-highlight{
    display:inline;
    background-color:transparent;
    animation:text-pulse 3s ease-in-out infinite;
    padding:0 2px;
    border-radius:4px;
}

@keyframes text-pulse{
    0%,100%{background-color:transparent}
    50%{background-color:rgba(200,182,226,0.2)}
}

/* Section 3: Consensus Layer */
.consensus-layer{
    background:var(--paper);
}

.shape-rotate{
    width:min(600px,80vw);height:min(500px,65vw);
    border-radius:60px;
    background:var(--blush);
    background-image:repeating-linear-gradient(#D4A5A0 0px,transparent 1px,transparent 24px);
    opacity:0.15;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:-1;
    animation:slow-rotate 120s linear infinite;
}

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

.consensus-content{
    max-width:900px;
    width:100%;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:3rem;
}

.consensus-row{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}

.consensus-row.visible{
    opacity:1;
    transform:translateY(0);
}

.row-left{text-align:left}
.row-right{text-align:right;align-self:flex-end;max-width:85%}

.section-heading{
    font-family:'Outfit',sans-serif;
    font-weight:600;
    font-size:clamp(2rem,4vw,4rem);
    color:var(--text);
    line-height:1.15;
    margin-bottom:1.5rem;
}

.consensus-text{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.7;
    color:var(--text);
}

/* Section 4: Identity Layer */
.identity-layer{
    background:var(--deep);
}

.shape-sym-1{
    width:250px;height:250px;
    border-radius:50%;
    background:var(--lavender);
    opacity:0.3;
    top:12%;left:50%;
    transform:translateX(-50%);
    z-index:0;
}

.shape-sym-2{
    width:180px;height:180px;
    border-radius:50%;
    background:var(--mint);
    opacity:0.25;
    bottom:20%;left:25%;
    z-index:0;
}

.shape-sym-3{
    width:180px;height:180px;
    border-radius:50%;
    background:var(--blush);
    opacity:0.25;
    bottom:20%;right:25%;
    z-index:0;
}

.pulse-slow{animation:shape-pulse 6s ease-in-out infinite}

.identity-card{
    background:var(--card);
    max-width:700px;
    width:90%;
    border-radius:32px;
    padding:clamp(2rem,4vw,3.5rem);
    box-shadow:0 24px 72px rgba(123,111,142,0.1);
    z-index:10;
    text-align:center;
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.8s ease-out,transform 0.8s ease-out;
}

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

.identity-statement{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-size:clamp(1.2rem,1.8vw,1.6rem);
    line-height:1.5;
    color:var(--text);
    margin-bottom:2rem;
}

.identity-domain{
    font-family:'Outfit',sans-serif;
    font-weight:600;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--lavender);
    letter-spacing:-0.01em;
}

/* Responsive */
@media(max-width:768px){
    .nav-dots{right:1rem;gap:1rem}
    .nav-dot{width:10px;height:10px}
    .card-2{margin-left:20px;margin-top:-40px}
    .card-3{margin-left:40px;margin-top:-40px}
    .row-right{max-width:100%}
    .shape-circle{width:60vw;height:60vw}
    .shape-rect{width:50vw;height:35vw}
    .shape-pill{width:25vw;height:50vw}
}

@media(prefers-reduced-motion:reduce){
    .pulse-1,.pulse-2,.pulse-3,.pulse-slow,.nav-dot.active{animation:none}
    .shape-rotate{animation:none}
    .pulse-highlight{animation:none;background-color:rgba(200,182,226,0.15)}
    .subtitle-card,.protocol-card,.consensus-row,.identity-card{
        opacity:1;transform:none;transition:none;
    }
}