/* Splash di apertura "Prime Booking × Hotel Lime" — "Scintilla" (task #407).

   E' la schermata di caricamento di OGNI apertura, sito degli ospiti e gestionale: html.lb-splash-on la
   accende lo script in <head> di index.html, splash.js la guida:
     .lb-play    intro: una stella gialla sale dal fondo con la sua scia e si posa nel foro del pin di
                 Prime Booking, che le sboccia intorno; salgono PRIME e Booking, la × si disegna; poi
                 l'insegna dell'hotel si accende lettera per lettera (per Hotel Lime il neon della home,
                 con i tremolii e il "tic" del lime dello splash di prima)
     .lb-rest    intro finita, lockup fermo: se l'app non e' ancora pronta la stella respira nel pin
     .lb-exit    la stella si riaccende; poi .lb-apre: la pagina si apre dalla forma della stella (il fondo
                 ha un foro a stella che cresce in transform, splash.js); senza maschere, dissolvenza
     .lb-reduced movimento ridotto: lockup gia' fermo 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). --u e' un pixel del logo Prime Booking (disegno originale 1421 x 599),
   cosi' i pezzi si ricompongono esatti a qualunque misura. */

.lb-splash {
    display: none;
}

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

html.lb-splash-on .lb-splash {
    --sp-hlw: clamp(240px, 21vw, 330px);           /* la larghezza dell'insegna dell'hotel */
    --u: calc(var(--sp-hlw) * .26 / 599);          /* un pixel del logo: il logo e' alto 0,26 insegne */
    --sp-giallo: #FFD359;
    --sp-x-ink: #5B7590;
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    forced-color-adjust: none;
}

/* il fondo chiaro: un livello a se', perche' all'uscita e' lui ad avere il foro a stella */
.sp-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 72% 62% at 50% 46%, #FFFFFF 0%, #F4F7FA 58%, #ECF0F4 100%);
    will-change: transform;
}

/* finche' immagini e carattere non sono pronti si vede solo il fondo (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-lockup {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 28px;
}

/* ── Prime Booking: il logo ricomposto dai suoi pezzi ───── */
.sp-pb { position: relative; flex: none; width: calc(1421 * var(--u)); height: calc(599 * var(--u)); }
.sp-pb > * { position: absolute; }
.sp-pin { left: 0; top: calc(20 * var(--u)); width: calc(343 * var(--u)); height: calc(503 * var(--u)); transform-origin: 50% 34%; }
.sp-prime { left: calc(423 * var(--u)); top: calc(61 * var(--u)); width: calc(977 * var(--u)); height: calc(229 * var(--u)); }
.sp-booking { left: calc(423 * var(--u)); top: calc(335 * var(--u)); width: calc(995 * var(--u)); height: calc(239 * var(--u)); }
/* il centro del foro a stella del pin, misurato sui pixel del logo */
.sp-ancora { left: calc(170.5 * var(--u)); top: calc(191 * var(--u)); width: 0; height: 0; }
/* la stella gialla e' il foro stesso, preso dal logo (stella-pin.png): stesso riquadro, stessa curva.
   A riposo combacia al pixel; il suo posto e' nel pin (cosi' la vede anche chi ha il movimento ridotto) */
.sp-stella {
    left: calc(34 * var(--u));
    top: calc(57 * var(--u));
    width: calc(274 * var(--u));
    height: calc(269 * var(--u));
    z-index: 2;
    background: var(--sp-giallo);
    -webkit-mask: url(/brand/prime-booking/stella-pin.png) center / 100% 100% no-repeat;
    mask: url(/brand/prime-booking/stella-pin.png) center / 100% 100% no-repeat;
}
/* i puntini della scia: li mette splash.js lungo la strada della stella */
.sp-scia { left: calc(170.5 * var(--u)); top: calc(191 * var(--u)); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--sp-giallo); opacity: 0; }

/* la ×: due tratti che si disegnano */
.sp-per { position: relative; flex: none; width: 24px; height: 24px; }
.sp-per b { position: absolute; left: 0; top: 11px; width: 24px; height: 2px; border-radius: 2px; background: var(--sp-x-ink); }
.sp-per b:first-child { transform: rotate(45deg); }
.sp-per b:last-child { transform: rotate(-45deg); }

/* ── l'hotel, nel suo stile. Hotel Lime e' la sua insegna al neon, quella della home, sul suo muro di sera ── */
.sp-hl {
    position: relative;
    z-index: 0;
    flex: none;
    display: flex;
    align-items: center;
    padding: calc(var(--sp-hlw) * .06) calc(var(--sp-hlw) * .088) calc(var(--sp-hlw) * .06) calc(var(--sp-hlw) * .072);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse 78% 90% at 50% 46%, #1c261e 0%, #131b15 52%, #0b100c 100%);
    box-shadow: 0 1px 1px rgba(11, 16, 12, .2), 0 14px 26px -16px rgba(11, 16, 12, .6);
}
/* la luce dell'insegna sul muro: un'ellisse sfumata ferma, animata solo in opacita' */
.sp-wall { position: absolute; inset: -60% -15%; z-index: -1; pointer-events: none; }
.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-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; }
.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: Prime Booking sopra, la × e l'insegna sotto ── */
@media (max-width: 767.98px) {
    html.lb-splash-on .lb-splash { --sp-hlw: min(64vw, 240px); --u: calc(var(--sp-hlw) * .26 / 599); }
    .sp-lockup { flex-direction: column; gap: 18px; }
}

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

