/* ============================================
   iggi.dev - Cinematic Moss Documentary
   ============================================ */

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

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

body {
    background: #1A1512;
    color: #D4C4B0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Concrete Grain Overlay --- */
#concrete-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
}

#concrete-grain svg {
    width: 100%;
    height: 100%;
}

/* --- Spore Particles --- */
#spore-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.spore {
    position: absolute;
    border-radius: 50%;
    background: #6B9A52;
    pointer-events: none;
}

/* --- Sidebar: The Wall --- */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    animation: sidebarFadeIn 0.5s ease-out 0.2s forwards;
}

@keyframes sidebarFadeIn {
    to { opacity: 1; }
}

#sidebar-concrete {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4A3F3A;
    z-index: 1;
}

/* Moss layers on sidebar */
.moss-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: clip-path 1.2s ease-out;
}

#moss-layer-1 {
    background: #2D5A27;
    clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
}

#moss-layer-2 {
    background: #4A7A3F;
    clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
    opacity: 0.85;
}

#moss-layer-3 {
    background: #6B9A52;
    clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
    opacity: 0.6;
}

/* Moss bloom on hover */
.moss-bloom {
    position: absolute;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 122, 63, 0.4) 0%, transparent 70%);
    transform: scale(0);
    pointer-events: none;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.moss-bloom.active {
    transform: scale(1);
    opacity: 1;
}

.moss-bloom.fading {
    transform: scale(1);
    opacity: 0;
}

/* Sidebar Navigation */
#sidebar-nav {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    height: 100%;
    justify-content: center;
    gap: 1.8rem;
}

.nav-link {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: #B8A89A;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #3A6B32;
    transition: width 0.6s ease-out;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: #F2E8DC;
}

.nav-link.active {
    color: #F2E8DC;
    font-weight: 700;
}

/* Link accent color */
a {
    color: #9A4A3A;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #F2E8DC;
}

/* --- Mobile Header --- */
#mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #4A3F3A;
    z-index: 200;
    align-items: center;
    padding: 0 1rem;
}

.mobile-title {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: #B8A89A;
    letter-spacing: 0.1em;
}

#mobile-moss-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #2D5A27, #4A7A3F, #6B9A52);
    transition: width 0.3s ease-out;
}

/* --- Main Content --- */
#main-content {
    margin-left: 280px;
    position: relative;
    z-index: 10;
}

/* --- Section Base --- */
.section {
    position: relative;
    padding: clamp(6rem, 12vh, 10rem) 0;
    overflow: hidden;
}

.section--fullscreen {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.section__content {
    position: relative;
    z-index: 5;
    max-width: 720px;
    margin-left: 8%;
    margin-right: auto;
    padding: 0 2rem;
}

.section--closeup .section__content {
    max-width: 560px;
}

.section__content--centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- Typography --- */
.section__title {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: 0.04em;
    color: #F2E8DC;
    margin-bottom: 0.5rem;
}

.section__subtitle {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.04em;
    color: #8A7565;
    margin-bottom: 2rem;
}

p {
    margin-bottom: 1.5em;
    color: #D4C4B0;
}

.pull-quote {
    font-weight: 600;
    font-size: 1.15em;
    color: #F2E8DC;
    border-left: 3px solid #7A2E2E;
    padding-left: 1.5rem;
    margin: 2.5rem 0;
    font-style: italic;
    position: relative;
}

/* --- Opening Section --- */
.opening-title {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(4rem, 8vw, 7rem);
    color: #F2E8DC;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: titleReveal 1.5s ease-out 0.5s forwards;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.opening-subtitle {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.2em;
    color: #B8A89A;
    margin-bottom: 0;
    opacity: 0;
    animation: subtitleReveal 1.2s ease-out 0.8s forwards;
}

@keyframes subtitleReveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --- Background Shapes --- */
.section__bg-shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.opening-shape {
    width: 60vw;
    height: 60vh;
    top: 20%;
    left: 10%;
    background: #7A2E2E;
    opacity: 0.1;
    clip-path: polygon(20% 0%, 100% 15%, 80% 100%, 0% 85%);
    transform: rotate(15deg) scale(1.15);
    filter: blur(2px);
    animation: zoomFocusShape 2.5s ease-out 0.3s forwards;
}

@keyframes zoomFocusShape {
    to {
        transform: rotate(15deg) scale(1);
        filter: blur(0);
    }
}

.shape-spore {
    width: 40vw;
    height: 50vh;
    top: -10%;
    right: -5%;
    background: #7A2E2E;
    opacity: 0.08;
    clip-path: polygon(30% 0%, 100% 20%, 70% 100%, 0% 80%);
    transform: rotate(20deg);
}

.shape-rhizoid {
    width: 50vw;
    height: 60vh;
    top: 5%;
    left: -10%;
    background: #7A2E2E;
    opacity: 0.1;
    clip-path: polygon(0% 10%, 80% 0%, 100% 70%, 20% 100%);
    transform: rotate(-12deg);
}

.shape-rhizoid-2 {
    width: 30vw;
    height: 40vh;
    bottom: 10%;
    right: 5%;
    background: #7A2E2E;
    opacity: 0.06;
    clip-path: polygon(10% 0%, 100% 30%, 90% 100%, 0% 70%);
    transform: rotate(30deg);
}

.shape-colony {
    width: 45vw;
    height: 55vh;
    top: -5%;
    right: -8%;
    background: #7A2E2E;
    opacity: 0.09;
    clip-path: polygon(15% 5%, 95% 0%, 85% 95%, 5% 100%);
    transform: rotate(25deg);
}

.shape-canopy {
    width: 55vw;
    height: 65vh;
    top: 0;
    left: -5%;
    background: #7A2E2E;
    opacity: 0.1;
    clip-path: polygon(5% 0%, 90% 10%, 100% 85%, 10% 100%);
    transform: rotate(-18deg);
}

.shape-canopy-2 {
    width: 35vw;
    height: 45vh;
    bottom: 5%;
    right: 0;
    background: #7A2E2E;
    opacity: 0.07;
    clip-path: polygon(20% 0%, 100% 15%, 80% 100%, 0% 85%);
    transform: rotate(45deg);
}

.closing-shape {
    width: 60vw;
    height: 60vh;
    top: 20%;
    left: 10%;
    background: #7A2E2E;
    opacity: 0.1;
    clip-path: polygon(20% 0%, 100% 15%, 80% 100%, 0% 85%);
    transform: rotate(15deg);
}

.closing-shape-2 {
    width: 40vw;
    height: 50vh;
    bottom: 10%;
    right: 5%;
    background: #7A2E2E;
    opacity: 0.07;
    clip-path: polygon(10% 5%, 90% 0%, 100% 80%, 0% 95%);
    transform: rotate(-20deg);
}

.closing-moss-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 70%, rgba(45, 90, 39, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 40%, rgba(74, 122, 63, 0.1) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 90%, rgba(107, 154, 82, 0.08) 0%, transparent 45%);
    z-index: 2;
    pointer-events: none;
}

