/* undo.systems - Wabi-Sabi Dreamscape */

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

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

body {
    background-color: #EFE7E0;
    color: #2A2420;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.8;
    letter-spacing: 0.02em;
    overflow-x: hidden;
    min-height: 100vh;
}

/* === CANVAS & LAYERS === */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#spiral-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

#spiral-svg {
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

#scroll-container {
    position: relative;
    z-index: 5;
}

/* === TYPOGRAPHY === */
.headline, .concept-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.0rem, 6vw, 5.2rem);
    letter-spacing: 0.12em;
    line-height: 1.1;
}

.gradient-text {
    background: linear-gradient(135deg, #3A2A2A, #6B5A4A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.body-text {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: #4A4A4A;
    opacity: 0.85;
}

.accent-text {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    text-transform: lowercase;
    font-size: clamp(0.85rem, 1.5vw, 1.2rem);
    letter-spacing: 0.15em;
    color: #6B7B8A;
}

/* === TITLE LETTERS === */
.title-letters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(3rem, 10vw, 8rem);
    letter-spacing: 0.12em;
    line-height: 1.1;
}

.letter {
    display: inline-block;
    opacity: 0;
    background: linear-gradient(135deg, #3A2A2A, #6B5A4A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: translateY(20px);
}

.letter.visible {
    opacity: 1;
    transform: translateY(0);
}

.letter.fading {
    opacity: 0.3;
    transform: translateY(-10px);
}

.dot-separator {
    display: inline-block;
    opacity: 0;
    color: #C89A6F;
    -webkit-text-fill-color: #C89A6F;
    transition: opacity 1.2s ease;
    font-size: 0.8em;
}

.dot-separator.visible {
    opacity: 0.7;
}

/* === SCENES === */
.scene {
    position: relative;
    min-height: 150vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vh 8vw;
}

/* === OPENING === */
#opening {
    min-height: 150vh;
    background: linear-gradient(180deg, #EFE7E0 0%, #E8DFD6 60%, #DDD4CA 100%);
}

.opening-field {
    text-align: center;
    position: relative;
    z-index: 10;
}

.opening-subtitle {
    margin-top: 3rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.5s ease 1s, transform 1.5s ease 1s;
}

.opening-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Spiral motifs */
.spiral-motif {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    transition: transform 0.1s linear;
}

.spiral-motif-1 {
    top: 15%;
    right: 10%;
    animation: spiral-drift-1 25s ease-in-out infinite;
}

.spiral-motif-2 {
    bottom: 25%;
    left: 8%;
    animation: spiral-drift-2 30s ease-in-out infinite;
}

.spiral-motif-3 {
    top: 55%;
    right: 25%;
    animation: spiral-drift-3 35s ease-in-out infinite;
}

@keyframes spiral-drift-1 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    25% { transform: rotate(15deg) translate(10px, -15px); }
    50% { transform: rotate(-5deg) translate(-5px, 10px); }
    75% { transform: rotate(8deg) translate(15px, 5px); }
}

@keyframes spiral-drift-2 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    33% { transform: rotate(-12deg) translate(-10px, 8px); }
    66% { transform: rotate(10deg) translate(8px, -12px); }
}

@keyframes spiral-drift-3 {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(20deg) scale(1.05); }
}

/* === PHILOSOPHY === */
#philosophy {
    min-height: 200vh;
    background: linear-gradient(180deg, #DDD4CA 0%, #EFE7E0 30%, #E3DAD1 70%, #EFE7E0 100%);
}

.philosophy-content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    z-index: 10;
}

.text-layer {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    margin-bottom: 4rem;
}

.text-layer.revealed {
    opacity: 1;
    transform: translateY(0);
}

.text-layer-back {
    position: relative;
    z-index: 1;
}

.text-layer-mid {
    position: relative;
    z-index: 2;
    padding-left: 3vw;
}

.text-layer-front {
    position: relative;
    z-index: 3;
    padding-left: 6vw;
}

.philosophy-aside {
    position: absolute;
    right: 5%;
    bottom: 20%;
    text-align: right;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.philosophy-aside.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reversing-arrow {
    margin-bottom: 1rem;
    animation: arrow-morph 8s ease-in-out infinite alternate;
}

@keyframes arrow-morph {
    0% { transform: scaleX(1) rotate(0deg); }
    50% { transform: scaleX(-1) rotate(5deg); }
    100% { transform: scaleX(1) rotate(-3deg); }
}

/* Dissolving shapes */
.dissolving-shape {
    position: absolute;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: 30%;
    left: 5%;
    background: rgba(200, 154, 111, 0.08);
    border: 1px solid rgba(200, 154, 111, 0.12);
    transform: rotate(2deg);
    animation: dissolve-pulse 12s ease-in-out infinite;
}

.shape-2 {
    width: 150px;
    height: 150px;
    bottom: 15%;
    right: 8%;
    background: rgba(107, 123, 138, 0.06);
    border: 1px solid rgba(107, 123, 138, 0.1);
    border-radius: 50%;
    transform: rotate(-3deg);
    animation: dissolve-pulse 15s ease-in-out infinite 3s;
}

@keyframes dissolve-pulse {
    0%, 100% { opacity: 0.6; transform: rotate(2deg) scale(1); }
    30% { opacity: 0.2; transform: rotate(-1deg) scale(0.95); }
    60% { opacity: 0.8; transform: rotate(3deg) scale(1.02); }
}

/* === CONCEPTS === */
#concepts {
    min-height: 200vh;
    padding: 15vh 8vw;
    background: linear-gradient(180deg, #EFE7E0 0%, #D4C9BE 25%, #EFE7E0 50%, #DDD4CA 75%, #EFE7E0 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8vh 6vw;
    align-items: start;
    justify-items: center;
}

.concept-block {
    max-width: 420px;
    padding: 4rem 2.5rem;
    position: relative;
    opacity: 0;
    transform: translateY(60px) rotate(0deg);
    transition: opacity 1s ease, transform 1s ease;
}

.concept-block.revealed {
    opacity: 1;
    transform: translateY(0);
}

.concept-block[data-concept="reversal"] {
    transform: translateY(60px) rotate(-1deg);
}
.concept-block[data-concept="reversal"].revealed {
    transform: translateY(0) rotate(-1deg);
}

.concept-block[data-concept="rediscovery"] {
    transform: translateY(60px) rotate(1.5deg);
    margin-top: 8vh;
}
.concept-block[data-concept="rediscovery"].revealed {
    transform: translateY(0) rotate(1.5deg);
}

.concept-block[data-concept="reflection"] {
    transform: translateY(60px) rotate(0.5deg);
}
.concept-block[data-concept="reflection"].revealed {
    transform: translateY(0) rotate(0.5deg);
}

.concept-block[data-concept="renewal"] {
    transform: translateY(60px) rotate(-2deg);
    margin-top: 5vh;
}
.concept-block[data-concept="renewal"].revealed {
    transform: translateY(0) rotate(-2deg);
}

.concept-spiral {
    margin-bottom: 2rem;
    transition: transform 2s ease;
}

.concept-block.revealed .concept-spiral {
    animation: spiral-tighten 6s ease-in-out infinite alternate;
}

@keyframes spiral-tighten {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0.85) rotate(90deg); }
    100% { transform: scale(1.05) rotate(-30deg); }
}