/* 1 · la stella nasce dal fondo, sale ad arco con la scia e si posa nel foro: i punti della strada
   (--sx/--sy, --p1x..--p3y, in px rispetto al foro) li calcola splash.js. Scala 1 = il foro esatto */
.lb-play .sp-stella { animation: sp-scintilla 1250ms 150ms both, sp-respira 1600ms 1400ms ease-in-out infinite; }
.lb-play .sp-scia { animation: sp-scia 550ms var(--ritardo, 0ms) ease-out both; }

/* 2 · il pin sboccia intorno alla stella, il nome sale, la × si disegna */
.lb-play .sp-pin { animation: sp-sboccia 450ms cubic-bezier(.3, 1.5, .5, 1) 1080ms both; }
.lb-play .sp-prime { animation: sp-sale 450ms cubic-bezier(.2, .9, .3, 1.2) 1300ms both; }
.lb-play .sp-booking { animation: sp-sale 450ms cubic-bezier(.2, .9, .3, 1.2) 1400ms both; }
.lb-play .sp-per b:first-child { animation: sp-tratto-1 300ms ease-out 1500ms both; }
.lb-play .sp-per b:last-child { animation: sp-tratto-2 300ms ease-out 1580ms both; }

/* 3 · l'insegna dell'hotel compare spenta e si accende: gli stessi tremolii dello splash di prima, lettera
   per lettera (la "e" di Hotel sfarfalla ancora una volta), il lime per ultimo con il suo "tic" */
.lb-play .sp-hl { animation: sp-appear 220ms cubic-bezier(.3, .6, .4, 1) 1450ms both; }
@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 1550ms 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 1598ms 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 1646ms 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 1694ms 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 1742ms 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 1830ms 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 1878ms 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 1926ms 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 1974ms 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 2050ms 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 1550ms both; }
.lb-play .sp-hl-tic { animation: sp-tic 230ms linear 2172ms both; }

/* ══ USCITA ════════════════════════════════════════════════ */
/* la stella si riaccende nel pin; poi (.lb-apre) il lockup se ne va e il fondo si apre dalla stella */
.lb-exit .sp-stella { animation: lb-x-riaccende 260ms ease-out both !important; }
.lb-apre .sp-lockup { animation: lb-x-via 170ms ease-in both; }
/* senza maschere o senza Web Animations: dissolvenza */
.lb-exit:not(.lb-foro) { animation: lb-x-fade 400ms ease-in-out 200ms forwards; }

/* ══ MOVIMENTO RIDOTTO: lockup gia' fermo e acceso, 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 !important; }

/* ── keyframes ─────────────────────────────────────────── */
@keyframes sp-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-x-fade { to { opacity: 0; } }
@keyframes lb-x-via { to { opacity: 0; } }
@keyframes lb-x-riaccende { from { opacity: .5; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* la stella: compare e brilla in fondo, vola ad arco, si posa con un piccolo sobbalzo e resta li' */
@keyframes sp-scintilla {
    0%   { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(0) rotate(0deg); }
    14%  { opacity: 1; transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(.95) rotate(45deg); }
    26%  { transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(.62) rotate(0deg); animation-timing-function: ease-in; }
    40%  { transform: translate(var(--p1x, 0px), var(--p1y, 0px)) scale(.62) rotate(-18deg); animation-timing-function: linear; }
    52%  { transform: translate(var(--p2x, 0px), var(--p2y, 0px)) scale(.68) rotate(-32deg); animation-timing-function: linear; }
    64%  { transform: translate(var(--p3x, 0px), var(--p3y, 0px)) scale(.8) rotate(-18deg); animation-timing-function: ease-out; }
    76%  { opacity: 1; transform: translate(0px, 0px) scale(1.1) rotate(0deg); }
    86%  { transform: scale(.96); }
    100% { opacity: 1; transform: none; }
}
/* finche' l'app non e' pronta la stella respira dentro il foro: si stringe e schiarisce, mai fuori dal pin */
@keyframes sp-respira {
    0%, 100% { transform: none; opacity: 1; }
    50% { transform: scale(.86); opacity: .72; }
}
@keyframes sp-scia {
    0% { opacity: 0; }
    20% { opacity: .9; }
    100% { opacity: 0; transform: var(--pos, none) scale(.3); }
}
@keyframes sp-sboccia { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: none; } }
@keyframes sp-sale { from { clip-path: inset(100% 0 0 0); transform: translateY(12px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes sp-tratto-1 { from { transform: rotate(45deg) scaleX(0); } to { transform: rotate(45deg); } }
@keyframes sp-tratto-2 { from { transform: rotate(-45deg) scaleX(0); } to { transform: rotate(-45deg); } }
/* 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; }
}