/* Casa Lume Lento · livello «mega flex» (29/09/2026).
   Si aggiunge allo standard senza cambiarlo: stessi caratteri (Crimson Pro, Arsenal SC), stessi colori, stesse pagine e moduli.
   Tutto ciò che si muove sta sotto html.movimento (JS acceso e movimento non ridotto) e si ferma con «Ferma il movimento»
   (html.mega-fermo). Togliendo questo file e js/mega.js (più il blocco «viaggio» della home) il sito torna lo standard. */

:root{ --mg-testata:6.4rem }
@media (max-width:900px){ :root{ --mg-testata:5.4rem } }

/* ── Pagina dopo pagina: la testata resta ferma, la foto della camera diventa la sua pagina ── */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){      /* senza JavaScript la pagina cambia come nello standard */
  @view-transition{ navigation:auto }
}
.testata{ view-transition-name:testata }
html.tema-cerchio .testata{ view-transition-name:none }
::view-transition-group(root){ animation-duration:.55s }
::view-transition-old(root){ animation:mg-esce .4s var(--ease) both }
::view-transition-new(root){ animation:mg-entra .6s var(--ease) both }
@keyframes mg-esce{ to{ opacity:0 } }
@keyframes mg-entra{ from{ opacity:0 } }
::view-transition-group(*){ animation-duration:.7s; animation-timing-function:var(--ease-lenta) }
/* cambio Giorno ↔ Sera: un cerchio di luce che nasce dal pulsante */
html.tema-cerchio::view-transition-old(root),
html.tema-cerchio::view-transition-new(root){ animation:none; mix-blend-mode:normal }
html.tema-cerchio::view-transition-old(root){ z-index:1 }
html.tema-cerchio::view-transition-new(root){ z-index:2 }

/* la foto della camera è la stessa nella scheda e nella sua pagina: passa da una all'altra */
.camera .foto:has(img[src*="05-camera-lume"]), .galleria-camera .foto-principale:has(img[src*="05-camera-lume"]){ view-transition-name:foto-lume }
.camera .foto:has(img[src*="06-camera-sosta"]), .galleria-camera .foto-principale:has(img[src*="06-camera-sosta"]){ view-transition-name:foto-sosta }
.camera .foto:has(img[src*="07-camera-veglia"]), .galleria-camera .foto-principale:has(img[src*="07-camera-veglia"]){ view-transition-name:foto-veglia }

/* ── Prima schermata: il titolo entra per righe, da una maschera ── */
.mg-riga{ display:block }
html.movimento .mg-riga{ overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em }
html.movimento .mg-riga-i{ display:block; animation:mg-sale 1.05s var(--ease-lenta) both; animation-delay:calc(1.3s + var(--r,0) * .12s) }
html.movimento.lume-visto .mg-riga-i{ animation-delay:calc(.02s + var(--r,0) * .1s) }
/* prima visita: la lampada si accende un po' più in fretta, così il titolo si legge entro un secondo e mezzo */
html:not([data-flex="off"]).movimento:not(.lume-visto) .mg-riga-i{ animation-delay:calc(.7s + var(--r,0) * .1s); animation-duration:1s }
html:not([data-flex="off"]).movimento:not([data-ora="giorno"]):not(.lume-visto) .lume-apertura{ animation:lume-via .6s var(--ease) .6s forwards }
html:not([data-flex="off"]).movimento:not(.lume-visto) .lume-apertura::before{ animation-duration:.7s }
html:not([data-flex="off"]).movimento:not(.lume-visto) .eroe-testo > :nth-child(2){ animation-delay:.9s }
html:not([data-flex="off"]).movimento:not(.lume-visto) .eroe-testo > :nth-child(3){ animation-delay:1s }
html:not([data-flex="off"]).movimento:not(.lume-visto) .barra-prenota{ animation-delay:1.1s }
/* di giorno la tenda-lampada non c'è: il titolo non ha motivo di aspettare */
html:not([data-flex="off"]).movimento[data-ora="giorno"]:not(.lume-visto) .mg-riga-i{ animation-delay:calc(.1s + var(--r,0) * .12s) }
html:not([data-flex="off"]).movimento[data-ora="giorno"]:not(.lume-visto) .eroe-testo > :nth-child(2){ animation-delay:.35s }
html:not([data-flex="off"]).movimento[data-ora="giorno"]:not(.lume-visto) .eroe-testo > :nth-child(3){ animation-delay:.45s }
html:not([data-flex="off"]).movimento[data-ora="giorno"]:not(.lume-visto) .barra-prenota{ animation-delay:.55s }
html:not([data-flex="off"]).movimento .eroe-testo > .titolo-grande{ animation:none }
html.mg-entrato .mg-riga-i{ animation:none!important }
@keyframes mg-sale{ from{ transform:translateY(110%) } to{ transform:none } }

