/* ============================================
   chloe.cx - Neon Zazen
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Palette - Dark Neon */
    --void: #0A0A14;
    --obsidian-wash: #111126;
    --electric-sakura: #FF2D78;
    --cyan-meditation: #00E5CC;
    --ultraviolet-haze: #7B2FFF;
    --mist: #9B9BB0;
    --moonstone: #E0E0F0;
    --deep-indigo: #1A1A3E;

    /* Typography */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Karla', sans-serif;

    /* Easing */
    --ease-arrive: cubic-bezier(0.23, 1.0, 0.32, 1.0);
    --ease-depart: cubic-bezier(0.55, 0.0, 0.1, 1.0);

    /* Timing */
    --breath-cycle: 10s;
    --particle-speed: 40s;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--void);
    color: var(--mist);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Lens Flares
   ============================================ */
#flares-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.lens-flare {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.flare-1 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 45, 120, 0.12) 0%, rgba(123, 47, 255, 0.06) 40%, transparent 70%);
    filter: blur(60px);
    top: 20%;
    left: 15%;
    animation: orbit1 35s ease-in-out infinite;
    opacity: 0.1;
}

.flare-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 229, 204, 0.1) 0%, rgba(123, 47, 255, 0.05) 45%, transparent 70%);
    filter: blur(50px);
    top: 50%;
    left: 60%;
    animation: orbit2 28s ease-in-out infinite;
    opacity: 0.08;
}

.flare-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.1) 0%, rgba(255, 45, 120, 0.04) 50%, transparent 70%);
    filter: blur(80px);
    top: 70%;
    left: 30%;
    animation: orbit3 42s ease-in-out infinite;
    opacity: 0.08;
}

.flare-4 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 45, 120, 0.15) 0%, rgba(26, 26, 62, 0.08) 50%, transparent 70%);
    filter: blur(40px);
    top: 35%;
    left: 75%;
    animation: orbit4 25s ease-in-out infinite;
    opacity: 0.1;
}

.flare-5 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 229, 204, 0.08) 0%, rgba(123, 47, 255, 0.04) 40%, transparent 70%);
    filter: blur(70px);
    top: 85%;
    left: 50%;
    animation: orbit5 38s ease-in-out infinite;
    opacity: 0.06;
}

@keyframes orbit1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(80px, -60px); }
    50% { transform: translate(150px, 30px); }
    75% { transform: translate(40px, 80px); }
}

@keyframes orbit2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-100px, 50px); }
    50% { transform: translate(-60px, -80px); }
    75% { transform: translate(70px, -40px); }
}

@keyframes orbit3 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(60px, 90px); }
    50% { transform: translate(-80px, 50px); }
    75% { transform: translate(-40px, -60px); }
}

@keyframes orbit4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-50px, -70px); }
    50% { transform: translate(30px, -100px); }
    75% { transform: translate(80px, 20px); }
}

@keyframes orbit5 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(70px, -50px); }
    50% { transform: translate(-90px, -30px); }
    75% { transform: translate(-40px, 60px); }
}

/* ============================================
   Floating Particles
   ============================================ */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particle {
    position: absolute;
    background-color: var(--moonstone);
    will-change: transform;
    pointer-events: none;
}

.particle--circle {
    border-radius: 50%;
}

.particle--line {
    border-radius: 1px;
}

.particle--hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) translateX(0px);
        opacity: 0;
    }
    5% {
        opacity: var(--particle-opacity, 0.2);
    }
    95% {
        opacity: var(--particle-opacity, 0.2);
    }
    100% {
        transform: translateY(-100px) translateX(var(--drift-x, 20px));
        opacity: 0;
    }
}

/* ============================================
   Progressive Disclosure Navigation
   ============================================ */
#nav-dots {
    position: fixed;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.8s var(--ease-arrive);
}

#nav-dots.visible {
    opacity: 1;
}

#nav-dots.expanded .nav-dot-wrapper {
    opacity: 1;
    transform: translateX(0);
}

#nav-dots.expanded .nav-label {
    opacity: 0.6;
}

.nav-dot-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.5s var(--ease-arrive), transform 0.5s var(--ease-arrive);
}

.nav-dot-wrapper:first-child {
    opacity: 1;
    transform: translateX(0);
}

.nav-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--mist);
    letter-spacing: 0.15em;
    text-transform: lowercase;
    opacity: 0;
    transition: opacity 0.4s var(--ease-arrive);
    white-space: nowrap;
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mist);
    opacity: 0.3;
    transition: opacity 0.4s var(--ease-arrive), background-color 0.4s var(--ease-arrive), box-shadow 0.4s var(--ease-arrive);
    flex-shrink: 0;
}

.nav-dot.active {
    opacity: 0.8;
    background-color: var(--electric-sakura);
    box-shadow: 0 0 12px rgba(255, 45, 120, 0.4);
}

.nav-dot-wrapper:hover .nav-dot {
    opacity: 0.7;
}

/* ============================================
   Scenes
   ============================================ */
.scene {
    position: relative;
    width: 100%;
    z-index: 5;
}

/* ---- THE VOID ---- */
#the-void {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--void);
    position: relative;
    overflow: hidden;
}

.void-center-flare {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 45, 120, 0.2) 0%, rgba(123, 47, 255, 0.08) 40%, transparent 70%);
    filter: blur(50px);
    opacity: 0;
    transition: opacity 1.5s var(--ease-arrive);
    pointer-events: none;
}

.void-center-flare.visible {
    opacity: 1;
}

