/* Guida «famiglie interculturali e seconde generazioni»: la trama.
   Due fili (inchiostro e verde acqua) che si intrecciano; effetti di scroll propri. */
.g-int { --clay: #3E8783; --clay-soft: #9CCBC7; }

/* ---------- effetti di scroll (var(--p) da 0 a 1 su ogni .scene) ---------- */
.g-int .scene[data-fx="pull"] .scene-art .art { transform: scale(calc(1 + var(--p) * .22)); opacity: calc(1.15 - var(--p) * .9); }
.g-int .scene[data-fx="knot"] .scene-art .art { transform: scale(calc(1.04 + var(--p) * .3)) rotate(calc((var(--p) - .5) * 4deg)); opacity: calc(1.15 - var(--p) * .9); }
.g-int .scene[data-fx="weave"] .scene-art .art { transform: translateY(calc(var(--p) * -6vh)) scale(calc(1 + var(--p) * .2)); opacity: calc(1.15 - var(--p) * .9); }
.g-int .scene[data-fx="unravel"] .scene-art .art { transform: scale(calc(1 + var(--p) * .25)) rotate(calc(var(--p) * -3deg)); opacity: calc(1.15 - var(--p) * .9); }

/* pull: i due gomitoli (o i due ferri) arrivano da lontano e si incontrano */
.g-int .int-a, .g-int .int-b { transform-box: fill-box; transform-origin: center; }
.g-int .scene .int-a { transform: translate(calc(max(0, 1 - var(--p) * 2.4) * -64px), calc(max(0, 1 - var(--p) * 2.4) * 40px)) rotate(calc(max(0, 1 - var(--p) * 2.4) * -10deg)); }
.g-int .scene .int-b { transform: translate(calc(max(0, 1 - var(--p) * 2.4) * 64px), calc(max(0, 1 - var(--p) * 2.4) * 40px)) rotate(calc(max(0, 1 - var(--p) * 2.4) * 10deg)); }

/* knot: le due metà della corda si tendono e il nodo si stringe ruotando */
.g-int .int-knot { transform-box: fill-box; transform-origin: center; }
.g-int .scene .int-knot { transform: scale(calc(.55 + min(1, var(--p) * 2.2) * .45)) rotate(calc((1 - min(1, var(--p) * 2.2)) * -80deg)); }
.g-int .scene .int-rope-l { transform: translateX(calc(max(0, 1 - var(--p) * 2.2) * 44px)); }
.g-int .scene .int-rope-r { transform: translateX(calc(max(0, 1 - var(--p) * 2.2) * -44px)); }

/* weave: l'ordito si allunga dall'alto, la navetta attraversa il telaio */
.g-int .int-warp { transform-box: fill-box; transform-origin: 50% 0; }
.g-int .scene .int-warp { transform: scaleY(calc(.12 + min(1, var(--p) * 2.4) * .88)); }
.g-int .scene .int-shuttle { transform: translateX(calc((.5 - min(1, var(--p) * 1.6)) * 220px)); }

/* unravel: il filo libero oscilla e si posa */
.g-int .int-loose { transform-box: fill-box; transform-origin: 50% 0; }
.g-int .scene .int-loose { transform: rotate(calc((1 - min(1, var(--p) * 1.8)) * 16deg)) scaleY(calc(.7 + min(1, var(--p) * 1.8) * .3)); }

/* ---------- widget: tra due mondi ---------- */
.int-mondi__rows { display: grid; gap: .5rem; }
.int-mondi__row { display: grid; grid-template-columns: minmax(9rem, 1fr) auto; align-items: center; gap: .6rem; font-size: .92rem; }
.int-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.int-seg button { padding: .35em .8em; border-radius: 999px; font-size: .8rem; font-weight: 500; color: var(--ink-soft); transition: background .3s, color .3s; }
.int-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.int-seg button[data-v="la"][aria-pressed="true"] { background: var(--clay); }
.int-seg button[data-v="due"][aria-pressed="true"] { background: linear-gradient(90deg, var(--ink) 0 50%, var(--clay) 50% 100%); }
.int-mondi__cloth { display: grid; gap: 3px; margin: 1.1rem 0 .4rem; padding: 10px; border-radius: 10px; background: var(--paper-2); }
.int-mondi__weft { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.int-mondi__weft i { height: 12px; border-radius: 3px; background: var(--line); transform: scaleX(.3); opacity: .6; transition: background .5s, transform .5s var(--ease, ease), opacity .5s; }
.int-mondi__weft i.is-qui, .int-mondi__weft i.is-la { transform: none; opacity: 1; }
.int-mondi__weft i.is-qui { background: var(--ink); }
.int-mondi__weft i.is-la { background: var(--clay); }
.int-mondi__legend { display: flex; gap: 1rem; align-items: center; margin: 0 0 .6rem; font-size: .78rem; color: var(--mute); }
.int-mondi__legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: .35em; vertical-align: middle; }
.int-mondi__legend i.is-qui { background: var(--ink); } .int-mondi__legend i.is-la { background: var(--clay); }
.int-mondi__out { margin: 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .95rem; }
.int-mondi__out b { font-family: var(--display); font-weight: 600; }

/* ---------- widget: la stessa scena, due sguardi ---------- */
.int-eyes__scenes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.int-eyes__scenes 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; }
.int-eyes__scenes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.int-eyes__stage { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: .4rem; }
.int-eyes__card { margin: 0; padding: .9rem 1rem; border-radius: 12px; background: var(--paper-2); font-size: .92rem; line-height: 1.5; transition: transform .6s var(--ease, ease), opacity .6s; }
.int-eyes__card figcaption { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mute); margin-bottom: .4rem; }
.int-eyes__card--a { border-top: 3px solid var(--ink); }
.int-eyes__card--b { border-top: 3px solid var(--clay); }
.int-eyes__card p { margin: 0; color: var(--ink-soft); }
.int-eyes__stage.is-swap .int-eyes__card--a { transform: translateX(-14px); opacity: 0; }
.int-eyes__stage.is-swap .int-eyes__card--b { transform: translateX(14px); opacity: 0; }
.int-eyes__thread { width: 100%; height: auto; fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.int-eyes__thread path { stroke-dasharray: 4 6; transition: stroke .6s, stroke-dasharray .6s; }
.int-eyes__stage.is-joined .int-eyes__thread { stroke: var(--clay); }
.int-eyes__stage.is-joined .int-eyes__thread path { stroke-dasharray: 200 0; }
.int-eyes__common { margin-top: .9rem; padding: .5em 1.1em; border-radius: 999px; border: 1px solid var(--clay); color: var(--ink); font-size: .86rem; font-weight: 500; transition: background .3s, color .3s, opacity .3s; }
.int-eyes__common:hover:not(:disabled) { background: var(--clay); color: var(--paper); }
.int-eyes__common:disabled { opacity: .4; cursor: default; }
.int-eyes__out { margin: .8rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: .95rem; line-height: 1.5; }
.int-eyes__out b { display: block; font-family: var(--display); font-weight: 600; color: var(--clay-soft); margin-bottom: .2rem; }

/* ---------- widget: ansia, rabbia, colpa (schede) ---------- */
.int-feel__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.int-feel__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; }
.int-feel__tabs button.is-on { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.int-feel__pane[hidden] { display: none; }
.int-feel__pane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.int-feel__pane li { position: relative; padding: .7rem .9rem .7rem 2rem; border-radius: 10px; background: var(--paper-2); font-size: .92rem; line-height: 1.45; }
.int-feel__pane li::before { content: ""; position: absolute; left: .8rem; top: 1.1rem; width: 10px; height: 2px; background: var(--clay); box-shadow: 0 4px 0 var(--ink); }

@media (max-width: 860px) {
  .g-int .scene .int-a, .g-int .scene .int-b { transform: none; }
  .int-mondi__row { grid-template-columns: 1fr; gap: .3rem; }
  .int-eyes__stage { grid-template-columns: 1fr; }
  .int-eyes__thread { width: 64px; justify-self: center; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .g-int .int-a, .g-int .int-b, .g-int .int-knot, .g-int .int-rope-l, .g-int .int-rope-r,
  .g-int .int-warp, .g-int .int-shuttle, .g-int .int-loose { transform: none !important; }
  .int-mondi__weft i, .int-eyes__card, .int-eyes__thread path { transition: none; }
  .int-eyes__stage.is-swap .int-eyes__card--a, .int-eyes__stage.is-swap .int-eyes__card--b { transform: none; opacity: 1; }
}