/* Thanksgiving overlay (inc/thanksgiving.php): autumn leaves drifting down
   over the page, and a few resting along the bottom edge. It never takes a
   click (pointer-events: none) and has nothing to switch on or off. */
.tg-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.tg-layer *{pointer-events:none}

/* a falling leaf: the outer box falls and drifts, the inner one tumbles */
.tg-leaf{position:absolute;top:0;left:var(--x,50%);width:var(--s,26px);height:var(--s,26px);
  transform:translate3d(0,-12vh,0);animation:tg-fall var(--d,12s) linear var(--w,0s) infinite;will-change:transform}
.tg-leaf svg{display:block;width:100%;height:100%;animation:tg-tumble var(--t,3.4s) ease-in-out infinite alternate;
  filter:drop-shadow(0 2px 3px #0006)}
@keyframes tg-fall{
  0%{transform:translate3d(0,-12vh,0)}
  25%{transform:translate3d(calc(var(--dx,6vw)*.6),22vh,0)}
  50%{transform:translate3d(calc(var(--dx,6vw)*-.2),52vh,0)}
  75%{transform:translate3d(calc(var(--dx,6vw)*.8),82vh,0)}
  100%{transform:translate3d(var(--dx,6vw),112vh,0)}}
@keyframes tg-tumble{from{transform:rotate(var(--r0,-40deg)) rotateX(0)}to{transform:rotate(var(--r1,60deg)) rotateX(50deg)}}

/* leaves resting along the bottom edge */
.tg-rest{position:absolute;bottom:-6px;width:var(--s,30px);height:var(--s,30px);transform:rotate(var(--r0,0deg));opacity:.92}
.tg-rest svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px #0007)}

/* phones: no resting leaves, so nothing sits over a sticky bottom bar */
@media (max-width:767.98px){.tg-rest{display:none}}

/* Reduced motion: nothing falls. Four still leaves sit in the corners. */
@media (prefers-reduced-motion:reduce){
  .tg-leaf{display:none}
}