/* infra.limited -- retro-futuristic diagonal infrastructure */
/* Palette: #7EB8DA (ethereal azure), #A8E6CF (phosphor cyan), #0A0E1A (void indigo), #141B2D (slate abyss), #C9A84C (deco gold), #D4DAE3 (silver mist), #7A8299 (twilight gray), #2A3A5C (wire blue), #5B9BD5 (signal pulse) */

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

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

body{
    background:#0A0E1A;
    color:#D4DAE3;
    font-family:'Work Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.1vw,1.1rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Scan line overlay */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:repeating-linear-gradient(
        12deg,
        transparent 0px,transparent 38px,
        rgba(126,184,218,0.03) 38px,rgba(126,184,218,0.03) 40px
    );
    pointer-events:none;
    z-index:1;
}

/* HUD nav */
.hud-nav{
    position:fixed;
    top:1.5rem;
    right:1.5rem;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:1rem;
}

.hud-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    color:#7A8299;
    text-transform:uppercase;
}

.hud-track{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    align-items:center;
    position:relative;
}

.hud-track::before{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    right:50%;
    width:1px;
    background:#2A3A5C;
}

.hud-diamond{
    width:8px;
    height:8px;
    background:#2A3A5C;
    transform:rotate(45deg);
    cursor:pointer;
    position:relative;
    z-index:2;
    transition:background 0.3s ease;
    font-size:0;
}

.hud-diamond.active{
    background:#7EB8DA;
    box-shadow:0 0 8px rgba(126,184,218,0.4);
}

/* Sections */
.section{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem);
    position:relative;
    z-index:2;
}

/* Hero */
.section-signal{
    overflow:hidden;
}

.monogram-container{
    position:absolute;
    width:clamp(200px,30vw,350px);
    opacity:0.15;
    animation:slowSpin 120s linear infinite;
}

@keyframes slowSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

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

.hero-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,8rem);
    letter-spacing:0.12em;
    line-height:1.1;
    color:#7EB8DA;
    text-transform:uppercase;
    position:relative;
    z-index:3;
}

.hero-sub{
    font-family:'Josefin Sans',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.5vw,1.4rem);
    letter-spacing:0.06em;
    color:#7A8299;
    margin-top:1rem;
    position:relative;
    z-index:3;
}

/* Section labels */
.section-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    color:#C9A84C;
    text-transform:uppercase;
    display:block;
    margin-bottom:1rem;
}

.section-heading{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.6rem,3vw,3rem);
    letter-spacing:0.12em;
    color:#7EB8DA;
    text-transform:uppercase;
    margin-bottom:1.5rem;
}

.section-text{
    max-width:640px;
    color:#D4DAE3;
    margin-bottom:1rem;
}

/* Diagonal container */
.diagonal-container{
    max-width:700px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.7s ease,transform 0.7s ease;
}

.diagonal-container.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Circuit sketch */
.circuit-sketch{
    margin-top:2rem;
    width:clamp(200px,40vw,300px);
}

.sketch-path{
    stroke-dasharray:500;
    stroke-dashoffset:500;
    transition:stroke-dashoffset 2s ease;
}

.diagonal-container.revealed .sketch-path{
    stroke-dashoffset:0;
}

/* Transmission bands */
.band{
    max-width:700px;
    padding:clamp(2rem,4vw,3rem);
    margin-bottom:2rem;
    opacity:0;
    transform:translateX(-20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.band.revealed{
    opacity:1;
    transform:translateX(0);
}

.band-dark{
    background:#141B2D;
    border-left:2px solid #2A3A5C;
}

.band-frost{
    background:rgba(20,27,45,0.6);
    backdrop-filter:blur(4px);
    border-left:2px solid #7EB8DA;
}

/* Waveform */
.waveform{
    width:100%;
    max-width:600px;
    height:60px;
    margin-top:1rem;
}

.wave-path{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    transition:stroke-dashoffset 3s ease;
}

.section-transmission.in-view .wave-path{
    stroke-dashoffset:0;
}

/* Terminus */
.terminus-content{
    max-width:700px;
    text-align:center;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.terminus-content.revealed{
    opacity:1;
    transform:translateY(0);
}

.terminus-domain{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,4vw,3rem);
    letter-spacing:0.12em;
    color:#C9A84C;
    margin-top:2rem;
    text-transform:uppercase;
}

/* Responsive */
@media(max-width:768px){
    .hud-nav{
        top:1rem;
        right:1rem;
    }
    .section{
        padding:3rem 1.5rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .monogram-container{animation:none}
    .diagonal-container,.band,.terminus-content{
        opacity:1;transform:none;transition:none;
    }
    .sketch-path,.wave-path{stroke-dashoffset:0;transition:none}
}