/* The living forest on the homepage hero (dist/forest-life.js).
   Everything sits in .fl-stage, a 1:1 copy of forest.jpg's pixel grid that the
   script scales like the cover photo, so the cut-outs below use image pixels.
   The layer stays hidden until the script has placed it; without JS the still
   painting is what people see. */
.forest-life{position:static}
.fl-scene{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}
.fl-stage{position:absolute;left:0;top:0;width:1800px;height:1013px;transform-origin:0 0}
.fl-stage img{position:absolute;display:block;max-width:none}

/* Train-free trestle, then the train inside the stretch of line it can be seen on:
   from behind the big trunk (x 250) to the pavilion post (x 1508). */
.fl-plate{left:840px;top:450px;width:660px;height:190px}
.fl-track{position:absolute;left:250px;top:400px;width:1258px;height:250px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.fl-train{position:absolute;left:600px;top:55px;width:660px;height:185px;will-change:transform}
.fl-train img{top:0;height:185px}
.fl-loco{left:0;width:340px}
.fl-car{left:340px;width:320px;transform-origin:50% 92%}

/* The fence, trunk and bamboo redrawn over the line, so the train runs behind them. */
.fl-occluder{left:200px;top:440px;width:486px;height:210px}
.fl-bamboo,.fl-bamboo-halo{left:255px;top:380px;width:175px;height:220px}

/* Foreground sway: a few pixels at the tips, never more than each cut-out's soft edge. */
.fl-sway{transform-origin:50% 100%;animation:fl-skew 5.8s ease-in-out infinite alternate;will-change:transform}
.fl-bamboo,.fl-bamboo-halo{transform-origin:50% 98%;animation-duration:5.2s;animation-delay:-1.3s}
.fl-branch{left:310px;top:0;width:290px;height:204px;transform-origin:0 38%;animation-name:fl-hang;animation-duration:6.6s;animation-delay:-2.1s}
.fl-fern{left:0;top:690px;width:416px;height:322px;transform-origin:0 100%;animation-duration:6.1s;animation-delay:-3.4s}
.fl-plants{left:370px;top:874px;width:280px;height:138px;animation-duration:4.7s;animation-delay:-.8s}
@keyframes fl-skew{from{transform:skewX(.55deg)}to{transform:skewX(-.6deg)}}
@keyframes fl-hang{from{transform:rotate(-.5deg)}to{transform:rotate(.45deg)}}
.forest-life.is-still .fl-sway{animation-play-state:paused}

/* Soft cream puffs from the loco stack. */
.fl-smoke{position:absolute;inset:0}
.fl-puff{position:absolute;width:54px;height:44px;margin:-28px 0 0 -27px;border-radius:50%;background:radial-gradient(closest-side,rgb(253 247 232/.97),rgb(250 241 222/.66) 52%,rgb(250 241 222/0));opacity:0;will-change:transform,opacity}
.fl-puff::before,.fl-puff::after{content:"";position:absolute;border-radius:50%;background:inherit}
.fl-puff::before{left:-24%;top:30%;width:66%;height:66%}
.fl-puff::after{left:56%;top:18%;width:60%;height:60%}
.fl-puff--small{width:36px;height:30px;margin:-19px 0 0 -18px}

/* Click target over the train: no visible chrome, focus ring only. */
.fl-train-hit{position:absolute;z-index:1;left:0;top:0;padding:0;border:0;border-radius:var(--binoki-radius-control);background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.fl-train-hit[hidden]{display:none}
.fl-train-hit:focus-visible,.fl-sound:focus-visible{outline:var(--binoki-focus-width) solid var(--binoki-color-white)!important;outline-offset:var(--binoki-focus-offset);box-shadow:0 0 0 calc(var(--binoki-focus-offset) + var(--binoki-focus-width)) var(--binoki-color-ink)!important}
.fl-train-hit:focus-visible{background:transparent!important}

/* Forest sound toggle, bottom-right of the hero (the script keeps it clear of the card). */
.fl-sound{position:absolute;z-index:1;right:var(--binoki-spacing-24);bottom:var(--binoki-spacing-24);display:grid;place-items:center;width:var(--binoki-size-touch-min);height:var(--binoki-size-touch-min);padding:0;border:0;border-radius:999px;background:rgb(33 31 27/.62);color:var(--binoki-color-white);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fl-sound:hover{background:rgb(33 31 27/.78)}
.fl-sound .icon{width:20px;height:20px}
.fl-sound[aria-pressed="true"] .fl-sound-off,.fl-sound[aria-pressed="false"] .fl-sound-on{display:none}
@media(max-width:700px){.fl-sound{right:var(--binoki-spacing-16);bottom:var(--binoki-spacing-16)}}

@media(prefers-reduced-motion:reduce){.fl-sway{animation:none}}
@media print{.forest-life{display:none}}
@media(forced-colors:active){
  .fl-train-hit{border:1px dashed ButtonText}
  .fl-sound{border:1px solid ButtonText;forced-color-adjust:auto}
}