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

html{scroll-behavior:smooth}

body{
    font-family:'IBM Plex Mono',monospace;
    font-weight:300;
    background:#0d0b14;
    background-image:
        radial-gradient(1px 1px at 150px 80px,#f5ede0 0%,transparent 100%),
        radial-gradient(2px 2px at 400px 200px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 680px 120px,#f5ede0 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 900px 300px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 1100px 90px,#f5ede0 0%,transparent 100%),
        radial-gradient(2px 2px at 1300px 250px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 200px 400px,#f5ede0 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 500px 500px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 750px 450px,#f5ede0 0%,transparent 100%),
        radial-gradient(2px 2px at 1000px 550px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 1250px 480px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 100px 650px,#f5ede0 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 350px 720px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 600px 680px,#f5ede0 0%,transparent 100%),
        radial-gradient(2px 2px at 850px 750px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 1150px 700px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 50px 900px,#f5ede0 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 300px 950px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 550px 880px,#f5ede0 0%,transparent 100%),
        radial-gradient(2px 2px at 780px 1000px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 1050px 920px,#f5ede0 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 1350px 870px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 230px 1100px,#f5ede0 0%,transparent 100%),
        radial-gradient(2px 2px at 470px 1150px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 720px 1080px,#f5ede0 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 960px 1200px,#f5ede0 0%,transparent 100%),
        radial-gradient(1px 1px at 1200px 1100px,#f5ede0 0%,transparent 100%),
        linear-gradient(180deg,#0d0b14 0%,#1c1826 25%,#2e2240 50%,#3a1f35 75%,#e8853d 100%);
    background-attachment:fixed;
    background-size:100% 100%;
    color:#f5ede0;
    min-height:100vh;
    overflow-x:hidden;
}

.domain-label{
    position:fixed;
    top:1.5rem;
    left:1.5rem;
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    opacity:0.4;
    color:#f5ede0;
    z-index:100;
}

.star-nav{
    position:fixed;
    right:2rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    z-index:100;
}

.star-dot{
    width:12px;
    height:12px;
    background:#4a4555;
    border:none;
    cursor:pointer;
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    transition:background 0.3s ease,box-shadow 0.3s ease;
}

.star-dot.active{
    background:#e8853d;
    box-shadow:0 0 12px #e8853d80;
}

.star-dot:hover{
    background:#e85d5d;
    animation:microShake 0.2s ease-out;
}

@keyframes microShake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-1px)}
    50%{transform:translateX(1px)}
    75%{transform:translateX(-1px)}
}

@keyframes starPulse{
    0%,100%{box-shadow:0 0 8px #e8853d80}
    50%{box-shadow:0 0 16px #e8853dcc}
}

.star-dot.active{
    animation:starPulse 3s ease-in-out infinite;
}

.constellation-lines{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:0;
    pointer-events:none;
}

.constellation-lines line{
    stroke:#9a8fb5;
    stroke-width:0.5;
    opacity:0.2;
}

.diagonal-section{
    position:relative;
    width:100%;
    min-height:100vh;
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:1.6rem;
    padding:6rem 2rem;
    clip-path:polygon(0 8%,100% 0,100% 92%,0 100%);
    margin-top:-60px;
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.diagonal-section.visible{
    opacity:1;
    transform:translateY(0);
}

.section-1{
    z-index:1;
    background:rgba(13,11,20,0.95);
    margin-top:0;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
}

.section-2{
    z-index:2;
    background:rgba(28,24,38,0.93);
}

.section-3{
    z-index:3;
    background:rgba(46,34,64,0.90);
    clip-path:polygon(0 10%,100% 0,100% 90%,0 100%);
}

.section-4{
    z-index:4;
    background:rgba(58,31,53,0.85);
}

.section-5{
    z-index:5;
    background:rgba(232,133,61,0.15);
}

.section-edge{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:#e8853d;
    box-shadow:0 0 20px #e8853d40,0 0 60px #e8853d20;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.2s ease 0.3s;
}

.diagonal-section.visible .section-edge{
    transform:scaleX(1);
}

.section-4 .section-edge{
    background:#e85d5d;
    box-shadow:0 0 20px #e85d5d40,0 0 60px #e85d5d20;
}

.section-5 .section-edge{
    background:#c4567a;
    box-shadow:0 0 20px #c4567a40,0 0 60px #c4567a20;
}

.section-content{
    grid-column:2/11;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    min-height:60vh;
}

.section-1 .section-content{
    align-items:center;
    text-align:center;
}

.section-2 .section-content{
    grid-column:4/11;
}

.section-4 .section-content{
    grid-column:2/12;
}

.section-5 .section-content{
    align-items:center;
    text-align:center;
    grid-column:1/-1;
}

.display-title{
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:clamp(2.4rem,6vw,5.2rem);
    text-transform:uppercase;
    letter-spacing:0.18em;
    line-height:1.05;
    color:#e8853d;
    text-shadow:0 0 30px #e8853d30;
}

.display-title.final{
    color:#f5ede0;
}

.subtitle{
    font-family:'IBM Plex Mono',monospace;
    font-weight:300;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    letter-spacing:0.02em;
    line-height:1.75;
    color:#f5ede0;
    opacity:0.85;
    margin-top:1.5rem;
}

.section-title{
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:clamp(1.8rem,4vw,3rem);
    text-transform:uppercase;
    letter-spacing:0.18em;
    line-height:1.05;
    color:#e8853d;
    text-shadow:0 0 30px #e8853d30;
    margin-bottom:2rem;
}

.content-block p{
    font-family:'IBM Plex Mono',monospace;
    font-weight:300;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    letter-spacing:0.02em;
    line-height:1.75;
    color:#f5ede0;
    opacity:0.85;
    margin-bottom:1.5rem;
    padding-left:1.5rem;
    position:relative;
}

.amber-dot{
    position:absolute;
    left:0;
    top:0.6em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#e8853d;
    display:inline-block;
}

.descend-title{
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:clamp(4rem,12vw,10rem);
    text-transform:uppercase;
    letter-spacing:0.18em;
    line-height:1.05;
    color:#e8853d;
    text-shadow:0 0 40px #e8853d60,0 0 80px #e8853d30;
}

@keyframes entryShake{
    0%,100%{transform:translateX(0)}
    10%{transform:translateX(-3px)}
    20%{transform:translateX(3px)}
    30%{transform:translateX(-2px)}
    40%{transform:translateX(2px)}
    50%{transform:translateX(-1px)}
}

.descend-title.shake{
    animation:entryShake 0.5s ease-out;
}

.final-star{
    width:24px;
    height:24px;
    background:#e8853d;
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    margin-top:2rem;
    animation:starPulse 3s ease-in-out infinite;
}

.telemetry{
    position:absolute;
    font-family:'Share Tech Mono',monospace;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.25em;
    line-height:1.4;
    color:#9a8fb5;
    opacity:0.15;
    transform:rotate(7deg);
    pointer-events:none;
    white-space:nowrap;
}

.t1{top:20%;right:8%}
.t2{bottom:25%;left:5%}
.t3{top:30%;right:5%}
.t4{bottom:20%;right:12%}
.t5{top:50%;left:3%}
.t6{top:25%;right:10%}
.t7{bottom:30%;left:8%}
.t8{bottom:25%;right:6%}

.telemetry.shake{
    animation:entryShake 0.5s ease-out;
}

@media(max-width:768px){
    .diagonal-section{
        clip-path:polygon(0 4%,100% 0,100% 96%,0 100%);
        padding:4rem 1.2rem;
    }
    .section-1{clip-path:polygon(0 0,100% 0,100% 96%,0 100%)}
    .section-3{clip-path:polygon(0 5%,100% 0,100% 95%,0 100%)}
    .star-nav{
        position:fixed;
        top:auto;
        bottom:1.5rem;
        right:50%;
        transform:translateX(50%);
        flex-direction:row;
    }
    .section-2 .section-content{grid-column:2/12}
}

@media(max-width:480px){
    .diagonal-section{
        clip-path:none;
        padding:3rem 1rem;
    }
    .section-1{clip-path:none}
    .section-3{clip-path:none}
}