/* --- Diagonal Slash Dividers --- */
.diagonal-slash {
    position: absolute;
    top: 0;
    left: -280px;
    width: calc(100% + 280px);
    height: 100px;
    z-index: 3;
    overflow: visible;
    pointer-events: none;
}

.slash-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1.8s ease-out;
}

.slash-line.drawn {
    stroke-dashoffset: 0;
}

.opening-slash {
    top: auto;
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 60%;
}

/* Tectonic hover shift on slashes */
.diagonal-slash.tectonic-shift line {
    transition: transform 0.4s ease-out;
}

/* --- Zoom Focus Animation --- */
.zoom-focus {
    transform: scale(1.08);
    filter: blur(3px);
    opacity: 0.4;
    transition: transform 1.2s ease-out, filter 1.2s ease-out, opacity 1.2s ease-out;
}

.zoom-focus.revealed {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
}

/* --- Closing Section --- */
.section--closing {
    background: #1A1512;
}

.closing-text {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: #B8A89A;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
}

.closing-translation {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: #8A7565;
    letter-spacing: 0.1em;
}

/* Closing reverse zoom */
.section--closing .zoom-focus.revealed.defocus {
    transform: scale(1.03);
    filter: blur(1px);
    transition: transform 4s ease-in, filter 4s ease-in;
}

/* --- Light Section Variant (for potential light backgrounds) --- */
.section--light {
    background: #F2E8DC;
}

.section--light .section__title {
    color: #2A1F1A;
}

.section--light .section__subtitle {
    color: #4A3F3A;
}

.section--light p {
    color: #3A3028;
}

/* --- Code Blocks (if needed) --- */
code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    background: #1E1A16;
    color: #C8B8A4;
    padding: 0.15em 0.4em;
    border-left: 1px solid #7A2E2E;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #sidebar {
        display: none;
    }

    #mobile-header {
        display: flex;
    }

    #main-content {
        margin-left: 0;
        padding-top: 50px;
    }

    .section__content {
        margin-left: auto;
        margin-right: auto;
        padding: 0 1.5rem;
    }

    .diagonal-slash {
        left: 0;
        width: 100%;
    }

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

/* --- Prefers Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .zoom-focus {
        transform: none;
        filter: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .zoom-focus.revealed {
        opacity: 1;
    }

    .opening-shape {
        transform: rotate(15deg) scale(1);
        filter: blur(0);
        animation: none;
    }

    .opening-title,
    .opening-subtitle {
        animation-duration: 0.01s;
        animation-delay: 0s;
    }

    #sidebar {
        animation-duration: 0.01s;
        animation-delay: 0s;
    }

    .moss-layer {
        transition-duration: 0s;
    }

    .spore {
        display: none;
    }
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #1A1512;
}

::-webkit-scrollbar-thumb {
    background: #4A3F3A;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8A7565;
}

/* --- Selection --- */
::selection {
    background: rgba(122, 46, 46, 0.4);
    color: #F2E8DC;
}