/* =========================================================
   RB Core — esperienze fotografiche
   UI quasi invisibile: nero, carta, mono. La fotografia è l'interfaccia.
   ========================================================= */
:root {
	--rb-n: #0b0b0b; --rb-c: #e8e4dc; --rb-b: #f7f5f0; --rb-g: #8e8b85; --rb-f: #3b3a38; --rb-r: #d7263d; --rb-amb: #e6a817;
	--rb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--rb-sans: "Instrument Sans", system-ui, sans-serif;
	--rb-serif: "Cormorant Garamond", Georgia, serif;
	--rb-lento: cubic-bezier(.22, .61, .36, 1);
	--rb-hud: 400 .68rem/1.5 var(--rb-mono);
}
[data-rb-rullino] [hidden], .rb-oss [hidden], .rb-overlay[hidden] { display: none !important; }
.rb-num { font: var(--rb-hud); letter-spacing: .14em; color: var(--rb-g); }
.rb-hud-riga { font: var(--rb-hud); letter-spacing: .22em; text-transform: uppercase; color: var(--rb-g); }
.rb-btn { font: var(--rb-hud); letter-spacing: .18em; text-transform: uppercase; background: transparent; color: var(--rb-c); border: 1px solid currentColor; padding: .7rem 1.1rem; cursor: pointer; }
.rb-btn:hover:not(:disabled) { background: var(--rb-c); color: var(--rb-n); }
.rb-btn:disabled { opacity: .35; cursor: default; }
.rb-btn--muto { border-color: transparent; color: var(--rb-g); }

/* ---------- Testata ---------- */
.rb-header { position: fixed; inset: 0 0 auto 0; z-index: 60; margin: 0 !important; pointer-events: none; }
.rb-testata { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem clamp(1rem, 3vw, 2.2rem); pointer-events: none; transition: opacity .6s var(--rb-lento), transform .6s var(--rb-lento); }
.rb-testata > * { pointer-events: auto; }
body.rb-immersivo:not(.rb-testata-on) .rb-testata:not(:focus-within) { opacity: 0; transform: translateY(-8px); }
html.rb-menu-aperto .rb-testata { opacity: 1 !important; transform: none !important; }
.rb-testata__logo { font: 600 1rem/1 var(--rb-sans); letter-spacing: .12em; text-decoration: none; color: var(--rb-c); mix-blend-mode: difference; }
.rb-testata__destra { display: flex; align-items: center; gap: 1.2rem; }
.rb-testata__menu { font: var(--rb-hud); letter-spacing: .24em; text-transform: uppercase; background: none; border: 0; color: var(--rb-c); cursor: pointer; padding: .4rem 0; position: relative; z-index: 2; }
.rb-salta { position: absolute; left: -9999px; top: .5rem; background: var(--rb-c); color: var(--rb-n); padding: .5rem 1rem; font: var(--rb-hud); z-index: 100; }
.rb-salta:focus { left: 1rem; }
.rb-modi--mini { display: flex; border: 1px solid var(--rb-f); }
.rb-modi--mini button { font: 400 .62rem/1 var(--rb-mono); letter-spacing: .18em; text-transform: uppercase; background: none; border: 0; color: var(--rb-g); padding: .45rem .6rem; cursor: pointer; }
.rb-modi--mini button[aria-pressed="true"] { background: var(--rb-c); color: var(--rb-n); }
@media (max-width: 560px) { .rb-modi--mini button { padding: .45rem .45rem; letter-spacing: .1em; } .rb-testata__destra { gap: .7rem; } }

