/* TUDAO V109 — global dark cloud background.
   Uses the supplied image unchanged. Public site only; direct story/reader page is excluded. */

html {
    background: #070707 !important;
}

/* Public TUDAO pages. Keep the paper reader/story background untouched. */
body:not(:has(.ng-story-page)) {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    background: transparent !important;
}

body:not(:has(.ng-story-page))::before,
body:not(:has(.ng-story-page))::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    height: 72vh;
    max-height: 780px;
    pointer-events: none;
    z-index: -1;
    background-image: url('../images/tudao-site-cloud-bg.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: min(100vw, 896px) auto;
    will-change: transform;
}

/* Main mist region near the top. */
body:not(:has(.ng-story-page))::before {
    top: 0;
    opacity: .28;
}

/* A quieter second cloud region at the bottom. */
body:not(:has(.ng-story-page))::after {
    bottom: 0;
    opacity: .22;
    background-position: center bottom;
}

/* Direct story reader keeps its existing selectable paper/image background. */
body:has(.ng-story-page) {
    background-image: inherit;
}

@media (min-width: 900px) {
    body:not(:has(.ng-story-page))::before,
    body:not(:has(.ng-story-page))::after {
        background-size: 896px auto;
        opacity: .24;
    }
    body:not(:has(.ng-story-page))::after {
        opacity: .18;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(:has(.ng-story-page))::before,
    body:not(:has(.ng-story-page))::after {
        will-change: auto;
    }
}