/* infra.day -- isometric infrastructure stack */
/* Palette: #0F1114 (graphite deep), #1C2028 (steel plate), #2A3040 (titanium), #E8ECF1 (signal white), #3B82F6 (uplink blue), #F59E0B (status amber), #10B981 (route green), #64748B (cable gray) */

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

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

body{
    background:#0F1114;
    color:#E8ECF1;
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.72;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Isometric grid background */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        repeating-linear-gradient(30deg,rgba(100,116,139,0.04) 0px,rgba(100,116,139,0.04) 1px,transparent 1px,transparent 40px),
        repeating-linear-gradient(150deg,rgba(100,116,139,0.04) 0px,rgba(100,116,139,0.04) 1px,transparent 1px,transparent 40px);
    pointer-events:none;
    z-index:0;
}

/* Uptime counter */
.uptime-counter{
    position:fixed;
    bottom:1.5rem;
    right:1.5rem;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.uptime-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.1em;
    color:#64748B;
}

.uptime-value{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.9rem);
    letter-spacing:0.06em;
    color:#10B981;
    font-feature-settings:"tnum";
}

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

.floor-content{
    max-width:680px;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.7s ease,transform 0.7s ease;
}

.floor-content[data-reveal].revealed{
    opacity:1;
    transform:translateY(0);
}

/* Foundation floor (hero) - always visible */
.floor-foundation .floor-content{
    opacity:1;
    transform:none;
}

/* Hero */
.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,6rem);
    letter-spacing:0.03em;
    line-height:1.1;
    color:#E8ECF1;
}

.hero-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.9rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#64748B;
    margin-top:1rem;
}

/* Heartbeat dot */
.heartbeat-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#10B981;
    margin-top:2rem;
    animation:heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat{
    0%,100%{opacity:0.3;box-shadow:0 0 0 0 rgba(16,185,129,0.4)}
    50%{opacity:1;box-shadow:0 0 0 12px rgba(16,185,129,0)}
}

/* Floor labels */
.floor-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.9rem);
    font-weight:400;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#3B82F6;
    margin-bottom:1.5rem;
    font-feature-settings:"tnum";
}

.floor-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem,2.5vw,2.2rem);
    letter-spacing:0.03em;
    color:#E8ECF1;
    margin-bottom:1.5rem;
    line-height:1.2;
}

.floor-text{
    color:#E8ECF1;
    opacity:0.85;
    max-width:600px;
}

/* Riser connections */
.floor-riser{
    position:absolute;
    bottom:-2rem;
    left:clamp(2rem,8vw,8rem);
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:2;
}

.riser-line{
    width:1px;
    height:4rem;
    background:#64748B;
    opacity:0.4;
}

.riser-diamond{
    width:8px;
    height:8px;
    background:#10B981;
    transform:rotate(45deg);
    margin-top:-1px;
}

/* Cable visualization */
.cable-viz{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:2rem;
    max-width:300px;
}

.cable-line{
    height:2px;
    background:#64748B;
    border-radius:1px;
    position:relative;
    overflow:hidden;
}

.cable-pulse{
    position:absolute;
    top:0;
    left:-20%;
    width:20%;
    height:100%;
    background:#10B981;
    animation:cablePulse 2s linear infinite;
}

@keyframes cablePulse{
    0%{left:-20%}
    100%{left:100%}
}

/* LED cluster */
.led-cluster{
    display:flex;
    gap:8px;
    margin-top:2rem;
}

.led{
    width:6px;
    height:6px;
    border-radius:50%;
    animation:ledPulse 2s ease-in-out infinite;
}

.led-blue{
    background:#3B82F6;
}

.led-green{
    background:#10B981;
    animation-delay:0.4s;
}

.led-amber{
    background:#F59E0B;
    animation-delay:0.8s;
}

@keyframes ledPulse{
    0%,100%{opacity:0.3}
    50%{opacity:1}
}

/* Terminus */
.terminus{
    padding:6rem clamp(2rem,8vw,8rem);
    position:relative;
    z-index:1;
}

.terminus-domain{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#E8ECF1;
    letter-spacing:0.03em;
}

.terminus-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.85rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#10B981;
    margin-top:0.5rem;
}

/* Responsive */
@media(max-width:768px){
    .floor{
        padding:3rem 1.5rem;
    }
    .floor-riser{
        left:1.5rem;
    }
    .uptime-counter{
        bottom:1rem;
        right:1rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .floor-content{opacity:1;transform:none;transition:none}
    .heartbeat-dot{animation:none;opacity:1}
    .cable-pulse{animation:none}
    .led{animation:none;opacity:0.8}
}