/* ---------- Menu a tutto schermo ---------- */
.rb-overlay { position: fixed; inset: 0; z-index: 1; background: rgba(8,8,8,.97); display: grid; place-items: center; opacity: 0; transition: opacity .45s var(--rb-lento); padding: 5rem clamp(1rem, 5vw, 4rem) 3rem; overflow: auto; }
.rb-overlay.is-on { opacity: 1; }
.rb-overlay__nav { width: min(70rem, 100%); display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.rb-overlay ol, .rb-overlay ul { list-style: none; margin: 0; padding: 0; }
.rb-overlay__serie { counter-reset: s; }
.rb-overlay__serie li { counter-increment: s; }
.rb-overlay__serie a { display: flex; gap: 1rem; align-items: baseline; font: 500 clamp(1.8rem, 5vw, 4rem)/1.08 var(--rb-sans); text-transform: uppercase; letter-spacing: -.01em; color: var(--rb-c); text-decoration: none; transition: color .35s, opacity .35s, transform .5s var(--rb-lento); }
.rb-overlay__serie a::before { content: counter(s, decimal-leading-zero); font: var(--rb-hud); color: var(--rb-g); letter-spacing: .15em; }
.rb-overlay__serie a small { font: var(--rb-hud); color: var(--rb-g); letter-spacing: .15em; }
.rb-overlay.ha-fuoco .rb-overlay__serie a:not(.is-fuoco) { opacity: .25; }
.rb-overlay__serie a.is-fuoco { transform: translateX(.5rem); }
.rb-overlay__serie a[aria-current] { color: var(--rb-b); font-style: italic; }
.rb-overlay__pagine a { display: block; font: 400 .8rem/2.4 var(--rb-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--rb-g); text-decoration: none; }
.rb-overlay__pagine a:hover, .rb-overlay__pagine a[aria-current] { color: var(--rb-c); }
.rb-overlay__nota { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font: var(--rb-hud); letter-spacing: .2em; color: var(--rb-f); text-transform: uppercase; }
@media (max-width: 720px) { .rb-overlay__nav { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Home: mirino ---------- */
.rb-mirino { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--rb-n); margin-block: 0 !important; outline: none; }
.rb-mirino__scena { position: absolute; inset: 0; }
.rb-mirino__statico { position: absolute; inset: 12vh 17vw 18vh; margin: 0; display: grid; place-items: center; }
.rb-mirino__statico img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rb-mirino.is-attiva .rb-mirino__statico { display: none; }
.rb-mirino__titolo {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; margin: 0; text-align: center; pointer-events: none;
	font: 500 clamp(2.6rem, 9.5vw, 8.5rem)/.86 var(--rb-sans) !important; text-transform: uppercase; letter-spacing: -.02em; color: var(--rb-b);
	text-shadow: 0 2px 40px rgba(0,0,0,.35); animation: rb-titolo 6s var(--rb-lento) both;
}
.rb-mirino__titolo span { display: block; }
.rb-mirino__titolo small { display: block; margin-top: 1.4rem; font: 400 .74rem/1 var(--rb-mono); letter-spacing: .6em; }
@keyframes rb-titolo { 0% { opacity: 0; letter-spacing: .06em; } 22% { opacity: 1; } 45% { opacity: 1; letter-spacing: -.02em; } 100% { opacity: .16; letter-spacing: -.02em; } }
.rb-mirino:not(.is-attiva) .rb-mirino__titolo { animation: none; opacity: 1; }
.rb-mirino__istruzioni { position: absolute; left: 0; right: 0; top: calc(50% + clamp(6rem, 14vw, 11rem)); z-index: 3; display: flex; justify-content: center; gap: 2.2rem; margin: 0; pointer-events: none; font: var(--rb-hud); letter-spacing: .3em; text-transform: uppercase; color: var(--rb-c); text-shadow: 0 0 12px rgba(0,0,0,.7); animation: rb-appare 2s 1.6s var(--rb-lento) both; }
html[data-rb-modo="osserva"] .rb-mirino__istruzioni span:last-child { display: none; }
.rb-mirino__azioni { position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 4vh, 2.6rem); z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.2rem); animation: rb-appare 1.6s 2.4s var(--rb-lento) both; }
.rb-modi { display: flex; gap: .5rem; }
.rb-modi__btn { display: grid; gap: .25rem; text-align: left; background: rgba(11,11,11,.45); backdrop-filter: blur(6px); border: 1px solid var(--rb-f); color: var(--rb-c); padding: .7rem .95rem; cursor: pointer; min-width: 9.5rem; }
.rb-modi__btn b { font: 500 .78rem/1 var(--rb-mono); letter-spacing: .26em; text-transform: uppercase; }
.rb-modi__btn small { font: 400 .62rem/1.3 var(--rb-mono); color: var(--rb-g); letter-spacing: .06em; }
.rb-modi__btn[aria-pressed="true"] { border-color: var(--rb-c); background: var(--rb-c); color: var(--rb-n); }
.rb-modi__btn[aria-pressed="true"] small { color: #444; }
.rb-mirino__entra { font: var(--rb-hud); letter-spacing: .24em; text-transform: uppercase; color: var(--rb-c); text-decoration: none; border-bottom: 1px solid var(--rb-f); padding-bottom: .3rem; }
.rb-mirino__entra:hover { border-color: var(--rb-c); }
.rb-mirino__info { position: absolute; z-index: 2; display: flex; justify-content: space-between; font: var(--rb-hud); letter-spacing: .2em; color: var(--rb-c); opacity: 0; transform: translateY(4px); transition: opacity .8s var(--rb-lento), transform .8s var(--rb-lento); pointer-events: none; }
.rb-mirino__info.is-on { opacity: .85; transform: none; }
@keyframes rb-appare { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
	.rb-mirino__azioni { flex-direction: column; align-items: stretch; }
	.rb-modi__btn { min-width: 0; flex: 1; }
	.rb-mirino__istruzioni { gap: 1rem; font-size: .6rem; }
}

/* ---------- Indice delle serie ---------- */
.rb-indice { padding-block: clamp(4rem, 12vh, 9rem) clamp(3rem, 8vh, 6rem); position: relative; }
.rb-indice__titolo { font: var(--rb-hud) !important; letter-spacing: .3em !important; color: var(--rb-g) !important; margin-bottom: 2rem !important; }
.rb-indice__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid #1d1d1d; }
.rb-indice__voce a { position: relative; display: grid; grid-template-columns: 3.5rem 1fr auto auto; align-items: baseline; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid #1d1d1d; text-decoration: none; color: var(--rb-c); }
.rb-indice__n, .rb-indice__conta { font: var(--rb-hud); letter-spacing: .15em; color: var(--rb-g); }
.rb-indice__nome { font: 500 clamp(1.8rem, 5.5vw, 4.6rem)/1 var(--rb-sans); text-transform: uppercase; letter-spacing: -.015em; transition: letter-spacing .7s var(--rb-lento), color .4s; }
.rb-indice__verbo { font: italic 400 clamp(1rem, 1.6vw, 1.3rem)/1.2 var(--rb-serif); color: var(--rb-g); }
.rb-indice__img { position: absolute; right: 18%; top: 50%; width: min(24vw, 320px); transform: translateY(-50%) scale(.94); opacity: 0; pointer-events: none; z-index: 2; transition: opacity .5s var(--rb-lento), transform .7s var(--rb-lento); }
.rb-indice__img img { width: 100%; height: auto; display: block; filter: grayscale(.2); }
.rb-indice__voce a:hover .rb-indice__img, .rb-indice__voce a:focus-visible .rb-indice__img { opacity: 1; transform: translateY(-50%) scale(1); }
.rb-indice__voce a:hover .rb-indice__nome { letter-spacing: .01em; color: var(--rb-b); }
@media (max-width: 760px) { .rb-indice__voce a { grid-template-columns: 2.4rem 1fr; } .rb-indice__verbo, .rb-indice__conta { grid-column: 2; } .rb-indice__img { display: none; } }
@media (hover: none) { .rb-indice__img { display: none; } }

/* ---------- Esperienze: struttura comune ---------- */
.rb-main--serie { padding: 0 !important; }
.rb-exp { position: relative; margin-block: 0 !important; outline: none; }
.rb-exp:not(.is-attiva) { padding: clamp(6rem, 14vh, 9rem) clamp(1rem, 5vw, 4rem) 4rem; }
.rb-exp__testata { position: relative; z-index: 5; }
.rb-exp__titolo { font: 500 clamp(2.2rem, 7vw, 5.5rem)/.95 var(--rb-sans) !important; text-transform: uppercase; margin: 0 0 .6rem !important; color: var(--rb-b); }
.rb-exp__meta { font: var(--rb-hud); letter-spacing: .2em; text-transform: uppercase; color: var(--rb-g); margin: 0 0 2rem; }
.rb-exp__incorso { color: var(--rb-r); }
.rb-exp__testo { max-width: 42rem; margin-bottom: 3rem; }
.rb-exp__statico { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(2rem, 6vh, 5rem); }
.rb-exp__statico figure { margin: 0; }
.rb-exp__statico img { display: block; max-width: 100%; max-height: 88vh; width: auto; margin-inline: auto; }
.rb-exp__statico figcaption { text-align: center; margin-top: .8rem; font: var(--rb-hud); color: var(--rb-g); letter-spacing: .14em; }
/* attiva: tutto schermo, la fotografia diventa l'interfaccia */
.rb-exp.is-attiva:not(.rb-exp--salita):not(.rb-exp--narrativa) { height: 100vh; height: 100svh; overflow: hidden; background: var(--rb-n); touch-action: none; user-select: none; -webkit-user-select: none; }
.rb-exp.is-attiva .rb-exp__statico, .rb-exp.is-attiva .rb-exp__testo { display: none; }
.rb-exp.is-attiva .rb-exp__testata { position: absolute; left: clamp(1rem, 3vw, 2.2rem); top: 3.6rem; pointer-events: none; animation: rb-testata-exp 5s var(--rb-lento) both; }
.rb-exp.is-attiva .rb-exp__titolo { font-size: clamp(1rem, 2vw, 1.4rem) !important; letter-spacing: .1em; margin: 0 0 .2rem !important; }
.rb-exp.is-attiva .rb-exp__meta { margin: 0; }
@keyframes rb-testata-exp { 0%, 70% { opacity: 1; } 100% { opacity: .35; } }
.rb-exp--salita.is-attiva .rb-exp__testata, .rb-exp--narrativa.is-attiva .rb-exp__testata { display: none; }
.rb-palco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.rb-cursore-on[data-rb-modo="scatta"] .rb-exp.is-attiva, html.rb-cursore-on[data-rb-modo="scatta"] .rb-mirino.is-attiva { cursor: none; }
html.rb-cursore-on[data-rb-modo="scatta"] .rb-exp.is-attiva :is(a, button), html.rb-cursore-on .rb-mirino.is-attiva :is(a, button) { cursor: pointer; }

/* cornice del mirino: quattro angoli */
.rb-cornice { position: absolute; pointer-events: none; z-index: 2; transition: opacity .6s; }
.rb-cornice i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(232,228,220,.7); }
.rb-cornice i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.rb-cornice i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.rb-cornice i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.rb-cornice i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* parole-indizio */
.rb-parole { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.rb-parola { position: absolute; transform: translate(-50%, -160%); font: 500 .7rem/1 var(--rb-mono); letter-spacing: .5em; color: var(--rb-b); text-shadow: 0 0 12px rgba(0,0,0,.8); animation: rb-parola 2.6s var(--rb-lento) forwards; }
@keyframes rb-parola { 0% { opacity: 0; letter-spacing: 1em; filter: blur(4px); } 20%, 65% { opacity: 1; letter-spacing: .5em; filter: none; } 100% { opacity: 0; } }

/* ---------- HUD ---------- */
.rb-hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; color: var(--rb-c); }
.rb-hud p { margin: 0; }
.rb-hud::before { content: ""; position: absolute; inset: auto 0 0 0; height: 22vh; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); }
.rb-exp--salita .rb-hud::before, .rb-exp--narrativa .rb-hud::before { height: 14vh; }
.rb-hud__sx { position: absolute; left: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vh, 2rem); font: var(--rb-hud); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 0 10px rgba(0,0,0,.6); }
.rb-hud__stato { display: flex; align-items: center; gap: .55rem; color: var(--rb-b); }
.rb-rec { width: 6px; height: 6px; border-radius: 50%; background: var(--rb-r); animation: rb-rec 2.4s infinite; }
@keyframes rb-rec { 50% { opacity: .2; } }
.rb-hud__riga, .rb-hud__exif { color: var(--rb-g); }
.rb-hud__exif:empty { display: none; }
.rb-hud__mappa { position: absolute; right: clamp(1rem, 3vw, 2.2rem); top: 4.2rem; display: grid; grid-template-columns: repeat(var(--col, 5), 6px); gap: 4px; opacity: .8; }
.rb-hud__mappa i { width: 6px; height: 6px; border: 1px solid #555; }
.rb-hud__mappa i.is-visto { background: #555; }
.rb-hud__mappa i.is-qui { background: var(--rb-c); border-color: var(--rb-c); box-shadow: 0 0 0 2px rgba(232,228,220,.2); }
.rb-hud__aiuto { position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); transform: translateX(-50%); font: var(--rb-hud); letter-spacing: .1em; color: var(--rb-g); white-space: nowrap; transition: opacity 1.2s; text-transform: uppercase; }
.rb-hud__aiuto b { color: var(--rb-c); font-weight: 500; }
.rb-hud.aiuto-off .rb-hud__aiuto { opacity: 0; }
.rb-hud__ctrl { position: fixed; right: clamp(4.8rem, 8vw, 6.5rem); bottom: clamp(1rem, 3vh, 2rem); z-index: 21; display: flex; gap: .4rem; }
.rb-hud__btn { font: 400 .6rem/1 var(--rb-mono); letter-spacing: .16em; text-transform: uppercase; background: rgba(11,11,11,.5); border: 1px solid var(--rb-f); color: var(--rb-g); padding: .45rem .6rem; cursor: pointer; }
.rb-hud__btn[aria-pressed="true"] { color: var(--rb-c); border-color: var(--rb-c); }
@media (max-width: 700px) { .rb-hud__aiuto { white-space: normal; width: 90%; text-align: center; bottom: 5.2rem; font-size: .58rem; } .rb-hud__mappa { display: none; } .rb-hud__ctrl { right: 1rem; bottom: auto; top: 3.6rem; } .rb-prof__nav { bottom: 8.6rem; } }

/* ---------- Cursore-telemetro ---------- */
.rb-cursore { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: flex; align-items: center; gap: .6rem; color: var(--rb-b); mix-blend-mode: difference; }
.rb-cursore__g { display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; font: 300 28px/1 var(--rb-sans); transition: transform .3s var(--rb-lento); }
.rb-cursore[data-stato="punto"] .rb-cursore__g { font-size: 30px; }
.rb-cursore[data-stato="interesse"] .rb-cursore__g { transform: scale(1.15); }
.rb-cursore[data-stato="scatto"] .rb-cursore__g { transform: scale(1.25) rotate(45deg); }
.rb-cursore__t { font: 400 .58rem/1 var(--rb-mono); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; margin-top: -17px; }
html:not([data-rb-modo="scatta"]) .rb-cursore { display: none; }

/* ---------- Scatto ---------- */
.rb-lampo { position: absolute; inset: 0; z-index: 40; background: #fff; pointer-events: none; animation: rb-lampo .32s ease-out forwards; }
@keyframes rb-lampo { from { opacity: .55; } to { opacity: 0; } }
.rb-scheda { position: absolute; z-index: 41; left: 50%; bottom: clamp(4.5rem, 12vh, 7rem); transform: translate(-50%, 8px); min-width: 15rem; padding: 1.1rem 1.4rem; background: rgba(11,11,11,.82); backdrop-filter: blur(8px); border: 1px solid var(--rb-f); text-align: center; opacity: 0; transition: opacity .4s var(--rb-lento), transform .4s var(--rb-lento); }
.rb-scheda.is-on { opacity: 1; transform: translate(-50%, 0); }
.rb-scheda p { margin: 0; font: var(--rb-hud); letter-spacing: .24em; text-transform: uppercase; }
.rb-scheda__n { color: var(--rb-b); font-weight: 500 !important; font-size: .8rem !important; margin-bottom: .6rem !important; }
.rb-scheda__serie { color: var(--rb-c); }
.rb-scheda__anno, .rb-scheda__autore { color: var(--rb-g); }
.rb-scheda__nota { color: var(--rb-amb); margin-top: .6rem !important; font-size: .6rem !important; }
.rb-scheda__continua { display: inline-block; margin-top: .9rem; font: 500 .7rem/1 var(--rb-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--rb-b); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 .25rem; cursor: pointer; text-decoration: none; opacity: 0; transform: translateX(-6px); transition: opacity .5s, transform .5s var(--rb-lento); }
.rb-scheda__continua.is-on { opacity: 1; transform: none; }
.rb-salita__f .rb-scheda { position: absolute; bottom: 1rem; }

/* ---------- Trova il legame ---------- */
.rb-legame { position: absolute; inset: 0; z-index: 45; display: grid; place-content: center; justify-items: center; gap: 1rem; background: rgba(8,8,8,.88); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s; text-align: center; padding: 1rem; }
.rb-legame.is-on { opacity: 1; }
.rb-legame__t { margin: 0; font: 500 .9rem/1 var(--rb-mono); letter-spacing: .4em; text-transform: uppercase; color: var(--rb-b); }
.rb-legame__s { margin: 0 0 1rem; font: italic 400 1.15rem/1.3 var(--rb-serif); color: var(--rb-g); min-height: 1.5em; }
.rb-legame__pezzi { display: flex; gap: clamp(.6rem, 2vw, 1.4rem); flex-wrap: wrap; justify-content: center; }
.rb-legame__pezzo { padding: 0; border: 1px solid var(--rb-f); background: none; cursor: pointer; transition: transform .35s var(--rb-lento), border-color .3s, opacity .3s; }
.rb-legame__pezzo canvas { display: block; width: clamp(110px, 22vw, 220px); height: auto; aspect-ratio: 1; }
.rb-legame__pezzo:hover, .rb-legame__pezzo:focus-visible { transform: translateY(-4px); border-color: var(--rb-c); }
.rb-legame__pezzo.is-no { opacity: .25; transform: none; }
.rb-legame__pezzo.is-giusto { border-color: var(--rb-b); box-shadow: 0 0 0 3px var(--rb-b); }
.rb-legame__salta { margin-top: 1rem; font: var(--rb-hud); letter-spacing: .24em; text-transform: uppercase; background: none; border: 0; color: var(--rb-g); cursor: pointer; }

/* ---------- Rullino ---------- */
.rb-rullino { position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vh, 2rem); z-index: 70; margin: 0 !important; }
.rb-rullino__apri { display: flex; align-items: center; gap: .45rem; font: 500 .8rem/1 var(--rb-mono); letter-spacing: .1em; color: var(--rb-b); background: rgba(11,11,11,.6); backdrop-filter: blur(6px); border: 1px solid var(--rb-f); padding: .55rem .75rem; cursor: pointer; }
.rb-rullino__apri.is-pulsa { animation: rb-pulsa .7s var(--rb-lento); }
@keyframes rb-pulsa { 30% { transform: scale(1.18); border-color: var(--rb-amb); color: var(--rb-amb); } }
.rb-rullino__icona { font-size: 1rem; }
.rb-rullino__pannello { position: absolute; right: 0; bottom: calc(100% + .6rem); width: min(92vw, 26rem); max-height: 72vh; overflow: auto; background: #0e0e0e; border: 1px solid var(--rb-f); padding: 1.2rem; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.rb-rullino__testa { display: flex; justify-content: space-between; align-items: center; }
.rb-rullino__testa h2 { margin: 0 !important; font: 500 .8rem/1 var(--rb-mono) !important; letter-spacing: .3em !important; text-transform: uppercase; color: var(--rb-b); }
.rb-rullino__chiudi { background: none; border: 0; color: var(--rb-g); font-size: 1.4rem; cursor: pointer; }
.rb-rullino__totale { font: 500 1.6rem/1 var(--rb-sans); margin: 1rem 0 .4rem; text-transform: uppercase; }
.rb-rullino__serie { list-style: none; margin: 0 0 1rem; padding: 0; font: var(--rb-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--rb-g); }
.rb-rullino__serie b { color: var(--rb-c); font-weight: 500; margin-right: .5rem; }
.rb-rullino__griglia { list-style: none; margin: 0 0 1rem; padding: .6rem; background: #050505; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.rb-rullino__griglia li { position: relative; aspect-ratio: 1; background: #111; }
.rb-rullino__griglia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-rullino__griglia span { position: absolute; left: 3px; bottom: 2px; font: 500 .55rem/1 var(--rb-mono); color: var(--rb-amb); }
.rb-rullino__griglia button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; opacity: 0; }
.rb-rullino__griglia li:hover button, .rb-rullino__griglia button:focus-visible { opacity: 1; }
.rb-rullino__azioni { display: flex; gap: .5rem; flex-wrap: wrap; }
.rb-rullino__nota { font: 400 .6rem/1.5 var(--rb-mono); color: var(--rb-f); margin: .9rem 0 0; letter-spacing: .06em; }
.rb-provino { position: fixed; inset: 0; z-index: 95; background: rgba(5,5,5,.96); display: flex; flex-direction: column; }
.rb-provino__barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 2rem); font: var(--rb-hud); letter-spacing: .24em; text-transform: uppercase; border-bottom: 1px solid #1d1d1d; flex-wrap: wrap; }
.rb-provino__foglio { flex: 1; overflow: auto; display: grid; place-items: center; padding: 2rem; }
.rb-provino__canvas { max-width: 100%; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.7); }

