/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #020c1b;
    color: #e0f7fa;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

/* ===== ISOMETRIC GRID UNDERLAY ===== */
#iso-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(
            30deg,
            transparent,
            transparent 58px,
            #00e5ff 58px,
            #00e5ff 59px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 58px,
            #00e5ff 58px,
            #00e5ff 59px
        );
}

/* ===== HUD OVERLAYS ===== */
.hud {
    position: fixed;
    font-family: 'Overpass Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #4a6670;
    z-index: 100;
    pointer-events: none;
}

#hud-top-left {
    top: 16px;
    left: 16px;
}

#hud-top-right {
    top: 16px;
    right: 60px;
}

/* ===== DEPTH INDICATOR ===== */
#depth-indicator {
    position: fixed;
    right: 16px;
    top: 10vh;
    height: 80vh;
    width: 30px;
    z-index: 100;
    pointer-events: none;
}

#depth-track {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(to bottom, #0a3d62, #073b4c, #020c1b);
}

#depth-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff, 0 0 16px rgba(0, 229, 255, 0.3);
    transition: top 0.1s linear;
}

.depth-label {
    position: absolute;
    right: 16px;
    font-family: 'Overpass Mono', monospace;
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a6670;
    transform: translateY(-50%);
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* ===== HERO SECTION ===== */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #020c1b;
}

#noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#noiseFilter);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

#scan-line {
    position: absolute;
    top: 0;
    left: -2px;
    width: 2px;
    height: 100%;
    background: #00e5ff;
    opacity: 0.4;
    z-index: 3;
    animation: scanSweep 6s linear infinite;
}

@keyframes scanSweep {
    0% { left: -2px; }
    100% { left: 100%; }
}

#hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
}

#hero-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 400;
    color: #e0f7fa;
    transform: perspective(800px) rotateX(30deg) rotateZ(-15deg);
    transform-origin: center center;
    text-shadow: 0 0 40px rgba(0, 229, 255, 0.15);
    animation: glitch 10s ease-in-out infinite;
}

@keyframes glitch {
    0%, 90%, 100% {
        text-shadow: 0 0 40px rgba(0, 229, 255, 0.15);
    }
    91% {
        text-shadow: 2px 0 #00e5ff, -2px 0 #7b2ff7;
    }
    92% {
        text-shadow: -2px 0 #00e5ff, 2px 0 #ff6b35;
    }
    93% {
        text-shadow: 0 0 40px rgba(0, 229, 255, 0.15);
    }
}

#hero-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 16px;
    color: #4a6670;
    margin-top: 24px;
    transform: perspective(800px) rotateX(30deg) rotateZ(-15deg);
}

/* ===== UNDERLINE DRAW ===== */
.underline-draw {
    display: inline;
    background-image: linear-gradient(#00e5ff, #00e5ff);
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size 1.5s ease;
}

.underline-draw.active {
    background-size: 100% 1px;
}

/* ===== MASONRY SECTION ===== */
#masonry-zone {
    position: relative;
    padding: 80px 5% 120px;
    min-height: 300vh;
}

#masonry-grid {
    columns: 3;
    column-gap: 24px;
}

@media (max-width: 900px) {
    #masonry-grid {
        columns: 2;
    }
}

@media (max-width: 560px) {
    #masonry-grid {
        columns: 1;
    }
}

.masonry-block {
    break-inside: avoid;
    margin-bottom: 24px;
    padding: 28px 24px 24px;
    position: relative;
    transform: skewY(-3deg);
    border: 1px solid transparent;
    transition: border-color 0.6s ease;
}

.masonry-block:hover {
    border-color: #7b2ff7;
}

.masonry-block p {
    transform: skewY(3deg);
    margin-bottom: 12px;
}

.masonry-block p:last-child {
    margin-bottom: 0;
}

.block-label {
    display: block;
    transform: skewY(3deg);
    font-family: 'Overpass Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #00e5ff;
    margin-bottom: 16px;
}

