/* The 2D world as a fabric collage. Loaded by index.html only; the paintings themselves are the
   cloth versions in assets/art/fabric/ (tools/fabricize.py), and assets/js/quilt.js sews the sky. */
.fabric .world, .fabric .defs {
  --thread: #6e5539; --thread-shade: #46331f; --thread-light: #efe2c6; --quilt-shadow: rgba(46, 32, 18, .28);
  --sea-far: #57707a; --sea-mid: #475f6b; --sea-near: #394f5c; --sea-deep: #2d424f;
}
[data-theme="dark"].fabric .world, .fabric[data-theme="dark"] .world, .fabric[data-theme="dark"] .defs {
  --thread: #cbb894; --thread-shade: #8a7858; --thread-light: #f6ecd4; --quilt-shadow: rgba(0, 0, 0, .5);
  --sea-far: #253441; --sea-mid: #1e2b37; --sea-near: #18232e; --sea-deep: #121b24;
}

/* the backing: washed burlap by day, dark felt at night; the sky quilt lies on it */
.fabric .sky { background: url(../art/fabric/burlap.webp) 0 0 / 168px repeat, #9c8466; }
.fabric[data-theme="dark"] .sky { background: url(../art/fabric/felt.webp) 0 0 / 168px repeat, #1c222e; }
.quilt { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.quilt-shadow { fill: var(--quilt-shadow); transform: translate(2px, 3px); filter: blur(2px); }
.quilt-weave { opacity: .9; }
.fabric[data-theme="dark"] .quilt-weave { opacity: .7; }
/* the binding is twisted thread: a striped ply, round ends, a shadow where it sits on the cloth */
.quilt-stitch { fill: none; stroke: url(#gTwist); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 3.4; opacity: .9; filter: drop-shadow(.4px .7px .4px rgba(30, 20, 10, .4)); }
.quilt-fringe { fill: none; stroke: var(--thread-light); stroke-width: 1; stroke-linecap: round; opacity: .75; }
.fabric[data-theme="dark"] .quilt-fringe { stroke: #8e9bb0; opacity: .5; }
.quilt-loose { fill: none; stroke: var(--thread-light); stroke-width: 1.1; stroke-linecap: round; opacity: .85; }
.fabric[data-theme="dark"] .quilt-loose { stroke: #a9b3c4; opacity: .55; }

/* the sun and moon lean out past the torn top edge */
.fabric .sun { top: 0; }

/* drawn parts of the scenery get the same weave and are sewn instead of drawn */
.cloth-weave { pointer-events: none; opacity: .9; }
[data-theme="dark"] .cloth-weave { opacity: .6; }
.fabric .ground-edge { stroke: url(#gTwist); stroke-width: 1.5; stroke-dasharray: 5 3.4; stroke-linecap: round; opacity: .85; }
.fabric .paving { stroke: url(#gTwist); stroke-width: .9; stroke-dasharray: 3.6 2.6; stroke-linecap: round; opacity: .55; }

/* station names are satin-stitched letters, outlined and standing a little off the plaque */
.fabric .paint-label text, .fabric .paint-inset-title, .fabric .paint-board-title, .fabric .st-contact .paint-label text {
  fill: url(#gSatinLetters); stroke: #3a2616; stroke-width: .32; paint-order: stroke; filter: url(#gRaisedThread);
}

/* the water is dark cotton appliqué, each swell shading the one behind and sewn along its top; the
   mother-of-pearl along the crests is the highlight, set in a dark seat with a glint on its edge */
.luodian { pointer-events: none; }
.fabric .pond-lacquer { fill: #5f777f; }
.sea-thread { fill: none; stroke: #7f969d; stroke-width: .7; stroke-linecap: round; opacity: .6; }
.sea-shadow { fill: #0d171e; opacity: .42; }
.sea-cloth { stroke: #1f2e37; stroke-width: .4; }
.sea-stitch { fill: none; stroke: #8ea6ad; stroke-width: .7; stroke-dasharray: 3.2 2.4; stroke-linecap: round; opacity: .8; }
.sea-groove { fill: none; stroke: #121c23; stroke-linecap: round; opacity: .85; }
.sea-strip { fill: none; stroke-linecap: round; }
.sea-glint { fill: none; stroke: url(#gSea-glint); stroke-width: .7; stroke-linecap: round; }
.sea-spray { stroke: #4d6570; stroke-width: .35; }
.fabric[data-theme="dark"] .pond-lacquer { fill: #22303c; }
[data-theme="dark"] .sea-thread { stroke: #3b4f5e; }
[data-theme="dark"] .sea-shadow { fill: #000; opacity: .55; }
[data-theme="dark"] .sea-stitch { stroke: #536b78; }
[data-theme="dark"] .sea-strip, [data-theme="dark"] .sea-spray { opacity: .82; }
.fabric .water-line, .fabric .water-light, .fabric .submerged-stems, .fabric .flower-reflection { display: none; }


/* torn paper strips layered under the chapter plaques */
.scroll-paper { fill: #f3ead6; }
.scroll-paper-shadow { fill: rgba(40, 28, 16, .22); filter: blur(1.2px); }
[data-theme="dark"] .scroll-paper { fill: #cdbf9f; }

/* layered cloth: each band of scenery lies on the one behind it and casts a soft shadow on it,
   like the layers of a fabric shadow box (these layers are static, so the shadow is drawn once) */
.fabric .layer-far svg.scene { filter: drop-shadow(0 2px 2px rgba(46, 32, 18, .2)); }
.fabric .layer-mid svg.scene { filter: drop-shadow(0 3px 3px rgba(46, 32, 18, .24)); }
.fabric .layer-near svg.scene { filter: drop-shadow(0 4px 4px rgba(46, 32, 18, .28)); }
.fabric[data-theme="dark"] .layer-far svg.scene { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.fabric[data-theme="dark"] .layer-mid svg.scene { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.fabric[data-theme="dark"] .layer-near svg.scene { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }

/* the far hills and trees are large pieces of cloth and the far buildings are embroidered, so they are
   shown nearly opaque (the tulle mist still lies over their feet) */
.fabric .landscape-wash { opacity: .9; }
.fabric[data-theme="dark"] .landscape-wash { opacity: .78; }
.fabric .vegetation-image { filter: saturate(.8); }
.fabric .bg-arch, .fabric .bg-arch.mid, .fabric .bg-arch.near { opacity: .92; }
.fabric .bg-arch.far-soft { opacity: .82; filter: none; }
.fabric .bg-arch .painted-sprite { filter: saturate(.85); }
.fabric[data-theme="dark"] .bg-arch { opacity: .8; }
.fabric[data-theme="dark"] .vegetation-image { filter: brightness(.42) saturate(.45); }
.fabric[data-theme="dark"] .bg-arch .painted-sprite { filter: brightness(.45) saturate(.6); }

/* the mist is sheer tulle */
.tulle-cloth { fill: var(--w-mist); opacity: .5; }
.tulle-net { opacity: .55; }
.tulle-mesh { fill: none; stroke: #fffaf0; stroke-width: .35; }
.tulle-edge { fill: none; stroke: #fffaf0; stroke-width: 1.2; stroke-dasharray: 1.5 2.5; opacity: .7; }
[data-theme="dark"] .tulle-cloth { opacity: .3; }
[data-theme="dark"] .tulle-mesh, [data-theme="dark"] .tulle-edge { stroke: #9fb0c8; }
[data-theme="dark"] .tulle-net { opacity: .25; }

/* a place lifts a little off the cloth when you point at it, like a piece about to be picked up */
@media (hover: hover) {
  .fabric .layer-ground .st { transition: translate .25s ease, filter .25s ease; }
  .fabric .layer-ground .st:hover { translate: 0 -3px; filter: drop-shadow(0 6px 5px rgba(46, 32, 18, .3)); }
}
@media (prefers-reduced-motion: reduce) { .fabric .layer-ground .st { transition: none; } }