/* g-ado.css · guida «Adozione e affido»: l'album e il filo */
.g-ado { --clay: #B0687A; --clay-soft: #DDB3BD; }

/* ---------- effetti di scroll (usano --p, 0 → 1, impostato da blog.js) ---------- */
/* page: il disegno entra come una pagina che si gira */
.g-ado .scene[data-fx="page"] .scene-stage { perspective: 1400px; }
.g-ado .scene[data-fx="page"] .scene-art .art { transform-origin: 50% 50%; transform: rotateY(calc(max(0, 1 - var(--p) * 2.4) * -58deg)) scale(calc(1 + var(--p) * .18)); opacity: calc(1.15 - var(--p) * .9); }
.g-ado .scene[data-fx="page"] .ado-page { transform-box: view-box; transform-origin: 50% 50%; transform: rotateY(calc(max(0, 1 - var(--p) * 2) * 70deg)); }

/* frame: il disegno si scopre dentro una cornice che si allarga */
.g-ado .scene[data-fx="frame"] .scene-art .art { clip-path: inset(calc(max(0, 1 - var(--p) * 2.4) * 34%) round 6px); transform: scale(calc(1.06 + var(--p) * .16)); opacity: calc(1.2 - var(--p) * .9); }
.g-ado .scene[data-fx="frame"] .ado-big { transform: translateY(calc(max(0, 1 - var(--p) * 2.2) * 30px)); }
.g-ado .scene[data-fx="frame"] .ado-small { transform: translate(calc(max(0, 1 - var(--p) * 2.2) * 50px), calc(max(0, 1 - var(--p) * 2.2) * 40px)); }

/* thread: prima le cose, poi il filo (in colore) che le lega; le cornici si avvicinano */
.g-ado .scene[data-fx="thread"] .scene-art .art { transform: translateY(calc((.5 - var(--p)) * 4vh)) scale(calc(1 + var(--p) * .2)); opacity: calc(1.15 - var(--p) * .9); }
.g-ado .scene[data-fx="thread"] .scene-art .art .acc[pathLength] { stroke-dashoffset: clamp(0, 1 - (var(--p) - .22) * 3.2, 1); stroke-width: 2.2; }
.g-ado .scene[data-fx="thread"] .ado-l { transform: translate(calc(max(0, 1 - var(--p) * 2.2) * -60px), calc(max(0, 1 - var(--p) * 2.2) * -14px)) rotate(calc(max(0, 1 - var(--p) * 2.2) * -6deg)); transform-box: fill-box; transform-origin: center; }
.g-ado .scene[data-fx="thread"] .ado-r { transform: translate(calc(max(0, 1 - var(--p) * 2.2) * 60px), calc(max(0, 1 - var(--p) * 2.2) * -14px)) rotate(calc(max(0, 1 - var(--p) * 2.2) * 6deg)); transform-box: fill-box; transform-origin: center; }

/* lid: la scatola dei ricordi si apre e i fili escono */
.g-ado .scene[data-fx="lid"] .scene-art .art { transform: scale(calc(1 + var(--p) * .22)); opacity: calc(1.15 - var(--p) * .9); }
.g-ado .ado-lid { transform-box: fill-box; transform-origin: 0% 100%; transform: rotate(calc(clamp(0, var(--p) * 2.4 - .2, 1) * -28deg)) translateY(calc(clamp(0, var(--p) * 2.4 - .2, 1) * -10px)); }
.g-ado .scene[data-fx="lid"] .scene-art .art .acc[pathLength] { stroke-dashoffset: clamp(0, 1 - (var(--p) - .3) * 3, 1); }

/* due mani (fx frame) che si avvicinano */
.g-ado .scene[data-fx="frame"] .ado-l { transform: translateX(calc(max(0, 1 - var(--p) * 2.2) * -60px)); }
.g-ado .scene[data-fx="frame"] .ado-r { transform: translateX(calc(max(0, 1 - var(--p) * 2.2) * 60px)); }

/* ---------- widget: tappe dell'adozione ---------- */
.g-ado .ado-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: .5rem; }
.g-ado .ado-steps[hidden] { display: none; }
.g-ado .ado-steps li { counter-increment: st; position: relative; padding: .7rem .9rem .7rem 2.8rem; border-radius: 12px; background: var(--paper-2); font-size: .92rem; line-height: 1.45; }
.g-ado .ado-steps li::before { content: counter(st); position: absolute; left: .8rem; top: .7rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--clay); color: var(--clay); font: italic 500 .85rem/1.3rem var(--display); text-align: center; }
.g-ado .ado-steps b { font-family: var(--display); font-weight: 600; }

