/* ===== illustrated live scenes (follow light / dark theme) ===== */
:root{
  --sc-bld1:#b4c6f7;--sc-bld2:#d3dffb;--sc-win:#ffffff;--sc-win-off:#8da6ee;
  --sc-cloud:rgba(255,255,255,.95);--sc-cloud-edge:rgba(65,105,225,.18);
  --sc-sun:#ffc93c;--sc-moon:#e9efff;--sc-moon-dim:#c4d0f5;
  --sc-hill1:#a9dcc3;--sc-hill2:#80c7a5;--sc-hill3:#5aaf8c;--sc-pine:#2f8a6a;
  --sc-white:#ffffff;--sc-ink:#1a36b8;--sc-rock:#7f92c9;--sc-beam:rgba(255,214,90,.55);
  --sc-planet1:#7d98f5;--sc-planet2:#2447d6;--sc-ring:#1a36b8;--sc-sun-glow:rgba(255,201,60,.35);
  --sc-boat:#ffffff;--sc-hull:#2447d6;--sc-bird:#2447d6;--sc-balloon1:#4169e1;--sc-balloon2:#ffffff;
}
html[data-theme="dark"]{
  --sc-bld1:#14224f;--sc-bld2:#0d1a42;--sc-win:#ffd98a;--sc-win-off:#1d2f6a;
  --sc-cloud:rgba(40,58,120,.55);--sc-cloud-edge:rgba(143,169,255,.25);
  --sc-moon:#eef2ff;--sc-moon-dim:#b7c4f0;
  --sc-hill1:#10304a;--sc-hill2:#0b2438;--sc-hill3:#081a2b;--sc-pine:#061320;
  --sc-white:#dfe7ff;--sc-ink:#9db3ff;--sc-rock:#1b2a5c;--sc-beam:rgba(255,230,140,.4);
  --sc-planet1:#9db3ff;--sc-planet2:#3550c8;--sc-ring:#cdd8ff;--sc-sun-glow:rgba(238,242,255,.18);
  --sc-boat:#e8edff;--sc-hull:#4169e1;--sc-bird:#9db3ff;--sc-balloon1:#6f8cff;--sc-balloon2:#d6e0ff;
}
html:not([data-theme="dark"]) .night{display:none}
html[data-theme="dark"] .day{display:none}
.scene *{transform-box:fill-box;transform-origin:center}
.scene .cloud{fill:var(--sc-cloud);animation:driftx 80s linear infinite var(--dl,0s)}
.scene .cloud.slow{animation-duration:120s}
@keyframes driftx{from{transform:translateX(-300px)}to{transform:translateX(1500px)}}
.scene .sunrays{transform-origin:center;animation:spin 40s linear infinite}
.scene .glow{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
.scene .w{fill:var(--sc-win);animation:wink 5s steps(1) infinite var(--dl,0s)}
@keyframes wink{0%{fill:var(--sc-win)}40%{fill:var(--sc-win-off)}60%{fill:var(--sc-win)}85%{fill:var(--sc-win-off)}}

/* hero: city + rocket */
.scene-city .b1{fill:var(--sc-bld1)}
.scene-city .b2{fill:var(--sc-bld2)}
.scene-city .ant{stroke:var(--sc-bld1);stroke-width:3}
.scene-city .beacon{fill:#ff5d7a;animation:blink 1.4s steps(1) infinite var(--dl,0s)}
.rocket-fly{animation:launch 11s cubic-bezier(.5,0,.9,.6) infinite}
@keyframes launch{0%,20%{transform:translateY(0) rotate(0)}22%{transform:translateY(-6px) rotate(.6deg)}24%{transform:translateY(0) rotate(-.6deg)}100%{transform:translateY(-860px) rotate(3deg)}}
.rocket-fly .body{fill:var(--sc-white);stroke:var(--sc-ink);stroke-width:3}
.rocket-fly .fin{fill:var(--sc-ink)}
.rocket-fly .win{fill:#8fb0ff;stroke:var(--sc-ink);stroke-width:3}
.rocket-fly .flame{fill:#ffb02e;transform-origin:50% 0;animation:flame .12s ease-in-out infinite alternate}
.rocket-fly .flame2{fill:#fff2a8;transform-origin:50% 0;animation:flame .1s ease-in-out infinite alternate-reverse}
@keyframes flame{from{transform:scaleY(.7) scaleX(.9)}to{transform:scaleY(1.25) scaleX(1.05)}}
.puff{fill:var(--sc-cloud);stroke:var(--sc-cloud-edge);stroke-width:2;opacity:0;transform-origin:center;animation:puff 11s ease-out infinite var(--dl,0s)}
@keyframes puff{0%,19%{opacity:0;transform:scale(.3) translate(0,0)}22%{opacity:.95}50%{opacity:0;transform:scale(2.8) translate(var(--px,0),-20px)}100%{opacity:0}}

/* services: balloon, birds, turbines */
.scene .hill1{fill:var(--sc-hill1)}.scene .hill2{fill:var(--sc-hill2)}.scene .hill3{fill:var(--sc-hill3)}
.balloon-move{animation:bob 7s ease-in-out infinite}
.balloon-move .env{fill:var(--sc-balloon1)}
.balloon-move .stripe{fill:var(--sc-balloon2)}
.balloon-move .basket{fill:#b27a45}
.balloon-move .rope{stroke:var(--sc-ink);stroke-width:2}
@keyframes bob{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(18px,-36px) rotate(2deg)}}
.birds{animation:fly 26s linear infinite var(--dl,0s)}
.birds path{fill:none;stroke:var(--sc-bird);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:flap .6s ease-in-out infinite alternate var(--fd,0s)}
@keyframes fly{from{transform:translate(-200px,40px)}50%{transform:translate(600px,-30px)}to{transform:translate(1400px,30px)}}
@keyframes flap{from{d:path("M0 0Q10 -12 20 0Q30 -12 40 0")}to{d:path("M0 -8Q10 4 20 0Q30 4 40 -8")}}
.scene .tower{fill:var(--sc-white);stroke:var(--sc-ink);stroke-width:1.5}
.scene .blades{transform-origin:50% 50%;animation:spin var(--sp,6s) linear infinite}
.scene .blades path{fill:var(--sc-white);stroke:var(--sc-ink);stroke-width:1.5}
.scene .hub{fill:var(--sc-ink)}

/* process: sailboat + lighthouse */
.scene .rock{fill:var(--sc-rock)}
.lh-body{fill:var(--sc-white);stroke:var(--sc-ink);stroke-width:3}
.lh-band{fill:#e0457b}
html[data-theme="dark"] .lh-band{fill:#ff6b94}
.lh-lamp{fill:#ffd45a;animation:breathe 2s ease-in-out infinite}
.lh-beam{fill:var(--sc-beam);transform-origin:100% 50%;animation:beam 6s ease-in-out infinite}
@keyframes beam{0%,100%{transform:scaleX(1);opacity:.9}45%{transform:scaleX(.02);opacity:.3}50%{transform:scaleX(-.02);opacity:.3}95%{transform:scaleX(-1);opacity:.9}}
.sail-travel{animation:sail 46s linear infinite}
@keyframes sail{from{transform:translateX(-260px)}to{transform:translateX(1460px)}}
.sail-bob{animation:rock 4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes rock{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.sail-bob .sail{fill:var(--sc-boat);stroke:var(--sc-ink);stroke-width:2.5;stroke-linejoin:round}
.sail-bob .hull{fill:var(--sc-hull)}
.sail-bob .mast{stroke:var(--sc-ink);stroke-width:3}

/* about: planet, satellite, astronaut */
.sp-ring{fill:none;stroke:var(--sc-ring);stroke-width:7;stroke-linecap:round;opacity:.8}
.sp-ring.thin{stroke-width:2.5;opacity:.5}
.sp-planet{stroke:var(--sc-ring);stroke-width:2.5}
.sp-crater{fill:rgba(0,0,40,.14)}
.sp-spin{transform-origin:300px 300px;animation:spin 90s linear infinite}
.sat-body{fill:var(--sc-white);stroke:var(--sc-ink);stroke-width:2}
.sat-panel{fill:var(--sc-planet2);stroke:var(--sc-ink);stroke-width:1.5}
.astro{animation:floatastro 9s ease-in-out infinite;transform-origin:center}
@keyframes floatastro{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(-26px,30px) rotate(14deg)}}
.astro .suit{fill:var(--sc-white);stroke:var(--sc-ink);stroke-width:3;stroke-linejoin:round}
.astro .visor{fill:var(--sc-planet2)}
.astro .shine{fill:#fff;opacity:.7}
.astro .tether{fill:none;stroke:var(--sc-ink);stroke-width:2;stroke-dasharray:4 5;opacity:.7}
.sp-star{fill:var(--sc-ink);animation:twinkle 3s ease-in-out infinite var(--dl,0s)}

/* contact: pines, sunrise, fireflies, seeds */
.scene .sunrise{animation:rise3 20s ease-in-out infinite alternate}
@keyframes rise3{from{transform:translateY(70px)}to{transform:translateY(-70px)}}
.sunrise .core{fill:var(--sc-sun)}
.sunrise .halo{fill:var(--sc-sun-glow)}
html[data-theme="dark"] .sunrise .core{fill:var(--sc-moon)}
.pine{fill:var(--sc-pine);transform-origin:50% 100%;animation:sway 6s ease-in-out infinite var(--dl,0s)}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.fly{fill:#ffe98a;filter:drop-shadow(0 0 6px #ffe98a);animation:firefly 9s ease-in-out infinite var(--dl,0s)}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.1}20%{opacity:1}50%{transform:translate(50px,-40px);opacity:.3}75%{transform:translate(-20px,-70px);opacity:1}}
.seed{fill:none;stroke:var(--sc-ink);stroke-width:1.6;stroke-linecap:round;opacity:.7;animation:seedfloat 16s ease-in-out infinite var(--dl,0s)}
@keyframes seedfloat{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(120px,-260px) rotate(90deg)}100%{transform:translate(260px,-520px) rotate(200deg);opacity:0}}