/* a6c.xyz - Surreal Dreamscape */
:root {
    --void: #0c0c1a;
    --deep: #161638;
    --violet: #7B6FDE;
    --pink: #E8507A;
    --teal: #3ED8C3;
    --fog: #C2BFD9;
    --ghost: #F0EEF8;
    --amber: #F5B942;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--void);
    color: var(--fog);
    font-family: 'Instrument Sans', sans-serif;
    overflow-x: hidden;
    position: relative;
}

/* Floating Orbs */
.orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    will-change: transform;
    mix-blend-mode: screen;
}

.orb-1 { width: 16px; height: 16px; background: radial-gradient(circle, var(--violet), transparent); top: 20%; left: 15%; animation: orbFloat 30s ease-in-out infinite; }
.orb-2 { width: 12px; height: 12px; background: radial-gradient(circle, var(--teal), transparent); top: 45%; left: 70%; animation: orbFloat 38s ease-in-out infinite 5s; }
.orb-3 { width: 20px; height: 20px; background: radial-gradient(circle, var(--pink), transparent); top: 65%; left: 30%; animation: orbFloat 42s ease-in-out infinite 12s; }
.orb-4 { width: 10px; height: 10px; background: radial-gradient(circle, var(--amber), transparent); top: 30%; left: 80%; animation: orbFloat 25s ease-in-out infinite 8s; }
.orb-5 { width: 14px; height: 14px; background: radial-gradient(circle, var(--violet), transparent); top: 80%; left: 55%; animation: orbFloat 35s ease-in-out infinite 18s; }

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(30px, -20px); }
    50% { transform: translate(-15px, 25px); }
    75% { transform: translate(20px, 10px); }
}

/* Coordinate Glyphs */
.coord-glyph {
    position: fixed;
    font-family: 'Azeret Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--violet);
    opacity: 0.25;
    pointer-events: none;
    z-index: 5;
}

.cg-1 { top: 12%; left: 8%; transform: rotate(-3deg); }
.cg-2 { top: 35%; right: 5%; transform: rotate(4deg); }
.cg-3 { top: 55%; left: 4%; transform: rotate(-5deg); }
.cg-4 { top: 75%; right: 12%; transform: rotate(2deg); }
.cg-5 { top: 90%; left: 20%; transform: rotate(-2deg); }

/* Nav Glyph */
.nav-glyph {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    cursor: pointer;
    animation: navPulse 3s ease-in-out infinite;
}

@keyframes navPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Radial Menu */
.radial-menu {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 200px;
    height: 200px;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.radial-menu.active {
    opacity: 1;
    pointer-events: all;
}

.radial-node {
    position: absolute;
    font-family: 'Syne', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--violet);
    text-decoration: none;
    top: 50%;
    left: 50%;
    transform: rotate(var(--angle)) translateY(-80px) rotate(calc(-1 * var(--angle)));
}

.radial-node:hover { color: var(--ghost); }

/* Diagonal Bands */
.band {
    position: relative;
    min-height: 100vh;
    padding: 15vh 10vw;
    overflow: hidden;
}

.band-1 {
    background: linear-gradient(165deg, var(--void) 0%, var(--deep) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.band-2 {
    background: linear-gradient(170deg, var(--deep) 0%, var(--void) 50%, rgba(123,111,222,0.08) 100%);
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    margin-top: -8vh;
}

.band-3 {
    background: linear-gradient(160deg, var(--void) 0%, var(--deep) 60%, rgba(232,80,122,0.06) 100%);
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    margin-top: -6vh;
}

.band-4 {
    background: linear-gradient(175deg, var(--deep) 0%, var(--void) 100%);
    clip-path: polygon(0 5%, 100% 0, 100% 93%, 0 100%);
    margin-top: -5vh;
}

.band-5 {
    background: linear-gradient(162deg, var(--void) 0%, rgba(62,216,195,0.05) 50%, var(--deep) 100%);
    clip-path: polygon(0 7%, 100% 0, 100% 95%, 0 100%);
    margin-top: -7vh;
}

.band-6 {
    background: linear-gradient(168deg, var(--deep) 0%, var(--void) 100%);
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    margin-top: -4vh;
}

.band-7 {
    background: linear-gradient(170deg, var(--void) 0%, var(--deep) 100%);
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
    margin-top: -6vh;
    min-height: 80vh;
}

/* Aberration lines at seams */
.band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pink);
    opacity: 0.3;
}

.band::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--teal);
    opacity: 0.25;
}

.band-1::before, .band-1::after { display: none; }

/* Content */
.band-content {
    position: relative;
    z-index: 2;
    max-width: 42ch;
}

.display-text {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(4rem, 12vw, 16rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ghost);
    text-align: center;
}

.section-label {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 5rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ghost);
    margin-bottom: 2rem;
}

.body-text {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.75;
    color: var(--fog);
}

/* Biomorphic SVGs */
.biomorph {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.bm-1 { width: 400px; right: 10%; top: 20%; }
.bm-2 { width: 500px; left: -5%; top: 30%; }
.bm-3 { width: 350px; right: 5%; bottom: 10%; }
.bm-4 { width: 400px; left: 10%; top: 15%; }

/* Blur Reveal */
.blur-reveal {
    filter: blur(12px);
    opacity: 0.3;
    transition: filter 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.blur-reveal.revealed {
    filter: blur(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .band { padding: 10vh 6vw; }
    .band-1 { clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%); }
    .band:not(.band-1) { clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%); margin-top: -3vh; }
}