/* Fall Challenge 2026: shared fall-foliage finish for the main page, the app and the live board.
   Loaded after each page's own styles. All movement sits inside prefers-reduced-motion: no-preference,
   so anyone who turns motion off still sees every piece of content, fully drawn and still. */
:root{
  /* a simple leaf with a stem, used as a mask so it takes the text color around it */
  --fc-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c4.4 3.2 7.5 7.4 7.5 12.3a7.5 7.5 0 0 1-6.5 7.4V23h-2v-1.8a7.5 7.5 0 0 1-6.5-7.4c0-4.9 3.1-9.1 7.5-12.3z'/%3E%3C/svg%3E");
  /* scattered leaves for dark bands (stat bar, app header, live board) */
  --fc-leaf-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23EFA93C'%3E%3Cpath transform='translate(18 14) rotate(-20 12 12)' d='M12 1.5c4.4 3.2 7.5 7.4 7.5 12.3a7.5 7.5 0 0 1-6.5 7.4V23h-2v-1.8a7.5 7.5 0 0 1-6.5-7.4c0-4.9 3.1-9.1 7.5-12.3z'/%3E%3Cpath transform='translate(100 70) rotate(35 12 12) scale(1.3)' fill='%23D2691E' d='M12 1.5c4.4 3.2 7.5 7.4 7.5 12.3a7.5 7.5 0 0 1-6.5 7.4V23h-2v-1.8a7.5 7.5 0 0 1-6.5-7.4c0-4.9 3.1-9.1 7.5-12.3z'/%3E%3Cpath transform='translate(40 112) rotate(120 12 12) scale(.9)' d='M12 1.5c4.4 3.2 7.5 7.4 7.5 12.3a7.5 7.5 0 0 1-6.5 7.4V23h-2v-1.8a7.5 7.5 0 0 1-6.5-7.4c0-4.9 3.1-9.1 7.5-12.3z'/%3E%3C/g%3E%3C/svg%3E");
  --fc-ease:cubic-bezier(.2,.8,.2,1);
  --fc-autumn:linear-gradient(90deg,#1F4620,#EFA93C 30%,#D2691E 60%,#A6440D 85%,#1E3A5C);
}

html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent;}
::selection{background:#EFA93C; color:#152941;}

/* scrollbars in fall colors */
html{scrollbar-color:#D2691E #EFE5CB;}
::-webkit-scrollbar{width:12px; height:12px;}
::-webkit-scrollbar-track{background:#EFE5CB;}
::-webkit-scrollbar-thumb{background:linear-gradient(#EFA93C,#D2691E 50%,#A6440D); border-radius:999px; border:3px solid #EFE5CB;}
.fc-dark{scrollbar-color:#D2691E #152941;}
.fc-dark ::-webkit-scrollbar-track{background:#152941;}
.fc-dark ::-webkit-scrollbar-thumb{border-color:#152941;}

/* primary buttons: warm pumpkin-to-rust, with a soft shine that sweeps across on hover */
.btn-primary{background:linear-gradient(135deg,#DB7428 0%,#C2561A 55%,#A6440D 100%); color:#fff; box-shadow:0 4px 12px rgba(166,68,13,.25); position:relative; overflow:hidden; isolation:isolate;}
.btn-primary:hover{background:linear-gradient(135deg,#E3802F 0%,#C9601F 55%,#B04A10 100%); box-shadow:0 10px 22px rgba(166,68,13,.32);}
.btn-primary::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%); transform:translateX(-130%);}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .btn-primary::after{transition:transform .7s var(--fc-ease);}
  .btn-primary:hover::after{transform:translateX(130%);}
}

/* progress bars: a slow, gentle shimmer so the totals feel alive */
.progress-fill, .goal .fill, .meter .fill, .act-card .bar i, .loc .track i{position:relative; overflow:hidden;}
@media (prefers-reduced-motion: no-preference){
  .progress-fill::after, .goal .fill::after, .meter .fill::after, .act-card .bar i::after, .loc .track i::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
    transform:translateX(-100%); animation:fc-shimmer 3.2s ease-in-out infinite;}
}
@keyframes fc-shimmer{60%,100%{transform:translateX(100%);}}

/* small leaf mark, used before section labels */
.fc-leaf-mark::before, .tag-mini::before, .eyebrow::before, .panel > .label::before{
  content:""; display:inline-block; width:.95em; height:.95em; margin-right:.4em; vertical-align:-.12em; background:currentColor;
  -webkit-mask:var(--fc-leaf) center/contain no-repeat; mask:var(--fc-leaf) center/contain no-repeat; transform:rotate(-18deg);}

/* shared motion */
@keyframes fc-rise{from{opacity:0; translate:0 18px;}}
@keyframes fc-float{50%{translate:0 10px; rotate:4deg;}}
@keyframes fc-pop{0%{opacity:0; scale:.6;} 70%{scale:1.08;} 100%{opacity:1; scale:1;}}
@keyframes fc-sway{0%,100%{rotate:-6deg;} 50%{rotate:6deg;}}