/* Village Creek: the footer scene on every Hardin County Pediatrics page (home, Resources, the policies, 404).
   The picture is scripts/footer/village-creek.py --write (one generator, every page); the behaviour (moonrise, pause off
   screen, tap the water for a fish, the bank or sky for sparkles) is assets/js/magic.js; the check is scripts/qa/footer.mjs.
   Loaded after pages.css on the sub-pages; the home page links it after its inline styles. */
/* Village Creek (10-09 next level; daytime since 10-10): the footer is Lumberton's own place. By day: blue sky with
   slow clouds, the smiling sun, the Big Thicket canopy, loblolly pines on the banks, bald cypress standing in the creek with
   silvery Spanish moss, Village Creek's white sandbar with a turtle on a log, two kids in life vests in a red canoe, pitcher
   plants and dwarf palmettos, bluebonnets, the creek glittering. When the visitor picks the night sky the same place turns
   moonlit (moon, stars, the lone star, fireflies). One story at a time: the sun (or moon) rises over the treeline when the
   footer arrives; then, on a long 120 s loop, the egret pair crosses (about 30 s, behind the cypress); the rest is still air.
   Paused off screen. Tap the water and a fish jumps; tap the bank or the sky and sparkles rise. Transform and opacity only;
   a still picture under Reduce motion, gone under Hide decorations and in forced colours. */
