/* Splash di apertura "Prime Booking × Hotel Lime" — "Atterraggio sul punto" (task #407; prende il posto di
   "Scintilla", di cui tiene il controllo in splash.js e l'apertura dalla stella). Proposta 04 di
   SplashLab/prime-booking.

   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    si parte (immagini e carattere pronti). Con .lb-intro (solo la home, movimento pieno) l'intro
                 fissa Prime Booking: sul terreno il punto di posizione manda le sue onde, il pin cade dall'alto e
                 lo colpisce con la punta (si schiaccia, rimbalza, un'onda piu' forte), PRIME e Booking escono di fianco; poi entra l'hotel: il lockup si sposta, compare la × e spunta
                 la scheda del posto (bianca, col logo e il nome dell'hotel nei loro colori), di fianco da
                 1050 px, sotto in colonna sui telefoni. Senza .lb-intro (altre pagine) il lockup e' gia' composto.
     attesa      finche' la pagina non e' pronta le onde del segnale continuano dal punto sotto il pin
     .lb-exit    .lb-apre: il lockup se ne va e la pagina si apre dalla
                 stella del pin (il fondo .sp-foro ha un foro a stella e cresce in transform, splash.js); senza
                 maschere composte, dissolvenza
     .lb-reduced movimento ridotto: lockup gia' fermo in dissolvenza, un'onda che pulsa solo in opacita',
                 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 1418 x 554; simbolo
   343 x 503): i pezzi tracciati in /brand/prime-booking/*.svg si ricompongono esatti a qualunque misura.
   Punti del simbolo: centro della stella 170,8 / 171,5; punta del pin 160,3 / 501,5. Nomi lb-x-*: uscite. */

.lb-splash {
    display: none;
}

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

html.lb-splash-on .lb-splash {
    --pb-blu: #132B43;
    --pb-giallo: #FFD359;
    --hl-verde: #4F8A1E;                        /* il verde dell'hotel (bottoni del sito) per il nome sulla scheda */
    --lw: min(440px, calc(100vw - 72px));       /* larghezza del lockup Prime Booking */
    --u: calc(var(--lw) / 1418);                /* un pixel del logo */
    /* con l'hotel il lockup sta spostato: in colonna sale; in riga (da 1050 px) scorre a sinistra */
    --sp-sposta: translateY(calc(-297 * var(--u)));
    --sp-entra: translateY(calc(40 * var(--u)));
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: var(--pb-giallo);
    /* niente manina: click, tocco o tasto saltano l'animazione, ma lo splash non deve sembrare un bottone */
    -webkit-tap-highlight-color: transparent;
    forced-color-adjust: none;
}

/* riga = lockup 1418 + 150 + × 96 + 150 + scheda 1287 = 3101 unita' (962 px col lockup di 440): il lockup
   scorre a sinistra di 3101/2 - 709 */
@media (min-width: 1050px) {
    html.lb-splash-on .lb-splash {
        --sp-sposta: translateX(calc(-841.5 * var(--u)));
        --sp-entra: translateX(calc(-40 * var(--u)));
    }
}

html.lb-splash-on .lb-splash.lb-play { background: transparent; }   /* da qui il giallo sono .sp-fondo e .sp-foro */

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

/* il fondo: due livelli gialli. .sp-fondo pieno; sotto .sp-foro, che all'uscita prende la maschera col foro
   a stella (splash.js, apri()) e cresce in transform finche' il foro copre lo schermo */
.sp-foro, .sp-fondo { position: absolute; inset: 0; background: var(--pb-giallo); }
.sp-foro { will-change: transform; }

/* ── lockup Prime Booking (coordinate del logo originale) ── */
.sp-lockup {
    position: absolute;
    left: calc(50% - 709 * var(--u));
    top: calc(50% - 300 * var(--u));
    width: calc(1418 * var(--u));
    height: calc(554 * var(--u));
    transform: var(--sp-sposta);
}
.sp-lockup > *, .sp-sym > *, .sp-segnale > * { position: absolute; display: block; }
.lb-splash img { max-width: none; }