/* ── Titoli: le parole salgono una alla volta dalla loro riga ── */
.mg-p{ display:inline-block; vertical-align:top }
html.movimento .cinetico[data-rivela]{ opacity:1; transform:none }
html.movimento .cinetico .mg-p{ overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em }
html.movimento .cinetico .mg-p-i{ display:inline-block; transform:translateY(112%); transition:transform .9s var(--ease-lenta); transition-delay:calc(var(--i,0) * 46ms) }
html.movimento .cinetico.visto .mg-p-i,
html.movimento .viaggio-passi li.corrente .cinetico .mg-p-i{ transform:none }

/* ── La lampada: sulla foto della camera Veglia, di sera, dove passa il puntatore, un poco di luce calda ── */
@media (hover:hover) and (pointer:fine){
  html.movimento:not([data-ora="giorno"]) .foto-lanterna::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .8s var(--ease);
    background:radial-gradient(20rem circle at var(--lx,50%) var(--ly,50%), rgba(255,184,108,.30), rgba(255,184,108,.10) 42%, rgba(255,184,108,0) 70%); mix-blend-mode:screen }
  html.movimento:not([data-ora="giorno"]) .foto-lanterna.lume-vivo::after{ opacity:1 }
}

/* ── Come arrivare: la strada bianca si disegna scorrendo, fino alla lampada ── */
.strada{ grid-column:1/-1; position:relative; margin-top:1rem }
.strada-svg{ display:block; width:100%; height:auto; overflow:visible }
.strada-linea{ fill:none; stroke:var(--osso-2); stroke-width:1.6; stroke-linecap:round; vector-effect:non-scaling-stroke }
.strada-nodo{ fill:var(--osso-2) }
.strada-lampada{ fill:var(--lume); transition:opacity .9s var(--ease), filter .9s var(--ease) }
.strada.disegna .strada-lampada{ opacity:.25; filter:none }
.strada.arrivata .strada-lampada{ opacity:1; filter:drop-shadow(0 0 7px var(--lume-alone-1)) drop-shadow(0 0 22px var(--lume-alone-2)) }
.strada-tappe{ list-style:none; margin:.4rem 0 0; padding:0; display:flex; justify-content:space-between; gap:1rem; font:400 .98rem/1.4 var(--sans); letter-spacing:.04em; color:var(--osso-2) }
.strada-tappe li{ flex:1 1 0; min-width:0 }
.strada-tappe li{ text-align:center }
.strada.disegna .strada-tappe li{ transition:color .8s var(--ease) }
.strada.disegna .strada-tappe li.vista{ color:var(--osso) }
/* telefono: la strada è verticale, con le tappe in colonna accanto alla linea; l'ultimo punto è la lampada */
.strada-svg-v{ display:none }
@media (max-width:900px){
  .strada{ --riga:4.4rem; margin-top:.4rem }
  .strada-svg{ display:none }
  .strada-svg-v{ display:block; position:absolute; left:0; top:0; width:56px; height:calc(4 * var(--riga)); overflow:visible }
  .strada-tappe{ display:block; margin:0; padding:0 }
  .strada-tappe li{ position:relative; height:var(--riga); display:flex; align-items:center; padding-left:calc(56px + .9rem); text-align:left; flex:none }
  .strada-tappe li::before{ content:""; position:absolute; left:28px; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--osso-2) }
  .strada-tappe li:last-child::before{ width:16px; height:16px; margin:-8px 0 0 -8px; background:var(--lume); transition:opacity .9s var(--ease), box-shadow .9s var(--ease) }
  .strada.disegna .strada-tappe li:last-child::before{ opacity:.25 }
  .strada.arrivata .strada-tappe li:last-child::before{ opacity:1; box-shadow:0 0 7px var(--lume-alone-1), 0 0 22px var(--lume-alone-2) }
}

