/* =====================================================================
   Folio template · the work on the plates
   This file belongs to the template's fictional studio (Oriel) and its
   three pieces of work: Lumen (a desk lamp), Marram (a coastal library)
   and Skiff (a ferry app). Replace it with the customer's own work.
   Each piece sets the --w-* colours its drawings use (see the .w-* classes
   in folio.css) for the frame's light and dark mode.
   ===================================================================== */

/* ---- Lumen: warm paper, graphite ink, copper ---- */
.work-lumen { --w-bg: #f4f1ec; --w-surf: #ffffff; --w-soft: #e9e3d9; --w-ink: #1b1a18; --w-mute: #6f6a63; --w-line: #d9d2c6; --w-acc: #b4612a; --w-acc2: #f5b66b; --w-chrome: #ebe7e0; --w-chrome-line: #dcd6cc; --finish: #2a2b2f; --level: 0.8; }
.work-lumen[data-mode="dark"] { --w-bg: #131211; --w-surf: #1c1a18; --w-soft: #201e1b; --w-ink: #f2ede4; --w-mute: #a29b90; --w-line: #33302b; --w-acc: #e3925a; --w-acc2: #ffc77f; --w-chrome: #1a1917; --w-chrome-line: #26231f; }
.lm-arm { stroke: var(--finish); stroke-linecap: round; fill: none; }
.lm-arm-edge { stroke: color-mix(in srgb, var(--finish) 72%, #000); stroke-linecap: round; fill: none; }
.lm-fin { fill: var(--finish); }
.lm-fin-edge { fill: color-mix(in srgb, var(--finish) 72%, #000); }
.lm-beam, .lm-pool, .lm-amb, .lm-bulb { opacity: calc(var(--level) * var(--o, 1)); transition: opacity 0.3s; }
.lm-ring { transition: transform 0.45s var(--spring); }

/* ---- Marram: limewash, charcoal, sea and spotted gum ---- */
.work-marram { --w-bg: #f3f2ee; --w-surf: #ffffff; --w-soft: #e6e3db; --w-ink: #1d2124; --w-mute: #61676b; --w-line: #cdc9bf; --w-acc: #2c6873; --w-acc2: #b9844f; --w-chrome: #e9e8e3; --w-chrome-line: #dad8d1; --sky-a: #f4c79b; --sky-b: #f6e6d2; --dusk: 0.55; --shade: 34px; }
.work-marram[data-mode="dark"] { --w-bg: #0f1315; --w-surf: #161b1e; --w-soft: #1b2124; --w-ink: #e7ebea; --w-mute: #93a09f; --w-line: #33403f; --w-acc: #6fbcc6; --w-acc2: #e0a468; --w-chrome: #161b1d; --w-chrome-line: #20272a; }
.mr-sky-a { stop-color: var(--sky-a); transition: stop-color 0.3s; }
.mr-sky-b { stop-color: var(--sky-b); transition: stop-color 0.3s; }
.mr-glow { opacity: var(--dusk); }
.mr-here { transform-box: fill-box; transform-origin: center; }
.stage.is-live .mr-here { animation: here 2.2s var(--ease) infinite; }
@keyframes here { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---- Skiff: harbour night, aqua, buoy yellow, signal coral ---- */
.work-skiff { --w-bg: #eaf0f7; --w-surf: #ffffff; --w-soft: #d8e1ec; --w-ink: #0d1530; --w-mute: #4f5b78; --w-line: #c3cede; --w-acc: #00917e; --w-acc2: #c98a00; --w-acc3: #e0442f; --w-chrome: #e3e9f1; --w-chrome-line: #d3dbe6; --w-on-acc: #ffffff; }
.work-skiff[data-mode="dark"] { --w-bg: #0a0f22; --w-surf: #131a35; --w-soft: #19214a; --w-ink: #eef1fb; --w-mute: #93a0c4; --w-line: #26305a; --w-acc: #2de0c4; --w-acc2: #ffcf4a; --w-acc3: #ff6b5a; --w-chrome: #10162d; --w-chrome-line: #1b2244; --w-on-acc: #08122a; }
.w-acc3 { fill: var(--w-acc3); } .ws-acc3 { stroke: var(--w-acc3); fill: none; }
.sk-route { transition: opacity 0.35s; }
.work-skiff[data-route="f1"] .sk-route:not(.r-f1), .work-skiff[data-route="f2"] .sk-route:not(.r-f2), .work-skiff[data-route="f3"] .sk-route:not(.r-f3) { opacity: 0.18; }
.sk-strip-boat { transform-box: fill-box; }
.stage.is-live .sk-strip-boat { animation: strip 9s linear infinite; }
@keyframes strip { from { transform: translateX(0); } to { transform: translateX(250px); } }
.work-lumen[data-mode="dark"] .lm-arm-edge { stroke: color-mix(in srgb, var(--finish) 55%, #fff); }
.work-lumen[data-mode="dark"] .lm-fin-edge { fill: color-mix(in srgb, var(--finish) 55%, #fff); }