#hero-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: 0.25em;
    color: var(--moonstone);
    text-shadow: 0 0 30px rgba(255, 45, 120, 0.3), 0 0 60px rgba(255, 45, 120, 0.1);
    position: relative;
    z-index: 10;
}

/* ---- Kinetic Text ---- */
.kinetic-char {
    display: inline-block;
    opacity: 0;
    transition: opacity 600ms var(--ease-arrive), transform 600ms var(--ease-arrive);
}

.kinetic-char.resolved {
    opacity: 1;
    transform: translate(0, 0) !important;
}

.kinetic-char.micro-drift {
    animation: microDrift var(--drift-duration, 8s) ease-in-out infinite;
    animation-delay: var(--drift-delay, 0s);
}

@keyframes microDrift {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(var(--drift-x1, 0.5px), var(--drift-y1, -0.3px)); }
    50% { transform: translate(var(--drift-x2, -0.3px), var(--drift-y2, 0.5px)); }
    75% { transform: translate(var(--drift-x3, 0.4px), var(--drift-y3, 0.2px)); }
}

/* ---- Section Headings ---- */
.section-heading {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    letter-spacing: 0.25em;
    color: var(--moonstone);
    margin-bottom: 2rem;
    text-transform: lowercase;
}

/* ---- Breathing Gutters ---- */
.breathing-gutter {
    width: 100%;
    height: 25vh;
    position: relative;
    z-index: 5;
}

.gutter-1 { animation: breathe 10s ease-in-out infinite; }
.gutter-2 { animation: breathe 12s ease-in-out infinite 2s; }
.gutter-3 { animation: breathe 9s ease-in-out infinite 4s; }
.gutter-4 { animation: breathe 11s ease-in-out infinite 1s; }
.gutter-5 { animation: breathe 8s ease-in-out infinite 3s; }

@keyframes breathe {
    0%, 100% { height: 15vh; }
    50% { height: 40vh; }
}

/* ---- Drift Panels ---- */
.drift-panel {
    background: radial-gradient(ellipse at center, var(--deep-indigo) 0%, var(--obsidian-wash) 60%, transparent 100%);
    padding: clamp(2rem, 4vw, 4rem);
    max-width: 600px;
    position: relative;
    will-change: transform;
    transition: transform 0.1s linear;
}

/* FIRST BREATH panel */
.panel-first-breath {
    margin-left: 15vw;
    transform: rotate(0.5deg);
}

/* RESONANCE panels */
.panel-resonance-a {
    margin-left: 50vw;
    margin-top: 5vh;
    transform: rotate(-0.4deg);
    max-width: 480px;
}

.panel-resonance-b {
    margin-left: 10vw;
    margin-top: 8vh;
    transform: rotate(0.8deg);
    max-width: 500px;
}

/* RETURN panel */
.panel-return {
    margin: 0 auto;
    max-width: 700px;
    transform: rotate(-0.2deg);
}

/* ---- Progressive Text ---- */
.progressive-text .reveal-paragraph {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s var(--ease-arrive), transform 0.8s var(--ease-arrive);
    margin-bottom: 1.5rem;
}

.progressive-text .reveal-paragraph.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- STILLNESS ---- */
#stillness {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stillness-text {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--mist);
    opacity: 0.5;
    letter-spacing: 0.2em;
    text-align: center;
}

/* ---- THE VOID RETURNS ---- */
#void-returns {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--void);
}

#closing-text {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.25em;
    color: var(--mist);
    opacity: 0.4;
}

/* ============================================
   Decorative Trace Lines
   ============================================ */
.trace-line {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.trace-path {
    stroke: var(--cyan-meditation);
    stroke-width: 1;
    opacity: 0.2;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 2s var(--ease-arrive);
}

.trace-line.animated .trace-path {
    stroke-dashoffset: 0;
}

.trace-dot {
    fill: var(--cyan-meditation);
    opacity: 0;
    transition: opacity 0.5s var(--ease-arrive) 1.8s;
}

.trace-line.animated .trace-dot {
    opacity: 0.4;
    animation: pulseDot 3s ease-in-out infinite 2s;
}

@keyframes pulseDot {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.trace-right {
    top: 50%;
    right: -200px;
    width: 200px;
    height: 2px;
}

.trace-top {
    top: -100px;
    left: 50%;
    width: 2px;
    height: 100px;
}

.trace-bottom {
    bottom: -100px;
    left: 50%;
    width: 2px;
    height: 100px;
}

.trace-left {
    top: 50%;
    left: -200px;
    width: 200px;
    height: 2px;
}

.trace-right-return {
    top: 50%;
    right: -200px;
    width: 200px;
    height: 2px;
}

/* ============================================
   Flare Scroll Interaction (brightness pulse)
   ============================================ */
.lens-flare.brightened {
    transition: opacity 1.5s var(--ease-arrive);
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .kinetic-char {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .lens-flare {
        animation: none !important;
    }

    .particle {
        animation: none !important;
        display: none;
    }

    .breathing-gutter {
        animation: none !important;
        height: 20vh !important;
    }

    .void-center-flare {
        opacity: 0.6 !important;
        transition: none !important;
    }

    .progressive-text .reveal-paragraph {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .trace-path {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }

    .trace-dot {
        opacity: 0.4 !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .panel-first-breath {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .panel-resonance-a {
        margin-left: 8vw;
        margin-right: 5vw;
    }

    .panel-resonance-b {
        margin-left: 5vw;
        margin-right: 8vw;
    }

    .panel-return {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .drift-panel {
        max-width: calc(100% - 10vw);
    }

    #nav-dots {
        right: 12px;
    }

    .trace-right,
    .trace-left,
    .trace-right-return {
        display: none;
    }
}