/* Bothin Marsh scene. Palette is set by NWS condition and solar phase. */
.tide-scene{
  --sky-a:#7DBDEB;--sky-b:#D8EFFA;--glow:#FFF4C9;--sun:#FFE7A0;--cloud:#FFFFFF;--cloud-shade:#E4F0F8;
  --bay:#8CC7DE;--far:#86B08F;--marsh-a:#A8C98B;--marsh-b:#88B477;--reed:#6C9D5D;--channel:#A9D7E6;
  --path:#EFE5D1;--path-side:#CDBF9F;--path-line:#FFFFFF;--bank:#7D8E74;--rock:#9AA88D;
  --water-a:#62B6D0;--water-b:#2A7B9C;--water-back:#3F94B3;--foam:#FFFFFF;
  --bridge:#C4553C;--hills:#93B2AC;--jersey:#FF5A1F;--frame:#247185;--skin:#F2B38D;--skin-back:#D9926C;--ink:#22304A;--helmet:#FFFFFF;
  overflow:hidden;background:var(--sky-b);
}
.tide-scene[data-condition="cloudy"]{--hills:#A3B7B6;--sky-a:#9EB6CA;--sky-b:#DDE7EE;--cloud:#F6F9FB;--cloud-shade:#D3DEE7;--bay:#97B9C8;--marsh-a:#A3BF8C;--marsh-b:#86A97A;--glow:#FFFFFF}
.tide-scene[data-condition="rain"]{--bridge:#9C6A64;--hills:#7F9590;--sky-a:#6C7E92;--sky-b:#AEBAC5;--cloud:#8E9BAA;--cloud-shade:#78859A;--bay:#7E9AAA;--far:#738F7D;--marsh-a:#8FA686;--marsh-b:#75916F;--reed:#5F7F57;--water-a:#5B95AB;--water-b:#2C6580;--water-back:#3D7790;--channel:#93AEBC;--glow:#FFFFFF}
.tide-scene[data-condition="fog"]{--bridge:#D9AFA4;--hills:#C3CFCC;--sky-a:#C2CDD4;--sky-b:#E7ECEF;--cloud:#F4F7F8;--cloud-shade:#DCE3E7;--bay:#B5C7CE;--far:#AFC0B3;--marsh-a:#B3C6A6;--marsh-b:#9DB394;--glow:#FFFFFF}
.tide-scene[data-phase="dawn"]{--hills:#C9A99A;--sky-a:#F0A88E;--sky-b:#FCE6C8;--glow:#FFD8A0;--sun:#FFD58A;--bay:#D9B8B0;--far:#A8A88A;--channel:#F1CDBE;--cloud:#FFF3EA;--cloud-shade:#F5D5C6}
.tide-scene[data-phase="dusk"]{--bridge:#8E4A4E;--hills:#7B6E86;--sky-a:#5D5C9E;--sky-b:#F2A688;--glow:#FFB98A;--sun:#FFC27E;--bay:#B092A8;--far:#6F7C73;--marsh-a:#8D9A76;--marsh-b:#74866A;--reed:#5E7457;--channel:#C9A3B5;--cloud:#F7D2C6;--cloud-shade:#D9A9A8;--water-a:#6E8FBB;--water-b:#3A578C;--water-back:#4C6A9E}
.tide-scene[data-phase="night"]{--bridge:#4A3B58;--hills:#1F2E44;--sky-a:#0C1733;--sky-b:#2B3B6C;--glow:#C9D6FF;--cloud:#3A4A74;--cloud-shade:#2E3C62;--bay:#2A4068;--far:#1B2F3C;--marsh-a:#2C4844;--marsh-b:#223D3A;--reed:#1A332F;--channel:#3B5683;
  --path:#9097A8;--path-side:#6B7286;--path-line:#C6CCDA;--bank:#203634;--rock:#2D4A46;--water-a:#2E5E88;--water-b:#142F52;--water-back:#21466F;--foam:#A8C6E6;--skin:#D9A182;--skin-back:#B9805F;--jersey:#E86A28}

.tide-scene .ts-svg{display:block;width:100%;height:100%}
.tide-scene .ts-sky-a{stop-color:var(--sky-a);transition:stop-color 1.4s ease}
.tide-scene .ts-sky-b{stop-color:var(--sky-b);transition:stop-color 1.4s ease}
.tide-scene .ts-glow{stop-color:var(--glow)}
.tide-scene .ts-water-a{stop-color:var(--water-a)}
.tide-scene .ts-water-b{stop-color:var(--water-b)}
.tide-scene :is(.ts-bay,.ts-far,.ts-marsh-a,.ts-marsh-b,.ts-channel,.ts-path,.ts-path-side,.ts-bank,.ts-water-back){transition:fill 1.4s ease}
.tide-scene .ts-sun-disc{fill:var(--sun)}
.tide-scene .ts-moon-disc{fill:#F4EED3}
.tide-scene .ts-sun,.tide-scene .ts-moon,.tide-scene .ts-stars,.tide-scene .ts-rain,.tide-scene .ts-fog{display:none}
.tide-scene:not([data-phase="night"]):is([data-condition="sunny"],[data-condition="unknown"]) .ts-sun{display:block}
.tide-scene[data-phase="night"]:not([data-condition="rain"]):not([data-condition="fog"]) .ts-moon{display:block}
.tide-scene[data-phase="night"]:is([data-condition="sunny"],[data-condition="unknown"]) .ts-stars{display:block}
.tide-scene[data-condition="rain"] .ts-rain,.tide-scene[data-condition="fog"] .ts-fog{display:block}
.tide-scene .ts-sun-disc{animation:ts-pulse 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.tide-scene .ts-stars circle{fill:#FFFFFF;animation:ts-twinkle 4s ease-in-out infinite}

.tide-scene .ts-cloud rect{fill:var(--cloud);transition:fill 1.4s ease}
.tide-scene .ts-cloud .ts-cloud-shade{fill:var(--cloud-shade)}
.tide-scene .ts-cloud-far{opacity:.75}
.tide-scene [data-cloud]{display:none}
.tide-scene:is([data-condition="sunny"],[data-condition="unknown"]) :is([data-cloud="0"],[data-cloud="2"],[data-cloud="5"]),
.tide-scene:is([data-condition="cloudy"],[data-condition="rain"],[data-condition="fog"]) [data-cloud]{display:block}
.tide-scene .ts-bridge{opacity:.85}.tide-scene .ts-hills{fill:var(--hills)}.tide-scene .ts-strait{fill:var(--bay)}.tide-scene .ts-bridge-fill{fill:var(--bridge)}.tide-scene .ts-bridge-line{fill:none;stroke:var(--bridge)}
.tide-scene .ts-bay{fill:var(--bay)}.tide-scene .ts-far{fill:var(--far)}
.tide-scene .ts-marsh-a{fill:var(--marsh-a)}.tide-scene .ts-marsh-b{fill:var(--marsh-b)}.tide-scene .ts-channel{fill:var(--channel);opacity:.85}
.tide-scene .ts-reed{fill:none;stroke:var(--reed);stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%;animation:ts-sway 4s ease-in-out infinite alternate}
.tide-scene .ts-reed-front{stroke-width:4.5;filter:brightness(.82)}
.tide-scene .ts-white{fill:#FFFFFF}.tide-scene .ts-white-line{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round}
.tide-scene .ts-egret-legs{stroke:#2B2F38;stroke-width:2}
.tide-scene .ts-hull{fill:var(--ink)}
.tide-scene .ts-boat .ts-white{opacity:.92}
.tide-scene .ts-path{fill:var(--path)}.tide-scene .ts-path-side{fill:var(--path-side)}
.tide-scene .ts-path-line{stroke:var(--path-line);stroke-width:2.5;stroke-dasharray:26 24;stroke-linecap:round}
.tide-scene .ts-bank{fill:var(--bank)}.tide-scene .ts-rocks rect{fill:var(--rock)}
.tide-scene .ts-shadow{fill:var(--ink);opacity:.13}
.tide-scene .ts-puddles{fill:var(--water-a);opacity:0;transition:opacity .8s ease}
.tide-scene[data-state="patches"] .ts-puddles{opacity:1}
.tide-scene .ts-puddles ellipse{fill:var(--water-a)}.tide-scene .ts-glint{stroke:#FFFFFF;stroke-opacity:.8;stroke-width:1.6;stroke-linecap:round}

.tide-scene .ts-tire{fill:none;stroke:var(--ink);stroke-width:5}
.tide-scene .ts-rim{fill:none;stroke:#FFFFFF;stroke-opacity:.7;stroke-width:1.6}
.tide-scene .ts-spoke{stroke:#8DA1AE;stroke-width:1;fill:none}
.tide-scene .ts-hub,.tide-scene .ts-ink{fill:var(--ink)}
.tide-scene .ts-frame{fill:none;stroke:var(--frame);stroke-width:5.5;stroke-linejoin:round;stroke-linecap:round}
.tide-scene .ts-ink-line{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.tide-scene .ts-ring{fill:none;stroke:var(--ink);stroke-width:2.6}
.tide-scene .ts-crank{stroke:var(--ink);stroke-width:3.4;stroke-linecap:round}
.tide-scene .ts-leg,.tide-scene .ts-leg-back{fill:none;stroke:var(--skin);stroke-width:9.5;stroke-linecap:round;stroke-linejoin:round}
.tide-scene .ts-leg-back{stroke:var(--skin-back)}
.tide-scene .ts-shorts{stroke:var(--ink);stroke-width:16;stroke-linecap:round}
.tide-scene .ts-shorts-fill{fill:var(--ink)}
.tide-scene .ts-saddle{fill:#55606E}
.tide-scene .ts-sock{stroke:#FFFFFF;stroke-width:9.5;stroke-linecap:butt}
.tide-scene .ts-shoe{stroke:var(--ink);stroke-width:7;stroke-linecap:round}
.tide-scene .ts-jersey{stroke:var(--jersey);stroke-width:31;stroke-linecap:round}
.tide-scene .ts-jersey-stripe{stroke:var(--stripe,#FFFFFF);stroke-opacity:.45;stroke-width:5;stroke-linecap:round}
.tide-scene .ts-sleeve{stroke:var(--jersey);stroke-width:13;stroke-linecap:round}
.tide-scene .ts-skin-line{fill:none;stroke:var(--skin);stroke-linecap:round;stroke-linejoin:round}
.tide-scene .ts-back-tone{stroke:var(--skin-back)}
.tide-scene .ts-skin{fill:var(--skin)}.tide-scene .ts-skin-back{fill:var(--skin-back)}
.tide-scene .ts-cheek{fill:#F0806E;opacity:.4}
.tide-scene .ts-helmet{fill:var(--helmet)}.tide-scene .ts-visor{fill:none;stroke:var(--visor,var(--frame));stroke-width:3.2;stroke-linecap:round}
.tide-scene .ts-mouth{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:none}
.tide-scene .ts-mouth.ts-open{fill:#7A2E22;stroke-width:1.8}
.tide-scene .ts-heron{animation:ts-peck 7s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes ts-peck{0%,80%,100%{transform:none}86%,92%{transform:rotate(9deg)}}
.tide-scene .ts-light{display:none}.tide-scene[data-phase="night"] [data-cyclist] .ts-light{display:block}
.tide-scene .ts-beam{fill:#FFF3C4;opacity:.22}.tide-scene .ts-lamp{fill:#FFF6D6}
.tide-scene .ts-sweat{fill:#A7DAF2;display:none}
.tide-scene :is([data-state="relaxed"]) .ts-smile,
.tide-scene :is([data-state="rushing"],[data-state="patches"],[data-state="unknown"]) .ts-neutral,
.tide-scene :is([data-state="flooded"],[data-state="deep"]) :is(.ts-worry,.ts-sweat){display:block}
.tide-scene :is([data-state="flooded"],[data-state="deep"]) .ts-sweat{animation:ts-drip 1.6s ease-in infinite}

.tide-scene .ts-water-back{fill:var(--water-back);opacity:.9}
.tide-scene .ts-water{opacity:.94}
.tide-scene .ts-foam{fill:none;stroke:var(--foam);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:70 46 18 46;opacity:.85}
.tide-scene .ts-shine path{stroke:#FFFFFF;stroke-opacity:.35;stroke-width:2.5;stroke-linecap:round}
.tide-scene .ts-splash circle{fill:#FFFFFF}
.tide-scene .ts-splash .ts-ripple{fill:none;stroke:#FFFFFF;stroke-width:2}
.tide-scene .ts-fog rect{fill:#FFFFFF;opacity:.55;animation:ts-drift 18s ease-in-out infinite alternate}
.tide-scene .ts-fog rect:nth-child(2){animation-duration:24s;animation-direction:alternate-reverse;opacity:.45}
.tide-scene .ts-rain path{stroke:#E9F1F7;stroke-opacity:.55;stroke-width:2;stroke-linecap:round;animation:ts-rain .7s linear infinite}

.tide-scene .ts-ruler-track{fill:#FFFFFF;fill-opacity:.55}
.tide-scene .ts-ruler-low,.tide-scene .ts-ruler-high,.tide-scene .ts-ruler-fill-low,.tide-scene .ts-ruler-fill-high{stroke-width:7;stroke-linecap:round;fill:none}
.tide-scene .ts-ruler-low{stroke:#2A7B9C;stroke-opacity:.28}.tide-scene .ts-ruler-high{stroke:#F2762E;stroke-opacity:.3}
.tide-scene .ts-ruler-fill-low{stroke:#2A7B9C}.tide-scene .ts-ruler-fill-high{stroke:#FF5A1F}
.tide-scene .ts-ruler-label{font:700 15px "Helvetica Neue",Helvetica,-apple-system,Arial,sans-serif;fill:var(--ink);text-anchor:end;paint-order:stroke;stroke:#FFFFFF;stroke-width:4;stroke-linejoin:round}
.tide-scene .ts-ruler-label.is-path{fill:#D9480F}
.tide-scene[data-phase="night"] .ts-ruler-label{fill:#FFFFFF;stroke:#0C1733}.tide-scene[data-phase="night"] .ts-ruler-label.is-path{fill:#FF7A45}
.tide-scene .ts-marker{fill:#FFFFFF;stroke:#2A7B9C;stroke-width:4}
.tide-scene .ts-marker-dot{fill:#2A7B9C}
.tide-scene .is-high .ts-marker{stroke:#FF5A1F}.tide-scene .is-high .ts-marker-dot{fill:#F2762E}

@keyframes ts-sway{from{transform:rotate(-3deg)}to{transform:rotate(3.5deg)}}
@keyframes ts-twinkle{50%{opacity:.25}}
@keyframes ts-pulse{50%{transform:scale(1.05)}}
@keyframes ts-drift{to{transform:translateX(140px)}}
@keyframes ts-rain{to{transform:translate(-44.5px,140px)}}
@keyframes ts-drip{0%{transform:translateY(-2px);opacity:0}30%{opacity:1}100%{transform:translateY(8px);opacity:0}}
@media (prefers-reduced-motion:reduce){.tide-scene *{animation:none!important;transition:none!important}}