/* Splash di apertura "Lime booking × Hotel Lime" — "L'insegna di sera" (proposta 06 di SplashLab).

   E' la schermata di caricamento di OGNI apertura del sito: html.lb-splash-on la accende lo script in
   <head> di index.html, splash.js la guida:
     .lb-play    intro: Lime booking si strizza e il succo diventa il logo, la ×, poi l'insegna al neon
                 di Hotel Lime (tubi spenti sul muro scuro) si accende lettera per lettera con i
                 tremolii, il lime per ultimo con il "tic"; la luce verde sul muro segue i tubi accesi
     .lb-rest    intro finita (lockup fermo, insegna accesa): splash.js prepara l'uscita
     .lb-exit    uscita a portale: le scritte rientrano verso la fetta, la fetta scivola al centro
                 crescendo (senza ruotare) e si apre sulla pagina (Web Animations, in splash.js)
     .lb-portal  il foro e' un'iride che si ingrandisce; senza Web Animations l'uscita e' una dissolvenza
     .lb-reduced movimento ridotto: insegna gia' accesa in dissolvenza, pausa, dissolvenza
   Tutto quello che si muove e' transform o opacity (il browser lo anima fuori dal thread principale,
   occupato dall'avvio di Blazor), una animazione per livello. I pezzi del logo Lime li monta
   splash/layers/layers.js (livelli <img> in uno stage a risoluzione sorgente, 2000 x 913 px). */

.lb-splash {
    display: none;
}

html.lb-splash-on,
html.lb-splash-on body {
    overflow: hidden;
}

