/* Guida: separazione e figli · due case e lo zaino che va avanti e indietro */
.g-sep { --clay: #5B7FA3; --clay-soft: #A9BED3; }

/* ---------- effetti di scroll ---------- */
/* pack: le cose da mettere nello zaino cadono al loro posto */
.g-sep .scene[data-fx="pack"] .scene-art .art { transform: scale(calc(1 + var(--p) * .22)); opacity: calc(1.15 - var(--p) * .9); }
.g-sep .sep-drop { transform: translateY(calc(max(0, 1 - var(--p) * 2.6) * -90px)); }
.g-sep .sep-drop.d2 { transform: translateY(calc(max(0, 1 - var(--p) * 2.2) * -130px)); }
/* relay: il messaggio, o lo zaino, passa da una parte all'altra */
.g-sep .scene[data-fx="relay"] .scene-art .art { transform: scale(calc(1 + var(--p) * .18)); opacity: calc(1.15 - var(--p) * .9); }
.g-sep .sep-move { transform: translateX(calc((min(1, var(--p) * 1.8) - .5) * 220px)); }
.g-sep .sep-shuttle { transform: translateX(calc(sin(var(--p) * 1turn) * -120px)); }
/* swing: le due porte si aprono sulla soglia */
.g-sep .scene[data-fx="swing"] .scene-art .art { transform: scale(calc(1 + var(--p) * .2)); opacity: calc(1.15 - var(--p) * .9); }
.g-sep .sep-door-l, .g-sep .sep-door-r { transform-box: fill-box; }
.g-sep .sep-door-l { transform-origin: 0 50%; transform: scaleX(calc(1 - min(1, var(--p) * 2) * .6)); }
.g-sep .sep-door-r { transform-origin: 100% 50%; transform: scaleX(calc(1 - min(1, var(--p) * 2) * .6)); }
/* twin: le due metà arrivano una da sopra e una da sotto */
.g-sep .scene[data-fx="twin"] .scene-art .art { transform: scale(calc(1 + var(--p) * .16)); opacity: calc(1.15 - var(--p) * .9); }
.g-sep .sep-twin-a { transform: translateY(calc(max(0, 1 - var(--p) * 2.4) * -40px)); }
.g-sep .sep-twin-b { transform: translateY(calc(max(0, 1 - var(--p) * 2) * 40px)); }

/* ---------- widget: riformula la frase ---------- */
.sep-say__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.sep-say__list button { padding: .45em .95em; border-radius: 999px; border: 1px solid var(--line); font-size: .88rem; font-family: var(--display); font-style: italic; text-align: left; transition: background .3s, color .3s, border-color .3s; }
.sep-say__list button:hover { border-color: var(--ink); }
.sep-say__list button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sep-say__out { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.sep-say__out[hidden] { display: none; }
.sep-say__card, .sep-say__why { margin: 0; padding: .85rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .94rem; line-height: 1.5; }
.sep-say__card small, .sep-say__why small { display: block; margin-bottom: .3rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--mute); }
.sep-say__was { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--clay); }
.sep-say__card--better { background: color-mix(in srgb, var(--clay) 14%, var(--paper)); }
.sep-say__card--better span { font-family: var(--display); color: var(--ink); }
.sep-say__why { grid-column: 1 / -1; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }

/* ---------- widget: cosa capisce a questa età ---------- */
.sep-age__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.sep-age__tabs 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; }
.sep-age__tabs button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sep-age__pane { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.sep-age__pane[hidden] { display: none; }
.sep-age__c { padding: .8rem .9rem; border-radius: 12px; background: var(--paper-2); font-size: .88rem; line-height: 1.5; }
.sep-age__c b { display: block; font-family: var(--display); font-weight: 600; font-size: .98rem; }
.sep-age__c p { margin: .4rem 0 0; color: var(--ink-soft); }
.sep-age__c--say { background: color-mix(in srgb, var(--clay) 14%, var(--paper)); }
.sep-age__c--say p { color: var(--ink); font-family: var(--display); }

/* ---------- widget: fuori o in mezzo ---------- */
.sep-sort__item { padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--line); margin-bottom: .55rem; transition: border-color .3s, background .3s; }
.sep-sort__item > p:first-child { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.45; }
.sep-sort__btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.sep-sort__btns button { padding: .35em .85em; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.sep-sort__btns button:hover { border-color: var(--ink); }
.sep-sort__btns button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sep-sort__fb { margin: .6rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.sep-sort__fb b { font-family: var(--display); color: var(--ink); }
.sep-sort__item.is-right { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 8%, var(--paper)); }
.sep-sort__item.is-wrong { border-style: dashed; border-color: var(--ink-soft); }
.sep-sort__score { margin: .4rem 0 0; padding: .8rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .94rem; }
.sep-sort__score b { font-family: var(--display); }

@media (max-width: 860px) {
  .sep-say__out, .sep-age__pane { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .g-sep .sep-drop, .g-sep .sep-move, .g-sep .sep-shuttle, .g-sep .sep-door-l, .g-sep .sep-door-r, .g-sep .sep-twin-a, .g-sep .sep-twin-b { transform: none !important; }
}