/* ---------- Osserva ---------- */
.rb-oss { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--rb-n); }
.rb-oss__scena { position: relative; flex: 1; margin: 4.5rem clamp(1rem, 5vw, 5rem) 0; touch-action: pan-y; }
.rb-oss__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.6s var(--rb-lento); }
.rb-oss__img.is-on { opacity: 1; }
.rb-oss__barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 5vw, 5rem) 1.6rem; padding-right: clamp(6rem, 12vw, 9rem); }
.rb-oss__cap { margin: 0; font: var(--rb-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--rb-c); }
.rb-oss__anno { color: var(--rb-g); }
.rb-oss__nav, .rb-prof__nav { display: flex; gap: .4rem; }
.rb-oss__btn { font: var(--rb-hud); letter-spacing: .16em; text-transform: uppercase; background: rgba(11,11,11,.5); border: 1px solid var(--rb-f); color: var(--rb-c); padding: .55rem .8rem; cursor: pointer; min-width: 2.6rem; }
.rb-oss__btn:hover { border-color: var(--rb-c); }
.rb-prof__nav { position: absolute; z-index: 22; left: 50%; transform: translateX(-50%); bottom: clamp(4.4rem, 11vh, 6.4rem); }
@media (prefers-reduced-motion: reduce) { .rb-oss__img { transition-duration: .2s; } }