.concept-title {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    margin-bottom: 1.5rem;
}

.concept-text {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 1.8;
    color: #4A4A4A;
    opacity: 0.85;
}

/* === CLOSING === */
#closing {
    min-height: 150vh;
    background: linear-gradient(180deg, #EFE7E0 0%, #D4C9BE 50%, #EFE7E0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.closing-field {
    position: relative;
    width: 80vw;
    height: 60vh;
}

.scattered-word {
    position: absolute;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.12em;
    line-height: 1;
    background: linear-gradient(135deg, #3A2A2A, #6B5A4A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transition: opacity 1.5s ease, transform 2s ease;
}

.scattered-word.visible {
    opacity: 0.6;
}

.scattered-word[data-drift="1"] {
    top: 10%;
    left: 15%;
    transform: rotate(-2deg);
}

.scattered-word[data-drift="2"] {
    top: 35%;
    right: 20%;
    transform: rotate(1deg);
}

.scattered-word[data-drift="3"] {
    bottom: 30%;
    left: 30%;
    transform: rotate(-1.5deg);
}

.scattered-word[data-drift="4"] {
    bottom: 10%;
    right: 25%;
    transform: rotate(2deg);
}

.final-spiral {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    transition: opacity 2s ease;
    z-index: 1;
}

.final-spiral.dissolving {
    opacity: 0;
}

.closing-fade-text {
    position: relative;
    z-index: 5;
    margin-top: 4rem;
    opacity: 0;
    transition: opacity 3s ease;
}

.closing-fade-text.visible {
    opacity: 0.5;
}

/* === EPHEMERAL NAV === */
#ephemeral-nav {
    position: fixed;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity 0.8s ease;
}

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

.nav-ghost {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    text-decoration: none;
    color: #6B7B8A;
    opacity: 0.2;
    transition: opacity 0.5s ease, color 0.5s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 0.5rem 0;
    border-right: 1px solid transparent;
    transition: opacity 0.5s ease, border-color 0.5s ease;
}

.nav-ghost:hover {
    opacity: 0.8;
    border-right-color: rgba(200, 154, 111, 0.4);
}

.nav-ghost.active {
    opacity: 0.6;
    border-right-color: rgba(200, 154, 111, 0.3);
}

/* === IMPERFECT MARKS === */
#imperfect-marks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.brushstroke {
    position: absolute;
}

.mark-1 {
    top: 20%;
    left: 2%;
    width: 120px;
    transform: rotate(12deg);
    animation: mark-breathe 20s ease-in-out infinite;
}

.mark-2 {
    top: 60%;
    right: 3%;
    width: 100px;
    transform: rotate(-8deg);
    animation: mark-breathe 25s ease-in-out infinite 5s;
}

.mark-3 {
    bottom: 15%;
    left: 40%;
    width: 80px;
    transform: rotate(5deg);
    animation: mark-breathe 18s ease-in-out infinite 10s;
}

@keyframes mark-breathe {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.25; }
}

/* === TRANSPARENT GLOW HALOS === */
.halo {
    position: absolute;
    border-radius: 50%;
    background: rgba(200, 154, 111, 0.15);
    filter: blur(40px);
    pointer-events: none;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    #concepts {
        grid-template-columns: 1fr;
        gap: 4vh 0;
        padding: 10vh 6vw;
    }

    .concept-block {
        padding: 3rem 1.5rem;
    }

    .concept-block[data-concept="rediscovery"],
    .concept-block[data-concept="renewal"] {
        margin-top: 0;
    }

    .title-letters {
        font-size: clamp(2rem, 12vw, 5rem);
    }

    #ephemeral-nav {
        display: none;
    }

    .philosophy-aside {
        position: relative;
        right: auto;
        bottom: auto;
        text-align: center;
        margin-top: 4rem;
    }

    .closing-field {
        width: 90vw;
        height: 50vh;
    }
}

@media (max-width: 480px) {
    .scene {
        padding: 8vh 5vw;
    }

    .text-layer-mid {
        padding-left: 0;
    }

    .text-layer-front {
        padding-left: 0;
    }
}