/* The weekly goal (foxWeek.js): Home's slim bar and deal, the Sunday reading
   by the fire, the fox's journal, the saver count and the top-bar pill.
   Colours come from the page tokens in pages.css; the fireside scene is
   always an evening, in both themes. Everything moves only with motion
   allowed (.fw-anim); the one-off moment of a new reading is .fw-fresh,
   offset by --fw-delay so a redraw carries on instead of starting over. */

/* ---------- Home: the bar and the deal ---------- */

.fw-strip { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 7px; }
.fw-strip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--c-soft); }
.fw-amount b { color: var(--c-ink); font-weight: 600; }
.fw-track { position: relative; height: 6px; border-radius: 999px; background: var(--c-chart-grey); }
.fw-track i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-chart-2), var(--c-accent)); transition: width 0.6s ease; }
.fw-marker { position: absolute; top: 50%; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; background: var(--c-card); border: 3px solid var(--c-accent); transform: translate(-50%, -50%); transition: left 0.6s ease; }
.fw-strip.is-met .fw-track i { background: var(--c-accent); }
.fw-strip.is-met .fw-marker { background: var(--c-accent); }
.fw-deal { margin: 0; font-size: 13px; line-height: 1.45; color: var(--c-soft); }
.fw-strip.is-met .fw-deal { color: var(--c-ink); font-weight: 600; }
.fw-strip.is-met .fw-deal::before { content: "\2713"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); font-size: 10px; vertical-align: 1px; }
.fw-signin { display: inline; min-height: 0; padding: 0 0 0 6px; font-size: 13px; text-decoration: underline; }

.fw-savers { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--c-chip); color: var(--c-ink); font: 600 12.5px var(--sans); white-space: nowrap; }
.fw-saver-icon { width: 16px; height: 16px; color: var(--c-accent); flex: none; }
.fw-savers.is-none { color: var(--c-soft); }
.fw-savers.is-none .fw-saver-icon { color: var(--c-faint); }

.fw-patterns-savers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

/* ---------- Home: the reading card ---------- */

.fw-reading { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 20px; align-items: start; }
.fw-reading-text .eyebrow { margin: 0 0 4px; }
.fw-why { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--c-soft); }
.fw-chapter-title { margin: 0 0 6px; font: 600 15.5px/1.3 var(--serif); color: var(--c-ink); }
.fw-page { margin: 0; font: 400 15px/1.6 var(--serif); color: var(--c-ink); }
.fw-after { margin: 10px 0 0; font: italic 400 13.5px/1.45 var(--serif); color: var(--c-soft); }
.fw-cold-line { margin-bottom: 8px; }
.fw-journal-btn { margin-top: 8px; padding-left: 0; }

/* ---------- the scene by the fire ---------- */

