/* Splash di apertura "Lime booking × Hotel Vela Bianca" (proposta 06: la 02 "La vela si alza" in colonna, con l'uscita a portale dal lime). E' la schermata di caricamento di ogni apertura del sito: html.lb-splash-on la accende lo script in di index.html (versione completa sempre sulla home, breve nelle altre pagine: in quella splash.js porta subito l'intro allo stato finale). La guida splash/splash.js: .lb-play intro: la fetta si strizza e il succo diventa colature e trattini, LiMe e booking, la × a penna, lo scafo scivola sul filo d'acqua, la vela e' issata e si gonfia, le lettere di VELA BIANCA emergono con l'onda di prua (fino a 2365 ms); poi il lockup resta fermo finche' l'intro non e' finita (3080 ms) E Blazor ha disegnato .lb-exit colpo di vento: la barca prende il largo, le scritte rientrano verso la fetta, la fetta (senza mai ruotare) scivola al centro e si apre sulla home; i tempi qui sotto partono dall'uscita, la fetta e il foro li anima splash.js .lb-rest intro finita (quando le sue animazioni sono davvero finite, verso 2400 ms) o saltata: le animazioni d'entrata si tolgono, il lockup fermo e' nitido .lb-armed lockup fermo e pagina gia' disegnata sotto: la maschera del portale c'e' gia', piena .lb-portal il browser sa animare il raggio del foro (@property): altrimenti l'uscita e' una dissolvenza .lb-reduced movimento ridotto: dissolvenza, pausa, dissolvenza Durante l'intro il thread principale e' occupato dall'avvio di Blazor: l'intro anima SOLO transform e opacity (il browser le porta avanti da solo), e mai due animazioni di transform sullo stesso elemento (non sarebbero piu' delegate): per questo i pezzi sono annidati, un movimento per livello. Niente variabili CSS nei keyframes dell'intro: gli spostamenti sono in % del riquadro del pezzo. A riposo ogni transform torna "none" e il lockup resta nitido. Le rivelazioni (il filo d'acqua) sono due livelli che scorrono in senso opposto dentro un ritaglio fermo; la × e' fatta di due tratti HTML che si allungano (scaleX), non di un SVG con stroke-dashoffset. Le animazioni d'uscita stanno su elementi diversi da quelle d'entrata e i loro nomi cominciano con "lb-x-" (splash.js non le chiude quando si salta l'intro con un click); nessuna animazione d'entrata ha un nome che comincia con "lb-x-". Le immagini sono due fogli (img/lime.webp a meta' risoluzione, img/vb.webp a risoluzione piena, vedi SCALE in build_splash.py): ogni pezzo e' un con overflow:hidden che ne mostra un ritaglio. I pezzi stanno in uno "stage" per logo grande quanto il logo sorgente (Lime 2000x914 px, Vela Bianca 2262x514 px) e scalato con transform da splash.js (--lb-lk, --lb-vk): il browser aggancia posizione e misura di ogni pezzo ai pixel interi dello stage (0,15 px a schermo) invece che dello schermo, e a riposo il lockup combacia coi loghi. La geometria (in % dello stage) la genera build_splash.py nel blocco GEOMETRIA in fondo. Dentro lo stage 1 px = 1 px del logo: gli spostamenti in px di schermo delle uscite passano per --lb-li / --lb-vi (px di stage per px di schermo), impostate anche loro da splash.js. */ @property --lb-r { syntax: ''; inherits: true; initial-value: -2px; } .lb-splash { display: none; } html.lb-splash-on, html.lb-splash-on body { overflow: hidden; } html.lb-splash-on .lb-splash { --lb-navy: #061a2c; --lb-deep: #0b2640; --lb-lime-dark: #6DB22D; --lb-cx: 50%; --lb-cy: 50%; display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden; background-color: var(--lb-navy); cursor: pointer; -webkit-tap-highlight-color: transparent; /* contrasto elevato di Windows: niente colori di sistema al posto di quelli del marchio */ forced-color-adjust: none; } /* finche' le immagini non sono pronte si vede solo il fondo (copre gia' la pagina) */ .lb-splash:not(.lb-play) > :not(.lb-bg) { visibility: hidden; } .lb-splash i { display: block; position: absolute; font-style: normal; } .lb-splash img { display: block; position: absolute; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* un pezzo: mostra il suo ritaglio del foglio */ .lb-p { overflow: hidden; } .lb-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 48% at 50% 50%, var(--lb-deep) 0%, rgba(11, 38, 64, 0) 100%), linear-gradient(180deg, #051726 0%, var(--lb-navy) 38%, var(--lb-navy) 70%, #04131f 100%); } /* ── lockup: in colonna su ogni schermo ─────────────────── */ .lb-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 */ .lb-lime-slot { flex: none; width: clamp(210px, 21vw, 310px); } .lb-lime { position: relative; width: 100%; aspect-ratio: 2000 / 914; } .lb-mid { flex: none; position: relative; width: 44px; height: clamp(84px, 11vh, 112px); } .lb-vb-slot { flex: none; position: relative; width: clamp(310px, 32vw, 480px); } .lb-vb { position: relative; width: 100%; aspect-ratio: 2262 / 514; } /* browser senza aspect-ratio (Safari < 15): la stessa proporzione col padding */ @supports not (aspect-ratio: 1 / 1) { .lb-lime { height: 0; padding-top: 45.7%; } .lb-vb { height: 0; padding-top: 22.7233%; } } /* stage a risoluzione sorgente: non si anima mai (la sua transform e' la scala) */ .lb-stage { left: 0; top: 0; transform-origin: 0 0; pointer-events: none; } .lb-stage-lime { width: 2000px; height: 914px; transform: scale(var(--lb-lk, .15)); } .lb-stage-vb { width: 2262px; height: 514px; transform: scale(var(--lb-vk, .2)); } /* livelli che occupano tutto il riquadro del genitore (un movimento per livello) */ .lb-slice-in, .lb-word, .lb-booking, .lb-boat-glide, .lb-boat-heel, .lb-boat-rock, .lb-boat-float, .lb-vl > i { left: 0; top: 0; width: 100%; height: 100%; } /* ritagli fermi: le scie partono dal centro della fetta (niente spunta a sinistra), le lettere di Vela Bianca emergono dalla linea di galleggiamento */ .lb-trails, .lb-vtext { overflow: hidden; } /* ── la ×: due tratti sottili che si allungano come a penna ── */ .lb-x { left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; } /* tratto lungo come quello della 06 (18/30 del riquadro in diagonale) piu' le due punte tonde */ .lb-xs { left: 5.25%; top: 50%; width: 89.5%; height: 1.3px; margin-top: -.65px; } .lb-xs-a { transform: rotate(45deg); } /* dall'alto a sinistra */ .lb-xs-b { transform: rotate(135deg); } /* dall'alto a destra */ .lb-xs > i { left: 0; top: 0; width: 100%; height: 100%; border-radius: .65px; background: rgba(255, 255, 255, .62); transform-origin: 0 50%; } /* ── il filo d'acqua (sotto lo scafo, alla linea di galleggiamento) ── */ .lb-sea { height: 10px; margin-top: -5px; pointer-events: none; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .lb-sea-win, .lb-sea-in, .lb-sea-front { left: 0; top: 0; width: 100%; height: 100%; } .lb-sea-win { overflow: hidden; } /* un'onda ripetuta che scorre verso sinistra (la barca "avanza" anche da ferma) */ .lb-sea-wave { left: 0; top: 0; bottom: 0; width: calc(100% + 24px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 5C4 3.1 8 3.1 12 5S20 6.9 24 5' fill='none' stroke='white' stroke-width='1.25'/%3E%3C/svg%3E") 0 50% / 24px 10px repeat-x; } /* lo spruzzo sulla cresta dell'onda di prua */ .lb-foam { right: 0; top: 50%; width: 26px; height: 8px; margin: -4px -13px 0 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, 0)); opacity: 0; } /* filo di attesa: compare solo se Blazor tarda oltre la pausa */ .lb-wait { left: 50%; top: calc(100% + 30px); width: 72px; height: 1px; margin-left: -36px; overflow: hidden; opacity: 0; } .lb-wait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); transform: translateX(-100%); } /* il bordo verde del portale: la buccia ingrandita, poi segue il foro */ .lb-rim { --lb-rr: max(var(--lb-r), var(--lb-rin, 0px)); position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--lb-cx) var(--lb-cy), transparent calc(var(--lb-rr) - .5px), var(--lb-lime-dark) calc(var(--lb-rr) + .5px), var(--lb-lime-dark) calc(var(--lb-rr) + var(--lb-rt, 0px) - .5px), transparent calc(var(--lb-rr) + var(--lb-rt, 0px) + .5px)); } /* ── telefono: stessa colonna, misure strette ──────────── */ @media (max-width: 767.98px) { .lb-lime-slot { width: min(56vw, 240px); } .lb-mid { height: clamp(88px, 12.5vh, 120px); } .lb-vb-slot { width: min(84vw, 360px); } .lb-x { width: 24px; height: 24px; margin: -12px 0 0 -12px; } .lb-sea { height: 8px; margin-top: -4px; } } /* ══ INTRO (tempi da .lb-play) ══════════════════════════════ */ /* 1 · il lime si strizza e il succo diventa il logo (la fetta non ruota mai) */ .lb-play .lb-slice-in { animation: lb-squeeze 760ms linear 40ms both; } .lb-play .lb-drips { animation: lb-juice 440ms linear 500ms both; } /* i trattini: lb-squirt-1..4, nel blocco GEOMETRIA (partenze diverse per ognuno) */ .lb-play .lb-w-L, .lb-play .lb-w-i, .lb-play .lb-w-M, .lb-play .lb-w-e { animation: lb-pop 460ms linear both; } .lb-play .lb-w-idot { animation: lb-dot 360ms cubic-bezier(.34, 1.7, .5, 1) 720ms both; } .lb-play .lb-k-b, .lb-play .lb-k-o1, .lb-play .lb-k-o2, .lb-play .lb-k-k, .lb-play .lb-k-i, .lb-play .lb-k-n, .lb-play .lb-k-g { animation: lb-surface 380ms cubic-bezier(.22, 1, .36, 1) both; } .lb-play .lb-k-idot { animation: lb-dot 320ms cubic-bezier(.34, 1.7, .5, 1) 830ms both; } /* 2 · la × */ .lb-play .lb-x { animation: lb-cross-in 560ms cubic-bezier(.22, 1, .36, 1) 720ms both; } .lb-play .lb-xs-a > i { animation: lb-draw 240ms cubic-bezier(.45, 0, .55, 1) 740ms both; } .lb-play .lb-xs-b > i { animation: lb-draw 240ms cubic-bezier(.45, 0, .55, 1) 840ms both; } /* 3 · la barca scivola (glide), sbanda e beccheggia (rock), galleggia (float); la vela e' issata */ .lb-play .lb-boat-glide { animation: lb-glide 620ms cubic-bezier(.12, .7, .3, 1) 920ms both, lb-appear 260ms linear 920ms both; } .lb-play .lb-boat-rock { animation: lb-rock 1300ms linear 920ms both; } .lb-play .lb-boat-float { animation: lb-float 900ms linear 920ms both; } .lb-play .lb-sail { animation: lb-hoist 970ms linear 1100ms both; } /* il filo d'acqua: la finestra scorre e il contenuto no (rivelazione con sole transform) */ .lb-play .lb-sea { animation: lb-sea-out 280ms cubic-bezier(.45, 0, .55, 1) 2020ms both; } .lb-play .lb-sea-win { animation: lb-reveal 740ms linear 1000ms both; } .lb-play .lb-sea-in { animation: lb-unreveal 740ms linear 1000ms both; } .lb-play .lb-sea-front { animation: lb-reveal 740ms linear 1000ms both; } .lb-play .lb-foam { animation: lb-foam 740ms linear 1000ms both; } .lb-play .lb-sea-wave { animation: lb-flow 900ms linear 1000ms 2; } /* le lettere emergono quando l'onda di prua passa sotto di loro (ritardi nel blocco GEOMETRIA) */ .lb-play .lb-vl > i { animation: lb-emerge 640ms linear both; } /* a riposo (.lb-rest: intro finita, o saltata) le animazioni d'entrata si tolgono. Un'animazione finita con fill "both" resta "in effetto": Chrome tiene il pezzo sul suo livello, rasterizzato alla scala dell'animazione, e il lockup fermo si vede morbido. Senza animazione il pezzo torna disegnato col resto, nitido; lo stato finale dei keyframes e' quello di base, quindi niente salti. Le uscite stanno su altri elementi e non ne risentono. */ .lb-play.lb-rest .lb-slice-in, .lb-play.lb-rest .lb-trails .lb-p, .lb-play.lb-rest .lb-word > i, .lb-play.lb-rest .lb-booking > i, .lb-play.lb-rest .lb-x, .lb-play.lb-rest .lb-xs > i, .lb-play.lb-rest .lb-boat-glide, .lb-play.lb-rest .lb-boat-rock, .lb-play.lb-rest .lb-boat-float, .lb-play.lb-rest .lb-sail, .lb-play.lb-rest .lb-vl > i { animation: none; } /* il filo d'acqua a riposo e' gia' svanito (e senza animazione tornerebbe a opacita' .5) */ .lb-rest .lb-sea { display: none; } /* attesa di Blazor */ .lb-waiting .lb-wait { animation: lb-appear 500ms ease-out both; } .lb-waiting .lb-wait::after { animation: lb-wait 1500ms cubic-bezier(.45, 0, .55, 1) infinite; } /* nell'uscita il filo d'attesa svanisce con le scritte (altrimenti continuerebbe a scorrere sotto il lockup vuoto finche' il foro non lo copre) */ .lb-waiting.lb-exit .lb-wait { animation: lb-x-wait-out 160ms ease-in 60ms both; } /* ══ USCITA (tempi dall'aggiunta di .lb-exit) ═════════════ */ /* il colpo di vento: la vela fileggia e si tende, la barca si appoggia, sbanda e prende il largo */ .lb-exit .lb-sail-gust { animation: lb-x-gust 320ms linear forwards; } .lb-exit .lb-boat-heel { animation: lb-x-heel 320ms linear forwards; } .lb-exit .lb-boat-go { animation: lb-x-surge 250ms cubic-bezier(.42, 0, .8, .5) 70ms forwards, lb-x-fade 130ms cubic-bezier(.4, 0, .7, .4) 190ms forwards; } /* le lettere salgono verso la fetta, da sinistra a destra (ritardi nel blocco GEOMETRIA) */ .lb-exit .lb-vl { animation: lb-x-letter 170ms cubic-bezier(.45, 0, .7, .6) 60ms forwards; } /* la ×, "booking" e "LiMe" rientrano verso la fetta; le scie si accorciano sotto la buccia */ .lb-exit .lb-mid { animation: lb-x-mid 200ms cubic-bezier(.45, 0, .7, .6) 70ms forwards; } .lb-exit .lb-booking { animation: lb-x-booking 210ms cubic-bezier(.45, 0, .7, .6) 80ms forwards; } .lb-exit .lb-word { animation: lb-x-word 210ms cubic-bezier(.45, 0, .7, .6) 95ms forwards; } .lb-exit .lb-trails { animation: lb-x-trails 240ms cubic-bezier(.4, 0, .6, 1) 90ms forwards; } /* il bordo verde prende il posto della buccia quando il foro la raggiunge, poi lo segue e svanisce */ .lb-exit.lb-portal .lb-rim { animation: lb-x-rim-on 1ms linear 630ms both, lb-x-rim-off 160ms ease-in 800ms forwards; } /* il foro del portale (il raggio --lb-r lo anima splash.js). La stessa maschera si mette gia' col lockup fermo e la pagina pronta (.lb-armed, solo se c'e' il portale): con --lb-r a -2px e' piena e non cambia niente a schermo, ma il browser deve gia' disegnare la pagina sotto lo splash, e all'inizio dell'uscita non resta quel lavoro a fermare i fotogrammi */ .lb-armed, .lb-exit.lb-portal { -webkit-mask-image: radial-gradient(circle at var(--lb-cx) var(--lb-cy), transparent var(--lb-r), #000 calc(var(--lb-r) + 1px)); mask-image: radial-gradient(circle at var(--lb-cx) var(--lb-cy), transparent var(--lb-r), #000 calc(var(--lb-r) + 1px)); } /* senza portale (browser senza @property): dissolvenza dopo il ritiro delle scritte */ .lb-exit:not(.lb-portal) { animation: lb-x-fade 420ms ease-in-out 240ms forwards; } /* ══ MOVIMENTO RIDOTTO: dissolvenza, pausa, dissolvenza ═════ */ .lb-reduced * { animation: none !important; } .lb-reduced .lb-sea { display: none; } .lb-reduced.lb-play .lb-lockup { animation: lb-appear 380ms ease-out both !important; } .lb-reduced.lb-exit { animation: lb-x-fade 340ms ease-in-out forwards; } /* ══ keyframes ═════════════════════════════════════════════ */ @keyframes lb-appear { from { opacity: 0; } to { opacity: 1; } } /* la strizzata (40 – 800 ms): 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: l'attaccatura delle colature si vedrebbe come un filo scuro */ @keyframes lb-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; } } @keyframes lb-dot { from { transform: scale(0); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } } @keyframes lb-cross-in { 0% { opacity: 0; transform: rotate(-35deg) scale(.8); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes lb-draw { from { transform: scaleX(0); } to { transform: none; } } /* beccheggio (prua su mentre scivola, giu' quando frena) */ @keyframes lb-rock { 0% { transform: rotate(-3deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 36% { transform: rotate(1.3deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 52% { transform: rotate(-.4deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 72% { transform: rotate(3.2deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 87% { transform: rotate(-.6deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 100% { transform: none; } } /* la vela: sempre la stessa lista di funzioni, nel riferimento del boma (inclinato di 14,5°): rotate(-14.5) skewX(inclinazione) scale(pancia, altezza) rotate(14.5) */ @keyframes lb-hoist { 0% { opacity: 0; transform: rotate(-14.5deg) skewX(0deg) scale(.92, 0) rotate(14.5deg); animation-timing-function: cubic-bezier(.3, .75, .4, 1); } 4% { opacity: 1; } 20% { transform: rotate(-14.5deg) skewX(0deg) scale(.95, .52) rotate(14.5deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 27% { transform: rotate(-14.5deg) skewX(0deg) scale(.95, .49) rotate(14.5deg); animation-timing-function: cubic-bezier(.3, .8, .35, 1); } 47% { transform: rotate(-14.5deg) skewX(0deg) scale(1, 1.045) rotate(14.5deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 56% { transform: rotate(-14.5deg) skewX(0deg) scale(1, .99) rotate(14.5deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 62% { transform: rotate(-14.5deg) skewX(1.5deg) scale(.99, 1) rotate(14.5deg); animation-timing-function: cubic-bezier(.3, .6, .4, 1); } 74% { transform: rotate(-14.5deg) skewX(-7deg) scale(1.05, .985) rotate(14.5deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 86% { transform: rotate(-14.5deg) skewX(1.2deg) scale(.995, 1) rotate(14.5deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { opacity: 1; transform: none; } } /* il filo d'acqua */ @keyframes lb-reveal { from { transform: translateX(-100%); } to { transform: none; } } @keyframes lb-unreveal { from { transform: translateX(100%); } to { transform: none; } } @keyframes lb-flow { from { transform: none; } to { transform: translateX(-24px); } } @keyframes lb-foam { 0% { opacity: 0; } 10% { opacity: 1; } 78% { opacity: .9; } 100% { opacity: 0; } } @keyframes lb-sea-out { from { opacity: .5; } to { opacity: 0; } } @keyframes lb-wait { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* uscite (lb-x-*) */ @keyframes lb-x-heel { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 24% { transform: rotate(-1.2deg); animation-timing-function: cubic-bezier(.5, 0, .75, .5); } 100% { transform: rotate(7deg); } } @keyframes lb-x-gust { 0% { transform: rotate(-14.5deg) skewX(0deg) scale(1, 1) rotate(14.5deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 24% { transform: rotate(-14.5deg) skewX(2deg) scale(.98, 1) rotate(14.5deg); animation-timing-function: cubic-bezier(.3, .7, .4, 1); } 100% { transform: rotate(-14.5deg) skewX(-9deg) scale(1.07, .98) rotate(14.5deg); } } /* verso la fetta, che sta in alto a sinistra del lockup (px di schermo, come nella 06: dentro gli stage li converte --lb-li / --lb-vi; le uscite partono quando Blazor ha finito, le variabili qui non rallentano niente) */ @keyframes lb-x-letter { to { transform: translate(calc(-5px * var(--lb-vi, 5)), calc(-22px * var(--lb-vi, 5))) scale(.94); opacity: 0; } } @keyframes lb-x-mid { to { transform: translateY(-12px) scale(.7); opacity: 0; } } @keyframes lb-x-booking { to { transform: translate(calc(-20px * var(--lb-li, 6.6)), calc(-14px * var(--lb-li, 6.6))); opacity: 0; } } @keyframes lb-x-word { to { transform: translateX(calc(-18px * var(--lb-li, 6.6))); opacity: 0; } } @keyframes lb-x-trails { to { transform: scaleX(.15); opacity: 0; } } @keyframes lb-x-rim-on { from { opacity: 0; } to { opacity: 1; } } @keyframes lb-x-rim-off { to { opacity: 0; } } @keyframes lb-x-fade { to { opacity: 0; } } @keyframes lb-x-wait-out { from { opacity: 1; } to { opacity: 0; } } /* ══ GEOMETRIA ═════════════════════════════════════════════ In fondo al file: i ritardi per pezzo (animation-delay) devono venire dopo le regole "animation:" dell'intro e dell'uscita, che altrimenti li azzererebbero. */ /* ==GEOMETRIA (generata da build_splash.py: non modificare a mano)== */ /* Lime: spazio 2000x914 */ .lb-trails { left: 13.55%; top: -7.221%; width: 28.3%; height: 73.9606%; transform-origin: 0 49.9323%; } .lb-slice { left: 0.027%; top: 0.1024%; width: 27.0606%; height: 59.2136%; } .lb-slice-p { left: -1.5781%; top: -1.6512%; width: 104.2105%; height: 104.2105%; } .lb-slice-p > img { left: -1.4184%; top: -1.4184%; width: 248.227%; height: 221.6312%; } .lb-drips { left: -2.2968%; top: 8.5799%; width: 78.7986%; height: 83.432%; } .lb-drips > img { left: -131.8386%; top: -1.4184%; width: 313.9013%; height: 221.6312%; } .lb-dash-1 { left: 44.3463%; top: 17.7515%; width: 26.5018%; height: 7.9882%; transform-origin: 9.3333% 47.2222%; } .lb-dash-1 > img { left: -790.6667%; top: -1833.3333%; width: 933.3333%; height: 2314.8148%; } .lb-play .lb-dash-1 { animation: lb-squirt-1 500ms linear 495ms both; } .lb-dash-2 { left: 72.6148%; top: 32.2485%; width: 18.7279%; height: 7.9882%; transform-origin: 11.3208% 49.0741%; } .lb-dash-2 > img { left: -7.5472%; top: -2200%; width: 1320.7547%; height: 2314.8148%; } .lb-play .lb-dash-2 { animation: lb-squirt-2 500ms linear 525ms both; } .lb-dash-3 { left: 57.4205%; top: 54.7337%; width: 33.2155%; height: 7.9882%; transform-origin: 6.9149% 50.9259%; } .lb-dash-3 > img { left: -427.6596%; top: -1833.3333%; width: 744.6809%; height: 2314.8148%; } .lb-play .lb-dash-3 { animation: lb-squirt-3 500ms linear 555ms both; } .lb-dash-4 { left: 46.1131%; top: 78.6982%; width: 28.6219%; height: 7.9882%; transform-origin: 8.0247% 50.9259%; } .lb-dash-4 > img { left: -622.2222%; top: -1833.3333%; width: 864.1975%; height: 2314.8148%; } .lb-play .lb-dash-4 { animation: lb-squirt-4 500ms linear 585ms both; } .lb-w-L { left: 48.3%; top: 7.0022%; width: 10.8%; height: 47.7024%; transform-origin: 50% 78.4533%; } .lb-w-L > .lb-p { left: 0%; top: 0%; width: 100%; height: 81.6514%; } .lb-w-L > .lb-p > img { left: -211.1111%; top: -165.1685%; width: 648.1481%; height: 351.1236%; } .lb-play .lb-w-L { animation-delay: 540ms; } .lb-w-i { left: 60.1%; top: 7.0022%; width: 4.8%; height: 47.7024%; transform-origin: 50.5208% 78.4531%; } .lb-w-i > .lb-p { left: 0%; top: 19.7248%; width: 100%; height: 61.9266%; } .lb-w-i > .lb-p > img { left: -1029.1667%; top: -217.7778%; width: 1458.3333%; height: 462.963%; } .lb-play .lb-w-i { animation-delay: 595ms; } .lb-w-M { left: 65.3%; top: 7.0022%; width: 21.6%; height: 47.7024%; transform-origin: 50% 78.4529%; } .lb-w-M > .lb-p { left: 0%; top: 11.4679%; width: 100%; height: 88.5321%; } .lb-w-M > .lb-p > img { left: -1.8519%; top: -152.3316%; width: 324.0741%; height: 323.8342%; } .lb-play .lb-w-M { animation-delay: 650ms; } .lb-w-e { left: 86.2%; top: 7.0022%; width: 14.2%; height: 47.7024%; transform-origin: 50.8803% 78.4531%; } .lb-w-e > .lb-p { left: 0%; top: 17.4312%; width: 100%; height: 74.3119%; } .lb-w-e > .lb-p > img { left: -242.2535%; top: -181.4815%; width: 492.9577%; height: 385.8025%; } .lb-play .lb-w-e { animation-delay: 705ms; } .lb-w-idot { left: 59.8%; top: 5.2516%; width: 5.5%; height: 12.035%; transform-origin: 50% 49.5455%; } .lb-w-idot > img { left: -616.3636%; top: -900%; width: 1272.7273%; height: 1136.3636%; } .lb-k-b { left: 2.6%; top: 77.6805%; width: 7.9%; height: 23.1947%; } .lb-k-b > .lb-p { left: 0%; top: 0%; width: 100%; height: 85.8491%; } .lb-k-b > .lb-p > img { left: -5.0633%; top: -543.956%; width: 886.0759%; height: 686.8132%; } .lb-play .lb-k-b { animation-delay: 640ms; } .lb-k-o1 { left: 18.6%; top: 77.6805%; width: 6.7%; height: 23.1947%; } .lb-k-o1 > .lb-p { left: 0%; top: 19.8113%; width: 100%; height: 63.2075%; } .lb-k-o1 > .lb-p > img { left: -283.5821%; top: -738.806%; width: 1044.7761%; height: 932.8358%; } .lb-play .lb-k-o1 { animation-delay: 670ms; } .lb-k-o2 { left: 33.5%; top: 77.6805%; width: 6.6%; height: 23.1947%; } .lb-k-o2 > .lb-p { left: 0%; top: 19.8113%; width: 100%; height: 63.2075%; } .lb-k-o2 > .lb-p > img { left: -401.5152%; top: -738.806%; width: 1060.6061%; height: 932.8358%; } .lb-play .lb-k-o2 { animation-delay: 700ms; } .lb-k-k { left: 48.7%; top: 77.6805%; width: 6.7%; height: 23.1947%; } .lb-k-k > .lb-p { left: 0%; top: 0%; width: 100%; height: 90.566%; } .lb-k-k > .lb-p > img { left: -820.8955%; top: -306.25%; width: 1044.7761%; height: 651.0417%; } .lb-play .lb-k-k { animation-delay: 730ms; } .lb-k-i { left: 63.7%; top: 77.6805%; width: 2.2%; height: 23.1947%; } .lb-k-i > .lb-p { left: 0%; top: 18.8679%; width: 100%; height: 65.0943%; } .lb-k-i > .lb-p > img { left: -727.2727%; top: -717.3913%; width: 3181.8182%; height: 905.7971%; } .lb-play .lb-k-i { animation-delay: 760ms; } .lb-k-n { left: 75%; top: 77.6805%; width: 6.1%; height: 23.1947%; } .lb-k-n > .lb-p { left: 0%; top: 12.2642%; width: 100%; height: 78.3019%; } .lb-k-n > .lb-p > img { left: -149.1803%; top: -596.3855%; width: 1147.541%; height: 753.012%; } .lb-play .lb-k-n { animation-delay: 790ms; } .lb-k-g { left: 89.7%; top: 77.6805%; width: 6.7%; height: 23.1947%; } .lb-k-g > .lb-p { left: 0%; top: 11.3208%; width: 100%; height: 88.6792%; } .lb-k-g > .lb-p > img { left: -932.8358%; top: -312.766%; width: 1044.7761%; height: 664.8936%; } .lb-play .lb-k-g { animation-delay: 820ms; } .lb-k-idot { left: 63.6%; top: 77.6805%; width: 2.5%; height: 5.4705%; transform-origin: 49% 49%; } .lb-k-idot > img { left: -260%; top: -2376%; width: 2800%; height: 2500%; } /* Vela Bianca: spazio 2262x514 */ .lb-sea { left: -2.6525%; width: 104.3324%; top: 85.6031%; } .lb-boat-go { left: 1.2378%; top: 9.144%; width: 11.229%; height: 81.5175%; } .lb-boat-heel, .lb-boat-rock { transform-origin: 36.2% 93.8%; } .lb-hull { left: -1.1811%; top: 75.895%; width: 83.4646%; height: 26.0143%; } .lb-hull > img { left: -125.9434%; top: -596.3303%; width: 518.8679%; height: 803.6697%; } .lb-sail-gust { left: 0%; top: 0%; width: 100%; height: 88.7828%; transform-origin: 44.882% 91.801%; } .lb-sail { left: -3.1496%; top: -2.1505%; width: 106.2992%; height: 104.3011%; transform-origin: 45.1853% 90.0772%; } .lb-sail > img { left: -2.963%; top: -2.0619%; width: 407.4074%; height: 225.7732%; } .lb-vtext { left: 10.3006%; top: -2.3346%; width: 91.6004%; height: 87.9377%; } .lb-vl-V { left: 4.971%; top: 0%; width: 12.5483%; height: 100%; transform-origin: 50% 93.0309%; } .lb-vl-V > i { transform-origin: 50% 93.0309%; } .lb-vl-V > i > .lb-p { left: 0%; top: 39.823%; width: 100%; height: 55.531%; } .lb-vl-V > i > .lb-p > img { left: -113.0769%; top: -3.1873%; width: 423.0769%; height: 349.004%; } .lb-play .lb-vl-V > i { animation-delay: 1215ms; } .lb-exit .lb-vl-V { animation-delay: 60ms; } .lb-vl-E { left: 16.8919%; top: 0%; width: 6.3224%; height: 100%; transform-origin: 50% 93.0311%; } .lb-vl-E > i { transform-origin: 50% 93.0311%; } .lb-vl-E > i > .lb-p { left: 0%; top: 46.4602%; width: 100%; height: 48.4513%; } .lb-vl-E > i > .lb-p > img { left: -728.2443%; top: -188.1279%; width: 839.6947%; height: 400%; } .lb-play .lb-vl-E > i { animation-delay: 1272ms; } .lb-exit .lb-vl-E { animation-delay: 65ms; } .lb-vl-L { left: 23.3108%; top: 0%; width: 6.9015%; height: 100%; transform-origin: 50% 93.0312%; } .lb-vl-L > i { transform-origin: 50% 93.0312%; } .lb-vl-L > i > .lb-p { left: 0%; top: 46.4602%; width: 100%; height: 48.2301%; } .lb-vl-L > i > .lb-p > img { left: -5.5944%; top: -298.1651%; width: 769.2308%; height: 401.8349%; } .lb-play .lb-vl-L > i { animation-delay: 1316ms; } .lb-exit .lb-vl-L { animation-delay: 70ms; } .lb-vl-A1 { left: 29.5367%; top: 0%; width: 10.473%; height: 100%; transform-origin: 50% 93.0312%; } .lb-vl-A1 > i { transform-origin: 50% 93.0312%; } .lb-vl-A1 > i > .lb-p { left: 0%; top: 45.7965%; width: 100%; height: 48.4513%; } .lb-vl-A1 > i > .lb-p > img { left: -332.2581%; top: -188.1279%; width: 506.9124%; height: 400%; } .lb-play .lb-vl-A1 > i { animation-delay: 1368ms; } .lb-exit .lb-vl-A1 { animation-delay: 75ms; } .lb-vl-B { left: 42.4228%; top: 0%; width: 8.4942%; height: 100%; transform-origin: 50% 93.0308%; } .lb-vl-B > i { transform-origin: 50% 93.0308%; } .lb-vl-B > i > .lb-p { left: 0%; top: 39.823%; width: 100%; height: 55.0885%; } .lb-vl-B > i > .lb-p > img { left: -323.8636%; top: -3.2129%; width: 625%; height: 351.8072%; } .lb-play .lb-vl-B > i { animation-delay: 1445ms; } .lb-exit .lb-vl-B { animation-delay: 80ms; } .lb-vl-I { left: 51.11%; top: 0%; width: 4.0541%; height: 100%; transform-origin: 50% 93.0309%; } .lb-vl-I > i { transform-origin: 50% 93.0309%; } .lb-vl-I > i > .lb-p { left: 0%; top: 46.4602%; width: 100%; height: 48.0088%; } .lb-vl-I > i > .lb-p > img { left: -198.8095%; top: -299.5392%; width: 1309.5238%; height: 403.6866%; } .lb-play .lb-vl-I > i { animation-delay: 1487ms; } .lb-exit .lb-vl-I { animation-delay: 85ms; } .lb-vl-A2 { left: 55.0193%; top: 0%; width: 10.666%; height: 100%; transform-origin: 50% 93.0308%; } .lb-vl-A2 > i { transform-origin: 50% 93.0308%; } .lb-vl-A2 > i > .lb-p { left: 0%; top: 45.7965%; width: 100%; height: 48.6726%; } .lb-vl-A2 > i > .lb-p > img { left: -219.0045%; top: -187.2727%; width: 497.7376%; height: 398.1818%; } .lb-play .lb-vl-A2 > i { animation-delay: 1534ms; } .lb-exit .lb-vl-A2 { animation-delay: 90ms; } .lb-vl-N { left: 64.9614%; top: 0%; width: 10.9073%; height: 100%; transform-origin: 50% 93.0308%; } .lb-vl-N > i { transform-origin: 50% 93.0308%; } .lb-vl-N > i > .lb-p { left: 0%; top: 45.7965%; width: 100%; height: 49.115%; } .lb-vl-N > i > .lb-p > img { left: -3.5398%; top: -185.5856%; width: 486.7257%; height: 394.5946%; } .lb-play .lb-vl-N > i { animation-delay: 1599ms; } .lb-exit .lb-vl-N { animation-delay: 95ms; } .lb-vl-C { left: 75.4344%; top: 0%; width: 9.4595%; height: 100%; transform-origin: 50% 93.0311%; } .lb-vl-C > i { transform-origin: 50% 93.0311%; } .lb-vl-C > i > .lb-p { left: 0%; top: 45.5752%; width: 100%; height: 49.7788%; } .lb-vl-C > i > .lb-p > img { left: -388.7755%; top: -3.5556%; width: 561.2245%; height: 389.3333%; } .lb-play .lb-vl-C > i { animation-delay: 1663ms; } .lb-exit .lb-vl-C { animation-delay: 100ms; } .lb-vl-A3 { left: 84.5077%; top: 0%; width: 10.5212%; height: 100%; transform-origin: 50% 93.0309%; } .lb-vl-A3 > i { transform-origin: 50% 93.0309%; } .lb-vl-A3 > i > .lb-p { left: 0%; top: 45.354%; width: 100%; height: 49.115%; } .lb-vl-A3 > i > .lb-p > img { left: -114.6789%; top: -185.5856%; width: 504.5872%; height: 394.5946%; } .lb-play .lb-vl-A3 > i { animation-delay: 1725ms; } .lb-exit .lb-vl-A3 { animation-delay: 105ms; } /* keyframes che dipendono dalla geometria */ @keyframes lb-juice { 0% { transform: translateX(-35.874%); opacity: 0; animation-timing-function: step-end; } 1% { transform: translateX(-35.874%); opacity: 1; animation-timing-function: cubic-bezier(.16, .84, .3, 1); } 100% { transform: none; opacity: 1; } } @keyframes lb-squirt-1 { 0% { transform: translate(-88.284%, 177.817%) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(8.828%, -17.782%) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } } @keyframes lb-squirt-2 { 0% { transform: translate(-199.459%, 86.15%) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(19.946%, -8.615%) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } } @keyframes lb-squirt-3 { 0% { transform: translate(-89.855%, -55.516%) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(8.985%, 5.552%) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } } @keyframes lb-squirt-4 { 0% { transform: translate(-84.523%, -205.516%) scale(.15, .55); opacity: 0; animation-timing-function: cubic-bezier(.12, .8, .3, 1); } 14% { opacity: 1; } 58% { transform: translate(8.452%, 20.552%) scale(1.12, .88); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } } @keyframes lb-pop { 0% { transform: translateY(18.349%) scale(.72); opacity: 0; animation-timing-function: cubic-bezier(.25, .8, .4, 1); } 30% { opacity: 1; } 62% { transform: translateY(-2.752%) scale(1.03); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; opacity: 1; } } @keyframes lb-surface { from { transform: translateY(28.302%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes lb-glide { from { transform: translateX(-90.551%); } to { transform: none; } } @keyframes lb-float { 0% { transform: translateY(3.819%); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 38% { transform: translateY(-2.148%); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 70% { transform: translateY(0.955%); animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 100% { transform: none; } } @keyframes lb-x-surge { to { transform: translateX(185.039%); } } @keyframes lb-emerge { 0% { transform: translateY(64.159%) rotate(-6deg); animation-timing-function: cubic-bezier(.22, .72, .34, 1); } 58% { transform: translateY(-3.319%) rotate(1.6deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 80% { transform: translateY(0.885%) rotate(-.5deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: none; } } /* ==FINE GEOMETRIA== */