.sp-ombra {
    left: calc(45.3 * var(--u)); top: calc(482 * var(--u));
    width: calc(230 * var(--u)); height: calc(40 * var(--u));
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(19, 43, 67, .30), rgba(19, 43, 67, .12) 55%, rgba(19, 43, 67, 0));
}
.sp-segnale { left: calc(-219.7 * var(--u)); top: calc(406.5 * var(--u)); width: calc(760 * var(--u)); height: calc(190 * var(--u)); }
.sp-onda, .sp-impatto {
    inset: 0;
    box-sizing: border-box;
    border: max(2px, calc(8 * var(--u))) solid rgba(19, 43, 67, .8);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
}
.sp-impatto { border-width: max(2.5px, calc(11 * var(--u))); }
.sp-punto {
    left: calc(50% - 34 * var(--u)); top: calc(50% - 11 * var(--u));
    width: calc(68 * var(--u)); height: calc(22 * var(--u));
    border-radius: 50%;
    background: var(--pb-blu);
}
/* il terreno: il pin si vede solo sopra la linea della sua punta; il riquadro sale ben oltre lo schermo, cosi'
   la caduta parte da fuori */
.sp-terra { left: calc(-40 * var(--u)); top: -200vh; width: calc(440 * var(--u)); height: calc(200vh + 503 * var(--u)); overflow: hidden; }
.sp-sym { position: absolute; left: calc(40 * var(--u)); top: 200vh; width: calc(343 * var(--u)); height: calc(503 * var(--u)); transform-origin: 46.73% 99.7%; }
.sp-sym > img { left: 0; top: 0; width: 100%; height: 100%; }
.sp-ancora { left: calc(170.8 * var(--u)); top: calc(171.5 * var(--u)); width: 0; height: 0; }   /* centro della stella */
.sp-parole { left: calc(395 * var(--u)); top: 0; width: calc(1030 * var(--u)); height: calc(560 * var(--u)); overflow: hidden; }
.sp-parole > img { position: absolute; display: block; }
.sp-prime { left: calc(26 * var(--u)); top: calc(39 * var(--u)); width: calc(980 * var(--u)); height: calc(233 * var(--u)); }
.sp-booking { left: calc(27 * var(--u)); top: calc(314 * var(--u)); width: calc(998 * var(--u)); height: calc(242 * var(--u)); }

/* ── l'hotel: la × e la scheda del posto, come quella che una mappa apre toccando un segnaposto. Bianca, cosi'
   il logo dell'hotel resta nei suoi colori su qualunque fondo; in colonna, staccata dal lockup ── */
.sp-posto { left: 0; top: calc(664 * var(--u)); width: calc(1418 * var(--u)); height: calc(400 * var(--u)); }
.sp-per { position: absolute; left: calc(50% - 48 * var(--u)); top: 0; width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.sp-per::before, .sp-per::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: calc(104 * var(--u)); height: max(2px, calc(11 * var(--u)));
    border-radius: 99px; background: var(--pb-blu);
    transform: translate(-50%, -50%) rotate(45deg);
}
.sp-per::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sp-scheda-box { position: absolute; left: 0; right: 0; top: calc(186 * var(--u)); display: flex; justify-content: center; }
.sp-scheda {
    display: flex; align-items: center; gap: calc(44 * var(--u));
    padding: calc(44 * var(--u)) calc(72 * var(--u));
    border-radius: calc(72 * var(--u));
    background: #fff;
    box-shadow: 0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(19, 43, 67, .22), 0 1px 4px rgba(19, 43, 67, .12);
    transform-origin: 50% 0;
}
.sp-scheda img { display: block; height: calc(210 * var(--u)); width: auto; }
.sp-scheda span { font: 700 calc(132 * var(--u))/1 'Variex OT', sans-serif; color: var(--hl-verde); white-space: nowrap; }
@media (min-width: 1050px) {
    .sp-posto { left: calc(1568 * var(--u)); top: 0; width: calc(1533 * var(--u)); height: calc(554 * var(--u)); }
    .sp-per { left: 0; top: calc(229 * var(--u)); }
    .sp-scheda-box { left: calc(246 * var(--u)); right: auto; top: calc(128 * var(--u)); justify-content: flex-start; }
    .sp-scheda { transform-origin: 0 50%; }
}