.fw-scene {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 5 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #24324e 0%, #3e4566 52%, #6a5866 78%, #7a6460 100%);
}
.fw-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1px 1px at 18% 16%, #fff8 50%, transparent), radial-gradient(1px 1px at 42% 9%, #fff7 50%, transparent), radial-gradient(1.5px 1.5px at 66% 20%, #fff9 50%, transparent), radial-gradient(1px 1px at 86% 12%, #fff6 50%, transparent); }
.fw-scene::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -20%; height: 44%; border-radius: 50%; background: #2c3c2f; }
.fw-r-cold { background: linear-gradient(180deg, #232a36 0%, #343b48 60%, #474b52 100%); }
.fw-r-cold::after { background: #2a312c; }

.fw-glow { position: absolute; z-index: 1; right: -8%; bottom: -10%; width: 72%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 72, 0.5), rgba(255, 150, 60, 0.12) 60%, transparent); }
.fw-r-cold .fw-glow { display: none; }

.fw-fox { position: absolute; z-index: 2; left: 5%; bottom: 7%; width: 47%; }
.fw-crop { position: absolute; inset: 0; overflow: hidden; }
/* The storybook fox's layers (storyFox.js), placed by foxWeek.js so the crop
   shows him on his log; .fw-fox-top is his upper body, turning at the hips. */
.fw-crop .fw-fox-layers { position: absolute; max-width: none; }
.fw-fox .sf-p-blink { opacity: 0; }
.fw-r-cold .fw-crop { filter: saturate(0.6) brightness(0.85); }

/* The storybook campfire (viewBox 20 150 190 130): the ring and logs as one
   picture, the three flame layers over it in the flames' own box. */
.fw-fire { position: absolute; z-index: 3; right: 3%; bottom: 3%; width: 42%; aspect-ratio: 190 / 130; }
.fw-fire-base { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.fw-flame { position: absolute; left: 18.95%; top: 7.69%; width: 38.95%; height: 73.85%; transform-origin: 50% 100%; }
.fw-flame img { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; user-select: none; }
.fw-fire-svg { position: absolute; left: 8%; bottom: 34%; width: 70%; height: auto; overflow: visible; }

/* The book is in the drawing; one loose page (HTML) lifts off it and turns
   while he reads (.fw-fresh), then is gone again. */
.fw-papers { position: absolute; z-index: 3; left: var(--paw-x); top: var(--paw-y); width: 21%; aspect-ratio: 4 / 5; transform: translate(0, -52%); perspective: 60px; }
.fw-papers i:nth-child(-n+2) { display: none; }
.fw-papers i:nth-child(3) { opacity: 0; }
.fw-papers i { position: absolute; inset: 0; border-radius: 1px; background: repeating-linear-gradient(180deg, transparent 0 3px, #d8ccb0 3px 3.6px) 50% 35% / 74% 56% no-repeat #fbf6e8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transform-origin: 0 50%; }
.fw-papers i:nth-child(1) { transform: rotate(6deg) translate(6%, 2%); }
.fw-papers i:nth-child(2) { transform: rotate(-3deg); }
.fw-r-rages .fw-papers { opacity: 0; }

.fw-tear { position: absolute; z-index: 4; left: var(--eye-x); top: var(--eye-y); width: 2.4cqw; height: 3.4cqw; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #a8d8f4; box-shadow: 0 0 2px rgba(255, 255, 255, 0.7); opacity: 0; }
.fw-ha { position: absolute; z-index: 4; left: 62%; top: -2%; font: italic 700 6cqw/1 var(--serif); color: #fde6c2; opacity: 0; }
.fw-ha2 { left: 80%; top: 8%; }

.fw-scraps { position: absolute; z-index: 5; left: 44%; top: 52%; width: 7cqw; height: 7cqw; }
.fw-scraps i { position: absolute; inset: 0; background: #fbf6e8; clip-path: polygon(0 10%, 70% 0, 100% 60%, 30% 100%); opacity: 0; }

/* Still poses (no motion, or after the moment). */
.fw-r-cries .fw-fox-top { transform: rotate(3.5deg) translateY(1.5%); }
.fw-r-rages:not(.fw-anim) .fw-flame { transform: scale(1.35); }

/* ---------- motion ---------- */

.fw-anim .fw-flame img { animation: fw-flicker 1.3s ease-in-out infinite alternate; }
.fw-anim .fw-flame .fw-flame-mid { animation-duration: 0.9s; }
.fw-anim .fw-flame .fw-flame-inner { animation-duration: 0.7s; }
.fw-anim.fw-r-reads .sf-p-blink, .fw-anim.fw-r-cold .sf-p-blink { animation: fw-blink 6.5s linear 1s infinite; }
.fw-anim .fw-glow { animation: fw-glow 2.2s ease-in-out infinite alternate; }
.fw-anim .fw-smoke { animation: fw-smoke 4s ease-in-out infinite; }
.fw-anim .fw-fox-top { animation: fw-breathe 4.5s ease-in-out infinite; }
.fw-anim.fw-r-cries .fw-fox-top { animation: none; }

/* Laughs: a shoulder bounce and two "ha"s. */
.fw-fresh.fw-r-laughs .fw-fox-top { animation: fw-laugh 0.3s ease-in-out calc(var(--fw-delay) + 0.4s) 12 alternate both, fw-breathe 4.5s ease-in-out calc(var(--fw-delay) + 4s) infinite; }
.fw-fresh.fw-r-laughs .fw-ha { animation: fw-ha 1.5s ease-out calc(var(--fw-delay) + 0.5s) 3; }
.fw-fresh.fw-r-laughs .fw-ha2 { animation-delay: calc(var(--fw-delay) + 1.1s); }

/* Cries: the head goes down slowly, a tear falls now and then. */
.fw-fresh.fw-r-cries .fw-fox-top { animation: fw-droop 3s ease-in-out calc(var(--fw-delay) + 0.3s) both; }
.fw-fresh.fw-r-cries .fw-tear { animation: fw-tear 2.6s ease-in calc(var(--fw-delay) + 2.4s) 5; }

/* Reads: a page turns, a few times. */
.fw-fresh.fw-r-reads .fw-papers i:nth-child(3) { animation: fw-turn 3.2s ease-in-out calc(var(--fw-delay) + 0.8s) 4; }

/* Rages: he shakes, the pages go, scraps fly into the fire, and the fire
   flares up and settles over --fw-flare (60 s on Home, 8 s in the journal). */
.fw-fresh.fw-r-rages .fw-fox { animation: fw-shake 0.11s linear calc(var(--fw-delay)) 8; }
.fw-fresh.fw-r-rages .fw-papers { animation: fw-rip 1s ease-in calc(var(--fw-delay)) both; }
.fw-fresh.fw-r-rages .fw-scraps i { animation: fw-scrap 1.3s cubic-bezier(.3, .1, .6, 1) calc(var(--fw-delay) + 0.8s) both; }
.fw-fresh.fw-r-rages .fw-scraps i:nth-child(2) { animation-delay: calc(var(--fw-delay) + 0.95s); transform: scale(0.8); }
.fw-fresh.fw-r-rages .fw-scraps i:nth-child(3) { animation-delay: calc(var(--fw-delay) + 1.1s); }
.fw-fresh.fw-r-rages .fw-scraps i:nth-child(4) { animation-delay: calc(var(--fw-delay) + 1.25s); }
.fw-fresh.fw-r-rages .fw-flame { animation: fw-flare var(--fw-flare) cubic-bezier(.2, .7, .3, 1) calc(var(--fw-delay) + 1.6s) both; }
.fw-fresh.fw-r-rages .fw-glow { animation: fw-glow-flare var(--fw-flare) cubic-bezier(.2, .7, .3, 1) calc(var(--fw-delay) + 1.6s) both, fw-glow 2.2s ease-in-out infinite alternate; }

@keyframes fw-flicker { from { transform: scale(1, 1) skewX(0deg); } to { transform: scale(0.94, 1.07) skewX(2deg); } }
@keyframes fw-blink { 0%, 95%, 100% { opacity: 0; } 96.2%, 97.8% { opacity: 1; } }
@keyframes fw-glow { from { opacity: 0.85; } to { opacity: 1; } }
@keyframes fw-smoke { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(-4px); opacity: 0.5; } }
@keyframes fw-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(0.6%) rotate(0.6deg); } }
@keyframes fw-laugh { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-2.5%) rotate(-2.5deg); } }
@keyframes fw-ha { 0% { opacity: 0; transform: translateY(0) scale(0.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-9cqw) scale(1.1); } }
@keyframes fw-droop { from { transform: none; } to { transform: rotate(3.5deg) translateY(1.5%); } }
@keyframes fw-tear { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(14cqw); } }
@keyframes fw-turn { 0% { transform: rotateY(0deg); } 25% { transform: rotateY(-170deg); opacity: 1; } 30% { opacity: 0; } 95% { opacity: 0; transform: rotateY(0deg); } 100% { opacity: 1; } }
@keyframes fw-shake { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-1.5%) rotate(-1.5deg); } 75% { transform: translateX(1.5%) rotate(1.5deg); } }
@keyframes fw-rip { 0%, 60% { opacity: 1; } 70%, 100% { opacity: 0; transform: translate(0, -52%) rotate(-10deg) scale(1.15); } }
@keyframes fw-scrap {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45% { opacity: 1; transform: translate(13cqw, -13cqw) rotate(220deg); }
    100% { opacity: 0; transform: translate(26cqw, 9cqw) rotate(440deg) scale(0.3); }
}
@keyframes fw-flare {
    0% { transform: scale(1); }
    3% { transform: scale(2.7, 2.9); }
    10% { transform: scale(2.2, 2.4); }
    40% { transform: scale(1.5, 1.6); }
    100% { transform: scale(1); }
}
@keyframes fw-glow-flare {
    0% { transform: scale(1); }
    3% { transform: scale(1.7); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ---------- the fox's journal ---------- */

.fw-journal { width: min(660px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-sizing: border-box; padding: 20px 22px 22px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-card); color: var(--c-ink); font: 400 14px var(--sans); }
.fw-journal::backdrop { background: rgba(18, 22, 26, 0.5); }
.fw-journal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fw-journal-head .card-title { flex: 1; }
.fw-close { min-height: 36px; }
.fw-journal-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fw-journal-item { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-field); color: var(--c-ink); text-align: left; font: 400 13px var(--sans); cursor: pointer; }
.fw-journal-item:hover { border-color: var(--c-line-strong); }
.fw-journal-item b { font: 600 14.5px var(--serif); }
.fw-journal-item span { color: var(--c-soft); }
.fw-journal-page { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 6px; }
.fw-journal button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ---------- the pill in the top bar ---------- */

.surface-goal { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-ink); font: 600 12px var(--sans); white-space: nowrap; cursor: pointer; }
.surface-goal[hidden] { display: none; }
.surface-goal:hover { background: var(--c-chip); }
.fw-ring { width: 16px; height: 16px; flex: none; }
.fw-ring-track { fill: none; stroke: var(--c-chart-grey); stroke-width: 3; }
.fw-ring-fill { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; }

/* ---------- smaller screens, less motion ---------- */

@media (max-width: 760px) {
    .fw-reading, .fw-journal-page { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .fw-scene { max-width: 280px; width: 100%; }
    .surface-goal { padding: 0 8px 0 5px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .fw-scene *, .fw-track i, .fw-marker { animation: none !important; transition: none !important; }
}