/* g-gen.css · guida "genitore esausto": la giornata di un genitore, accento salvia */
.g-gen { --clay: #6E8C68; --clay-soft: #B9CCB3; }

/* ---------- effetti di scroll ---------- */
/* hands: le lancette girano mentre scendi */
.g-gen .scene[data-fx="hands"] .scene-art .art { transform: scale(calc(1 + var(--p) * .22)); opacity: calc(1.15 - var(--p) * .9); }
.g-gen .gen-hand { transform-box: view-box; transform: rotate(calc(var(--p) * 300deg)); }
.g-gen .cover-art .gen-hand { transform: none; }

/* spin: il cestello della lavatrice gira, il disegno trema appena */
.g-gen .scene[data-fx="spin"] .scene-art .art { transform: rotate(calc(var(--p) * -2deg)) scale(calc(1 + var(--p) * .18)); opacity: calc(1.15 - var(--p) * .9); }
.g-gen .gen-spin { transform-box: view-box; transform: rotate(calc(var(--p) * -720deg)); }

/* rise: il disegno sale dal basso, come un messaggio che arriva */
.g-gen .scene[data-fx="rise"] .scene-art .art { transform: translateY(calc((1 - min(1, var(--p) * 2.2)) * 14vh)) scale(calc(1 + var(--p) * .2)); opacity: calc(1.15 - var(--p) * .9); }

/* moon: la stanza si abbassa di luce, la luna sale nella finestra */
.g-gen .scene[data-fx="moon"] .scene-stage { background: color-mix(in srgb, var(--clay) calc(var(--p) * 10%), var(--paper)); }
.g-gen .scene[data-fx="moon"] .scene-art .art { transform: scale(calc(1 + var(--p) * .16)); opacity: calc(1.15 - var(--p) * .9); }
.g-gen .gen-moon { transform: translateY(calc((1 - min(1, var(--p) * 2)) * 70px)); opacity: clamp(0, var(--p) * 3, 1); }

/* ---------- widget: batteria ---------- */
.gen-batt__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gen-batt__k { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.gen-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.gen-chip { padding: .4em .85em; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; line-height: 1.3; text-align: left; transition: background .3s, color .3s, border-color .3s; }
.gen-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-gen-c].gen-chip[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); }
.gen-batt__row { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.gen-batt__cell { position: relative; flex: 1; height: 44px; border: 2px solid var(--ink); border-radius: 10px; padding: 4px; }
.gen-batt__cell::after { content: ""; position: absolute; right: -9px; top: 50%; width: 6px; height: 16px; margin-top: -8px; border-radius: 0 3px 3px 0; background: var(--ink); }
.gen-batt__fill { display: block; height: 100%; width: calc(var(--lv, 50) * 1%); border-radius: 5px; background: var(--clay); transition: width .6s var(--ease, ease), background .4s; }
.gen-batt__cell.is-low .gen-batt__fill { background: repeating-linear-gradient(135deg, var(--ink-soft) 0 6px, var(--mute) 6px 12px); }
.gen-batt__pct { font-family: var(--display); font-size: 1.4rem; min-width: 3.2ch; text-align: right; }
.gen-batt__out { margin: .9rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .95rem; }
.gen-batt__out b { font-family: var(--display); font-weight: 600; }

/* ---------- widget: lista sul frigo ---------- */
.gen-list__items { list-style: none; margin: 0; padding: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; background: var(--paper-2); border-radius: 10px; border-top: 3px solid var(--clay); }
.gen-item { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55em .8em; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); font-size: .88rem; text-align: left; transition: opacity .3s, border-color .3s; }
.gen-item i { flex: none; font-style: normal; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: .2em .55em; border-radius: 4px; background: var(--ink); color: var(--paper); }
.gen-item[data-s="1"] i { background: var(--clay); }
.gen-item[data-s="2"] { opacity: .6; }
.gen-item[data-s="2"] span { text-decoration: line-through; text-decoration-color: var(--clay); }
.gen-item[data-s="2"] i { background: var(--paper-2); color: var(--ink-soft); }
.gen-list__out { margin: .9rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .95rem; }
.gen-list__out b { font-family: var(--display); font-weight: 600; }

/* ---------- widget: il primo passo di oggi ---------- */
.gen-seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .25rem; margin: 0 .5rem .6rem 0; border: 1px solid var(--line); border-radius: 999px; }
.gen-seg button { padding: .4em .95em; border-radius: 999px; font-size: .86rem; font-weight: 500; transition: background .3s, color .3s; }
.gen-seg button.is-on { background: var(--ink); color: var(--paper); }
.gen-step__card { margin-top: .4rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--paper-2); border-left: 3px solid var(--clay); }
.gen-step__card p { margin: 0; font-family: var(--display); font-size: 1.12rem; line-height: 1.4; letter-spacing: -.01em; transition: opacity .3s; }
.gen-step__card p.is-swap { opacity: 0; }
.gen-step__next { margin-top: .8rem; font-size: .84rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .gen-batt__cols, .gen-list__items { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .g-gen .gen-hand, .g-gen .gen-spin, .g-gen .gen-moon { transform: none !important; opacity: 1 !important; }
  .g-gen .scene[data-fx="moon"] .scene-stage { background: none; }
  .gen-batt__fill, .gen-step__card p { transition: none; }
}