/* The Towne Crier cuckoo clock — styles for the SVG that art.js builds.
   Resting poses live here; clock.js animates away from them and cancels back.
   Only transform and opacity animate (plus two dash offsets for water), so a
   weak TV panel can keep up. */

.cc{display:block; width:100%; height:auto; max-height:100%; overflow:hidden}
.cc .hide, .cc .prop{display:none}

/* ---------- the stage: the clock alone (portrait), or in the valley (landscape) ----------
   clock.js builds  .cc-stage > .cc-frame > [.cc-back] .cc-box [.cc-fore]  and
   sizes the frame to the largest 16:9 box that fits. The scene layers bleed
   past the frame; the stage clips them. */
.cc-stage{position:relative; width:100%; height:100%}
.cc-stage.portrait .cc-frame, .cc-stage.portrait .cc-box{height:100%}
.cc-stage.portrait .cc-box .cc{height:100%; width:auto; max-width:100%; margin:0 auto}
.cc-stage .cc-layer{display:none}
.cc-stage.landscape{overflow:hidden}
.cc-stage.landscape .cc-frame{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.cc-stage.landscape .cc-layer{display:block; position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none}
.cc-stage.landscape .cc-box{position:absolute; left:50%; transform:translateX(-50%)}
.cc-stage.landscape .cc-box .cc{width:100%; height:100%; max-height:none}
.cc-stage.landscape .cc-box #cloud{display:none}
/* the clock is its own layer, so dimming it with the valley at night costs a compositor pass, not a repaint */
.cc-stage.landscape .cc-box{will-change:transform; transition:filter 1.5s}
.cc-stage.landscape.night .cc-box{filter:brightness(.8) saturate(.9)}
.cc.cc-scene{position:absolute; left:0; top:0; width:100%; height:100%; max-height:none; overflow:visible}
/* up close (clock.js up()): the camera is a transform on the frame. In portrait
   the clock takes the whole screen for it. A layer that promises to move
   (will-change: transform) is drawn once at its first size and stretched after
   that, so up close the clock gives that promise up. It stays a layer of its
   own, though (will-change: opacity), and a small one, so while the camera
   moves the browser draws it at the size the move ends at, instead of folding
   it into a bigger layer that it would stretch. And while the camera sees
   nothing but the clock's base, the valley behind it is not drawn (clock.js
   camMove); the railway in front, and whatever is crossing it, still is. */
.cc-stage.cc-close{touch-action:none; cursor:zoom-out; -webkit-user-select:none; user-select:none}
.cc-stage.portrait.cc-close{position:fixed; left:0; top:0; right:0; bottom:0; z-index:12; overflow:hidden; background:#0B1320}
.cc-stage.cc-close .cc-box{will-change:opacity}
.cc-stage.cc-solo .cc-back{visibility:hidden}
.cc-stage:not(.cc-close) #base{cursor:zoom-in}

/* type */
.cc text.sign-text{font:700 20px Georgia,"Times New Roman",serif; fill:#3A2414}
.cc text.banner{font:700 23px Georgia,"Times New Roman",serif; letter-spacing:3px; fill:#E1B94E}
.cc text.plaque{font:600 9px ui-monospace,Menlo,Consolas,monospace; letter-spacing:1.6px; fill:#E1B94E}
.cc text.note{font:700 15px Georgia,serif; fill:#E1B94E; stroke:#3A2414; stroke-width:.6}
.cc .bubble{opacity:0}
.cc .bubble rect, .cc .bubble path{fill:#FBF6E7; stroke:#3A2414; stroke-width:2}
.cc .bubble text{font:700 19px Georgia,"Times New Roman",serif; fill:#1E3A78}
.cc .bubble.small text{font-size:16px}
.cc .ws-label text{font:600 10px ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

/* ---------- LEDs: dim by day, bright at night, flashed by the show ---------- */
.cc .led{opacity:.16}
.cc.night .led{opacity:.72}
.cc .led-lamp, .cc .led-doorway, .cc .led-rain, .cc .led-cateye, .cc .led-eye{opacity:0}
.cc.night .led-cateye, .cc.night .led-eye{opacity:.8}
.cc .veh.run .led-lamp{opacity:.85}
.cc.raining .led-rain{opacity:.7}
.cc .led-falls{opacity:.3}
.cc.night .led-falls{opacity:.75}
.cc.surge .led-falls{opacity:.95}
.cc .win-lit{fill:#77705A}
.cc.night .win-lit{fill:#FFD37A}
/* waterfall backlight: amber candlelight, or a cool moonlit stream */
.cc.light-moon .led-falls rect, .cc.light-auto.night .led-falls rect{fill:#7FC8FF}
.cc .led-sheet rect{fill:#5FB7FF}
.cc.light-amber .led-sheet rect{fill:#FFC45A}
/* seasons repaint the lanterns */
.cc.season-halloween .lanternL circle{fill:#FF7A1A} .cc.season-halloween .lanternR circle{fill:#9B5CFF}
.cc.season-winter .lanternL circle{fill:#FF3B3B} .cc.season-winter .lanternR circle{fill:#3BD16F}
.cc.season-halloween .lantern-glass{fill:#FFA24D} .cc.season-winter .lantern-glass{fill:#FFE8A8}
.cc.season-newyear .lanternL circle{fill:#FFD447} .cc.season-newyear .lanternR circle{fill:#DDE6F5}
.cc.season-groundhog .lanternL circle{fill:#FFE27A} .cc.season-groundhog .lanternR circle{fill:#A9CBFF}   /* spring, or six more weeks of winter */
.cc.season-lunar .lanternL circle, .cc.season-lunar .lanternR circle, .cc.season-canada .lanternL circle{fill:#FF3B2F}
.cc.season-canada .lanternR circle{fill:#FFFFFF}
.cc.season-valentine .lanternL circle{fill:#FF4F7A} .cc.season-valentine .lanternR circle{fill:#FF9BB8}
.cc.season-stpatrick .lanternL circle, .cc.season-stpatrick .lanternR circle{fill:#3BD16F}
.cc.season-ramadan .lanternL circle, .cc.season-eidfitr .lanternL circle, .cc.season-eidadha .lanternL circle{fill:#FFC45A}
.cc.season-ramadan .lanternR circle, .cc.season-eidfitr .lanternR circle, .cc.season-eidadha .lanternR circle{fill:#5FE0C8}
.cc.season-diwali .lanternL circle, .cc.season-diwali .lanternR circle{fill:#FFB22E}
.cc.season-thanksgiving .lanternL circle{fill:#E8892B} .cc.season-thanksgiving .lanternR circle{fill:#F2B632}
.cc.season-hanukkah .lanternL circle, .cc.season-hanukkah .lanternR circle{fill:#5AA8FF}
.cc.season-kwanzaa .lanternL circle{fill:#FF3B3B} .cc.season-kwanzaa .lanternR circle{fill:#3BD16F}
.cc.season-lunar .lantern-glass, .cc.season-canada .lantern-glass, .cc.season-valentine .lantern-glass{fill:#FFB09A}
.cc.season-hanukkah .lantern-glass{fill:#CFE4FF}

/* ---------- the occasions: the figures on the shelf, the bulbs on the swag, the candles ---------- */
.cc .oc{display:none}
.cc.season-newyear .oc-newyear, .cc.season-lunar .oc-lunar, .cc.season-groundhog .oc-groundhog, .cc.season-valentine .oc-valentine,
.cc.season-stpatrick .oc-stpatrick, .cc.season-ramadan .oc-ramadan, .cc.season-eidfitr .oc-eidfitr, .cc.season-eidadha .oc-eidadha,
.cc.season-canada .oc-canada, .cc.season-halloween .oc-halloween, .cc.season-diwali .oc-diwali, .cc.season-thanksgiving .oc-thanksgiving,
.cc.season-hanukkah .oc-hanukkah, .cc.season-winter .oc-winter, .cc.season-kwanzaa .oc-kwanzaa{display:inline}
.cc text.oc-year{font:800 21px Georgia,"Times New Roman",serif; fill:#F4D57E; text-anchor:middle; letter-spacing:1px}
.cc text.oc-sign{font:800 12px ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; fill:#FFF3D6; text-anchor:middle; letter-spacing:.6px}
.cc .led-oc{opacity:.3} .cc.night .led-oc{opacity:.85}
.cc .fl{display:none} .cc .fl.lit{display:inline}
.cc .fl-f{transform-box:fill-box; transform-origin:50% 100%; animation:flicker 1.1s ease-in-out infinite alternate}
.cc .fl-f + .fl-f{animation-duration:.8s}
@keyframes flicker{0%{transform:scale(1,1)} 40%{transform:scale(.92,1.08)} 70%{transform:scale(1.06,.94)} 100%{transform:scale(.96,1.05)}}
/* the occasions' stars and bulbs blink by their fill (blinkFill), not their opacity: a browser lifts anything whose
   opacity is moving onto a layer of its own, and with it everything drawn over it, which up close came to more
   graphics memory than it keeps for a page (October's bulbs did it). Its name is its own: as "glint" (2026-10-01)
   it took the High detail glass sheen's keyframes, defined later in this file, and the bulbs slid off into the sky. */
.cc .twinkle{animation:blinkFill 1.6s steps(2,end) infinite}
#ocHog{transform:translateY(9px)}
.cc .hog-shadow{opacity:0}
.cc .bob-ghost{animation:ghost 2.6s ease-in-out infinite alternate}
@keyframes ghost{from{transform:translateY(0px)} to{transform:translateY(-5px)}}
.cc .bulb{display:none}
.cc.season-winter .bulb, .cc.season-newyear .bulb, .cc.season-lunar .bulb, .cc.season-valentine .bulb, .cc.season-stpatrick .bulb,
.cc.season-ramadan .bulb, .cc.season-eidfitr .bulb, .cc.season-eidadha .bulb, .cc.season-canada .bulb, .cc.season-halloween .bulb,
.cc.season-diwali .bulb, .cc.season-thanksgiving .bulb, .cc.season-hanukkah .bulb, .cc.season-kwanzaa .bulb{display:inline; animation:blinkFill 1.4s steps(2,end) infinite}
.cc .bulb.b1{animation-delay:-.35s} .cc .bulb.b2{animation-delay:-.7s} .cc .bulb.b3{animation-delay:-1.05s}
.cc.season-winter .b0{fill:#FF3B3B} .cc.season-winter .b1{fill:#3BD16F} .cc.season-winter .b2{fill:#FFD447} .cc.season-winter .b3{fill:#4F8BFF}
.cc.season-newyear .b0, .cc.season-newyear .b2{fill:#FFD447} .cc.season-newyear .b1, .cc.season-newyear .b3{fill:#E6EDF8}
.cc.season-lunar .b0, .cc.season-lunar .b2{fill:#FF3B2F} .cc.season-lunar .b1, .cc.season-lunar .b3{fill:#FFD447}
.cc.season-valentine .b0, .cc.season-valentine .b2{fill:#FF4F7A} .cc.season-valentine .b1, .cc.season-valentine .b3{fill:#FFC2D1}
.cc.season-stpatrick .b0, .cc.season-stpatrick .b2{fill:#2FA84F} .cc.season-stpatrick .b1, .cc.season-stpatrick .b3{fill:#9BE07A}
.cc.season-ramadan .b0, .cc.season-eidfitr .b0, .cc.season-eidadha .b0, .cc.season-ramadan .b2, .cc.season-eidfitr .b2, .cc.season-eidadha .b2{fill:#FFD27A}
.cc.season-ramadan .b1, .cc.season-eidfitr .b1, .cc.season-eidadha .b1, .cc.season-ramadan .b3, .cc.season-eidfitr .b3, .cc.season-eidadha .b3{fill:#5FE0C8}
.cc.season-canada .b0, .cc.season-canada .b2{fill:#FF3B2F} .cc.season-canada .b1, .cc.season-canada .b3{fill:#FFFFFF}
.cc.season-halloween .b0, .cc.season-halloween .b2{fill:#FF7A1A} .cc.season-halloween .b1, .cc.season-halloween .b3{fill:#9B5CFF}
.cc.season-diwali .bulb{fill:#FFC45A} .cc.season-diwali .b1, .cc.season-diwali .b3{fill:#FF8A3D}
.cc.season-thanksgiving .b0, .cc.season-thanksgiving .b2{fill:#E8892B} .cc.season-thanksgiving .b1, .cc.season-thanksgiving .b3{fill:#F2C531}
.cc.season-hanukkah .b0, .cc.season-hanukkah .b2{fill:#5AA8FF} .cc.season-hanukkah .b1, .cc.season-hanukkah .b3{fill:#FFFFFF}
.cc.season-kwanzaa .b0{fill:#FF3B3B} .cc.season-kwanzaa .b1{fill:#2A2A2A} .cc.season-kwanzaa .b2{fill:#3BD16F} .cc.season-kwanzaa .b3{fill:#2A2A2A}

/* ---------- the two engines: black, or blue in gold lining ---------- */
.cc .loco-blue{display:none}
.cc.engine-blue .loco-blue{display:inline}
.cc.engine-blue .loco-black{display:none}
.cc text.veh-id{font:800 11px ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; text-anchor:middle; letter-spacing:.3px}
.cc text.veh-id.small{font-size:6.5px; letter-spacing:.6px}
.cc text.veh-id.big{font-size:13px}
.cc text.veh-id.mid{font-size:8px; letter-spacing:.2px}
.cc text.veh-id.tiny{font-size:5px; letter-spacing:.2px}
/* the PSE lineman rests his arm in the bucket; the spark shows only while he works */
.cc .pse-arm{transform:rotate(-148deg)}
.cc .pse-spark{opacity:0}
/* the buses: Route 215's amber destination sign, the school bus's STOP arm (folded flat
   until it stops) and its red lights, which flash only while it is stopped */
.cc text.veh-id.sign{font:700 4.6px ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace; fill:#FFB020; letter-spacing:.2px}
.cc text.veh-id.stop{font-size:3.6px; fill:#fff; letter-spacing:0}
.cc text.veh-id.rally{font-size:2.5px; fill:#fff; letter-spacing:.15px}
/* DirtFish's rally cars bounce on the gravel and throw up dust behind them */
.cc .veh.run .rally-bounce{animation:rbounce .16s ease-in-out infinite alternate}
.cc .veh.run [id$="rallyB"] .rally-bounce{animation-delay:-.08s}
@keyframes rbounce{from{transform:translateY(0px)} to{transform:translateY(-.8px)}}
.cc .rally-dust ellipse{opacity:0}
.cc .veh.run .rally-dust ellipse{transform-box:fill-box; transform-origin:50% 100%; animation:rdust .45s ease-out infinite}
@keyframes rdust{0%{opacity:.8; transform:scale(.4)} 100%{opacity:0; transform:translate(3px,-2px) scale(1.5)}}
@media (prefers-reduced-motion: reduce){ .cc .veh.run .rally-bounce, .cc .veh.run .rally-dust ellipse{animation:none} }
.cc .sb-arm{transform:scaleX(.12)}
.cc .sb-red{opacity:.35}
.cc .led-sb{opacity:0}
.cc .veh.stopped .sb-red{opacity:1; animation:blink .5s steps(1,end) infinite}
.cc .veh.stopped .led-sb{opacity:.9}
.cc text.stop-sign-t{font:800 5px ui-sans-serif,system-ui,Arial,sans-serif; fill:#fff; text-anchor:middle; letter-spacing:.6px}
.cc text.stop-sign-n{font:800 11px ui-sans-serif,system-ui,Arial,sans-serif; fill:#1F3B6E; text-anchor:middle}
/* the transfer: the 2 Line roundel, and Mercer Island Station's sign, up only while the bus and train meet */
.cc text.veh-id.roundel{font-size:6.4px; fill:#fff}
.cc text.veh-id.nwrm{font-size:4.3px; fill:#E1B94E; letter-spacing:.1px}
/* Christmas in the valley (clock.js xmas()): the tree farm from the middle of November to Christmas Eve, and the
   train's lights from the day after Thanksgiving to New Year's Day, every other bulb twinkling */
.cc .s-treefarm, .cc .xmas-lights{display:none}
.cc.treefarm .s-treefarm, .cc.xmas-train .xmas-lights{display:inline}
.cc .xmas-lights .xl-b{animation:xlTwinkle 1.4s steps(1) infinite}
.cc .xmas-lights .xl-p{animation-delay:-.7s}
@keyframes xlTwinkle{0%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){ .cc .xmas-lights .xl-b{animation:none} }
/* summer on the river, by day only: tubes drift down under the trestle, a float bobs, a fish jumps */
.cc .s-summer{display:none}
.cc.summer:not(.night) .s-summer{display:inline}
.cc .s-tube{animation:tube 42s linear infinite}
.cc .s-tube.t1{animation-delay:-14s} .cc .s-tube.t2{animation-delay:-29s}
@keyframes tube{0%{transform:translate(446px,876px) rotate(0deg); opacity:0} 4%{opacity:1}
  30%{transform:translate(506px,904px) rotate(40deg)} 60%{transform:translate(560px,946px) rotate(-20deg)}
  85%{transform:translate(598px,986px) rotate(30deg); opacity:1} 92%{transform:translate(612px,1004px) rotate(10deg); opacity:0} 100%{transform:translate(612px,1004px); opacity:0}}
.cc .d-tube{animation:dtube 26s linear infinite}
@keyframes dtube{0%{transform:translate(200px,1221px); opacity:0} 6%{opacity:1} 50%{transform:translate(236px,1233px)}
  88%{transform:translate(262px,1246px); opacity:1} 96%{transform:translate(268px,1256px); opacity:0} 100%{transform:translate(268px,1256px); opacity:0}}
.cc .s-bob{animation:floatbob 2.4s ease-in-out infinite alternate}
@keyframes floatbob{from{transform:translateY(0px)} to{transform:translateY(2px)}}
.cc .s-jump{opacity:0; animation:fishjump 14s ease-in-out infinite}
@keyframes fishjump{0%,80%{transform:translate(566px,968px) rotate(-40deg); opacity:0} 82%{opacity:1}
  88%{transform:translate(578px,944px) rotate(0deg); opacity:1} 94%{transform:translate(590px,966px) rotate(50deg); opacity:1} 96%,100%{transform:translate(590px,970px); opacity:0}}
@media (prefers-reduced-motion: reduce){ .cc .s-tube, .cc .d-tube, .cc .s-jump{animation:none} .cc .s-tube.t0{transform:translate(506px,904px)} .cc .d-tube{transform:translate(236px,1233px)} }
/* trick-or-treaters, in front of the clock on October's evenings: clock.js trickOrTreat() shows them while they come */
.cc .s-trick{display:none}
/* at rest the diorama in the base is never quite still, and never makes a sound:
   clouds drift behind its Mount Si, a bird crosses now and then, a fish leaps at
   the plunge pool, the rabbit's ears twitch, the deer flicks its tail, the cat's
   tail swishes. And something funny is always going on (clock.js GAGS). */
.cc .d-cloud{animation:dcloud 96s linear infinite}
.cc .d-cloud.c2{animation-duration:130s; animation-delay:-70s}
@keyframes dcloud{from{transform:translateX(40px)} to{transform:translateX(620px)}}
.cc.night .d-clouds{opacity:.25}
.cc .d-bird{transform:translate(40px,1130px); animation:dbird 41s linear infinite}
@keyframes dbird{0%,82%{transform:translate(40px,1130px)} 91%{transform:translate(320px,1124px)} 100%{transform:translate(600px,1128px)}}
.cc .d-wings{animation:dwing .22s linear infinite alternate}
@keyframes dwing{from{transform:scaleY(1)} to{transform:scaleY(-.5)}}
.cc .d-fish{opacity:0; animation:dfish 27s linear infinite}
@keyframes dfish{0%,95.9%{transform:translate(0px,0px) rotate(-50deg); opacity:0} 96%{opacity:1} 97.8%{transform:translate(-5px,-9px) rotate(0deg)}
  99.5%{transform:translate(-10px,0px) rotate(50deg); opacity:1} 100%{transform:translate(-10px,0px) rotate(50deg); opacity:0}}
.cc.night .d-bird, .cc.night .d-fish{display:none}
.cc .d-ear{transform-box:fill-box; transform-origin:50% 100%; animation:dear 5.3s ease-in-out infinite}
.cc .d-ear.e2{animation-delay:-.2s}
@keyframes dear{0%,88%,100%{transform:rotate(0deg)} 91%{transform:rotate(-16deg)} 94%{transform:rotate(6deg)}}
.cc .d-flick{transform-box:fill-box; transform-origin:0% 60%; animation:dflick 6.7s ease-in-out infinite}
@keyframes dflick{0%,90%,100%{transform:rotate(0deg)} 93%{transform:rotate(-28deg)} 96%{transform:rotate(12deg)}}
.cc .d-swish{transform-box:fill-box; transform-origin:0% 100%; animation:dswish 4.6s ease-in-out infinite alternate}
@keyframes dswish{from{transform:rotate(-6deg)} to{transform:rotate(9deg)}}
@media (prefers-reduced-motion: reduce){ .cc .d-cloud, .cc .d-bird, .cc .d-wings, .cc .d-fish, .cc .d-ear, .cc .d-flick, .cc .d-swish{animation:none} .cc .d-bird{display:none} }
/* the gags' own motion: each is hidden until clock.js plays it */
.cc .d-gag{display:none}
.cc .d-rain path{animation:drain .5s linear infinite}
@keyframes drain{from{transform:translateY(0px); opacity:1} to{transform:translateY(4px); opacity:0}}
.cc .d-beewings{transform-box:fill-box; transform-origin:50% 100%; animation:bwing .07s linear infinite alternate}
@keyframes bwing{from{transform:scaleY(1)} to{transform:scaleY(.3)}}
.cc .d-steam{animation:dsteam 2.2s ease-in-out infinite}
@keyframes dsteam{0%{transform:translateY(0px); opacity:.2} 50%{opacity:.9} 100%{transform:translateY(-2.5px); opacity:0}}
.cc .d-fly{opacity:.95}
.cc text.veh-id.stn{font-size:3.4px; fill:#1E2A4A; letter-spacing:.25px}
.cc text.veh-id.upick{font-size:3px; fill:#C0392B}
.cc text.veh-id.card{font:900 5.6px Georgia,"Times New Roman",serif; fill:#1E3A78; letter-spacing:.6px}
.cc text.veh-id.cardsm{font:italic 600 3.2px Georgia,"Times New Roman",serif; fill:#FFFFFF; text-anchor:start}
.cc text.veh-id.cardhand{font:italic 700 5px Georgia,"Times New Roman",serif; fill:#3A2A1A}
.cc text.veh-id.agscore{font:900 4.4px ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; fill:#1A1A1A; letter-spacing:0}
.cc text.veh-id.cardsm2{font:italic 500 3px Georgia,"Times New Roman",serif; fill:#6A5A4A}
.cc text.spd-t{font:800 3.1px ui-sans-serif,system-ui,Arial,sans-serif; fill:#3A2A10; letter-spacing:.2px}
@media (prefers-reduced-motion: reduce){ .cc .d-rain path, .cc .d-beewings, .cc .d-steam{animation:none} }
/* the Workshop view's names for the valley's landmarks */
.cc .s-ws{display:none}
.cc.xray .s-ws{display:inline}
.cc .s-ws text{font:600 13px ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
/* the air over the valley: rotors blur, a balloon's burner flares now and then */
.cc .rotor{transform-box:fill-box; transform-origin:50% 50%; animation:rotor .12s linear infinite alternate}
.cc .rotor-b{animation-delay:-.06s}
.cc .rotor-t{transform-box:fill-box; transform-origin:50% 50%; animation:rotor .08s linear infinite alternate}
@keyframes rotor{from{transform:scaleX(1)} to{transform:scaleX(.25)}}
.cc .air-burn{opacity:0; animation:burner 9s steps(1,end) infinite}
@keyframes burner{0%,80%{opacity:0} 82%,90%{opacity:1} 92%{opacity:0}}
.cc .led-air{opacity:.9}
/* a bald eagle soars, and beats its wings only now and then, slowly (each
   wing pivots at the body); geese beat theirs all the way, a touch out of step */
.cc .e-l{animation:eflapl 9s ease-in-out infinite}
.cc .e-r{animation:eflapr 9s ease-in-out infinite}
@keyframes eflapl{0%,78%,100%{transform:rotate(0deg)} 82%{transform:rotate(-16deg)} 86%{transform:rotate(12deg)} 90%{transform:rotate(-16deg)} 94%{transform:rotate(8deg)}}
@keyframes eflapr{0%,78%,100%{transform:rotate(0deg)} 82%{transform:rotate(16deg)} 86%{transform:rotate(-12deg)} 90%{transform:rotate(16deg)} 94%{transform:rotate(-8deg)}}
.cc .g-wing{animation:gflap .52s ease-in-out infinite alternate}
@keyframes gflap{from{transform:scaleY(1)} to{transform:scaleY(-.7)}}
@media (prefers-reduced-motion: reduce){ .cc .e-l, .cc .e-r, .cc .g-wing{animation:none} }
.cc .st-sign{display:none}
.cc.transfer .st-sign{display:inline}
.cc text.st-roundel{font:800 12px ui-sans-serif,system-ui,Arial,sans-serif; fill:#fff; text-anchor:middle}
.cc text.st-name{font:800 9px ui-sans-serif,system-ui,Arial,sans-serif; fill:#fff; text-anchor:middle; letter-spacing:.5px}
.cc text.st-sub{font:700 5.4px ui-sans-serif,system-ui,Arial,sans-serif; fill:#9FD3F0; text-anchor:middle; letter-spacing:.6px}
.cc .led-spark{opacity:.9}

/* ---------- Mount Si's winter snow ---------- */
.cc .snow-extra{display:none}
.cc.season-winter .snow-extra{display:inline}

/* ---------- night sky ---------- */
.cc .stars{opacity:0}
.cc.night .stars{opacity:1}
.cc.night .ds1{stop-color:#0C1834} .cc.night .ds2{stop-color:#2A3F6A}
.cc .fireflies{opacity:.25}
.cc.night .fireflies{opacity:1}
.cc .fireflies circle{animation:ff 2.8s ease-in-out infinite}
@keyframes ff{0%,100%{opacity:.1} 50%{opacity:1}}
.cc .nightonly{opacity:0}
.cc.night .nightonly{opacity:1}
.cc.night .dayonly{opacity:0}

/* ---------- Don't Talk to Elk: rage and politeness, switched on the instant ---------- */
.cc .et{display:none}
.cc.elktalk .et{display:inline}
#etL, #etR{opacity:0; transform:translate(0px,30px) scale(.4)}
.cc .et .et-rage, .cc .et .et-nice{opacity:0}
.cc .et.rage .et-rage, .cc .et.nice .et-nice{opacity:1}
.cc .et-bub.rage rect, .cc .et-bub.rage path{fill:#FFE3DD; stroke:#C0251B}
.cc .et-bub.rage text{fill:#9A1B12}
.cc .et-bub.nice rect, .cc .et-bub.nice path{fill:#EAF6E4; stroke:#3E7A4A}
.cc .et-bub.nice text{fill:#1E4A2A}

/* ---------- the valley mystery: fog in the firs, owls watching ---------- */
.cc .fog{opacity:0; transition:opacity 1.4s}
.cc.foggy .fog{opacity:1}
.cc .owl-eyes{opacity:0}
.cc.foggy .s-lodge-lit{animation:flick 1.7s steps(2,end) infinite}
@keyframes flick{0%{opacity:1} 50%{opacity:.35}}

/* ---------- water ---------- */
.cc .falls-streak{stroke-dasharray:7 9; animation:fall .7s linear infinite}
.cc.surge .falls-streak{animation-duration:.32s}
.cc .stream-streak{stroke-dasharray:6 12; animation:fall 1.5s linear infinite}
.cc .mist ellipse{animation:mist 2.4s ease-in-out infinite alternate}
.cc.surge .mist ellipse{animation-duration:.9s}
@keyframes fall{to{stroke-dashoffset:-16}}
@keyframes mist{from{opacity:.3} to{opacity:.85}}
.cc.falls-still .falls-streak, .cc.falls-still .stream-streak, .cc.falls-still .mist ellipse,
.cc.falls-still .sheet-streak{animation:none}
.cc .water-sheet{display:none}
.cc.sheet-on .water-sheet{display:inline}
.cc .sheet-streak{stroke-dasharray:18 30; animation:sheet 1.3s linear infinite}
@keyframes sheet{to{stroke-dashoffset:-48}}

/* ---------- the pendulum and its rider ---------- */
#pend{animation:swing 1s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-8deg)} to{transform:rotate(8deg)}}
.cc .lag{animation:lag 1s ease-in-out infinite alternate; animation-delay:-.5s}
@keyframes lag{from{transform:rotate(13deg)} to{transform:rotate(-13deg)}}
.cc .bob{display:none}
.cc.bob-sasquatch #bobSasquatch, .cc.bob-salmon #bobSalmon, .cc.bob-leaf #bobLeaf{display:inline}

/* ---------- weather ---------- */
#cloud{transform:translateX(-170px)}
.cc .rain{opacity:0}
.cc.raining .rain{opacity:1}
.cc .rain path{animation:rain .5s linear infinite}
@keyframes rain{from{transform:translateY(-4px); opacity:0} 30%{opacity:1} to{transform:translateY(26px); opacity:0}}
.cc .steam path{animation:steam 1.6s ease-in-out infinite}
@keyframes steam{0%,100%{opacity:.2; transform:translateY(0)} 50%{opacity:.9; transform:translateY(-3px)}}

/* puffs of steam and dust grow about their own centres, not the clock's corner */
.cc .puff{transform-box:fill-box; transform-origin:50% 50%}

/* ---------- the track ---------- */
.cc .veh{display:none}
.cc .veh.run{display:inline}
.cc .veh.run .wheel{animation:spin .5s linear infinite}
@keyframes spin{to{transform:rotate(-360deg)}}
.cc .veh.run .vlA{animation:blink .5s steps(1,end) infinite}
.cc .veh.run .vlB{animation:blink .5s steps(1,end) infinite; animation-delay:-.25s}
@keyframes blink{0%{opacity:1} 50%{opacity:.06}}
@keyframes blinkFill{0%{fill-opacity:1} 50%{fill-opacity:.06}}

/* the bald eagles' nest (art.js eagleNest): who is home, by the month (clock.js sets nest-* from P.nestPhase); one of
   the pair is always on the dead branch, and away while it flies (nest-out) */
.cc .n-stand, .cc .n-low, .cc .n-chicks, .cc .n-young, .cc .n-branch{display:none}
.cc.nest-court .n-stand, .cc.nest-sit .n-low, .cc.nest-chicks .n-stand, .cc.nest-chicks .n-chicks, .cc.nest-eaglets .n-young,
.cc.nest-fledge .n-young.y1, .cc.nest-fledge .n-branch, .cc.nest-juv .n-branch{display:inline}
.cc.nest-out .n-perch{visibility:hidden}

/* ---------- resting poses ---------- */
.cc .perf{opacity:0; transform:translate(0px,-6px) scale(.55)}
#shelMove{opacity:0; transform:translate(-4px,0px) scale(.5)}
#cArmL{transform:rotate(10deg)}
#cArmR{transform:rotate(-10deg)}
#cSpring{transform:scaleY(0)}
#zebLMove, #zebRMove{transform:translate(0px,66px) rotate(0deg)}
#zLLid, #zRLid, #pZebLid, #pOwlLids{transform:scaleY(0)}
#pFrogSac{transform:scale(.25)}
#pFrogTongue{transform:scale(0)}
#wcMouth, #pCatMouth{transform:scaleY(0)}

/* ---------- the valley (landscape) ---------- */
.cc.night .sk1{stop-color:#060D22} .cc.night .sk2{stop-color:#122346} .cc.night .sk3{stop-color:#2C416B}
/* the Moon shows when it is up, as it really is: faint by day, bright at night */
.cc .s-moon{opacity:0}
.cc.moon-up .s-moon{opacity:.5}
.cc.night.moon-up .s-moon{opacity:1}
.cc.night .s-sun{opacity:0}
.cc.night .s-clouds{opacity:.16}
.cc.night .s-haze{opacity:.3}
.cc .s-night{opacity:0}
.cc.night .s-night{opacity:1}
.cc.cc-scene .fireflies{opacity:0}
.cc.cc-scene.night .fireflies{opacity:1}
.cc.cc-scene:not(.night) .fireflies circle{animation:none}
.cc .s-streak{stroke-dasharray:46 38; animation:sfall .9s linear infinite}
.cc.surge .s-streak{animation-duration:.45s}
@keyframes sfall{to{stroke-dashoffset:-84}}
.cc .s-rstreak{stroke-dasharray:30 40; animation:sriver 2.2s linear infinite}
@keyframes sriver{to{stroke-dashoffset:-70}}
.cc.falls-still .s-streak, .cc.falls-still .s-rstreak{animation:none}
#sgz0Head{animation:graze 11s ease-in-out infinite}
#sgz1Head{animation:graze 13s ease-in-out -4s infinite}
#sgz2Head{animation:graze 9s ease-in-out -7s infinite}
@keyframes graze{0%,50%{transform:rotate(0deg)} 60%,88%{transform:rotate(-70deg)} 96%,100%{transform:rotate(0deg)}}
#sCloud{transform:translateX(-700px)}

/* ---------- High detail ----------
   Textures, a key light, glass and brass, and lit volume on the figures.
   Standard detail never pays for any of it: every piece is display:none, and
   the filters only attach under .hq. */
.cc .hq{display:none}
.cc.hq .hq{display:inline}
.cc .glint{opacity:0}
.cc.hq .glint{animation:glint 11s ease-in-out infinite}
@keyframes glint{0%,78%{transform:translateX(0px); opacity:0} 80%{opacity:1} 92%{transform:translateX(470px); opacity:1} 94%,100%{transform:translateX(480px); opacity:0}}
/* lit volume only on figures that move for a moment; the pendulum swings forever and the
   vehicles cross the whole screen, so a lighting filter on either would be paid every frame */
.cc.hq .perf > g, .cc.hq #shelMove, .cc.hq #winCat, .cc.hq #zebLMove, .cc.hq #zebRMove, .cc.hq #rabbit, .cc.hq .et{filter:url(#fVol)}
.cc.hq #garland, .cc.hq #scallops, .cc.hq #spandrels, .cc.hq #dentils, .cc.hq #doors,
.cc.hq #hourHand, .cc.hq #minHand{filter:url(#fCarve)}

/* ---------- the workshop view ---------- */
.cc #workshop{display:none}
.cc.xray #workshop{display:inline}
.cc.xray #ccArt{opacity:.72}

@media (prefers-reduced-motion:reduce){ .cc *{animation:none !important; transition:none !important} }

/* An engine without transform-box (Chromium before 64: LG's TVs from 2018 and
   2019, Samsung's from 2018) would turn these small loops about the drawing's
   corner, so they would sweep across the scene. There they hold still instead. */
@supports not (transform-box:fill-box){
  .cc .fl-f,
  .cc .veh.run .rally-dust ellipse,
  .cc .d-ear,
  .cc .d-flick,
  .cc .d-swish,
  .cc .d-beewings,
  .cc .rotor,
  .cc .rotor-t,
  .cc .puff{animation:none}
}