/* ── Il viaggio: una scena ferma sullo schermo mentre scorri, dentro le foto della casa ── */
.viaggio{ position:relative; border-top:1px solid var(--linea); background:var(--notte) }
.viaggio-quadro{ display:none }
.viaggio-testa{ display:flex; align-items:baseline; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; max-width:var(--max); margin:0 auto; padding:clamp(4rem,8vw,7rem) var(--gutter) 0 }
.viaggio-testa .etichetta{ margin:0 }
.viaggio .etichetta{ letter-spacing:.04em }
.mg-comando{ display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; background:var(--fisso-fondo); border:1px solid var(--fisso-linea); color:var(--fisso-testo);
  font:400 .74rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
.mg-comando:hover{ background:var(--fisso-testo); border-color:var(--fisso-testo); color:var(--inchiostro) }
.viaggio-testa .mg-comando{ background:transparent; border-color:var(--linea); color:var(--osso) }
.viaggio-testa .mg-comando:hover{ background:var(--osso); border-color:var(--osso); color:var(--notte) }
.viaggio-testa .mg-comando[hidden]{ display:none }
.viaggio-elenco{ list-style:none; margin:0 auto; padding:clamp(2.4rem,5vw,4rem) var(--gutter) clamp(4rem,9vw,8rem); max-width:var(--max); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.4rem,4.6vw,4.6rem) clamp(1rem,3vw,3rem) }
.viaggio-elenco figure{ display:grid; gap:1.1rem; align-content:start }
.viaggio-elenco .foto{ aspect-ratio:3/2 }
.viaggio-elenco figcaption{ position:static; font:400 clamp(1.25rem,1.8vw,1.6rem)/1.3 var(--serif); letter-spacing:0; color:var(--osso); text-shadow:none; max-width:26em }
.viaggio-elenco li:nth-child(2n){ margin-top:clamp(0rem,4vw,4rem) }
@media (max-width:900px){
  .viaggio-elenco{ grid-template-columns:1fr }
  .viaggio-elenco li:nth-child(2n){ margin-top:0 }
}
.salta-viaggio{ position:fixed; left:12px; top:-80px; z-index:100; background:var(--lume); color:var(--inchiostro); padding:10px 14px; text-decoration:none; font-weight:500 }
.salta-viaggio:focus{ top:12px }

