/* Splash di apertura "Lime booking × Hotel Bellevue et Méditerranée" (proposta 07: la 04 "Luce d'ottone" in colonna, con l'uscita a portale della 06). 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: Lime a fuoco, filo e ×, luce che accende Bellevue, stelle (fino a 2215 ms), poi il lockup resta fermo finche' l'intro non e' finita (2920 ms) E Blazor ha disegnato .lb-exit le scritte rientrano nella fetta, la fetta 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-portal il browser sa animare il raggio del foro (@property): altrimenti l'uscita e' una dissolvenza .lb-reduced movimento ridotto: dissolvenza, pausa, dissolvenza Le animazioni d'uscita dei pezzi che hanno anche un'entrata stanno nella stessa lista, in pausa (animation-play-state) fino a .lb-exit: cosi' l'entrata non si riavvia e il ritardo conta dall'uscita. I nomi delle animazioni d'uscita cominciano con "lb-x-" (splash.js li riconosce quando si salta l'intro con un click). */ @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-ivory: #FAF6EE; --lb-ivory-hi: #FFFDF8; --lb-ink: #9B8E7C; --lb-brass: 181, 148, 96; --lb-lime-dark: #6DB22D; --lb-ease: cubic-bezier(.22, 1, .36, 1); --lb-ease-io: cubic-bezier(.65, 0, .35, 1); --lb-ease-in: cubic-bezier(.5, 0, .9, .4); --lb-sweep-ease: cubic-bezier(.35, .12, .65, .9); --lb-cx: 50%; --lb-cy: 50%; display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden; background-color: var(--lb-ivory); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* finche' le immagini non sono pronte si vede solo il fondo (copre gia' la pagina) */ .lb-splash:not(.lb-play) > * { visibility: hidden; } .lb-splash img { display: block; position: absolute; max-width: none; margin: 0; padding: 0; border: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; } .lb-light { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 52% at 50% 48%, var(--lb-ivory-hi) 0%, rgba(255, 253, 248, 0) 100%); opacity: 0; } /* ── lockup: in colonna ─────────────────────────────────── */ .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 / 913; } .lb-mid { flex: none; position: relative; width: 44px; height: clamp(84px, 11vh, 112px); --lb-xr: 17px; } .lb-bv-slot { flex: none; position: relative; width: clamp(300px, 31vw, 470px); } .lb-bv { position: relative; width: 100%; aspect-ratio: 1024 / 181; } @media (max-width: 767.98px) { .lb-lime-slot { width: min(56vw, 240px); } .lb-mid { height: clamp(88px, 12.5vh, 120px); } .lb-bv-slot { width: min(84vw, 340px); } } /* ── pezzi del logo Lime (spazio 2000x913, in %) ───────── */ .lb-trails { left: 13.55%; top: 0; width: 25.25%; height: 59.5838%; transform-origin: 0 50%; } .lb-slice { position: absolute; left: .027%; top: .1026%; width: 27.0606%; height: 59.2784%; } .lb-slice-inner { left: 4.5193%; top: 4.0767%; width: 91.8309%; height: 91.8309%; transform-origin: 50.015% 50.012%; } .lb-peel { left: -.0999%; top: -.173%; width: 100.1456%; height: 100.5151%; } .lb-word { left: 48.9%; top: 6.5717%; width: 51.1%; height: 47.207%; } .lb-booking { position: absolute; inset: 0; } /* --lb-dx: da dove parte ogni lettera mentre "booking" stringe la spaziatura */ .lb-b-b { left: 3.15%; top: 79.08%; width: 6.65%; height: 17.4151%; --lb-dx: -103.4%; } .lb-b-o1 { left: 19.25%; top: 83.7897%; width: 5.4%; height: 11.8291%; --lb-dx: -81.48%; } .lb-b-o2 { left: 34.1%; top: 83.7897%; width: 5.4%; height: 11.8291%; --lb-dx: -37.48%; } .lb-b-k { left: 49.35%; top: 79.08%; width: 5.4%; height: 18.5104%; --lb-dx: 7.7%; } .lb-b-i { left: 64.2%; top: 79.08%; width: 1.25%; height: 16.977%; --lb-dx: 196.8%; } .lb-b-n { left: 75.6%; top: 81.9277%; width: 4.9%; height: 15.6627%; --lb-dx: 93.39%; } .lb-b-g { left: 90.4%; top: 81.7087%; width: 5.35%; height: 18.2913%; --lb-dx: 130.47%; } /* ── pezzi del logo Bellevue (spazio 1024x181, in %) ────── */ /* La luce che accende la scritta: una maschera diagonale larga 2,5 volte la scritta scorre verso destra (.lb-textwrap) mentre la scritta, dentro, scorre indietro della stessa misura (.lb-textin): a schermo la scritta sta ferma e il bordo della luce avanza. Solo transform, niente mask-position: il browser la anima fuori dal thread principale, che intanto e' occupato dall'avvio di Blazor. A riposo entrambe le transform sono "none": il logo resta nitido. */ .lb-textwrap { position: absolute; left: -12%; top: 0; width: 250%; height: 100%; -webkit-mask-image: linear-gradient(112deg, #000 47%, rgba(0, 0, 0, 0) 52%); mask-image: linear-gradient(112deg, #000 47%, rgba(0, 0, 0, 0) 52%); } .lb-textin { position: absolute; left: 4.8%; top: 0; width: 39.961%; height: 100%; } .lb-text { left: 0; top: 0; width: 100%; height: 100%; } /* riflesso dorato ritagliato sulle lettere */ .lb-gleam { position: absolute; inset: 0; overflow: hidden; opacity: 0; -webkit-mask: url("img/bv-text.webp") 0 0 / 100% 100% no-repeat; mask: url("img/bv-text.webp") 0 0 / 100% 100% no-repeat; } .lb-gleam-band { position: absolute; left: 0; top: 0; width: 250%; height: 100%; background: linear-gradient(112deg, rgba(255, 205, 95, 0) 40.5%, rgba(255, 205, 95, .6) 42.8%, rgba(255, 234, 176, .92) 44.2%, rgba(255, 205, 95, .6) 45.6%, rgba(255, 205, 95, 0) 48%); transform: translateX(-4.8%); } .lb-star { top: 2.2099%; height: 20.9945%; transform-origin: 49.857% 54.954%; } .lb-star-1 { left: 78.6133%; width: 3.9062%; --lb-i: 0; } .lb-star-2 { left: 84.5703%; width: 3.8086%; --lb-i: 1; } .lb-star-3 { left: 90.2344%; width: 3.9062%; --lb-i: 2; } .lb-star-4 { left: 96.1914%; width: 3.8086%; --lb-i: 3; } /* scintille sulle stelle (centro di ogni stella, in % del logo) */ .lb-spark { position: absolute; top: 13.75%; width: 6.6%; height: auto; aspect-ratio: 1; margin: -3.3% 0 0 -3.3%; overflow: visible; opacity: 0; } .lb-spark-1 { left: 80.56%; --lb-i: 0; } .lb-spark-2 { left: 86.47%; --lb-i: 1; } .lb-spark-3 { left: 92.19%; --lb-i: 2; } .lb-spark-4 { left: 98.1%; --lb-i: 3; } /* ── la × e il filo d'ottone verticale ───────────────────── */ .lb-x { position: absolute; left: 50%; top: 50%; width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; overflow: visible; } .lb-x line { fill: none; stroke: var(--lb-ink); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; } .lb-line { position: absolute; left: 50%; width: 1px; height: calc(50% - var(--lb-xr) - 6px); opacity: 0; } .lb-line-a { bottom: calc(50% + var(--lb-xr)); transform-origin: 50% 100%; background: linear-gradient(to top, rgba(var(--lb-brass), .9), rgba(var(--lb-brass), .55) 60%, rgba(var(--lb-brass), 0)); } .lb-line-b { top: calc(50% + var(--lb-xr)); transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(var(--lb-brass), .9), rgba(var(--lb-brass), .55) 60%, rgba(var(--lb-brass), 0)); } /* filo di attesa: compare solo se Blazor tarda oltre la pausa */ .lb-wait { position: absolute; 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(var(--lb-brass), 0), rgba(var(--lb-brass), .85), rgba(var(--lb-brass), 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)); } .lb-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ══ INTRO ══════════════════════════════════════════════════ */ .lb-play .lb-light { animation: lb-appear 1000ms cubic-bezier(.33, 0, .2, 1) both; } /* 1 · Lime booking entra a fuoco */ .lb-play .lb-lime { animation: lb-focus 960ms var(--lb-ease) 40ms both, lb-appear 600ms cubic-bezier(.33, 0, .2, 1) 40ms both; } .lb-play .lb-slice-inner { animation: lb-turn 1110ms var(--lb-ease) 40ms both; } .lb-play .lb-word { animation: lb-appear 540ms cubic-bezier(.33, 0, .2, 1) 120ms both, lb-x-word 220ms var(--lb-ease-in) 60ms forwards; animation-play-state: running, paused; } .lb-play .lb-booking { animation: lb-appear 540ms cubic-bezier(.33, 0, .2, 1) 200ms both, lb-x-booking 220ms var(--lb-ease-in) 40ms forwards; animation-play-state: running, paused; } .lb-play .lb-b { animation: lb-track 940ms var(--lb-ease) 160ms both; } /* 2 · il filo e la × */ .lb-play .lb-line-a { animation: lb-line-a 720ms linear 440ms both; } .lb-play .lb-line-b { animation: lb-line-b 720ms linear 440ms both; } .lb-play .lb-x { animation: lb-x-in 600ms var(--lb-ease) 620ms both; } .lb-play .lb-x-a { animation: lb-draw 280ms var(--lb-ease-io) 650ms both; } .lb-play .lb-x-b { animation: lb-draw 280ms var(--lb-ease-io) 770ms both; } /* 3 · la luce accende Bellevue */ .lb-play .lb-textwrap { animation: lb-sweep 660ms var(--lb-sweep-ease) 1080ms both; } .lb-play .lb-textin { animation: lb-sweep-back 660ms var(--lb-sweep-ease) 1080ms both; } .lb-play .lb-gleam-band { animation: lb-gleam 660ms var(--lb-sweep-ease) 1080ms both; } .lb-play .lb-gleam { animation: lb-gleam-life 660ms linear 1080ms both; } /* 4 · le stelle, una alla volta */ .lb-play .lb-star { animation: lb-star 400ms var(--lb-ease) both; animation-delay: calc(1550ms + var(--lb-i) * 85ms); } .lb-play .lb-spark { animation: lb-spark 440ms linear both; animation-delay: calc(1520ms + var(--lb-i) * 85ms); } /* 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; } /* ══ USCITA (tempi dall'aggiunta di .lb-exit) ═════════════ */ .lb-exit .lb-bv-slot { animation: lb-x-bv 260ms var(--lb-ease-in) forwards; } .lb-exit .lb-mid { animation: lb-x-mid 220ms var(--lb-ease-in) 20ms forwards; } .lb-play.lb-exit .lb-booking, .lb-play.lb-exit .lb-word { animation-play-state: running, running; } .lb-exit .lb-trails { animation: lb-x-trails 240ms var(--lb-ease-in) 80ms forwards; } .lb-exit.lb-portal .lb-rim { animation: lb-x-rim-on 1ms linear 640ms both, lb-x-rim-off 180ms ease-in 840ms forwards; } /* il foro del portale (il raggio --lb-r lo anima splash.js) */ .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 ═════════════════════════════════════ */ .lb-reduced * { animation: none !important; } .lb-reduced.lb-play .lb-light, .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; } } @keyframes lb-focus { from { filter: blur(8px); transform: scale(1.04); } to { filter: none; transform: none; } } @keyframes lb-turn { from { transform: rotate(-67.5deg); } to { transform: none; } } @keyframes lb-track { from { transform: translateX(var(--lb-dx, 0)); } to { transform: none; } } /* il filo: cresce dalla × (57%), poi si ritira dentro i loghi */ @keyframes lb-line-a { 0% { opacity: 0; transform: translateY(0) scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 12% { opacity: 1; } 57% { opacity: 1; transform: translateY(0) scaleY(1); animation-timing-function: cubic-bezier(.55, 0, .55, 1); } 100% { opacity: 0; transform: translateY(-100%) scaleY(0); } } @keyframes lb-line-b { 0% { opacity: 0; transform: translateY(0) scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 12% { opacity: 1; } 57% { opacity: 1; transform: translateY(0) scaleY(1); animation-timing-function: cubic-bezier(.55, 0, .55, 1); } 100% { opacity: 0; transform: translateY(100%) scaleY(0); } } @keyframes lb-x-in { 0% { opacity: 0; transform: rotate(-14deg) scale(.86); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes lb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* 1,23 larghezze della scritta: -49,2% della maschera (2,5 larghezze), +123% della scritta */ @keyframes lb-sweep { from { transform: translateX(-49.2%); } to { transform: none; } } @keyframes lb-sweep-back { from { transform: translateX(123%); } to { transform: none; } } @keyframes lb-gleam { from { transform: translateX(-54%); } to { transform: translateX(-4.8%); } } @keyframes lb-gleam-life { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } @keyframes lb-star { 0% { opacity: 0; transform: scale(.45) rotate(-24deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes lb-spark { 0% { opacity: 0; transform: scale(.15) rotate(-40deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 32% { opacity: 1; transform: scale(1) rotate(0deg); animation-timing-function: cubic-bezier(.5, 0, .75, .4); } 100% { opacity: 0; transform: scale(.3) rotate(35deg); } } @keyframes lb-wait { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* uscite verso la fetta (che sta in alto, a sinistra del lockup) */ @keyframes lb-x-bv { to { transform: translateY(-22px) scale(.97); opacity: 0; } } @keyframes lb-x-mid { to { transform: translateY(-12px) scale(.7); opacity: 0; } } @keyframes lb-x-booking { to { transform: translate(-1%, -1.5%); opacity: 0; } } @keyframes lb-x-word { to { transform: translateX(-1.8%); 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; } }