/* ---------- Salita ---------- */
html.rb-salita-on { scroll-behavior: auto; }
.rb-salita { display: flex; flex-direction: column; align-items: center; gap: 30vh; padding: 20vh 1rem 12vh; background: linear-gradient(to bottom, #1a2230 0%, #0f1115 30%, var(--rb-n) 70%); }
.rb-salita__cima { text-align: center; display: grid; gap: 1.2rem; justify-items: center; }
.rb-salita__nota { font: italic 400 1.4rem/1.2 var(--rb-serif); color: var(--rb-g); margin: 0; }
.rb-salita__vuoto { width: min(40vw, 320px); aspect-ratio: 3 / 2; border: 1px dashed #3a3f48; margin-top: 3rem; }
.rb-salita__f { margin: 0; width: min(68vw, 760px); --p: 0; --v: 1; }
.rb-salita__cornice { overflow: hidden; }
.rb-salita__f img { display: block; width: 100%; height: auto;
	transform: translateY(calc(var(--p) * -6%)) scale(calc(1 + var(--a) * .45));
	transform-origin: 50% 20%;
	filter: grayscale(calc(var(--a) * 100%)) contrast(calc(1 + var(--a) * .7)) brightness(calc(1 - var(--a) * .1));
	opacity: calc(.25 + var(--v) * .75); transition: opacity .3s linear; }
.rb-salita__f figcaption { margin-top: .8rem; text-align: center; }
.rb-salita__base { text-align: center; min-height: 40vh; display: grid; align-content: end; gap: .6rem; }
.rb-salita__sali { font: 500 clamp(2rem, 7vw, 5rem)/1 var(--rb-sans); text-transform: uppercase; margin: 0; animation: rb-sali 2.6s var(--rb-lento) infinite; }
@keyframes rb-sali { 50% { transform: translateY(-10px); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .rb-salita__sali { animation: none; } }

/* ---------- Narrativa ---------- */
.rb-narr { position: relative; }
.rb-narr__scena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rb-narr__scena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8vh 6vw; opacity: 0; transform: scale(1.03); filter: grayscale(.15); transition: opacity 2s var(--rb-lento), transform 6s var(--rb-lento); }
.rb-narr__scena img.is-on { opacity: .9; transform: none; }
.rb-narr.is-apertura .rb-narr__scena img.is-on { opacity: .18; }
.rb-narr__traccia { position: relative; margin-top: -100vh; margin-top: -100svh; z-index: 2; }
.rb-narr__pannello { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 10vh clamp(1rem, 6vw, 6rem); max-width: 34rem; }
.rb-narr__pannello.is-dx { margin-left: auto; }
.rb-narr__num { font: var(--rb-hud); letter-spacing: .3em; text-transform: uppercase; color: var(--rb-g); margin: 0 0 1rem; }
.rb-narr__testo { background: rgba(11,11,11,.72); backdrop-filter: blur(4px); padding: 1.4rem 1.6rem; font: 400 1.25rem/1.55 var(--rb-serif); color: var(--rb-c); opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--rb-lento), transform 1.2s var(--rb-lento); }
.rb-narr__testo:empty { display: none; }
.rb-narr__pannello.is-on .rb-narr__testo { opacity: 1; transform: none; }
.rb-narr__testo p { margin: 0; }
.rb-narr__versi { font-style: italic; font-size: 1.45rem; }
.rb-narr__apertura { max-width: none; align-items: center; text-align: center; }
.rb-narr__apertura h2 { font: 500 clamp(2.4rem, 8vw, 6.5rem)/.95 var(--rb-sans) !important; text-transform: uppercase; margin: .8rem 0 2rem !important; color: var(--rb-b); }
.rb-narr__scendi { font: var(--rb-hud); letter-spacing: .3em; text-transform: uppercase; color: var(--rb-g); }
.rb-narr__chiusa { max-width: none; align-items: center; text-align: center; }
.rb-narr__chiusa .rb-narr__versi { font-size: 1.8rem; }
@media (prefers-reduced-motion: reduce) { .rb-narr__testo { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.rb-mirino__titolo, .rb-mirino__istruzioni, .rb-mirino__azioni { animation: none; }
	.rb-parola { animation-duration: 3.2s; }
}

/* ---------- Prima visita: soglia, promemoria, aiuto ---------- */
.rb-modi--mini { position: relative; align-items: stretch; }
.rb-aiuto-modi { position: relative; display: flex; }
.rb-aiuto-modi__btn { border-left: 1px solid var(--rb-f) !important; color: var(--rb-g) !important; }
.rb-aiuto-modi__testo { position: absolute; right: 0; top: calc(100% + .6rem); width: 19rem; padding: .8rem 1rem; background: rgba(11,11,11,.94); border: 1px solid var(--rb-f); font: 400 .72rem/1.55 var(--rb-mono); letter-spacing: .02em; color: var(--rb-c); text-transform: none; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s, transform .3s var(--rb-lento), visibility .3s; pointer-events: none; z-index: 5; }
.rb-aiuto-modi__testo b { font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rb-b); }
.rb-aiuto-modi:hover .rb-aiuto-modi__testo, .rb-aiuto-modi__btn:focus-visible + .rb-aiuto-modi__testo { opacity: 1; visibility: visible; transform: none; }

.rb-soglia { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(34rem, calc(100% - 2rem)); display: grid; gap: .7rem; padding: clamp(1.2rem, 3vw, 2rem); background: rgba(11,11,11,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(232,228,220,.18); opacity: 0; transition: opacity .9s var(--rb-lento), transform .9s var(--rb-lento); }
.rb-soglia.is-on { opacity: 1; transform: translate(-50%, -50%); }
.rb-soglia__t { margin: 0 0 .3rem; font: 400 .72rem/1 var(--rb-mono); letter-spacing: .32em; text-transform: uppercase; color: var(--rb-g); }
.rb-soglia__scelta { display: grid; gap: .35rem; text-align: left; background: transparent; border: 1px solid var(--rb-f); color: var(--rb-c); padding: .9rem 1.1rem; cursor: pointer; transition: border-color .3s, background .3s; }
.rb-soglia__scelta b { font: 500 .85rem/1 var(--rb-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--rb-b); }
.rb-soglia__scelta span { font: italic 400 1.12rem/1.35 var(--rb-serif); color: var(--rb-c); }
.rb-soglia__scelta:hover, .rb-soglia__scelta:focus-visible { border-color: var(--rb-c); background: rgba(232,228,220,.06); }
.rb-soglia__nota { margin: .2rem 0 0; font: 400 .62rem/1.4 var(--rb-mono); letter-spacing: .12em; color: var(--rb-g); }
html.rb-soglia-on .rb-mirino__istruzioni, html.rb-soglia-on .rb-mirino__azioni .rb-modi { visibility: hidden; pointer-events: none; }

.rb-promemoria { position: absolute; right: 0; top: calc(100% + .5rem); white-space: nowrap; padding: .55rem .8rem; background: rgba(11,11,11,.9); border: 1px solid var(--rb-f); font: 400 .66rem/1 var(--rb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rb-g); opacity: 0; transform: translateY(-4px); transition: opacity .5s, transform .5s var(--rb-lento); }
.rb-promemoria.is-on { opacity: 1; transform: none; }
.rb-promemoria button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--rb-b); border-bottom: 1px solid currentColor; cursor: pointer; }
.rb-testata__destra { position: relative; }
@media (max-width: 560px) { .rb-promemoria { right: 0; white-space: normal; width: 15rem; } }
@media (prefers-reduced-motion: reduce) { .rb-soglia, .rb-promemoria, .rb-aiuto-modi__testo { transition: none; } }
html.rb-promemoria-on .rb-testata { opacity: 1 !important; transform: none !important; }