/* ── intro fissa (solo .lb-intro: home, movimento pieno) ── */
.lb-play.lb-intro .sp-punto { animation: sp-punto 260ms cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-play.lb-intro .sp-ombra { animation: sp-ombra 700ms 120ms both; }
.lb-play.lb-intro .sp-sym { animation: sp-atterra 700ms 120ms both; }
.lb-play.lb-intro .sp-impatto { animation: sp-impatto 600ms 526ms cubic-bezier(.15, .7, .3, 1) forwards; }
.lb-play.lb-intro .sp-prime { animation: sp-scorre 600ms 680ms cubic-bezier(.16, 1, .3, 1) both; }
.lb-play.lb-intro .sp-booking { animation: sp-scorre 600ms 760ms cubic-bezier(.16, 1, .3, 1) both; }
.lb-play.lb-intro .sp-lockup { animation: sp-sposta 420ms 1360ms cubic-bezier(.65, 0, .35, 1) both; }
.lb-play.lb-intro .sp-per { animation: sp-per 320ms 1480ms cubic-bezier(.3, 1.5, .5, 1) both; }
.lb-play.lb-intro .sp-scheda { animation: sp-scheda 520ms 1580ms cubic-bezier(.2, .9, .3, 1.12) both; }

/* ── attesa (anche fuori dalla home): le onde del segnale ── */
.lb-play:not(.lb-reduced) .sp-onda { animation: sp-onda 1500ms cubic-bezier(.2, .6, .35, 1) infinite; }
.lb-play:not(.lb-reduced) .sp-onda:nth-child(2) { animation-delay: 500ms; }
.lb-play:not(.lb-reduced) .sp-onda:nth-child(3) { animation-delay: 1000ms; }

/* ── uscita (.lb-apre): il lockup se ne va e il fondo si apre dalla stella del pin, che resta trasparente (niente lampo bianco) ── */
.lb-splash.lb-play.lb-apre .sp-lockup { animation: lb-x-via 170ms ease-in both; }
.lb-splash.lb-apre .sp-fondo { visibility: hidden; }
/* senza maschere composte niente foro: dissolvenza */
.lb-exit:not(.lb-foro) { animation: lb-x-fade 400ms ease-in-out 200ms forwards; }

/* ── movimento ridotto ── */
.lb-reduced.lb-play .sp-lockup { animation: sp-rid-in 450ms ease-out both; }
.lb-reduced.lb-play .sp-onda:nth-child(1) { transform: scale(.6); animation: sp-rid-pulsa 2400ms 450ms ease-in-out infinite; }
.lb-reduced.lb-exit { animation: lb-x-fade 340ms ease-in-out forwards !important; }

@keyframes sp-punto { from { transform: scale(0); } }
@keyframes sp-onda {
    0%   { opacity: 1; transform: scale(.1); }
    55%  { opacity: .6; }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes sp-impatto {
    0%   { opacity: 1; transform: scale(.15); }
    100% { opacity: 0; transform: scale(1.35); }
}
/* cade dall'alto un filo allungato, tocca con la punta, si schiaccia sulla punta, rimbalza appena */
@keyframes sp-atterra {
    0%   { transform: translateY(calc(-50vh - 280 * var(--u))) scale(.94, 1.07); animation-timing-function: cubic-bezier(.55, 0, .95, .45); }
    58%  { transform: translateY(0) scale(.94, 1.07); animation-timing-function: cubic-bezier(.25, .6, .35, 1); }
    70%  { transform: translateY(0) scale(1.08, .88); animation-timing-function: cubic-bezier(.45, 0, .45, 1); }
    85%  { transform: translateY(0) scale(.985, 1.025); animation-timing-function: cubic-bezier(.45, 0, .45, 1); }
    100% { transform: none; }
}
@keyframes sp-ombra {
    0%   { opacity: 0; transform: scale(.25); animation-timing-function: cubic-bezier(.55, 0, .95, .45); }
    58%  { opacity: 1; transform: scale(.92); animation-timing-function: cubic-bezier(.25, .6, .35, 1); }
    70%  { opacity: 1; transform: scale(1.14, 1); }
    86%  { transform: scale(.98, 1); }
    100% { opacity: 1; transform: none; }
}
@keyframes sp-scorre { 0% { transform: translateX(-103%); } 100% { transform: none; } }
@keyframes sp-sposta { from { transform: none; } to { transform: var(--sp-sposta); } }
@keyframes sp-per { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes sp-scheda {
    0%   { opacity: 0; transform: var(--sp-entra) scale(.86); }
    40%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes sp-rid-in { from { opacity: 0; } }
@keyframes sp-rid-pulsa { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }
@keyframes lb-x-via { to { opacity: 0; } }
@keyframes lb-x-fade { to { opacity: 0; } }