/* Depth color gradation */
.depth-1 { background: rgba(10, 61, 98, 0.6); }
.depth-2 { background: rgba(7, 59, 76, 0.7); }
.depth-3 { background: rgba(4, 30, 50, 0.8); }
.depth-4 { background: rgba(2, 12, 27, 0.9); }

/* Emphasis text */
.emphasis {
    font-weight: 500;
    color: #00e5ff;
}

/* Thermal vent (orange accent) */
.thermal-vent {
    color: #ff6b35;
}

/* ===== WIREFRAME CUBES ===== */
.cube-anchor {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.cube {
    width: 40px;
    height: 40px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);
    animation: spin 20s linear infinite;
}

.cube-large {
    width: 60px;
    height: 60px;
}

@keyframes spin {
    from { transform: rotateX(-30deg) rotateY(45deg); }
    to { transform: rotateX(-30deg) rotateY(405deg); }
}

.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #00e5ff;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #00e5ff;
}

.cube-face.front  { transform: translateZ(20px); }
.cube-face.back   { transform: translateZ(-20px) rotateY(180deg); }
.cube-face.left   { transform: translateX(-20px) rotateY(-90deg); }
.cube-face.right  { transform: translateX(20px) rotateY(90deg); }
.cube-face.top    { transform: translateY(-20px) rotateX(90deg); }
.cube-face.bottom { transform: translateY(20px) rotateX(-90deg); }

.cube-large .cube-face.front  { transform: translateZ(30px); }
.cube-large .cube-face.back   { transform: translateZ(-30px) rotateY(180deg); }
.cube-large .cube-face.left   { transform: translateX(-30px) rotateY(-90deg); }
.cube-large .cube-face.right  { transform: translateX(30px) rotateY(90deg); }
.cube-large .cube-face.top    { transform: translateY(-30px) rotateX(90deg); }
.cube-large .cube-face.bottom { transform: translateY(30px) rotateX(-90deg); }

/* ===== ABYSSAL REVEAL ===== */
#abyss {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #020c1b;
}

.cube-reveal {
    width: 200px;
    height: 200px;
    perspective: 800px;
    margin-bottom: 48px;
}

.cube-hero {
    width: 200px;
    height: 200px;
    animation: spinSlow 30s linear infinite;
}

@keyframes spinSlow {
    from { transform: rotateX(-30deg) rotateY(0deg); }
    to { transform: rotateX(-30deg) rotateY(360deg); }
}

.cube-hero .cube-face {
    font-size: 18px;
    letter-spacing: 0.1em;
}

.cube-hero .cube-face.front  { transform: translateZ(100px); }
.cube-hero .cube-face.back   { transform: translateZ(-100px) rotateY(180deg); }
.cube-hero .cube-face.left   { transform: translateX(-100px) rotateY(-90deg); }
.cube-hero .cube-face.right  { transform: translateX(100px) rotateY(90deg); }
.cube-hero .cube-face.top    { transform: translateY(-100px) rotateX(90deg); }
.cube-hero .cube-face.bottom { transform: translateY(100px) rotateX(-90deg); }

#abyss-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 14px;
    color: #4a6670;
    text-align: center;
}

/* ===== BIOLUMINESCENT PARTICLES ===== */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: pulse var(--dur) ease-in-out infinite alternate;
    animation-delay: var(--delay);
}

.particle.cyan {
    background: #00e5ff;
    box-shadow: 0 0 10px #00e5ff, 0 0 20px rgba(0, 229, 255, 0.3);
}

.particle.violet {
    background: #7b2ff7;
    box-shadow: 0 0 10px #7b2ff7, 0 0 20px rgba(123, 47, 247, 0.3);
}

@keyframes pulse {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* ===== SONAR PING ===== */
.sonar-ping {
    position: fixed;
    border-radius: 50%;
    border: 1px solid #00e5ff;
    pointer-events: none;
    z-index: 200;
    animation: sonarExpand 1.5s ease-out forwards;
}

@keyframes sonarExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}