/* =========================================================
   NEUWERK #12 – HOMEPAGE SYSTEM
   Split / Crack / Editorial Reveal
   ========================================================= */


/* ---------------------------------------------------------
   RESET / BASE
--------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body.home {
    --split-x: 50vw;
    overflow: hidden;
    cursor: none;
    background: black;
    position: relative;
}

/* =========================================
   Cursor when Sidebar is open
========================================= */

body.home.sidebar-open {
    cursor: auto;
}

/* Grüne Linie ausblenden */
body.home.sidebar-open .cursor-line {
    opacity: 0;
}

/* -----------------------------------------
   SIDEBAR GROUP INTERACTION CONTROL
----------------------------------------- */

/* Stage 0 + Stage 1 → nicht klickbar */
body.home .sidebar-group {
    pointer-events: none;
}

/* Stage 2 (Sidebar offen) → klickbar */
body.home.sidebar-open .sidebar-group {
    pointer-events: auto;
}


/* ---------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------- */

h1 {
    color: white;
    font-family: "Timezone", serif;
    font-size: 27.5vw;
    line-height: 0.55;
    font-weight: 300;
    margin: 0;
    letter-spacing: -1.3rem;
}

h3 {
    color: white;
    margin: 0;
    font-weight: 400;
}

.right-article-subheading {
    color: var(--color-black);
}

.editorialtext {
    color: var(--color-black);
}


/* ---------------------------------------------------------
   EDITORIAL (untere Ebene – weiß)
--------------------------------------------------------- */

.editorial {
    position: absolute;
    inset: 0;
    background: white;
    z-index: 1;
}


/* ---------------------------------------------------------
   ORIGINAL HOME CONTENT (wird von JS dupliziert)
--------------------------------------------------------- */

.home-content {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    z-index: 2;
}


/* Layout Elemente */

.cover-title {
    position: absolute;
    bottom: 4.875rem;
    left: 1.375rem;
    width: 100%;
}

.home-layer--bottom .cover-title {
    bottom: 2.875rem;
}

.title-right {
    text-align: right;
    margin-right: 4.075rem;
}

.subtitle-container {
    position: absolute;
    left: 50%;
    top: 1.375rem;
}

.home-layer--bottom .subtitle-container {
    margin-top: 1rem;
}

/* ---------------------------------------------------------
   CURSOR LINE
--------------------------------------------------------- */

.cursor-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 100vh;
    background: var(--color-neon-green);
    z-index: 1000;
    pointer-events: none;
    will-change: transform;
}


/* ---------------------------------------------------------
   CRACK STAGE (von JS erzeugt)
--------------------------------------------------------- */

.home-stage {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}


/* ---------------------------------------------------------
   DUPLICATED LAYERS
--------------------------------------------------------- */

.home-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    will-change: transform, clip-path;
    transition: transform 0.9s cubic-bezier(.7, 0, .2, 1);
}


/* Obere Ebene (links sichtbar) */

.home-layer--top {
    z-index: 20;

    /* nur links von --split-x sichtbar */
    clip-path: inset(0 calc(100vw - var(--split-x)) 0 0);
}


/* Untere Ebene (rechts sichtbar, vertikal versetzt) */

.home-layer--bottom {
    z-index: 15;

    /* Layer 2rem nach oben erweitern */
    top: -2rem;
    height: calc(100vh + 2rem);

    transform: translateY(2rem);

    clip-path: inset(0 0 0 var(--split-x));
}


/* ---------------------------------------------------------
   SPLIT STATE (nach Klick)
--------------------------------------------------------- */

.home-layer {
    transition: transform 0.9s cubic-bezier(.7, 0, .2, 1);
}


/* ---------------------------------------------------------
   OPTIONAL: leichtes visuelles Feedback auf Reststreifen
--------------------------------------------------------- */

/* Hover-Zonen nur im Split-Zustand */

body.home.home-is-split .home-layer--top,
body.home.home-is-split .home-layer--bottom {
    pointer-events: none;
}




