/* Background scene (markup: scene.svg.inc, pulled into .backdrop by SSI).
   Shared shapes in .scene-defs, reusable anywhere on the page with <use href="#id">:
     #tower #rotor #tp #cloud #pv (#pv-face = the PV table face path alone, for clipPaths).
   #rotor is painted with currentColor plus an optional edge (--rotor-edge, default none; --rotor-edge-w, default 1.2), so an icon is
     <svg viewBox="-130 -130 260 260" class="icon"><use href="#rotor"/></svg>   with e.g. .icon { color: var(--accent) }; below ~32px also --rotor-edge: currentColor; --rotor-edge-w: 6 (thicker blades) */
/* Every scene colour keeps >= 4.5:1 against --ink: text may sit on any part of the picture.
   Animation lives only in the prefers-reduced-motion: no-preference block; the static scene is complete without it. */

:root {
  --sky-top: #cfe8f7;
  --sky-bottom: #fdf0e3;
  --sun: #ffd98a;
  --cloud: #ffffff;
  --hill: #cfe3c4;
  --grass: #b6dba4;
  --sand: #f1e4c8;
  --pv: #8fa9d6;
  --sea-light: #bfe6ee;
  --sea-dark: #7cc3d4;
  --vessel: #f4a594;
  --ink: #1f3247;
  --accent: #1d6f73;
  /* scene-only */
  --steel: #dfe6ed;
  --steel-line: #c3ced8;
  --tp: #ffd46e;
  --tp-shade: #f5c04f;
}

body { margin: 0; }

/* the scene is the fixed page background: sky gradient, landscape along the bottom of the screen */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 75%);
}
/* past the hero (main.js sets .is-soft) the scene fades back behind the panels */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / .45);
  opacity: 0;
  transition: opacity .8s ease;
}
.backdrop.is-soft::after { opacity: 1; }
/* the blur re-renders the animated scene every frame: desktops only, phones get the veil alone */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .backdrop .scene { transition: filter .8s ease; }
  .backdrop.is-soft .scene { filter: blur(2px) saturate(.85); }
}

/* never display:none: <use> needs the referenced shapes rendered */
.scene-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: #fff;               /* rotor blades */
  --rotor-edge: #b9c8d4;
}

