/* trail-life: wildlife, night sky, trail sign, footprints */
.tl-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.tl-critters{position:absolute;inset:0;z-index:4;pointer-events:none}
.tl-critter{position:absolute;display:block;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:translate(-50%,-100%);animation:tl-in .5s ease both}
.tl-hawk{transform:translate(-50%,-50%)}
.tl-deer{animation:none}
.tl-critter.still{animation:tl-in .8s ease both}
.tl-critter.leaving{opacity:0;transition:opacity .4s}
.tl-flip,.tl-group{display:flex;align-items:flex-end}
.tl-m{position:relative;display:grid;flex:none}
.tl-m img{grid-area:1/1;align-self:end;justify-self:center;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.tl-m img+img{opacity:0}
.tl-shadow{position:absolute;left:8%;width:84%;border-radius:50%;background:#2b2418;opacity:.4;filter:blur(2px);pointer-events:none}
.tl-bob{animation:tl-bob .3s ease-in-out infinite alternate}
@keyframes tl-bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes tl-in{from{opacity:0}to{opacity:1}}
.evening .tl-critter img,.evening .tl-sign svg,.evening .tl-sign img{filter:brightness(.68) saturate(.8)}
.tl-critter:focus-visible,.tl-sign:focus-visible,.tl-const:focus-visible{outline:2px dashed #fffaf0cc;outline-offset:3px}

.tl-sign{position:absolute;left:78%;top:66%;height:17%;aspect-ratio:120/150;padding:0;border:0;background:none;cursor:pointer;z-index:4;transform:translate(-50%,-100%);transform-origin:50% 100%}
.tl-sign img,.tl-sign svg{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 1px #2b241830)}
.tl-sign.wobble{animation:tl-wobble .9s var(--ease,ease-out)}
@keyframes tl-wobble{0%{rotate:0deg}18%{rotate:-4deg}38%{rotate:3deg}58%{rotate:-1.8deg}78%{rotate:.8deg}100%{rotate:0deg}}

.tl-sky{position:absolute;left:0;right:0;top:0;height:36%;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.evening .tl-sky{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s}
.tl-night{position:absolute;inset:0;background:linear-gradient(to bottom,#080e36e6 0%,#0d1848d6 38%,#142458a8 68%,#1a2c5c52 88%,#1a2c5c00 100%)}
.tl-stars i,.tl-cs{position:absolute;border-radius:50%;background:#fff7dc;box-shadow:0 0 3px 0 #fff7dc99;transform:translate(-50%,-50%)}
.tl-stars i{animation:tl-twinkle 4s ease-in-out infinite}
@keyframes tl-twinkle{0%,100%{opacity:.45;scale:1}50%{opacity:1;scale:1.35}}
.tl-const{position:absolute;padding:0;border:0;background:none;pointer-events:none}
.tl-cs{width:3.4px;height:3.4px;pointer-events:auto;background:#fffdf0;box-shadow:0 0 6px 1px #dbe7ffcc;cursor:pointer}
.tl-cs::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.tl-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .5s;pointer-events:none}
.tl-lines line{stroke:#cfe0ffcc;stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.tl-clabel{position:absolute;left:50%;top:100%;transform:translateX(-50%);white-space:nowrap;font-size:11px;padding:3px 9px;border-radius:14px;background:#22342fe8;color:#efe8d4;border:1px solid #3d5249;opacity:0;transition:opacity .5s;pointer-events:none}
.tl-const:hover .tl-lines,.tl-const:focus-visible .tl-lines,.tl-const.on .tl-lines,.tl-const:hover .tl-clabel,.tl-const:focus-visible .tl-clabel,.tl-const.on .tl-clabel{opacity:1}
.tl-shoot{position:absolute;width:7vw;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(to right,#fff0,#fffbe6);rotate:23deg;transform-origin:100% 50%;opacity:0;box-shadow:0 0 6px #fffbe699}

.tl-prints{position:absolute;inset:0;z-index:2;pointer-events:none}
.tl-print{position:absolute;opacity:0;pointer-events:none;color:#6b6152}
.tl-boot{width:8px;height:16px;background:radial-gradient(ellipse 3.8px 5.2px at 50% 36%,currentColor 94%,#0000 100%),radial-gradient(ellipse 2.7px 2.1px at 50% 85%,currentColor 92%,#0000 100%)}
.tl-paw{width:10px;height:10px;background:radial-gradient(circle at 5px 6.6px,currentColor 2.3px,#0000 2.8px),radial-gradient(circle at 1.9px 3.4px,currentColor 1.1px,#0000 1.5px),radial-gradient(circle at 4.1px 1.6px,currentColor 1.1px,#0000 1.5px),radial-gradient(circle at 6.5px 1.6px,currentColor 1.1px,#0000 1.5px),radial-gradient(circle at 8.4px 3.4px,currentColor 1.1px,#0000 1.5px)}
.evening .tl-print{color:#2d2a26}

@media(prefers-reduced-motion:reduce){.tl-stars i,.tl-bob{animation:none!important}.tl-sign.wobble{animation:none}.tl-shoot{display:none}.tl-lines,.tl-clabel{transition:none}}