.scene{position:relative;display:block;width:100%;height:min(64vw,280px)}
.dusk .scene{margin-top:36px}
.pg-foot .scene,.dusk .scene{overflow:hidden}
.pg-foot .scene{background:linear-gradient(180deg,#0B5F82 0%,#0E3E52 52%,var(--night,#0B2A38) 100%)}
html[data-creek="night"] .pg-foot .scene{background:linear-gradient(180deg,#0E3550 0%,#16496A 60%,#22628A 100%)}
.scene svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:hidden}
/* DAY (default): a sunny Village Creek. Blue sky and creek, green cypress with silvery moss, white sand, a red canoe,
   pitcher plants in their own yellow-green, bluebonnets. (10-10, his "it looks spooky due to colors ... daytime artwork") */
.scene .n-only{display:none}
.scene .ridge1{fill:#95C4CA;opacity:1}
.scene .far{fill:#7AAB98;color:#94A08F;opacity:1}
.scene .ridge2{fill:#5F9F8C;opacity:1}
.scene .water{fill:url(#fwaterD) #3896C2}
.scene .refl{fill:url(#fshoreD) transparent}
.scene .refl-c{fill:#2C6E78;opacity:.35}
.scene .moss{transform-box:fill-box;transform-origin:50% 0}
.scene .moonroad rect{fill:#FFFFFF;opacity:.45}
.scene .moonpool{fill:url(#fsunhalo) transparent;opacity:.55}
.scene .drift rect{fill:#FFFFFF;opacity:.32}
.scene .glints .gl{fill:#FFFFFF}
.scene .fcl{fill:#FFFFFF;opacity:.95}
.scene .sand{fill:url(#fsandD) #F3E9CF}.scene .sand-grass{fill:#6FA45A}html[data-creek="night"] .scene .sand-grass{fill:#4F7A62}.scene .sand-wet{fill:none;stroke:#E3D2A6;stroke-width:1.4;stroke-linecap:round}
.scene .sand-r{fill:#FFF6E0;opacity:.25}
.scene .log{fill:#8B6B4E}.scene .log .lit{fill:none;stroke:#C9A57E;stroke-opacity:.9;stroke-width:1.2;stroke-linecap:round}
.scene .turtle .t-shell{fill:#5E7A3A}.scene .turtle .t-body{fill:#8AA866}.scene .turtle .t-mark{fill:none;stroke:#3F6A26;stroke-width:1;stroke-linecap:round}
.scene .cy-far{fill:#7CB27C;color:#8C7A66}.scene .cy-far .trunk{fill:#8C7A66}
.scene .cy-mid{fill:#4E9256;color:#76604C}.scene .cy-mid .trunk{fill:#76604C}
.scene .knees{fill:#76604C}
.scene .moss-far .moss{fill:#A9B7A0;opacity:.8}.scene .moss-mid .moss{fill:#A3B399;opacity:.9}
.scene .rbank,.scene .lbank{fill:#5A9A52}
.scene .pine-mid{fill:#2F6E46;color:#7A5A40}
.scene .near{fill:url(#fnearD) #3D7C46;color:#3D7C46}.scene .near.base{fill:#0B2A38}
.scene .grass{fill:#4F9548}
.scene .palm{fill:#3E8048;color:#3E8048}
.scene .pitch .pt{fill:#B4C46C}
.scene .pitch .pt-lip path{fill:none;stroke:#B85A44;stroke-width:1.3;stroke-linecap:round;opacity:.75}
.scene .pitch .pt-vein path{fill:none;stroke:#B85A44;stroke-width:.8;stroke-linecap:round;opacity:.5}
.scene .pitch .pt-fl{fill:#EBD98A;color:#5E8A4A;opacity:1}
.scene .bb .bb-st,.scene .bb .bb-lf{stroke:#6FAE5A;stroke-width:1.3;stroke-linecap:round;fill:none}.scene .bb .bb-fl{fill:#3B55B5}.scene .bb .bb-fl2{fill:#6F8BE0}.scene .bb .bb-tip{fill:#FFFFFF}
.scene .egret,.scene .egret-r{fill:#FFFFFF;opacity:0}
.scene .egret-r{visibility:hidden} /* reflections only on the moonlit creek; hidden (not display:none) so they keep in step with the birds when a visitor switches */
html[data-creek="night"] .scene .egret-r{visibility:visible}
.scene .egret .bill,.scene .egret-r .bill{fill:#E7C55A}
.scene .legs{stroke:#3B3B3B;stroke-width:1.5;stroke-linecap:round;fill:none}
.scene .w-dn{opacity:0}
.scene .c-refl{opacity:.24}
.scene .g-night{opacity:0}
/* NIGHT, only when the visitor chooses the night sky (html[data-creek="night"], set by site.js / resources.js from the
   switch or a ?sky=night link; never the clock or a dark-mode phone: footers are daytime, 10-10): a friendly moonlit evening */
html[data-creek="night"] .scene .n-only{display:inline}
html[data-creek="night"] .scene .d-only{display:none}
html[data-creek="night"] .scene .ridge1{fill:#5B93AE;opacity:.5}
html[data-creek="night"] .scene .far{fill:#3D7690;color:#3D7690;opacity:.7}
html[data-creek="night"] .scene .ridge2{fill:#2D6A85;opacity:1}
html[data-creek="night"] .scene .water{fill:url(#fwater) #3A7590}
html[data-creek="night"] .scene .refl{fill:url(#fshore) transparent}
html[data-creek="night"] .scene .refl-c{fill:#173F52;opacity:.5}
.scene .fstars circle{--so:.8;fill:#FFF6D6;opacity:var(--so)}
.scene .lonestar path{fill:#FFF6D6}
html[data-creek="night"] .scene .moonroad rect{fill:#F6EAC4;opacity:.55}
html[data-creek="night"] .scene .moonpool{fill:url(#fhalo) transparent;opacity:.6}
html[data-creek="night"] .scene .drift rect{fill:#CFE4EC;opacity:.18}
html[data-creek="night"] .scene .sand{fill:url(#fsand) #CFCBB6;opacity:1}
html[data-creek="night"] .scene .sand-wet{stroke:#BDB59B}
html[data-creek="night"] .scene .sand-r{fill:#E9E2CC;opacity:.14}
html[data-creek="night"] .scene .log{fill:#5A5048}html[data-creek="night"] .scene .log .lit{stroke:#E6E0C8;stroke-opacity:.6}
html[data-creek="night"] .scene .cy-far,html[data-creek="night"] .scene .cy-far .trunk{fill:#24596E;color:#24596E}
html[data-creek="night"] .scene .cy-mid,html[data-creek="night"] .scene .cy-mid .trunk,html[data-creek="night"] .scene .knees{fill:#1C4C60;color:#1C4C60}
html[data-creek="night"] .scene .moss-far .moss,html[data-creek="night"] .scene .moss-mid .moss{fill:#6F9A99;opacity:.5}
html[data-creek="night"] .scene .rbank,html[data-creek="night"] .scene .lbank,html[data-creek="night"] .scene .pine-mid{fill:#1B4A5C;color:#1B4A5C}
html[data-creek="night"] .scene .near{fill:#2F5E52;color:#2F5E52}html[data-creek="night"] .scene .near.base{fill:#0B2A38}html[data-creek="night"] .scene .grass{fill:#3D6E5E}
html[data-creek="night"] .scene .palm{fill:#1F5468;color:#1F5468}
html[data-creek="night"] .scene .pitch .pt{fill:#4F7A6A}
html[data-creek="night"] .scene .pitch .pt-lip path,html[data-creek="night"] .scene .pitch .pt-vein path{stroke:#C9CF8E;opacity:.5}
html[data-creek="night"] .scene .pitch .pt-fl{fill:#E3D58A;color:#4F7A63;opacity:.85}
html[data-creek="night"] .scene .egret,html[data-creek="night"] .scene .egret-r{fill:#F4EFE2}
html[data-creek="night"] .scene .legs{stroke:#2B3B40}
html[data-creek="night"] .scene .c-refl{opacity:.2}
html[data-creek="night"] .scene .canoe{opacity:.92}
html[data-creek="night"] .scene .g-dusk{opacity:.3}
html[data-creek="night"] .scene .g-night{opacity:1}
.ff{fill:#F7E9A6}
.anim .ff{animation:blink 5s ease-in-out infinite;opacity:0}
.anim .ff:nth-of-type(2n){animation-duration:6.5s;animation-delay:1.2s}
.anim .ff:nth-of-type(3n){animation-duration:7.5s;animation-delay:2.6s}
.anim .ff:nth-of-type(5n){animation-delay:3.8s}
@keyframes blink{0%,100%{opacity:0}40%,60%{opacity:.95}}
@keyframes twinkle{0%,100%{opacity:var(--so)}50%{opacity:calc(var(--so)*.3)}}
.anim .ff{filter:drop-shadow(0 0 3px rgba(255,225,130,.85))}
/* still air: each tree's moss sways as one, the sun's (moon's) road breathes in two halves, drift lines slide, the canoe
   floats; by day three clouds drift and the creek glitters in three turns; at night six stars and the lone star twinkle */
.anim .scene .fcl{animation:cloud 80s ease-in-out infinite alternate}
@keyframes cloud{from{transform:translate(-26px,0)}to{transform:translate(26px,0)}}
.scene .gl{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.anim .scene .gl{animation:glint 9s ease-in-out infinite}
@keyframes glint{0%,100%{opacity:0;transform:scale(.4)}18%{opacity:.8;transform:scale(1)}36%{opacity:0;transform:scale(.5)}}
html:not(.anim) .scene .gl1,html[data-motion="reduced"] .scene .gl1{opacity:.8}
@media (prefers-reduced-motion:reduce){.scene,.scene *{animation:none!important;transition:none!important}.scene .gl1{opacity:.8}}
.scene .lonestar,.scene .moonf{transform-box:fill-box;transform-origin:50% 50%}
.anim .scene .moss{animation:sway 10s ease-in-out infinite alternate}
@keyframes sway{from{transform:skewX(-3deg)}to{transform:skewX(3deg)}}
.anim .scene .mr1,.anim .scene .mr2{animation:mroad 7s ease-in-out infinite}
.anim .scene .mr2{animation-delay:-3.5s}
@keyframes mroad{0%,100%{opacity:1}50%{opacity:.35}}
.anim .scene .drift{animation:wdrift 16s ease-in-out infinite alternate}
@keyframes wdrift{from{transform:translate(-16px,0)}to{transform:translate(16px,0)}}
.anim .scene .cfloat{animation:cfloat 14s ease-in-out infinite alternate}
@keyframes cfloat{from{transform:translate(-9px,0)}to{transform:translate(9px,0)}}
.anim .scene .lonestar{animation:lone 7s ease-in-out infinite}
@keyframes lone{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
.anim .scene .fstars .tw{animation:twinkle 6s ease-in-out infinite}
/* arrival: the sun (at night the moon) rises over the treeline and lays its road on the water (magic.js adds .moon-wait,
   then .arrived) */
.anim .moon-wait .scene .moonrise{transform:translate(0,96px);opacity:0}
.anim .moon-wait .scene .moonroad,.anim .moon-wait .scene .moonpool{opacity:0}
.anim .arrived .scene .moonrise{transition:transform 6.5s cubic-bezier(.2,.7,.25,1),opacity 2.2s var(--ease)}
.anim .arrived .scene .moonroad,.anim .arrived .scene .moonpool{transition:opacity 3s var(--ease) 3s}
/* the one story (a 120 s loop): the egret pair crosses from 8 % to 34 % (31 s), behind the cypress; the moonrise has the
   first seconds to itself. On phones (which show the middle of the creek) they fly only that stretch, so the whole
   crossing is seen (laptops and tablets get their own stretch too). Wings snap between two strokes (no half-faded wing). */
.anim .scene .egret,.anim .scene .egret-r{animation:egret 120s linear infinite}
.anim .scene .egret-r{animation-name:egretR}
.anim .scene .e2{animation-delay:1.6s}
@keyframes egret{0%,8%{opacity:0;transform:translate(-140px,140px)}9%{opacity:1}21%{transform:translate(560px,128px)}33%{opacity:1}34%,100%{opacity:0;transform:translate(1580px,142px)}}
@keyframes egretR{0%,8%{opacity:0;transform:translate(-140px,-140px)}9%{opacity:.2}21%{transform:translate(560px,-128px)}33%{opacity:.2}34%,100%{opacity:0;transform:translate(1580px,-142px)}}
@media (min-width:1040px) and (max-width:1439px){
  @keyframes egret{0%,8%{opacity:0;transform:translate(160px,140px)}9%{opacity:1}21%{transform:translate(720px,128px)}33%{opacity:1}34%,100%{opacity:0;transform:translate(1300px,142px)}}
  @keyframes egretR{0%,8%{opacity:0;transform:translate(160px,-140px)}9%{opacity:.2}21%{transform:translate(720px,-128px)}33%{opacity:.2}34%,100%{opacity:0;transform:translate(1300px,-142px)}}
}
@media (min-width:720px) and (max-width:1039px){
  @keyframes egret{0%,8%{opacity:0;transform:translate(280px,140px)}9%{opacity:1}21%{transform:translate(710px,128px)}33%{opacity:1}34%,100%{opacity:0;transform:translate(1160px,142px)}}
  @keyframes egretR{0%,8%{opacity:0;transform:translate(280px,-140px)}9%{opacity:.2}21%{transform:translate(710px,-128px)}33%{opacity:.2}34%,100%{opacity:0;transform:translate(1160px,-142px)}}
}
@media (min-width:438px) and (max-width:719px){ /* small tablets and phones held sideways see more of the creek: a longer stretch */
  @keyframes egret{0%,8%{opacity:0;transform:translate(560px,140px)}11%{opacity:1}21%{transform:translate(860px,128px)}32%{opacity:1}34%,100%{opacity:0;transform:translate(1160px,142px)}}
  @keyframes egretR{0%,8%{opacity:0;transform:translate(560px,-140px)}10.5%{opacity:0}12.5%{opacity:.2}21%{transform:translate(860px,-128px)}32%{opacity:.2}34%,100%{opacity:0;transform:translate(1160px,-142px)}}
}
@media (max-width:437px){ /* phones: the pair slides out from behind the cypress edge into open sky between the trees and the sun */
  @keyframes egret{0%,8%{opacity:0;transform:translate(600px,140px)}11%{opacity:1}21%{transform:translate(790px,128px)}32%{opacity:1}34%,100%{opacity:0;transform:translate(980px,142px)}}
  @keyframes egretR{0%,8%{opacity:0;transform:translate(600px,-140px)}10.5%{opacity:0}12.5%{opacity:.2}21%{transform:translate(790px,-128px)}32%{opacity:.2}34%,100%{opacity:0;transform:translate(980px,-142px)}}
}
.anim .scene .e2 .w-up,.anim .scene .e2 .w-dn{animation-delay:.7s}
.anim .scene .w-up{animation:wUp 2.6s steps(1,end) infinite}
.anim .scene .w-dn{animation:wDn 2.6s steps(1,end) infinite}
@keyframes wUp{0%,100%{opacity:1}50%{opacity:0}}
@keyframes wDn{0%,100%{opacity:0}50%{opacity:1}}
.paused .scene,.paused .scene *{animation-play-state:paused!important}
/* tap the water: a fish jumps (magic.js) */
.leap{position:absolute;z-index:3;width:20px;height:12px;margin:-6px 0 0 -10px;pointer-events:none;animation:leap 1.15s cubic-bezier(.3,.1,.4,1) both}
.leap svg{display:block;width:100%;height:100%}
.leap.low{animation-name:leapLow}
@keyframes leapLow{0%{opacity:0;transform:translate(-10px,3px) rotate(-40deg)}12%{opacity:1}50%{transform:translate(1px,-12px) rotate(0deg)}88%{opacity:1}100%{opacity:0;transform:translate(12px,3px) rotate(45deg)}}
@keyframes leap{0%{opacity:0;transform:translate(-14px,4px) rotate(-55deg)}12%{opacity:1}50%{transform:translate(2px,-30px) rotate(0deg)}88%{opacity:1}100%{opacity:0;transform:translate(18px,4px) rotate(60deg)}}
.wring{position:absolute;z-index:3;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1.5px solid rgba(243,235,207,.7);pointer-events:none;animation:wring 1.1s ease-out both}
@keyframes wring{from{opacity:1;transform:scale(.4,.15)}to{opacity:0;transform:scale(4.2,1.3)}}
@media (min-width:720px){.scene{height:300px}.dusk .scene{margin-top:44px}}
@media (min-width:1040px){.scene{height:max(330px,22.3vw)}.dusk .scene{margin-top:12px}} /* never shorter than the picture's own 1440x320 shape, so wide screens never crop the moon */
html[data-decor="off"] .scene,html[data-decor="off"] .leap,html[data-decor="off"] .wring,html[data-decor="off"] .spark,html[data-decor="off"] .ripple{display:none!important}
html[data-motion="reduced"] .scene *,html[data-motion="reduced"] .scene{animation:none!important;transition:none!important}
html[data-decor="off"] .dusk{padding-bottom:56px}
@media (forced-colors:active){.scene{display:none}.dusk{padding-bottom:56px}}

/* taps (inside the picture only): golden sparkles from the bank and the sky, a ripple, and the sun (or moon) answering */
.spark{position:absolute;z-index:3;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#FFF3C9 0%,#FFE49A 30%,rgba(255,205,96,.3) 55%,rgba(255,205,96,0) 75%);box-shadow:0 0 8px 3px rgba(255,208,100,.45),0 0 20px 8px rgba(255,190,80,.18);animation:sparkRise 2.6s ease-out both}
@keyframes sparkRise{0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}12%{opacity:1;transform:translate3d(var(--dx0,0px),-6px,0) scale(1)}55%{opacity:.85;transform:translate3d(var(--dx1,0px),-36px,0) scale(.9)}100%{opacity:0;transform:translate3d(var(--dx2,0px),-82px,0) scale(.7)}}
.ripple{position:absolute;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid rgba(255,235,170,.75);pointer-events:none;animation:ripple .65s ease-out both}
@keyframes ripple{to{transform:scale(6);opacity:0}}
.moonf{pointer-events:auto;cursor:pointer}
.anim .moonf.glow{animation:moonGlow 1.4s var(--ease)}
@keyframes moonGlow{40%{transform:scale(1.14) rotate(-8deg)}100%{transform:none}}
.scene .halo{transform-box:fill-box;transform-origin:50% 50%}
.anim .moonf.glow .halo{animation:haloUp 1.4s var(--ease)}
@keyframes haloUp{40%{transform:scale(1.3)}100%{transform:none}}