/* ============================================
   gabs.day — Wabi-sabi meditation on value
   ============================================ */

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

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

body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 2.0;
    letter-spacing: 0.03em;
    color: #3D3428;
    background-color: #F4EDE3;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Clay Texture Overlay --- */
.clay-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
}

/* --- Scroll Progress Indicator --- */
#scroll-progress {
    position: fixed;
    top: 0;
    right: 12px;
    width: 1px;
    height: 0%;
    background-color: #C8A87D;
    z-index: 999;
    transition: height 0.1s linear;
}

/* --- Crack SVG Networks --- */
.crack-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
}

.crack-svg path {
    fill: none;
    stroke: #A89882;
    stroke-width: 0.5;
    stroke-linecap: round;
}

.gold-cracks {
    opacity: 0;
    transition: opacity 2s ease;
}

.gold-cracks path {
    stroke: #C8A87D;
    stroke-width: 1.5;
    stroke-opacity: 0.8;
}

/* --- Dust Motes --- */
#dust-motes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.dust-mote {
    position: absolute;
    border-radius: 50%;
    background-color: #C8A87D;
    pointer-events: none;
}

/* --- Sections --- */
.section {
    position: relative;
    width: 100%;
}

/* --- DAWN THRESHOLD (0-100vh) --- */
.section-dawn {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #F4EDE3;
}

.dawn-content {
    position: relative;
    padding-left: 12vw;
    padding-top: 28vh;
}

.hero-character {
    position: relative;
    opacity: 0;
    transition: opacity 2000ms ease;
}

.hero-character.visible {
    opacity: 1;
}

.char-texture-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.char-text {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: clamp(8rem, 20vw, 16rem);
    letter-spacing: 0.02em;
    color: transparent;
    background: linear-gradient(135deg, #8BA99B 0%, #7a9a8c 30%, #9bb5a7 50%, #8BA99B 70%, #6d8f7f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    display: inline-block;
    position: relative;
    line-height: 1.1;
}

.definition {
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #A89882;
    margin-top: 2rem;
    opacity: 0;
    transition: opacity 1200ms ease;
}

.definition.visible {
    opacity: 1;
}

/* --- MORNING FRAGMENTS (100vh-300vh) --- */
.section-morning {
    height: 200vh;
    position: relative;
    background-color: #F4EDE3;
}

.shard-wrapper {
    position: absolute;
    width: clamp(280px, 35vw, 500px);
}

.shard-pos-1 {
    left: 15%;
    top: 10%;
}

.shard-pos-2 {
    left: 45%;
    top: 40%;
}

.shard-pos-3 {
    left: 70%;
    top: 72%;
}

/* Shard shapes: irregular ceramic fragment polygons */
.shard {
    opacity: 0;
    transition: opacity 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
}

.shard.visible {
    opacity: 1;
}

.shard-1 {
    clip-path: polygon(3% 5%, 95% 0%, 100% 8%, 97% 92%, 88% 100%, 5% 96%, 0% 88%, 2% 12%);
}

.shard-2 {
    clip-path: polygon(5% 2%, 92% 0%, 100% 10%, 98% 95%, 90% 100%, 2% 97%, 0% 85%, 4% 8%);
}

.shard-3 {
    clip-path: polygon(2% 6%, 96% 3%, 100% 12%, 95% 90%, 85% 100%, 8% 98%, 0% 90%, 3% 10%);
}

.shard-content {
    position: relative;
    padding: clamp(2rem, 4vw, 4rem);
    background-color: rgba(244, 237, 227, 0.6);
    border: 1px solid rgba(168, 152, 130, 0.3);
    box-shadow: inset 0 0 40px rgba(61, 52, 40, 0.04);
}

.shard:hover .shard-content {
    border-color: #D4A08A;
}

.shard-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 2.0;
    letter-spacing: 0.03em;
    color: #3D3428;
}

.shard-caption {
    display: block;
    margin-top: 1.5rem;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #A89882;
}

/* --- AFTERNOON STILLNESS (300vh-500vh) --- */
.section-afternoon {
    height: 200vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F4EDE3;
    padding: 0 20vw;
}

.afternoon-text-block {
    opacity: 0;
    transition: opacity 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
    max-width: 600px;
    width: 100%;
}

.afternoon-text-block.visible {
    opacity: 1;
}

.afternoon-text-block:first-child {
    margin-top: 20vh;
}

.afternoon-block-2 {
    margin-top: 40vh;
}

.afternoon-block-3 {
    margin-top: 40vh;
}

.afternoon-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 2.0;
    letter-spacing: 0.03em;
    color: #3D3428;
}

/* --- Afternoon Crack Separators --- */
.afternoon-crack-line {
    width: 100%;
    height: 1px;
    margin: 8vh 0;
    position: relative;
}

.afternoon-crack-line svg {
    width: 100%;
    height: 20px;
    overflow: visible;
}