/* ---------- widget: domande per età ---------- */
.g-ado .ado-ages__card { padding: 1rem 1.1rem; border-radius: 12px; background: var(--paper-2); font-size: .93rem; line-height: 1.5; }
.g-ado .ado-ages__band { margin: 0 0 .5rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); font-weight: 600; }
.g-ado .ado-ages__card h4 { margin: .8rem 0 .3rem; font-family: var(--display); font-size: .98rem; font-weight: 600; }
.g-ado .ado-ages__card h4:first-of-type { margin-top: 0; }
.g-ado .ado-ages__card p { margin: 0; color: var(--ink-soft); }
.g-ado .ado-ages__qs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.g-ado .ado-ages__qs li { padding: .35em .8em; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-family: var(--display); font-style: italic; font-size: .88rem; }
.g-ado .ado-ages__say { margin-top: .3rem !important; padding-left: .8rem; border-left: 2px solid var(--clay); color: var(--ink) !important; }
.g-ado .ado-ages__card.is-swap { animation: adoFade .45s var(--ease); }
@keyframes adoFade { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- widget: scatola della storia ---------- */
.g-ado .ado-box__items { display: flex; flex-wrap: wrap; gap: .45rem; }
.g-ado .ado-box__items button { padding: .45em .9em; border-radius: 999px; border: 1px solid var(--line); font-size: .86rem; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.g-ado .ado-box__items button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.g-ado .ado-box__items button[aria-pressed="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); margin-right: .45em; vertical-align: 1px; }
.g-ado .ado-box__in { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; margin-top: 1rem; padding: 1rem; border-radius: 12px; background: var(--paper-2); }
.g-ado .ado-box__svg { width: 96px; height: auto; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-ado .ado-box__lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .6s var(--ease); }
.g-ado .ado-box.is-open .ado-box__lid { transform: rotate(-22deg) translateY(-4px); stroke: var(--clay); }
.g-ado .ado-box__count { margin: 0 0 .5rem; font-family: var(--display); font-weight: 600; }
.g-ado .ado-box__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.g-ado .ado-box__list li { font-size: .9rem; line-height: 1.45; color: var(--ink-soft); animation: adoFade .45s var(--ease); }
.g-ado .ado-box__list b { color: var(--ink); font-family: var(--display); font-weight: 600; }

/* ---------- widget: i fili ---------- */
.g-ado .ado-threads__svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto .6rem; fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.g-ado .ado-threads__line { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 6; transition: stroke .4s, stroke-width .4s; }
.g-ado .ado-threads__line.is-on { stroke: var(--clay); stroke-width: 3; stroke-dasharray: none; }
.g-ado .ado-threads__keys { display: flex; flex-wrap: wrap; gap: .4rem; }
.g-ado .ado-threads__keys button { padding: .4em .9em; border-radius: 999px; border: 1px solid var(--line); font-size: .84rem; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.g-ado .ado-threads__keys button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.g-ado .ado-threads__text { margin: .8rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .93rem; line-height: 1.5; min-height: 4.5em; }
.g-ado .ado-threads__text b { font-family: var(--display); font-weight: 600; }

@media (max-width: 860px) {
  .g-ado .scene[data-fx="page"] .scene-art .art { transform: rotateY(calc(max(0, 1 - var(--p) * 2.4) * -36deg)) scale(calc(1 + var(--p) * .12)); }
  .g-ado .scene[data-fx="frame"] .scene-art .art { clip-path: inset(calc(max(0, 1 - var(--p) * 2.4) * 22%) round 6px); }
  .g-ado .ado-box__in { grid-template-columns: 1fr; }
  .g-ado .ado-box__svg { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-ado .scene-art .art { transform: none !important; clip-path: none !important; opacity: 1 !important; }
  .g-ado .ado-l, .g-ado .ado-r, .g-ado .ado-big, .g-ado .ado-small, .g-ado .ado-page, .g-ado .ado-lid { transform: none !important; }
  .g-ado .art .acc[pathLength] { stroke-dashoffset: 0 !important; }
  .g-ado .ado-ages__card.is-swap, .g-ado .ado-box__list li { animation: none; }
  .g-ado .ado-box__lid { transition: none; }
}