/* Il salotto · la nostra storia */
:root {
    --dani: #1f8bff; --dani-soft: #8cc6ff; --dani-glow: rgb(31 139 255 / .45);
    --ome: #9b3cff;  --ome-soft: #cfa6ff;  --ome-glow: rgb(155 60 255 / .45);
    --both: linear-gradient(100deg, #06b6ff, #424dff 50%, #b625ff);
    --lamp: #ffc477;
    --room: #120e18; --wall: #1a1524; --frame: #e9e1d0;
    --text: #f1ecf8; --dim: #aaa2bf; --paper: #fff6d8;
  }
body { margin: 0; color: var(--text); font: 17px/1.65 Rubik, system-ui, sans-serif; overflow-x: hidden;
    background:
      radial-gradient(70% 40% at 50% 0%, rgb(255 180 100 / .16), transparent 70%),
      repeating-linear-gradient(90deg, transparent 0 140px, rgb(255 255 255 / .012) 140px 142px),
      var(--room);
  }
/* nav */
/* biglietti */
.note { font-family: Kalam, cursive; color: #2b2233; background: var(--paper); padding: 12px 16px 10px; line-height: 1.35; font-size: 1.05rem; box-shadow: 0 10px 24px rgb(0 0 0 / .45); position: relative; max-width: 290px; }
.note .sig { display: block; text-align: right; font-weight: 700; margin-top: 4px; color: #6a5cff; }
/* intestazione */
.intro { padding: 80px 0 40px; text-align: center; position: relative; }
.kicker { font: 600 .82rem "JetBrains Mono", monospace; color: var(--lamp); margin: 0 0 12px; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; margin: 0 0 18px; font-weight: 900; letter-spacing: -.02em; }
h1 em { font-style: normal; background: var(--both); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro p.lead { max-width: 40em; margin: 0 auto; color: var(--dim); font-size: 1.12rem; }
.intro .note { position: absolute; right: 0; top: 70px; transform: rotate(4deg); }
@media (max-width: 1000px) {
.intro .note { position: static; margin: 26px auto 0; transform: rotate(-2deg); }
}
/* ========== PRIMA: due case separate ========== */
.before { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; padding-top: 30px; }
.side { position: relative; padding: 0 clamp(14px, 3vw, 40px) 40px; }
.side::before { /* la "linea" di ogni casa */
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); border-radius: 3px;
  }
.side--dani::before { background: linear-gradient(transparent, var(--dani) 60px); box-shadow: 0 0 14px var(--dani-glow); }
.side--ome::before { background: linear-gradient(transparent, var(--ome) 60px); box-shadow: 0 0 14px var(--ome-glow); }
.side__head { position: relative; text-align: center; margin: 0 auto 34px; padding: 14px 18px; border-radius: 14px; background: var(--wall); max-width: 320px; border: 1px solid; }
.side--dani .side__head { border-color: rgb(31 139 255 / .5); box-shadow: 0 0 40px var(--dani-glow); }
.side--ome .side__head { border-color: rgb(155 60 255 / .5); box-shadow: 0 0 40px var(--ome-glow); }
.side__head small { display: block; font: .72rem "JetBrains Mono", monospace; color: var(--dim); }
.side__head b { font-size: 1.15rem; }
.side--dani .side__head b { color: var(--dani-soft); }
.side--ome .side__head b { color: var(--ome-soft); }
.chapter { position: relative; background: var(--wall); border-radius: 14px; padding: 20px 20px 18px; margin: 0 auto 34px; max-width: 420px; border: 1px solid #2a2338; }
.chapter::before { content: ""; position: absolute; top: -20px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: var(--room); border: 3px solid currentColor; }
.side--dani .chapter { color: var(--dani); }
.side--ome .chapter { color: var(--ome); }
.chapter h3 { color: var(--text); margin: 0 0 8px; font-size: 1.3rem; line-height: 1.15; }
.chapter p { color: var(--dim); margin: 0; font-size: .97rem; }
.chapter .when { display: block; font: .72rem "JetBrains Mono", monospace; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.chapter img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.chapter--relic { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; }
.chapter--relic img { aspect-ratio: 1; margin: 0; border: 4px solid var(--frame); border-radius: 4px; transform: rotate(-3deg); }
/* primo capitolo di ogni casa: un biglietto scritto a mano, nel colore della casa */
.chapter--letter { border: 2px dashed currentColor; background: color-mix(in srgb, currentColor 7%, var(--wall)); }
.chapter--letter p { font-family: Kalam, cursive; font-size: 1.1rem; line-height: 1.45; }
.side--dani .chapter--letter p { color: var(--dani-soft); }
.side--ome .chapter--letter p { color: var(--ome-soft); }
.letter-sig { display: block; text-align: right; font: 700 .95rem Kalam, cursive; margin-top: 6px; }
/* l'incrocio: qui Dani e Ome si conoscono */
.crossing { position: absolute; left: 25%; right: 25%; height: 0; border-top: 3px dashed #6a5cff; z-index: 1; }
.crossing span { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); white-space: nowrap; font: 700 1rem Kalam, cursive; color: var(--paper); background: #2a2140; padding: 2px 12px; border-radius: 999px; border: 1px solid #6a5cff; }
@media (max-width: 760px) {
.before { grid-template-columns: 1fr 1fr; }
.side { padding: 0 6px 30px; }
.chapter { padding: 14px 12px; font-size: .9rem; }
.chapter h3 { font-size: 1.02rem; }
.chapter p { font-size: .85rem; }
.chapter--relic { grid-template-columns: 1fr; }
.chapter--relic img { width: 70px; margin: 0 auto; }
.side__head { padding: 10px; }
.side__head b { font-size: .95rem; }
.crossing { display: none; }
}
/* ========== LA FUSIONE (guidata dallo scroll) ========== */
.merge { position: relative; height: 170vh; }
.merge__stage { position: sticky; top: 64px; height: calc(100vh - 64px); display: grid; place-items: center; overflow: hidden; width: min(100% - 32px, 1100px); margin-inline: auto; }
.merge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.merge path { fill: none; stroke-width: 6; stroke-linecap: round; }
.merge .p-dani { stroke: var(--dani); filter: drop-shadow(0 0 8px var(--dani)); }
.merge .p-ome { stroke: var(--ome); filter: drop-shadow(0 0 8px var(--ome)); }
.merge .p-both { stroke: url(#grad); stroke-width: 8; filter: drop-shadow(0 0 10px #6a5cff); }
.merge__burst {
    position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: 10px;
    opacity: calc((var(--p, 0) - .62) * 4); transform: scale(calc(.85 + var(--p, 0) * .15));
    margin-top: 18vh;
  }
.merge__burst img { width: min(360px, 70vw); filter: drop-shadow(0 0 24px rgb(66 77 255 / .9)) drop-shadow(0 0 60px rgb(182 37 255 / .5)); }
.merge__burst .kicker { margin: 0; }
.merge__burst p { max-width: 34em; color: var(--dim); margin: 0; padding: 0 16px; }
.merge__burst p strong { color: var(--text); }
.merge__hint { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font: .8rem "JetBrains Mono", monospace; color: var(--dim); opacity: calc(1 - var(--p, 0) * 3); }
/* ========== DOPO: una casa sola, la parete delle cornici ========== */
.after { position: relative; padding: 20px 0 60px; }
.after::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; transform: translateX(-50%); border-radius: 8px; background: linear-gradient(#424dff, #b625ff 40%, #424dff 70%, var(--lamp)); box-shadow: 0 0 18px rgb(106 92 255 / .6); }
.frame-row { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-bottom: 80px; position: relative; }
.frame-row::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--room); border: 4px solid #8a6bff; }
.frame-row:nth-child(even) .pic { order: 2; }
.pic { margin: 0; background: var(--frame); padding: 12px 12px 44px; box-shadow: 0 24px 50px rgb(0 0 0 / .55); position: relative; transform: rotate(-2deg); }
.frame-row:nth-child(even) .pic { transform: rotate(2deg); }
.pic::before { content: ""; position: absolute; top: -26px; left: 50%; width: 2px; height: 26px; background: #6b5d7d; }
.pic::after { content: ""; position: absolute; top: -30px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: #c9a36a; }
.pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pic figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 700 1.05rem Kalam, cursive; color: #3b3150; }
.pic--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pic--pair img { aspect-ratio: 1; }
.story h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 10px; line-height: 1.1; font-weight: 800; }
.story p { color: var(--dim); margin: 0 0 12px; }
.story p strong { color: var(--text); }
.story .kicker { margin-bottom: 8px; }
/* le chiavi di casa: portachiavi da muro */
.keys { position: relative; z-index: 1; margin: 0 auto 90px; max-width: 900px; }
.keys__head { text-align: center; max-width: 560px; margin: 0 auto 26px; background: var(--room); padding: 10px 16px; }
.keys__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 8px; font-weight: 800; }
.keys__head p:not(.kicker) { color: var(--dim); margin: 0; }
.rack {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 22px; padding: 30px 26px 34px; border-radius: 12px;
    background: repeating-linear-gradient(90deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 22px), linear-gradient(#5a3f2c, #45301f);
    box-shadow: 0 24px 50px rgb(0 0 0 / .5), inset 0 2px 0 rgb(255 255 255 / .08);
  }
.hook { position: relative; display: grid; justify-items: center; padding-top: 14px; }
.hook::before { content: ""; position: absolute; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #c9a36a; box-shadow: 0 2px 0 #7a5a33; }
.key__icon { width: 54px; height: 24px; transform: rotate(90deg); margin: 10px 0 14px; transition: transform .4s; }
.hook--b .key__icon { color: #8cc6ff; filter: drop-shadow(0 0 6px var(--dani)); }
.hook--v .key__icon { color: #cfa6ff; filter: drop-shadow(0 0 6px var(--ome)); }
.hook:hover .key__icon { transform: rotate(80deg); }
.window { width: 38px; height: 38px; margin: 4px 0 8px; transform: rotate(-6deg); }
.tag {
    width: 100%; background: var(--paper); color: #2b2233; padding: 12px 14px 10px; border-radius: 4px 4px 10px 10px;
    box-shadow: 0 10px 22px rgb(0 0 0 / .4); display: grid; gap: 2px; text-align: center; transform: rotate(-1.5deg);
  }
.hook:nth-child(even) .tag { transform: rotate(1.5deg); }
.tag b { font-size: 1.1rem; }
.tag span { font: 1.02rem/1.3 Kalam, cursive; }
.tag small { font: .68rem "JetBrains Mono", monospace; color: #7a6d8c; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
@media (max-width: 760px) {
.rack { grid-template-columns: 1fr 1fr; gap: 26px 12px; padding: 22px 12px; }
}
.roles { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roles li { background: var(--wall); border: 1px solid #2d2640; border-radius: 10px; padding: 9px 12px; display: grid; }
.roles b { font-size: .95rem; }
.roles small { font: .72rem "JetBrains Mono", monospace; color: var(--dim); }
.servers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.servers span { font: .78rem "JetBrains Mono", monospace; padding: 5px 10px; border-radius: 999px; border: 1px solid #3a3150; color: var(--dim); }
.servers .on { border-color: #ffc477; color: var(--lamp); }
.story .note { margin-top: 18px; transform: rotate(-2deg); }
@media (max-width: 760px) {
.after::before { left: 18px; }
.frame-row { grid-template-columns: 1fr; gap: 26px; padding-left: 40px; margin-bottom: 60px; }
.frame-row::after { left: 18px; top: 0; }
.frame-row:nth-child(even) .pic { order: 0; }
.roles { grid-template-columns: 1fr; }
}
/* il futuro: la linea continua, tratteggiata */
.future { position: relative; text-align: center; padding: 10px 0 70px; }
.future::before { content: ""; position: absolute; left: 50%; top: -60px; height: 150px; width: 0; transform: translateX(-50%); border-left: 6px dashed #ffc477; opacity: .8; }
.future .kicker { margin-top: 110px; }
.future h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.05; margin: 0 0 28px; font-weight: 900; }
.empty-frame { width: min(340px, 80%); aspect-ratio: 4/3; margin: 0 auto 40px; border: 3px dashed #6b5d7d; border-radius: 6px; display: grid; place-content: center; gap: 4px; color: var(--dim); font: 1.1rem Kalam, cursive; transform: rotate(-1.5deg); }
.empty-frame span { font: 300 3rem/1 Rubik, sans-serif; color: var(--lamp); }
.soon { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; }
.soon li { background: var(--wall); border: 1px solid #2d2640; border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; }
.soon b { font-size: 1.08rem; }
.soon span { color: var(--dim); font-size: .95rem; }
.soon .you { border-color: #ffc477; background: color-mix(in srgb, #ffc477 8%, var(--wall)); }
@media (max-width: 760px) {
.soon { grid-template-columns: 1fr; }
}
/* chiusura */
.next { text-align: center; padding: 30px 0 110px; }
.next h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 8px; }
.next p { color: var(--dim); margin: 0 0 26px; }
.next .links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.next a { text-decoration: none; padding: 12px 20px; border-radius: 999px; border: 1px solid #3a3150; font-weight: 700; }
.next a.main { background: #5865f2; border-color: #5865f2; }
/* comparsa dei capitoli */