.afternoon-crack-line path {
    fill: none;
    stroke: #C8A87D;
    stroke-width: 0.5;
    stroke-opacity: 0.3;
}

/* --- DUSK GATHERING (500vh-700vh) --- */
.section-dusk {
    height: 200vh;
    position: relative;
    background-color: #F4EDE3;
    transition: background-color 0.05s linear;
}

.shard-pos-1-dusk {
    left: 17%;
    top: 10%;
}

.shard-pos-2-dusk {
    left: 43%;
    top: 40%;
}

.shard-pos-3-dusk {
    left: 68%;
    top: 72%;
}

/* Kintsugi shards: slightly shifted clip-paths, gold borders */
.kintsugi-shard {
    opacity: 0;
    transition: opacity 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.kintsugi-shard.visible {
    opacity: 1;
}

.shard-1-dusk {
    clip-path: polygon(5% 3%, 93% 2%, 100% 10%, 96% 94%, 86% 100%, 3% 95%, 0% 86%, 4% 10%);
}

.shard-2-dusk {
    clip-path: polygon(3% 4%, 94% 1%, 100% 12%, 97% 93%, 88% 100%, 4% 96%, 0% 83%, 6% 6%);
}

.shard-3-dusk {
    clip-path: polygon(4% 4%, 94% 5%, 100% 14%, 93% 92%, 83% 100%, 6% 97%, 0% 88%, 5% 8%);
}

.kintsugi-shard .shard-content {
    background-color: rgba(42, 37, 32, 0.7);
    border: 1px solid rgba(200, 168, 125, 0.6);
    box-shadow: inset 0 0 40px rgba(200, 168, 125, 0.08);
}

.kintsugi-shard .shard-text {
    color: #E8DFD0;
}

.kintsugi-shard .shard-caption {
    color: #C8A87D;
}

.kintsugi-shard:hover .shard-content {
    border-color: #D4A08A;
}

.kintsugi-shard .shard-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background-color: #FBF7F0;
    opacity: 0.15;
}

/* --- NIGHT DISSOLUTION (700vh-800vh) --- */
.section-night {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2A2520;
    position: relative;
}

.night-content {
    text-align: center;
}

.night-character {
    opacity: 0;
    transition: opacity 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
}

.night-character.visible {
    opacity: 1;
}

.char-text-night {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: clamp(8rem, 20vw, 16rem);
    letter-spacing: 0.02em;
    color: #C8A87D;
    display: inline-block;
    line-height: 1.1;
    text-shadow: 0 0 60px rgba(200, 168, 125, 0.15);
}

.night-separator {
    width: 40%;
    height: 1px;
    background-color: #FBF7F0;
    opacity: 0.1;
    margin: 0 auto;
}

/* --- Night Dust Particles --- */
.night-particle {
    position: absolute;
    border-radius: 50%;
    background-color: #C8A87D;
    pointer-events: none;
    animation: float-up linear forwards;
}

@keyframes float-up {
    0% {
        opacity: 0.12;
        transform: translateY(0) translateX(0);
    }
    20% {
        opacity: 0.1;
    }
    80% {
        opacity: 0.05;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) translateX(var(--drift-x, 20px));
    }
}

/* --- Dawn Dust Motes Animation --- */
@keyframes mote-drift {
    0% {
        opacity: var(--mote-opacity, 0.08);
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(calc(-50vh)) translateX(var(--mote-drift, 15px));
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) translateX(var(--mote-drift-end, -10px));
    }
}

/* --- SVG Crack Stroke Animation --- */
@keyframes crack-draw {
    from {
        stroke-dashoffset: var(--crack-length, 500);
    }
    to {
        stroke-dashoffset: 0;
    }
}

.crack-svg path {
    stroke-dasharray: var(--crack-length, 500);
    stroke-dashoffset: var(--crack-length, 500);
}

.crack-svg path.drawn {
    animation: crack-draw 2s ease forwards;
}

/* --- Gold Crack Glow Filter --- */
#gold-network {
    filter: url(#goldGlow);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .section-afternoon {
        padding: 0 8vw;
    }

    .shard-wrapper {
        width: clamp(240px, 75vw, 400px);
    }

    .shard-pos-1 {
        left: 5%;
    }

    .shard-pos-2 {
        left: 15%;
    }

    .shard-pos-3 {
        left: 8%;
    }

    .shard-pos-1-dusk {
        left: 8%;
    }

    .shard-pos-2-dusk {
        left: 12%;
    }

    .shard-pos-3-dusk {
        left: 5%;
    }

    .dawn-content {
        padding-left: 8vw;
    }
}

@media (max-width: 480px) {
    .section-afternoon {
        padding: 0 5vw;
    }

    .shard-wrapper {
        width: clamp(200px, 85vw, 350px);
    }

    .dawn-content {
        padding-left: 5vw;
    }
}