/* g-rel.css · guida «Psicologia e religione a Roma»: finestre, lanterne, luce. Solo dentro .g-rel */
.g-rel { --clay: #7B6A9A; --clay-soft: #C6BADB; }

/* ---------- disegni ---------- */
.g-rel .art .rel-shut { fill: var(--paper); }
.g-rel .art .rel-pane { fill: var(--clay); stroke: none; opacity: 0; }
.g-rel .art .rel-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: relflicker 2.8s ease-in-out infinite; }
@keyframes relflicker { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(.92, 1.08); } 70% { transform: scale(1.05, .94); } }

/* effetto «shutters»: le persiane si aprono mentre scendi */
.g-rel .scene[data-fx="shutters"] .scene-art .art { transform: scale(calc(1 + var(--p) * .25)); opacity: calc(1.15 - var(--p) * .9); }
.g-rel .rel-l, .g-rel .rel-r { transform-box: fill-box; }
.g-rel .rel-l { transform-origin: left center; transform: scaleX(calc(1 - min(1, var(--p) * 2.4) * .84)); }
.g-rel .rel-r { transform-origin: right center; transform: scaleX(calc(1 - min(1, var(--p) * 2.4) * .84)); }

/* effetto «lantern»: il disegno sale piano e la luce si accende */
.g-rel .scene[data-fx="lantern"] .scene-art .art { transform: translateY(calc((1 - var(--p)) * 3vh)) scale(calc(1 + var(--p) * .18)); opacity: calc(1.15 - var(--p) * .9); }
.g-rel .rel-glow { transform-box: fill-box; transform-origin: center; opacity: 0; }
.g-rel .scene[data-fx="lantern"] .rel-glow { opacity: clamp(0, calc(var(--p) * 3 - .25), .6); transform: scale(calc(.7 + var(--p) * .5)); }

/* effetto «panes»: la finestra a grata si gira verso di te e i riquadri si accendono uno a uno */
.g-rel .scene[data-fx="panes"] .scene-art .art { transform: perspective(900px) rotateY(calc((1 - min(1, var(--p) * 2)) * 16deg)) scale(calc(1 + var(--p) * .2)); opacity: calc(1.15 - var(--p) * .9); }
.g-rel .scene[data-fx="panes"] .rel-pane { opacity: clamp(0, calc(var(--p) * 10 - var(--i) * .6), .22); }

/* effetto «rise»: i piani della facciata salgono a velocità diverse */
.g-rel .scene[data-fx="rise"] .scene-art .art { transform: translateY(calc((1 - var(--p)) * 4vh)) scale(calc(1 + var(--p) * .22)); opacity: calc(1.15 - var(--p) * .9); }
.g-rel .rel-row { transform: translateY(calc(max(0, 1 - var(--p) * 2.4) * var(--r) * 34px)); }

/* ---------- widget: rispetto o segnale? ---------- */
.rel-sig__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.rel-sig__list button { width: 100%; height: 100%; text-align: left; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 12px; font-size: .88rem; line-height: 1.35; display: grid; gap: .3rem; transition: background .3s, color .3s, border-color .3s; }
.rel-sig__list button:hover { border-color: var(--clay); }
.rel-sig__badge { justify-self: start; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: .2em .6em; border-radius: 999px; }
.rel-sig__list .is-ok { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 10%, transparent); }
.rel-sig__list .is-ok .rel-sig__badge { background: var(--clay); color: var(--paper); }
.rel-sig__list .is-ask { border-style: dashed; border-color: var(--ink-soft); }
.rel-sig__list .is-ask .rel-sig__badge { border: 1px solid var(--ink-soft); color: var(--ink-soft); }
.rel-sig__list .is-stop { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rel-sig__list .is-stop .rel-sig__badge { background: var(--paper); color: var(--ink); }
.rel-sig__list .is-current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 30%, transparent); }
.rel-sig__out { margin: .9rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .95rem; }
.rel-sig__out b { font-family: var(--display); font-weight: 600; }

/* ---------- widget: la frase per il primo colloquio ---------- */
.rel-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.rel-chips button { display: inline-flex; align-items: center; gap: .45em; padding: .45em .9em; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; transition: background .3s, color .3s, border-color .3s; }
.rel-chips button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.rel-chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rel-chips button[aria-pressed="true"]::before { background: var(--clay-soft); border-color: var(--clay-soft); }
.rel-draft__q { margin: 1rem 0 .5rem; font-size: .85rem; color: var(--ink-soft); }
.rel-draft__out { margin: 1rem 0 .7rem; padding: 1rem 1.1rem; border-left: 3px solid var(--clay); border-radius: 0 10px 10px 0; background: var(--paper-2); font-family: var(--display); font-size: 1rem; line-height: 1.55; }
.rel-draft__out.is-empty { color: var(--mute); font-style: italic; }
.rel-draft__bar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.rel-copy { padding: .5em 1.1em; border-radius: 999px; background: var(--clay); color: var(--paper); font-size: .86rem; font-weight: 600; transition: opacity .3s; }
.rel-copy:disabled { opacity: .4; cursor: default; }
.rel-draft__ok { font-size: .84rem; color: var(--ink-soft); }

@media (max-width: 860px) {
  .rel-sig__list { grid-template-columns: 1fr; }
  .g-rel .scene[data-fx="panes"] .scene-art .art { transform: scale(calc(1 + var(--p) * .15)); }
}
@media (prefers-reduced-motion: reduce) {
  .g-rel .rel-l, .g-rel .rel-r { transform: scaleX(.16) !important; }
  .g-rel .rel-row { transform: none !important; }
  .g-rel .rel-glow { opacity: .45 !important; transform: none !important; }
  .g-rel .art .rel-pane { opacity: .14 !important; }
  .g-rel .art .rel-flame { animation: none; }
}