/* modo vivo: la sezione diventa alta, la scena resta appuntata */
.viaggio.attivo{ height:calc(100svh * (1 + var(--passi,4) * 1.15)) }
.viaggio.attivo .viaggio-testa{ display:none }
/* in modo vivo l'elenco delle foto resta per chi legge con lo schermo, ma non si vede */
.viaggio-elenco[data-nascosto]{ position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; display:block }
.viaggio.attivo .viaggio-quadro{ display:block; position:sticky; top:0; height:100svh; overflow:hidden; background:#0D0F11; isolation:isolate; color:var(--fisso-testo) }
.viaggio-tela{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0 }
.viaggio-velo{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,11,.94) 0%,rgba(8,9,11,.86) 22%,rgba(8,9,11,.6) 38%,rgba(8,9,11,.2) 54%,rgba(8,9,11,0) 68%), linear-gradient(to bottom,rgba(8,9,11,.6) 0%,rgba(8,9,11,0) 20%) }
.viaggio-testo{ position:absolute; z-index:2; inset:auto 0 0 0; max-width:var(--max); margin:0 auto; padding:0 var(--gutter) clamp(2.4rem,6.5vh,4.8rem) }
.viaggio-testo .etichetta{ color:var(--fisso-testo); margin:0 0 1rem }
.viaggio-barra{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1.6rem; margin:0 0 1.5rem }
.viaggio-indice{ display:flex; align-items:center; gap:.5rem; margin:0; padding:0; list-style:none }
.viaggio-indice li{ display:flex }
.viaggio-indice button{ position:relative; display:block; width:clamp(2.8rem,6vw,5.4rem); height:22px; padding:0; border:0; background:none; cursor:pointer; color:inherit }
.viaggio-indice button::before{ content:""; position:absolute; left:0; right:0; top:10px; height:2px; background:var(--fisso-linea) }
.viaggio-indice button::after{ content:""; position:absolute; left:0; top:10px; height:2px; width:100%; background:var(--fisso-testo); transform-origin:left; transform:scaleX(var(--fill,0)) }
.viaggio-indice button:hover::before{ background:var(--fisso-testo-3) }
.viaggio-ora{ margin:0; font:400 .98rem/1.3 var(--sans); letter-spacing:.04em; color:var(--fisso-testo); min-width:11rem }
.viaggio-invito{ margin:0; font:400 .86rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--fisso-testo); display:inline-flex; align-items:center; gap:.9rem; opacity:0; transition:opacity .6s var(--ease) }
.viaggio.in-cima .viaggio-invito{ opacity:1 }
.viaggio-invito::after{ content:""; width:2.6rem; height:1px; background:currentColor; transform-origin:left }
html.movimento .viaggio-invito::after{ animation:mg-invito 2.4s var(--ease-lenta) infinite }
@keyframes mg-invito{ 0%{ transform:scaleX(0) } 55%{ transform:scaleX(1); opacity:1 } 100%{ transform:scaleX(1); opacity:0 } }
.viaggio-passi{ list-style:none; margin:0; padding:0; display:grid }
.viaggio-passi li{ overflow-wrap:anywhere; grid-area:1/1; font:400 clamp(2rem,4.1vw,4.2rem)/1.1 var(--serif); letter-spacing:-.01em; max-width:17em; text-wrap:balance; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s linear .5s }
.viaggio-passi li.corrente{ opacity:1; visibility:visible; transition:opacity .6s var(--ease) .12s }
.viaggio-quadro .mg-comando{ position:absolute; z-index:3; top:var(--mg-testata); right:var(--gutter) }
@media (max-width:900px){
  .viaggio-velo{ background:linear-gradient(to top,rgba(8,9,11,.95) 0%,rgba(8,9,11,.9) 30%,rgba(8,9,11,.72) 44%,rgba(8,9,11,.32) 60%,rgba(8,9,11,0) 76%), linear-gradient(to bottom,rgba(8,9,11,.6) 0%,rgba(8,9,11,0) 20%) }
  .viaggio-testo{ padding-bottom:calc(var(--mg-barra, 84px) + 1.8rem) }
  .viaggio-passi li{ font-size:clamp(1.85rem,8.4vw,2.6rem) }
  .viaggio-ora{ min-width:0; flex-basis:100% }
  .viaggio-barra{ margin-bottom:1.1rem }
}

/* ── Il nome del passo, nel comando del viaggio ── */
.viaggio-ora .solo-sera, .viaggio-ora .solo-giorno{ display:none }
html:not([data-ora="giorno"]) .viaggio-ora .solo-sera, html[data-ora="giorno"] .viaggio-ora .solo-giorno{ display:inline }

/* ── Comandi «Ferma il movimento» nel menu e nel piede ── */
.mg-fermo-voce{ background:none; border:0; padding:.4rem 0; cursor:pointer; font:400 .86rem/1.6 var(--sans); letter-spacing:.06em; color:inherit; text-decoration:underline; text-underline-offset:.28em; text-decoration-thickness:1px; text-align:left }
.mg-fermo-voce:hover{ color:var(--osso) }

/* Livello spento (data-flex="off", dall'indirizzo ?flex=off): il sito è lo standard, senza nessun gesto del livello */
html[data-flex="off"] .mg-riga-i{ animation:none!important }
html[data-flex="off"] .mg-riga{ overflow:visible!important; padding:0!important; margin:0!important }
html[data-flex="off"] .viaggio, html[data-flex="off"] .strada, html[data-flex="off"] .salta-viaggio, html[data-flex="off"] #targhetta-pan li[data-vid="viaggio"]{ display:none!important }
html[data-flex="off"] .foto, html[data-flex="off"] .foto-principale, html[data-flex="off"] .testata{ view-transition-name:none!important }      /* !important: le regole che danno il nome alle foto delle camere pesano di più (:has) */

/* Movimento fermo: niente animazioni del livello; il sito resta completo e fermo */
html.mega-fermo .lume-apertura{ display:none!important }
html.mega-fermo .eroe-video-stop{ display:none!important }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none!important }
}