/* ═══════════════════════════════════════════════════════════
   ROMANOVSKIS.CH — v3 · "La Parete"
   Sopra base.css + home.css. Tre idee: il tracciato rosso che si disegna,
   le etichette da museo, le sale numerate.
═══════════════════════════════════════════════════════════ */

/* ── Motore v4: scroller orizzontale nativo ───────────────── */
.h-wrap { height: 100svh; overflow: hidden; position: relative; }
.h-sticky {
  position: relative; height: 100svh; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; cursor: grab;
}
.h-sticky::-webkit-scrollbar { display: none; }
.h-track { position: relative; z-index: 1; transform: none !important; will-change: auto; min-width: max-content; }
.red-path { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; }
body.wall { overflow: hidden; height: 100svh; }
.h-track { touch-action: pan-x; }

/* ── Ingresso ────────────────────────────────────────────── */
.p-hero { justify-content: start; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.p-hero > div:first-child { padding-left: 0; }
.p-hero .name { font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; font-size: clamp(2.8rem, min(7.4vw, 13vh), 7.4rem); margin: 14px 0 20px; }
.p-hero .lead { margin-bottom: 26px; font-size: clamp(1rem, min(1.3vw, 2.4vh), 1.2rem); }
.hero-meta { left: 0; }
.p-hero .lead { max-width: 30em; }

/* ── Sale (etichette da parete) ──────────────────────────── */
/* Sulla parete niente trattino rosso nei sottotitoli: il rosso è solo il percorso */
.h-track .eyebrow::before { display: none; }
.p-intro.digital { height: calc(100% - var(--nav-h)); margin-top: var(--nav-h); padding-top: 40px; }
.p-room .num { width: 100%; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.p-room .display { font-weight: 600; letter-spacing: -0.04em; }


/* ── Etichette da museo sotto le opere ───────────────────── */
.fig figcaption.label {
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto;
  gap: 2px 12px; align-items: baseline; padding-top: 12px;
}
.label .n { grid-row: 1 / 3; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--red); margin: 0; align-self: start; padding-top: 3px; }
.label .t { grid-column: 1; grid-row: 1; font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; }
.label .m { grid-column: 1; grid-row: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: normal; }
.label .m.mista::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: middle; }
.label .s { grid-column: 3; grid-row: 1 / 3; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0; transition: opacity 0.4s; align-self: stretch; }
.fig:hover .label .s, .hero-art .label .s { opacity: 1; }
.p-work figcaption { opacity: 1; }

/* ── Entrata e uscita legate allo scroll (vedi horizontal.js) ── */
.h-track .anim { will-change: transform; }
/* Nessuna transizione sulle immagini della parete: il movimento è tutto nel frame */
.h-track .lb-item img { transition: filter 0.4s; }
.h-track .lb-item:hover img { transform: none; }
/* Sulla parete la nav non sfoca lo sfondo in movimento (costoso) */
body.wall .nav.solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(244, 242, 237, 0.94); }
body.wall::before { display: none; }
.h-track .reveal { opacity: 1; transform: none; transition: none; }
.hero-hint .line, .p-info .end { border: 0; }
.hero-hint .line { display: none; }
.post-card { border-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .h-track .anim { transform: none !important; } }

/* ── HUD: la sala corrente ───────────────────────────────── */
.hud .sec { background: var(--paper); padding: 6px 10px; border-radius: 999px; left: calc(var(--gutter) - 10px); }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 899px) {
  .p-hero .name { font-size: clamp(2.8rem, 13vw, 4.4rem); }
  .label .s { display: none; }
}

/* Richieste AD: niente serie in verticale, niente info in basso */
.label .s { display: none; }
.hud .sec, .hud .dots { display: none; }
.hero-hint { display: none; }

/* Didascalie centrate sotto l'opera */
.p-work, .hero-art { align-items: center; }
.p-work figcaption.label, .hero-art figcaption.label { width: 100%; justify-items: center; text-align: center; padding-top: 14px; }
.p-work .label .t, .hero-art .label .t, .p-work .label .m, .hero-art .label .m { text-align: center; justify-self: center; }

/* Più aria tra i pannelli: il percorso rosso si vede di più */
.p-work { padding-right: 11vw; }
.p-intro, .p-room { margin-left: 12vw; padding-right: 9vw; }
.p-intro.digital { margin-left: 9vw; margin-right: 7vw; }
.p-segnale { margin-left: 12vw; padding-right: 9vw; }
.p-info { margin-left: 12vw; }
.hero-art { margin-left: 4vw; }
@media (max-width: 899px) {
  .p-work { padding-right: 14vw; }
  .p-intro, .p-room, .p-segnale, .p-info { margin-left: 10vw; }
  .p-intro.digital { margin-left: 8vw; margin-right: 8vw; }
}