.editorial-text {
    background-color: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* für Safari */
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.editorial-content {
    width: calc(50vw - 2.75rem);
    position: absolute;
    right: 2.75rem;
    bottom: 2.5rem;
}

.editorialtype {
    font-family: "Timezone", serif;
    font-size: 2rem;
    line-height: 1;
    font-weight: 300;
    margin: 0;
    color: var(--color-black);
    hyphens: auto;
}

/* -----------------------------------------
   Hover-Zonen für Close-Split
----------------------------------------- */

.split-hover-zone {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 2.75rem;
    z-index: 50;
    pointer-events: none;
}

.split-hover-zone--left {
    left: 0;
}

.split-hover-zone--right {
    right: 0;
}

/* Nur wenn Split offen ist aktivieren */
body.home.home-is-split .split-hover-zone {
    pointer-events: auto;
}

/* Cursor-Wechsel nur über diesen Zonen */
body.home.home-is-split .split-hover-zone:hover {
    cursor: pointer;
}

/* Wenn wir über Close-Zone hovern → Liniencursor ausblenden */
body.home.home-is-split .split-hover-zone:hover~.cursor-line,
body.home.home-is-split .split-hover-zone:hover+.cursor-line {
    opacity: 0;
}

.blurry-layer {
    background-color: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;

    opacity: 0;
    transition: opacity 0.6s cubic-bezier(.7, 0, .2, 1);
    pointer-events: none;
}

body.home.is-editorial-blurred .blurry-layer {
    opacity: 1;
}

/* -----------------------------------------
   LEFT PANELS VISIBILITY CONTROL
----------------------------------------- */

/* Root liegt über allem */
.sidebar-root {
    position: fixed;
    inset: 0;
    z-index: 99999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Sidebar ist offen → interaktiv */
.sidebar-root.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   STAGE 2: Sidebar/TOC is open → kill stage layers
========================================= */

/* Wenn Sidebar offen: Stage & Hover-Zones komplett entwaffnen */
body.home.sidebar-open .home-stage,
body.home.sidebar-open .split-hover-zone {
    pointer-events: none !important;
}

/* Sidebar soll sicher Pointer bekommen */
body.home.sidebar-open .sidebar-root,
body.home.sidebar-open .sidebar-root * {
    pointer-events: auto;
}

body.home .sidebar-right {
    background-color: rgb(255 255 255 / 0.0);
}

/* Mobile */

@media (max-width: 768px) {

    body.home {
        touch-action: none;
    }

    h1 {
        font-size: 27vw;
        letter-spacing: -0.4rem;
    }

    h3 {
        font-size: 2rem;
    }

    .cover-title {
        position: absolute;
        bottom: 6rem;
        left: 1rem;
    }

    .title-right {
        text-align: left;
        margin-left: 12vw;
    }

    .subtitle-container {
        left: 1rem;
        top: 1rem;
    }

    .editorial-content {
        width: calc(100vw - 3rem);
        left: 1.5rem;
        right: auto;
        bottom: 2rem;
    }

    .editorial-text {
        width: 100%;
    }

    .editorialtype {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .home-content,
    .editorial,
    .editorial-text {
        height: 100dvh;
    }

    .home-content {
        position: absolute;
        inset: 0;
        width: 100%;
        background: black;
    }

    .home-layer--top {
        clip-path: inset(0 calc(100% - var(--split-x)) 0 0);
    }

    .home-layer--bottom {
        clip-path: inset(0 0 0 var(--split-x));
    }

    .home-layer--bottom .cover-title {
        bottom: 5rem;
    }

    .home-layer--bottom .subtitle-container {
        top: 0.5rem;
    }

    .split-hover-zone--left {
        left: 0;
    }

    .split-hover-zone {
        width: 1.5rem;
    }

    .split-hover-zone--right {
        left: calc(100% - 1.5rem);
    }

    .sidebar-right {
        display: none;
    }

    .sidebar-group {
        width: 100%;
    }

    .sidebar-view {
        width: 100%;
    }

    .sidebar-tab.is-active {
        right: 0;
        left: 95vw;
        z-index: 20;
    }

    .sidebar-root.is-open {
        height: 100dvh;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Scroll darf auf der gesamten Sidebar stattfinden */
    .sidebar-root.is-open,
    .sidebar-root.is-open * {
        touch-action: pan-y;
    }

    .sidebar-drawer,
    .sidebar-group,
    .sidebar-view {
        width: 100%;
    }

    .sidebar-group {
        min-height: 100%;
    }

    .sidebar-group:not([data-group="Inhalt"]) {
        pointer-events: none;
        display: none;
    }

    .sidebar-root.is-open .sidebar-group[data-group="Inhalt"] {
        pointer-events: auto;
        height: 100vh;
        overflow: hidden;
    }

    .sidebar-view {
        padding: 1rem;
    }

    .sidebar-view.Inhalt .toc-title,
    .sidebar-view.Inhalt .toc-category,
    .sidebar-view.Inhalt .toc-author {
        font-size: 1.7rem;
        line-height: 0.9;
    }

    .toc-check {
        margin-right: 1.5rem;
    }

}