/* Splash di apertura "Atterraggio sul punto" (splash/ del master, task #407): la scheda di Ca' de Tobia.

   splash/splash.css e splash/splash.js sono quelli del master (b957022, e f816060 per le opzioni data-font e
   data-intro-ms di splash.js): la stessa intro di demo.limebooking.it. Qui c'e' solo la scheda dell'hotel, che
   resta quella della demo (bianca, coi suoi margini, l'ombra e l'entrata sp-scheda da 1580 a 2100 ms) con
   dentro il logo di Ca' de Tobia: brand/splash-logo.png, ritaglio di images/logo.png attorno alla scritta
   (402 x 150, senza la cornice oliva: la scheda bianca fa gia' da cornice). Il nome e' gia' nel logo: niente
   testo e niente <span> (splash.css da' a ".sp-scheda span" il carattere e il verde del nome di Hotel Lime).
   Nessuna animazione propria, quindi in index.html data-intro-ms resta 2100 e data-font non aspetta caratteri.

   Misure in --u, il pixel del logo Prime Booking (splash.css: il lockup e' 1418 x 554 unita', largo --lw).
   Il logo e' alto --cdt-logo unita': 380, perche' la scheda pesi quanto Prime Booking (con 210, l'altezza del
   logo della demo, accanto al lockup sembrava la meta'). Largo 380 x 402 / 150 = 1018,4; coi margini della
   demo (44 sopra e sotto, 72 ai lati) la scheda e' 1162,4 x 468. splash.css centra colonna e riga per la
   scheda di Hotel Lime (1287 x 298); qui si ricentrano per questa, con le stesse formule:
     colonna (sotto 1050 px): il lockup sale di 192 + --cdt-logo / 2 (Hotel Lime, logo 210: 297)
     riga (da 1050 px): il lockup scorre a sinistra di 198 + larghezza della scheda / 2 (Hotel Lime: 841,5),
       e la scheda sta a meta' altezza del lockup, come il segno per (.sp-per)
   Per ingrandire o rimpicciolire il logo basta cambiare --cdt-logo; con un PNG di altre proporzioni, anche
   402 / 150. #lb-splash nei selettori: vincono su splash.css comunque siano ordinati i fogli.
   A ogni modifica di questo file cambia il suo ?v= in index.html. */

html.lb-splash-on #lb-splash {
    --cdt-logo: 380;
    --sp-sposta: translateY(calc((-192 - var(--cdt-logo) / 2) * var(--u)));
}

/* Telefoni in orizzontale (poca altezza, impaginazione in colonna): la composizione va da -(492 + --cdt-logo
   / 2) a +(446 + --cdt-logo / 2) unita' attorno al centro e con --lw 440px non ci starebbe. Qui --lw scende
   quanto basta perche' la parte sopra il centro entri nello schermo (16 px di margine); 709 e' meta' della
   larghezza del lockup in unita'. splash.css ricalcola --u da --lw sullo stesso elemento, quindi lockup,
   scheda e spostamento scalano insieme. Niente dvh: un'unita' non supportata dentro una proprieta'
   personalizzata la renderebbe invalida e romperebbe tutto lo splash. */
@media (max-width: 1049.98px) and (max-height: 500px) {
    html.lb-splash-on #lb-splash {
        --lw: min(440px, calc(100vw - 72px), calc((100vh - 32px) * 709 / (492 + var(--cdt-logo) / 2)));
    }
}

@media (min-width: 1050px) {
    html.lb-splash-on #lb-splash {
        --sp-sposta: translateX(calc((-198 - (144 + var(--cdt-logo) * 402 / 150) / 2) * var(--u)));
    }

    #lb-splash .sp-scheda-box {
        top: 0;
        bottom: 0;
        align-items: center;
    }
}

.sp-scheda.sp-cdt img {
    height: calc(var(--cdt-logo) * var(--u));
}

/* Conti (con --cdt-logo 380):
   - colonna: il lockup sale di 382; la composizione va da -682 a +636 unita' (a 375 px di larghezza, 282 px).
   - riga: il lockup scorre di -779,2 unita'. La riga 1418+150+96+150+1162,4 = 2976,4 unita' (924 px col lockup
     di 440) e' simmetrica e sta dentro i 1050 px da cui parte. */