html.lb-splash-on .lb-splash {
    --sp-paper: #0b100c;                         /* il muro di sera, nero appena verde */
    --sp-bg-img: radial-gradient(ellipse 75% 62% at 50% 46%, #1c261e 0%, #131b15 48%, rgba(11, 16, 12, 0) 100%);
    --sp-x-ink: #c58701;                         /* la ×: l'ambra del sito */
    --lime-dark: #6DB22D;
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: var(--sp-paper);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    forced-color-adjust: none;
}
/* in .lb-play il fondo e' .sp-bg, che il portale toglie quando la fetta copre il foro */
html.lb-splash-on .lb-splash.lb-play { background-color: transparent; }

/* finche' immagini e carattere non sono pronti si vede solo il muro (copre gia' la pagina) */
.lb-splash:not(.lb-play) > :not(.sp-bg) { visibility: hidden; }

.lb-splash img {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.sp-bg {
    position: absolute;
    inset: 0;
    background-color: var(--sp-paper);
    background-image: var(--sp-bg-img);
}

/* l'iride del portale (la crea splash.js): il muro con il foro al centro (maschera statica) e la buccia
   intorno; sta SOTTO .sp-bg finche' il fondo non sparisce, poi si ingrandisce. Fondo e iride appena
   non opachi: il browser prepara gia' la pagina che sta sotto */
.sp-iris {
    position: absolute;
    opacity: .999;
    pointer-events: none;
    background-color: var(--sp-paper);
    background-image: var(--sp-bg-img);
    background-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    will-change: transform;
}
.sp-iris-ring { position: absolute; will-change: opacity; }

/* ── impaginazione: in colonna su ogni schermo ──────────── */
.sp-lockup {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* lo slot non si anima mai: splash.js lo misura per il portale. Sopra il resto: la fetta ci passa sopra */
.sp-lime-slot { position: relative; z-index: 2; flex: none; width: clamp(210px, 21vw, 310px); }
.sp-lime { width: 100%; }
/* la strizzata sta su un livello dentro il wrapper della fetta (il wrapper lo muove il portale) */
.sp-slice-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* le scie escono da sotto la buccia: il wrapper e' ritagliato a sinistra sul centro della fetta */
.sp-lime .sp-wrap-trails { clip-path: inset(-12% -12% -12% 0); transform-origin: 0 50%; }

.sp-mid {
    position: relative;
    z-index: 1;
    flex: none;
    width: 44px;
    height: clamp(84px, 11vh, 112px);
}

/* la ×: due tratti ambra; ogni tratto scorre fuori dal suo binario (ritaglio fermo) */
.sp-x {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    --sp-xw: 2.4px;
}
.sp-x-arm {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: var(--sp-xw);
    margin: calc(var(--sp-xw) / -2) 0 0 -17px;
    overflow: hidden;
    border-radius: 99px;
}
.sp-x-a { transform: rotate(45deg); }
.sp-x-b { transform: rotate(135deg); }
.sp-x-arm b {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 99px;
    background: var(--sp-x-ink);
}

/* Hotel Lime: il lime al neon a sinistra, la scritta a destra, sulla stessa riga.
   Misure in frazioni di --sp-hlw (larghezza del lockup) */
.sp-hl {
    --sp-hlw: clamp(220px, 22vw, 320px);
    position: relative;
    z-index: 0;
    flex: none;
    width: var(--sp-hlw);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-hl-mark-slot { position: relative; flex: none; width: calc(var(--sp-hlw) * .2311); }
/* il "tic" (origine: il centro della fetta) */
.sp-hl-tic { position: relative; width: 100%; transform-origin: 34.94% 49.91%; }
.sp-hl-mark { position: relative; width: 100%; aspect-ratio: 776 / 544; }
/* le due immagini (tubi spenti, tubi accesi) hanno 70 px di margine per l'alone intorno al marchio */
.lb-splash .sp-neon-m { position: absolute; left: -9.021%; top: -12.868%; width: 118.041%; height: 125.735%; }
.sp-hl-mark-on { will-change: opacity; }

/* la luce dell'insegna sul muro: un'ellisse sfumata ferma, animata solo in opacita' */
.sp-wall { position: absolute; left: -45%; right: -45%; top: -210%; bottom: -210%; pointer-events: none; z-index: -1; }
.sp-wall-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side, rgba(120, 196, 52, .32) 0%, rgba(120, 196, 52, .14) 45%, rgba(120, 196, 52, .04) 75%, rgba(120, 196, 52, 0) 100%);
}

.sp-hl-name {
    flex: none;
    position: relative;
    z-index: 1;
    margin-left: calc(var(--sp-hlw) * .028);
    font-family: 'Variex OT', 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: calc(var(--sp-hlw) * .1195);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
.sp-hl-word { display: inline-block; }

/* ── neon (lo stesso del titolo della home). Tre copie ferme della lettera: il tubo spento (in flusso,
   da' la misura), l'alone largo e il tubo acceso; si anima SOLO l'opacita' di .neon-on (alone + tubo
   insieme), cosi' il tremolio resta sul compositor. --neon = rgb del gas */
.lb-splash .neon { --neon: 137, 205, 62; --neon-core: #e0f8b0; --neon-off: rgba(190, 212, 168, .16); }
.lb-splash .neon-l { position: relative; display: inline-block; font-style: normal; }
.lb-splash .neon-l b { font-weight: inherit; }
.lb-splash .neon-off { color: var(--neon-off); text-shadow: 0 -.02em 0 rgba(255, 255, 255, .05); }
.lb-splash .neon-on,
.lb-splash .neon-halo,
.lb-splash .neon-core { position: absolute; left: 0; top: 0; }
.lb-splash .neon-on { will-change: opacity; }
.lb-splash .neon-halo {
    color: transparent;
    text-shadow: 0 0 .22em rgba(var(--neon), .95), 0 0 .55em rgba(var(--neon), .7), 0 0 1.1em rgba(var(--neon), .45);
}
.lb-splash .neon-core {
    color: var(--neon-core);
    text-shadow: 0 0 .02em #fff, 0 0 .07em rgba(var(--neon), 1), 0 0 .15em rgba(var(--neon), .9);
}

/* ── telefono: stessa colonna, misure strette ──────────── */
@media (max-width: 767.98px) {
    .sp-lime-slot { width: min(56vw, 240px); }
    .sp-mid { height: clamp(88px, 12.5vh, 120px); }
    .sp-hl { --sp-hlw: min(62vw, 250px); }
    .sp-x { width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px; --sp-xw: 2.2px; }
    .sp-x-arm { width: 30px; margin-left: -15px; }
}

/* ══ INTRO (solo transform e opacity) ════════════════════ */

/* 1 · Lime booking: la fetta si strizza e il succo diventa il logo (nessuna rotazione) */
.lb-play .sp-slice-in { animation: sp-squeeze 532ms linear 28ms both; }
.lb-play .sp-lime .sp-drips { animation: sp-juice 308ms linear 350ms both; }
.lb-play .sp-lime .sp-wrap-word .sp-letter {
    animation: sp-pop 322ms linear both;
    animation-delay: calc(378ms + var(--sp-i) * 38.5ms);
}
.lb-play .sp-lime .sp-wrap-word .sp-letter[data-part$="-dot"] {
    animation: sp-dot 252ms cubic-bezier(.34, 1.7, .5, 1) 504ms both;
}
.lb-play .sp-lime .sp-wrap-booking .sp-letter {
    animation: sp-surface 266ms cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(448ms + var(--sp-i) * 21ms);
}
.lb-play .sp-lime .sp-wrap-booking .sp-letter[data-part$="-dot"] {
    animation: sp-dot 224ms cubic-bezier(.34, 1.7, .5, 1) 581ms both;
}
/* il succo schizza a raggiera: ogni trattino parte a meta' strada tra il centro della fetta e il suo
   posto (nascosto sotto la fetta), al volo va oltre del 5% e si posa (px = px del logo sorgente) */
@keyframes sp-squirt-1 { 0% { transform: translate(-132.4px, 96.0px) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(13.2px, -9.6px) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } }
@keyframes sp-squirt-2 { 0% { transform: translate(-211.4px, 46.5px) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(21.1px, -4.7px) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } }
@keyframes sp-squirt-3 { 0% { transform: translate(-168.9px, -30.0px) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(16.9px, 3.0px) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } }
@keyframes sp-squirt-4 { 0% { transform: translate(-136.9px, -111.0px) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(13.7px, 11.1px) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } }
.lb-play .sp-lime [data-part="dash-1"] { animation: sp-squirt-1 350ms linear 346ms both; }
.lb-play .sp-lime [data-part="dash-2"] { animation: sp-squirt-2 350ms linear 368ms both; }
.lb-play .sp-lime [data-part="dash-3"] { animation: sp-squirt-3 350ms linear 388ms both; }
.lb-play .sp-lime [data-part="dash-4"] { animation: sp-squirt-4 350ms linear 410ms both; }

/* 2 · la × */
.lb-play .sp-x { animation: sp-x-in 360ms cubic-bezier(.22, 1, .36, 1) 600ms both; }
.lb-play .sp-x-a b { animation: sp-stroke 150ms cubic-bezier(.55, 0, .25, 1) 615ms both; }
.lb-play .sp-x-b b { animation: sp-stroke 150ms cubic-bezier(.55, 0, .25, 1) 685ms both; }

/* 3 · l'insegna spenta compare: i tubi di vetro sul muro */
.lb-play .sp-hl { animation: sp-appear 200ms cubic-bezier(.3, .6, .4, 1) 700ms both; }

/* 4 · i tubi si accendono (tremolii diversi per lettera; la "e" di Hotel sfarfalla ancora una volta a
   1860 ms) e restano accesi; la luce sul muro segue i tubi accesi. Generati da genera-06.mjs */
@keyframes sp-neon-0 { 0% { opacity: 0; } 6.522% { opacity: 0.9; } 18.478% { opacity: 0.9; } 23.913% { opacity: 0.12; } 43.478% { opacity: 0.12; } 50% { opacity: 1; } 66.304% { opacity: 1; } 71.739% { opacity: 0.35; } 84.783% { opacity: 0.35; } 92.391% { opacity: 0.95; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="0"] .neon-on { animation: sp-neon-0 184ms linear 900ms both; }
@keyframes sp-neon-1 { 0% { opacity: 0; } 6.329% { opacity: 0.75; } 18.987% { opacity: 0.75; } 25.316% { opacity: 0.15; } 55.696% { opacity: 0.15; } 63.291% { opacity: 1; } 81.013% { opacity: 1; } 87.342% { opacity: 0.5; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="1"] .neon-on { animation: sp-neon-1 158ms linear 948ms both; }
@keyframes sp-neon-2 { 0% { opacity: 0; } 12.727% { opacity: 1; } 36.364% { opacity: 1; } 45.455% { opacity: 0.2; } 89.091% { opacity: 0.2; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="2"] .neon-on { animation: sp-neon-2 110ms linear 996ms both; }
@keyframes sp-neon-3 { 0% { opacity: 0; } 1.08% { opacity: 0.6; } 2.592% { opacity: 0.1; } 3.888% { opacity: 0.95; } 7.559% { opacity: 0.95; } 8.639% { opacity: 0.3; } 12.743% { opacity: 0.3; } 14.039% { opacity: 1; } 88.121% { opacity: 1; } 89.201% { opacity: 0.2; } 91.793% { opacity: 0.2; } 92.873% { opacity: 1; } 96.112% { opacity: 1; } 96.976% { opacity: 0.45; } 98.92% { opacity: 0.45; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="3"] .neon-on { animation: sp-neon-3 926ms linear 1044ms both; }
@keyframes sp-neon-4 { 0% { opacity: 0; } 9.231% { opacity: 0.9; } 21.538% { opacity: 0.9; } 29.231% { opacity: 0.15; } 55.385% { opacity: 0.15; } 64.615% { opacity: 1; } 81.538% { opacity: 1; } 87.692% { opacity: 0.55; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="4"] .neon-on { animation: sp-neon-4 130ms linear 1092ms both; }
@keyframes sp-neon-5 { 0% { opacity: 0; } 5.882% { opacity: 0.8; } 21.176% { opacity: 0.8; } 27.059% { opacity: 0.1; } 58.824% { opacity: 0.1; } 65.882% { opacity: 1; } 82.353% { opacity: 1; } 88.235% { opacity: 0.45; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="5"] .neon-on { animation: sp-neon-5 170ms linear 1180ms both; }
@keyframes sp-neon-6 { 0% { opacity: 0; } 14.634% { opacity: 1; } 36.585% { opacity: 1; } 48.78% { opacity: 0.25; } 85.366% { opacity: 0.25; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="6"] .neon-on { animation: sp-neon-6 82ms linear 1228ms both; }
@keyframes sp-neon-7 { 0% { opacity: 0; } 7.407% { opacity: 0.5; } 18.519% { opacity: 0.15; } 31.481% { opacity: 1; } 57.407% { opacity: 1; } 66.667% { opacity: 0.4; } 88.889% { opacity: 0.4; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="7"] .neon-on { animation: sp-neon-7 108ms linear 1276ms both; }
@keyframes sp-neon-8 { 0% { opacity: 0; } 13.953% { opacity: 0.9; } 39.535% { opacity: 0.9; } 51.163% { opacity: 0.2; } 86.047% { opacity: 0.2; } 100% { opacity: 1; } }
.lb-play .sp-hl-l[data-l="8"] .neon-on { animation: sp-neon-8 86ms linear 1324ms both; }
@keyframes sp-neon-lime { 0% { opacity: 0; } 11.475% { opacity: 0.85; } 37.705% { opacity: 0.85; } 47.541% { opacity: 0.08; } 90.164% { opacity: 0.08; } 100% { opacity: 1; } }
.lb-play .sp-hl-mark-on { animation: sp-neon-lime 122ms linear 1400ms both; }
@keyframes sp-wall { 0% { opacity: 0; } 0.935% { opacity: 0.046; } 2.804% { opacity: 0.055; } 3.738% { opacity: 0.026; } 4.673% { opacity: 0.017; } 5.607% { opacity: 0.053; } 7.477% { opacity: 0.046; } 9.346% { opacity: 0.088; } 10.28% { opacity: 0.131; } 11.215% { opacity: 0.131; } 13.084% { opacity: 0.089; } 15.888% { opacity: 0.146; } 16.822% { opacity: 0.179; } 17.757% { opacity: 0.168; } 18.692% { opacity: 0.244; } 19.626% { opacity: 0.296; } 20.561% { opacity: 0.273; } 21.495% { opacity: 0.211; } 24.299% { opacity: 0.211; } 27.103% { opacity: 0.354; } 30.841% { opacity: 0.322; } 31.776% { opacity: 0.373; } 33.645% { opacity: 0.364; } 34.579% { opacity: 0.327; } 35.514% { opacity: 0.342; } 36.449% { opacity: 0.393; } 37.383% { opacity: 0.414; } 38.318% { opacity: 0.489; } 40.187% { opacity: 0.483; } 41.121% { opacity: 0.52; } 42.991% { opacity: 0.499; } 43.925% { opacity: 0.464; } 46.729% { opacity: 0.509; } 47.664% { opacity: 0.823; } 48.598% { opacity: 0.933; } 50.467% { opacity: 0.933; } 51.402% { opacity: 0.817; } 52.336% { opacity: 0.586; } 57.009% { opacity: 0.586; } 57.944% { opacity: 0.931; } 58.879% { opacity: 1; } 89.72% { opacity: 1; } 90.654% { opacity: 0.951; } 92.523% { opacity: 0.951; } 94.393% { opacity: 1; } 96.262% { opacity: 1; } 98.131% { opacity: 0.966; } 99.065% { opacity: 0.966; } 100% { opacity: 1; } }
.lb-play .sp-wall-glow { animation: sp-wall 1070ms linear 900ms both; }
.lb-play .sp-hl-tic { animation: sp-tic 230ms linear 1522ms both; }

/* senza portale (browser senza Web Animations): dissolvenza */
.lb-exit:not(.lb-portal) { animation: lb-x-fade 400ms ease-in-out 80ms forwards; }

/* ══ MOVIMENTO RIDOTTO: insegna gia' accesa, dissolvenza, pausa, dissolvenza ══ */
.lb-reduced * { animation: none !important; }
.lb-reduced.lb-play .sp-lockup { animation: sp-appear 300ms ease-out both !important; }
.lb-reduced.lb-exit { animation: lb-x-fade 340ms ease-in-out forwards; }

/* ── keyframes ─────────────────────────────────────────── */
@keyframes sp-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-x-fade { to { opacity: 0; } }

/* la strizzata: compare, si stringe ai lati, tiene, scatta oltre e si assesta. Solo scala e opacita',
   dal centro della fetta. Dopo il rilascio non torna mai piu' stretta di 1 in orizzontale */
@keyframes sp-squeeze {
    0% { transform: scale(.5); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    26% { transform: scale(1.02); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    37% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
    54% { transform: scale(.9, 1.06); opacity: 1; animation-timing-function: linear; }
    58% { transform: scale(.9, 1.06); opacity: 1; animation-timing-function: cubic-bezier(.15, .85, .3, 1); }
    67% { transform: scale(1.04, .975); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    81% { transform: scale(1, 1.01); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    100% { transform: none; opacity: 1; }
}
/* il succo che cola: le colature escono da sotto la fetta, di lato (px = px del logo sorgente) */
@keyframes sp-juice {
    0% { transform: translateX(-160px); opacity: 0; animation-timing-function: step-end; }
    1% { transform: translateX(-160px); opacity: 1; animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
    100% { transform: none; opacity: 1; }
}
@keyframes sp-pop {
    0% { transform: translateY(80px) scale(.72); opacity: 0; animation-timing-function: cubic-bezier(.25, .8, .4, 1); }
    30% { opacity: 1; }
    62% { transform: translateY(-12px) scale(1.03); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    100% { transform: none; opacity: 1; }
}
@keyframes sp-dot {
    from { transform: scale(0); opacity: 0; }
    30% { opacity: 1; }
    to { transform: none; opacity: 1; }
}
@keyframes sp-surface {
    from { transform: translateY(60px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes sp-x-in {
    0% { opacity: 0; transform: rotate(-30deg) scale(.8); }
    30% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
/* il tratto scorre fuori dal suo binario (livello che scorre, ritaglio fermo) */
@keyframes sp-stroke { from { transform: translateX(-101%); } to { transform: none; } }
/* il "tic" del rele' quando il lime si accende: un colpo di scala e ritorno, dal centro della fetta */
@keyframes sp-tic {
    0% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    22% { transform: scale(1.06); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    62% { transform: scale(.985); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    100% { transform: none; }
}