/* Entrata iniziale: i contenuti scivolano dentro dai due lati */
body.entering .h-track .anim-enter { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

/* ── Richieste AD: 10px di carta attorno ai testi, testi allineati in alto ── */
/* Il blocco di testo copre la linea solo per 10px oltre il testo, uguale a sinistra e a destra */
.p-hero > div:first-child { width: fit-content; max-width: 100%; padding: 0 10px; margin-left: -10px; align-self: start; margin-top: 9vh; display: flex; flex-direction: column; align-items: flex-start; }
.p-info > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.p-intro, .p-room, .p-segnale, .p-page, .p-group, .p-block, .p-post, .p-news, .p-text, .p-quote, .p-links {
  width: fit-content; padding-left: 10px; padding-right: 10px;
  justify-content: flex-start; padding-top: calc(var(--nav-h) + 9vh);
}
.p-intro, .p-room { max-width: 42vw; margin-left: calc(12vw - 10px); margin-right: 9vw; }
.p-intro.digital { width: fit-content; max-width: min(46vw, 680px); padding-left: 4vw; padding-right: 4vw; margin-left: 9vw; margin-right: 7vw; padding-top: 9vh; justify-content: flex-start; }
.p-intro.digital .display { max-width: 11em; }
.p-intro.digital .lead { max-width: 30em; }
.p-segnale { max-width: 62vw; margin-left: calc(12vw - 10px); margin-right: 9vw; }
.p-page { max-width: 46vw; margin-left: -10px; margin-right: 10vw; }
.p-group { max-width: 26vw; margin-left: calc(11vw - 10px); margin-right: 8vw; }
.p-block { max-width: 36vw; margin-left: calc(11vw - 10px); margin-right: 8vw; }
.p-post { max-width: 40vw; margin-left: calc(11vw - 10px); margin-right: 8vw; }
.p-news { max-width: 38vw; margin-left: calc(11vw - 10px); margin-right: 8vw; }
.p-text { max-width: 36vw; margin-left: calc(11vw - 10px); margin-right: 8vw; }
.p-quote { max-width: 50vw; margin-left: calc(11vw - 10px); margin-right: 8vw; }
.p-links { max-width: 30vw; margin-left: calc(11vw - 10px); margin-right: 8vw; }
.p-info { align-items: start; padding-top: calc(var(--nav-h) + 16vh); }
.p-info > div { width: fit-content; padding-left: 10px; padding-right: 10px; margin-left: -10px; }
.p-info .contact { padding-top: 0; }
@media (max-width: 899px) {
  .p-hero > div:first-child { margin-top: 8vh; }
  .p-intro, .p-room, .p-segnale, .p-page, .p-group, .p-block, .p-post, .p-news, .p-text, .p-quote, .p-links { max-width: calc(100vw - 2 * var(--gutter)); margin-left: calc(10vw - 10px); margin-right: 6vw; padding-top: calc(var(--nav-h) + 8vh); }
  .p-page { margin-left: -10px; }
  .p-intro.digital { max-width: none; width: calc(100vw - 2 * var(--gutter)); margin-left: 8vw; margin-right: 8vw; padding-left: var(--gutter); padding-right: var(--gutter); }
  .p-info { padding-top: calc(var(--nav-h) + 8vh); }
}

/* Il primo testo di ogni pannello parte esattamente dallo stesso punto (niente line box di troppo) */
.p-hero > div:first-child, .p-info > div { display: flex; flex-direction: column; align-items: flex-start; }
.p-hero > div:first-child { padding-top: 0; padding-bottom: 0; }

/* ═══ Ingresso (js/volo.js, AD 6 ott 2026): la home si apre sul video (la valle con il fiume rosso), scorrendo il
   volo torna indietro fino al quadro, una linea rossa attraversa lo schermo al centro del quadro e il video si
   chiude su quella linea scoprendo il sito. Il livello sta sopra tutto, menu compreso, finché non si chiude. ═══ */
.volo { display: none; }
html.volo-on, html.volo-on body { overflow: hidden; }
html.volo-on .volo { display: block; position: fixed; inset: 0; z-index: 10000; transition: opacity .5s ease; }
.volo-film { position: absolute; inset: 0; background: #F4F2ED; will-change: clip-path; }
.volo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #F4F2ED; transform-origin: 0 0; will-change: transform; }
.volo-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.volo.out { opacity: 0; pointer-events: none; }

/* ═══ Hero (AD 6 ott 2026): l'ingresso (js/volo.js) si chiude su Duality al centro dello schermo, e nella hero
   resta solo il quadro con la sua didascalia: niente nome (c'è già nel logo), niente testi, niente bottoni (AD:
   "togliamo tutte le scritte e i bottoni"); il percorso rosso lo attraversa. L'h1 "Edgars Romanovskis" è solo per
   Google e lettori di schermo (.vh). Tre colonne per tenere il quadro al centro esatto. ═══ */
.p-hero.hero-c {
  width: 100vw; display: grid; align-items: center; justify-content: stretch;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto;
  column-gap: clamp(28px, 3.2vw, 56px);
  padding: calc(var(--nav-h) + 2vh) var(--gutter) 9vh;
  margin-left: calc(-1 * var(--gutter));   /* il binario ha padding-left: così la hero copre lo schermo e Duality è al centro esatto */
}
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-c .hero-art { grid-column: 2; justify-self: center; align-self: center; margin: 0; padding: 0; position: relative; }
.hero-c .hero-art img { height: min(70vh, var(--art-max)); width: auto; }
.hero-c .hero-art figcaption.label { position: absolute; top: 100%; left: 0; right: 0; }
@media (max-width: 899px) {
  .p-hero.hero-c { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: center; align-content: center; row-gap: 3vh;
    text-align: center; column-gap: 0; padding: calc(var(--nav-h) + 5vh) var(--gutter) 7vh; }
  .hero-c .hero-art { grid-column: 1; grid-row: 1; }
  .hero-c .hero-art img { height: min(50vh, var(--art-max)); }
}

/* ═══ Home (AD 6 ott 2026): Duality, Light on the Fracture, Melancholy, Silence 1, poi il link alle Opere nello stile
   del pannello di chiusura (senza la riga con la mail: "togli la mail").
   Spazio tra le opere (AD: "le prime due si vedono subito, ci deve essere più spazio, e replichiamo la regola per
   tutti"): un quadro alla volta. Ogni opera ha mezzo schermo d'aria per lato (padding 50vw), quindi tra due quadri
   c'è sempre uno schermo intero di parete: il successivo entra quando il precedente esce. La hero aggiunge a destra
   metà della larghezza di Duality (2:3, cioè altezza/3), così vale anche tra Duality e il quadro dopo.
   L'onda (AD: "giochiamo con altezze così che la linea rossa diventa un'onda, soprattutto dopo Duality"): Duality
   resta al centro, gli altri sono appesi ad altezze e misure diverse, e il percorso, che passa per il centro di ogni
   quadro, scende e sale. Nel markup ogni quadro ha --h (altezza) e --f (posizione nella fascia libera tra nav e
   fondo: 0 in alto, 1 in basso, didascalia compresa): non esce mai dallo schermo, anche su quelli bassi; l'onda si
   allarga sugli schermi alti e si appiattisce su quelli bassi. Lo spostamento è margin-top, non transform, perché il
   percorso legge offsetTop. Quadri grandi (AD: "falle più grandi quelle dopo Duality") lasciano poco gioco in
   verticale: --ly sceglie a che altezza del quadro passa la linea (0.3 = parte alta, 0.7 = parte bassa; la linea è
   dietro al quadro, si vede solo dove entra ed esce), così l'onda resta ampia. ═══ */
.p-hero.hero-c { margin-right: calc(min(70vh, var(--art-max)) / 3); }
.p-work.p-solo {
  --pt: calc(var(--nav-h) + 2vh); --pb: 9vh;
  --ih: min(var(--h, 70vh), var(--art-max));
  --fy: var(--f, .5);
  width: auto; margin: 0; padding: var(--pt) 50vw var(--pb);
  flex-direction: row; justify-content: center; align-items: flex-start;
}
.p-solo .solo-in { position: relative; margin-top: max(0px, calc((100svh - var(--pt) - var(--pb) - var(--ih) - var(--cap-h)) * var(--fy))); }
.p-solo img { height: var(--ih); width: auto; max-width: calc(100vw - 2 * var(--gutter)); }
.p-solo figcaption.label { position: absolute; top: 100%; left: 0; right: 0; }
.p-fine { width: 100vw; padding: calc(var(--nav-h) + 9vh) 0 0; flex-direction: row; justify-content: center; align-items: flex-start; }
.p-fine .p-close { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0 10px; }
@media (max-width: 899px) {
  /* sul telefono quadri un po' più piccoli e onda più morbida */
  .p-hero.hero-c { margin-right: calc(min(50vh, var(--art-max)) / 3); }
  .p-work.p-solo { --pt: calc(var(--nav-h) + 5vh); --pb: 7vh; --ih: min(calc(var(--h, 62vh) * .8), var(--art-max)); --fy: calc(.5 + (var(--f, .5) - .5) * .7); }
}