/* shared shapes */
.rotor-shape { fill: currentColor; stroke: var(--rotor-edge, none); stroke-width: var(--rotor-edge-w, 1.2); stroke-linejoin: round; }
.tw { fill: #fff; }
.tw-s { fill: var(--steel); }
.tp { fill: var(--tp); }
.tp-s { fill: var(--tp-shade); }
.deck { fill: #e8edf1; }
.rail, .mast { fill: none; stroke: var(--steel-line); stroke-width: 1.2; stroke-linecap: round; }
.cloud-shape { fill: var(--cloud); }
.pv { fill: var(--pv); }
.pv-l { fill: none; stroke: #b8c9e6; stroke-width: .8; }
.pv-top { fill: none; stroke: #dbe5f3; stroke-width: .9; }
.pv-leg { fill: none; stroke: var(--steel-line); stroke-width: 1.6; }
.pv-sh { fill: #a4cf91; }
.trunk { fill: #dcc8a8; }
.tree { fill: #a8d293; }
.tree-h { fill: #c0e2ad; }

/* gradients */
.sea0 { stop-color: #e6f4f2; }
.sea1 { stop-color: var(--sea-light); }
.sea2 { stop-color: #a9d9e4; }
.ha0 { stop-color: var(--sun); stop-opacity: .5; }
.ha1 { stop-color: var(--sun); stop-opacity: 0; }
.gl0 { stop-color: #fff; stop-opacity: 0; }
.gl1 { stop-color: #fff; stop-opacity: .7; }
.l2a { stop-color: var(--hill); }
.l2b { stop-color: var(--grass); }
.l3a { stop-color: var(--grass); }
.l3b { stop-color: #a4cf90; }

/* sky and sea */
.sun { fill: var(--sun); }
.glow { fill: none; stroke: #fff6dc; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.wave-a { fill: #b4e0e9; stroke: #d0ecf1; stroke-width: 1.2; }
.wave-b { fill: #9fd4e0; stroke: #bde5ed; stroke-width: 1.5; }
.sea-c { fill: var(--sea-dark); }
.foam-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 26 134; stroke-dashoffset: -27; opacity: .75; }
.foam { fill: #fff; opacity: .6; }
.far { opacity: .6; }
.mid { opacity: .92; }
.ridge { opacity: .9; }
.leg { fill: none; stroke: var(--tp-shade); stroke-width: 1.4; }
.sub { fill: #fff; }
.sub-s { fill: var(--steel); }

/* vessel */
.hull { fill: var(--vessel); }
.hull-s { fill: #ec9583; }
.cabin { fill: #fff; }
.win { fill: #a9c1dc; }
.line-w { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cabin-s { fill: var(--steel); }
.strake { fill: none; stroke: #d9dfe4; stroke-width: 2.2; stroke-linecap: round; }
.fender { fill: none; stroke: #d9dfe4; stroke-width: 5; stroke-linecap: round; }

/* land */
.h0 { fill: #e1ece8; }
.h1 { fill: #d5e7d6; }
.res { fill: #c4e7ee; }
.res-h { fill: #e4f4f6; }
.sparkle { fill: #fff; opacity: .5; }
.dam { fill: #ebe7de; }
.dam-s { fill: #dcd6ca; }
.dam-j { fill: none; stroke: #d4cdbf; stroke-width: .8; }
.dam-c { fill: none; stroke: #f8f6f1; stroke-width: 3; stroke-linecap: round; }
.hill { stroke: #fff; stroke-opacity: .4; stroke-width: 1.5; }
.hill-b { fill: #c2e1b1; }
.water { fill: var(--sea-light); }
.spill { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 4 6; }
.flow { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2 12; opacity: .5; }
.sand { fill: var(--sand); }
.shore { fill: none; stroke: #fff; stroke-width: 2; opacity: .7; }
.fl1 { fill: #fff; }
.fl2 { fill: #ffd0db; }
.fl3 { fill: #ffe08a; }
.tuft { fill: none; stroke: #9cc98a; stroke-width: 1.3; stroke-linecap: round; }

/* battery storage (#sc-bess containers) on a pad between the PV fields, cabled to both */
.bess { fill: #fff; }
.bess-s { fill: var(--steel); }
.bess-l { fill: none; stroke: var(--steel-line); stroke-width: .7; stroke-linecap: round; }
.bess-b { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.bess-q { fill: #8fd3a0; }
.bess-pad { fill: #e6e2d8; }
.bess-pad-s { fill: #d8d3c6; }
.bess-cable { fill: none; stroke: var(--steel-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bess-flow { fill: none; stroke: #ffe08a; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 3 11; }

/* clouds: static spots; the drift below starts from the same spots (delay = -spot / 2120 * duration) */
.cl1 { transform: translateX(520px); }
.cl2 { transform: translateX(1080px); }
.cl3 { transform: translateX(1680px); }
.cl4 { transform: translateX(1350px); }

@media (prefers-reduced-motion: no-preference) {
  /* rotors: hub at the local origin of the positioned group; phase offsets come from the static rotate() wrappers */
  .rotor { transform-box: view-box; transform-origin: 0 0; animation: sc-spin 7.4s linear infinite; }
  .r1 { animation-duration: 6.2s; }
  .r3 { animation-duration: 8.9s; }
  .r4 { animation-duration: 11.5s; }

  .wave-a { animation: sc-wave 19s linear infinite; }
  .wave-b { animation: sc-wave 13s linear infinite; }
  .wave-c { animation: sc-wave 8s linear infinite; }

  .cl { animation: sc-cloud linear infinite; }
  .cl1 { animation-duration: 200s; animation-delay: -49.06s; }
  .cl2 { animation-duration: 240s; animation-delay: -122.26s; }
  .cl3 { animation-duration: 170s; animation-delay: -134.72s; }
  .cl4 { animation-duration: 280s; animation-delay: -178.3s; }

  .drift { animation: sc-drift 26s ease-in-out infinite; }
  .bob { transform-box: fill-box; transform-origin: 50% 85%; animation: sc-bob 4.6s ease-in-out infinite; }

  .spill { animation: sc-flow 1.2s linear infinite; }
  .flow { animation: sc-flow 4s linear infinite; }
  .sparkle { animation: sc-sparkle 3.6s ease-in-out infinite; }
  .glint { animation: sc-glint 9s ease-in-out infinite; }
  .bess-flow { animation: sc-flow 3s linear infinite; }
  .bess-q { animation: sc-charge 9s steps(3, jump-none) infinite; }

  .anim-paused .scene * { animation-play-state: paused; }

  @keyframes sc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  /* one wave period is 160 units */
  @keyframes sc-wave { from { transform: translateX(0); } to { transform: translateX(-160px); } }
  /* from x -260 to 1860: off-screen at both ends even on the widest crop */
  @keyframes sc-cloud { from { transform: translateX(0); } to { transform: translateX(2120px); } }
  /* toward the near turbine, hold at the boat landing, back off */
  @keyframes sc-drift {
    0% { transform: translateX(0); }
    38%, 68% { transform: translateX(40px); }
    100% { transform: translateX(0); }
  }
  @keyframes sc-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(1.2px) rotate(-1deg); }
    70% { transform: translateY(-.6px) rotate(.8deg); }
  }
  /* a whole number of dash cycles: 10 (spill) and 14 (river, battery cable) both divide 70 */
  @keyframes sc-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -70; } }
  /* the containers' charge stripes light up one by one (cuts fall in the gaps between containers), then hold full */
  @keyframes sc-charge { 0% { clip-path: inset(0 66.7% 0 0); } 75%, 100% { clip-path: inset(0); } }
  @keyframes sc-sparkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
  @keyframes sc-glint {
    0% { transform: translateX(0); }
    55%, 100% { transform: translateX(480px); }
  }
}