/* g-inf.css — guida «Psicologia infantile a Roma»: i segni della crescita.
   Accento ocra, effetti di scroll propri (grow, rise, swing, knot, lean, roll) e widget data-inf-*. */
.g-inf { --clay: #B8892E; --clay-soft: #E2CB97; }

/* ---------- effetti di scroll (--p da 0 a 1 su ogni .scene) ---------- */
.g-inf .scene[data-fx="grow"] .scene-art .art,
.g-inf .scene[data-fx="rise"] .scene-art .art,
.g-inf .scene[data-fx="swing"] .scene-art .art,
.g-inf .scene[data-fx="knot"] .scene-art .art,
.g-inf .scene[data-fx="lean"] .scene-art .art,
.g-inf .scene[data-fx="roll"] .scene-art .art { transform: scale(calc(1 + var(--p) * .18)); opacity: calc(1.15 - var(--p) * .9); }

/* grow: le scarpe crescono di misura una dopo l'altra */
.g-inf .inf-g { transform-box: fill-box; transform-origin: 0 100%; }
.g-inf .inf-g1 { scale: clamp(.35, var(--p) * 4, 1); }
.g-inf .inf-g2 { scale: clamp(.35, var(--p) * 4 - .5, 1); }
.g-inf .inf-g3 { scale: clamp(.35, var(--p) * 4 - 1, 1); }

/* rise: le tre età salgono in sequenza */
.g-inf .inf-r1 { translate: 0 calc(max(0, 1 - var(--p) * 3) * 40px); }
.g-inf .inf-r2 { translate: 0 calc(max(0, 1.3 - var(--p) * 3) * 40px); }
.g-inf .inf-r3 { translate: 0 calc(max(0, 1.6 - var(--p) * 3) * 40px); }

/* swing: l'altalena oscilla mentre scorri */
.g-inf .inf-swing { transform-box: view-box; transform-origin: 260px 46px; rotate: calc(sin(var(--p) * 9.4rad) * 16deg); }

/* knot: l'aquilone ondeggia, i nodi nel filo si stringono e crescono */
.g-inf .inf-kite { transform-box: view-box; transform-origin: 384px 184px; rotate: calc(sin(var(--p) * 7rad) * 7deg); }
.g-inf .inf-knot { transform-box: fill-box; transform-origin: center; scale: calc(1 + var(--p) * 1.2); stroke-width: 2.4; }
.g-inf .inf-knot2 { scale: calc(1 + var(--p) * 2); }

/* lean: genitore e figlio si avvicinano sulla panchina */
.g-inf .inf-la, .g-inf .inf-lb { transform-box: fill-box; transform-origin: 50% 100%; }
.g-inf .inf-la { rotate: calc(min(1, var(--p) * 2.2) * 7deg); }
.g-inf .inf-lb { rotate: calc(min(1, var(--p) * 2.2) * -7deg); translate: calc(min(1, var(--p) * 2.2) * -14px) 0; }

/* roll: la bici parte, le ruote girano, la mano lascia il sellino, le rotelle spariscono */
.g-inf .inf-bike { translate: calc((var(--p) - .25) * 120px) 0; }
.g-inf .inf-wheel { rotate: calc(var(--p) * 540deg); }
.g-inf .inf-hand { translate: calc(max(0, var(--p) - .3) * -110px) 0; opacity: clamp(0, 1.6 - var(--p) * 1.8, 1); }
.g-inf .inf-rotelle { opacity: clamp(0, 1.5 - var(--p) * 2.4, 1); }

/* ---------- widget: fase o segnale ---------- */
.infp__grid { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; align-items: start; }
.infp__gauge { width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.infp__gauge [data-inf-tick] { stroke: var(--line); stroke-width: 3; transition: stroke .35s; }
.infp__gauge [data-inf-tick].is-on { stroke: var(--clay); }
.infp__k { margin: .2rem 0 .5rem; font-size: .92rem; }
.infp__out { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .95rem; }
.infp__out b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-bottom: .2rem; }
.infp__out[data-level="hi"] { box-shadow: inset 3px 0 0 var(--clay); }
.infp__note { margin: .7rem 0 0; font-size: .8rem; color: var(--mute); }

/* ---------- widget: segnali per età ---------- */
.infa__top { display: grid; grid-template-columns: 70px 1fr; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.infa__fig { width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.infa__mark { stroke: var(--clay); stroke-width: 2.4; transition: transform .4s var(--ease, ease); }
.infa__dot { fill: var(--clay); stroke: var(--paper); stroke-width: 2; transition: transform .4s var(--ease, ease); }
.infa__ctl i { font-style: italic; color: var(--clay); font-family: var(--display); }
.infa__jump { display: flex; flex-wrap: wrap; gap: .4rem; }
.infa__jump button { padding: .35em .85em; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; transition: background .3s, color .3s, border-color .3s; }
.infa__jump button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.infa__pane { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.infa__pane[hidden] { display: none; }
.infa__pane > div { padding: .8rem .95rem; border-radius: 12px; background: var(--paper-2); font-size: .88rem; line-height: 1.45; }
.infa__watch { box-shadow: inset 3px 0 0 var(--clay); }
.infa__h { margin: 0 0 .4rem; font-family: var(--display); font-weight: 600; font-size: .98rem; }
.infa__pane ul { margin: 0; padding-left: 1.1em; color: var(--ink-soft); }
.infa__pane li { margin: .2rem 0; }

/* ---------- widget: confronto per ambito (riusa data-tabs) ---------- */
.g-inf .infc .cmp__pane { grid-template-columns: 1fr 1fr; }
.g-inf .infc .cmp__pane[hidden] { display: none; }
.g-inf .cmp__c--warn { box-shadow: inset 3px 0 0 var(--clay); }

/* ---------- widget: le frasi per proporlo ---------- */
.infw__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.infw__chips button { padding: .45em .95em; border-radius: 999px; border: 1px solid var(--line); font-size: .88rem; font-family: var(--display); font-style: italic; transition: background .3s, color .3s, border-color .3s; }
.infw__chips button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.infw__out { margin: .9rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .95rem; border-left: 3px solid var(--clay); }
.infw__out b { display: block; font-family: var(--display); font-weight: 600; margin-bottom: .2rem; }
.infw__out small { display: block; margin-top: .5rem; color: var(--mute); font-size: .82rem; }

@media (max-width: 860px) {
  .g-inf .inf-bike { translate: calc((var(--p) - .25) * 70px) 0; }
  .infa__pane, .g-inf .infc .cmp__pane { grid-template-columns: 1fr; }
  .infp__grid { grid-template-columns: 48px 1fr; gap: .8rem; }
  .infa__top { grid-template-columns: 54px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .g-inf .inf-g, .g-inf .inf-r1, .g-inf .inf-r2, .g-inf .inf-r3, .g-inf .inf-swing, .g-inf .inf-kite, .g-inf .inf-knot,
  .g-inf .inf-la, .g-inf .inf-lb, .g-inf .inf-bike, .g-inf .inf-wheel, .g-inf .inf-hand { scale: none !important; translate: none !important; rotate: none !important; }
  .g-inf .inf-hand, .g-inf .inf-rotelle { opacity: 1 !important; }
  .infa__mark, .infa__dot, .infp__gauge [data-inf-tick] { transition: none; }
}