/* Reborn's look «lo spazio» (siti/reborn/sito.mjs → tema), after the shared style.css: only reborn-club.it's pages ask
   for it. From the model «Reborn Home Concepts» (12 November) and the brand guidelines v2: deep space black, a field of
   stars and a violet glow that move from page to page, Afacad Flux, white pills for the next step, glassy Blu Notte
   cards, Lavanda for labels. The pages and their buttons are app.js's: here only how they look. */
@font-face{font-family:'Afacad Flux';src:url(/tema/afacad-flux.ttf) format('truetype');font-weight:100 1000;font-display:swap}
:root{--nero:#07070C;--notte:#12143A;--indaco:#3B2DBF;--viola:#8545FF;--lavanda:#C4A6FF;--stella:#F7F5FC;--tenue:#D9CCF7;--spento:#9D93C4;--fucsia:#B04FCF;
  --vetro:rgba(18,20,58,.7);--bordo:rgba(196,166,255,.3);--col:440px;--pink:var(--lavanda);--muted:var(--tenue);--line:var(--bordo)}
html{background:var(--nero);scrollbar-color:var(--indaco) var(--nero)}
body{background:transparent;color:var(--stella);font-family:'Afacad Flux',system-ui,sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
::selection{background:var(--viola);color:#fff}
a{color:inherit}
:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--lavanda);outline-offset:4px;border-radius:8px}

/* The sky: diagonal stars that slide forward or back with each page, and a glow that sits differently on each page. */
.ambient{background:var(--nero)}
.ambient .stelle{position:absolute;inset:-160px;background-image:radial-gradient(circle,rgba(247,245,252,.8) 0 1px,transparent 1.4px);background-size:127px 113px;opacity:.55;transform:rotate(31deg)}
.ambient .stelle.avanti{animation:starsF .9s cubic-bezier(0,.4,.3,1) both}
.ambient .stelle.indietro{animation:starsB .9s cubic-bezier(0,.4,.3,1) both}
@keyframes starsF{from{transform:rotate(31deg) translateY(0)}to{transform:rotate(31deg) translateY(113px)}}
@keyframes starsB{from{transform:rotate(31deg) translateY(0)}to{transform:rotate(31deg) translateY(-113px)}}
.ambient .alone{position:absolute;left:50%;top:0;width:560px;height:520px;margin-left:-280px;border-radius:50%;background:radial-gradient(ellipse 50% 46% at 50% 50%,rgba(196,166,255,.5) 0%,rgba(133,69,255,.42) 26%,rgba(59,45,191,.28) 52%,rgba(18,20,58,0) 72%);transform:translateY(-120px) scale(.85);transition:transform 1s cubic-bezier(.3,.7,.2,1),opacity 1s ease-out}
[data-view="landing"] .alone{transform:translateY(60px) scale(1)}
[data-view="serata"] .alone{transform:translateY(110px) scale(1.05)}
[data-view="liste"] .alone{transform:translateY(-60px) scale(.95)}
[data-view="modulo"] .alone{transform:translateY(-170px) scale(.8)}
[data-view="fatto"] .alone,[data-view="qr"] .alone{transform:translateY(90px) scale(.95)}

/* Header: arrow back, the wordmark and «I miei QR», over a veil that fades into the page. */
header{position:fixed;z-index:50;top:0;left:0;right:0;height:96px;display:flex;align-items:center;gap:6px;padding:0 max(24px,calc((100vw - var(--col)) / 2 + 24px));padding-bottom:26px;border:0;background:linear-gradient(180deg,var(--nero) 0%,rgba(7,7,12,.85) 55%,rgba(7,7,12,0) 100%)}
.hdr-back{display:flex;align-items:center;width:30px;height:44px;color:var(--stella)}
.hdr-back[hidden]{display:none}
.small-logo{margin-right:auto;display:flex;align-items:center;height:44px;transition:opacity .4s}
.small-logo img{display:block;width:118px;height:auto}
[data-view="landing"] .small-logo{opacity:0;pointer-events:none}
.header-right{gap:0}
.header-right .live-dot,.header-right .motto,#status-badge{display:none!important}
.my-qr{border:0;border-radius:0;padding:0;min-height:44px;display:flex;align-items:center;font-size:16px;font-weight:600;letter-spacing:0;color:var(--lavanda);text-decoration:underline;text-underline-offset:4px}
.my-qr[hidden]{display:none}
.my-qr:hover{color:var(--stella)}

/* One column in the middle, under the header; the footer's links at the bottom of the screen. */
main{display:block;flex:1 0 auto;width:100%;max-width:var(--col);min-height:0;margin:0 auto;padding:96px 20px 0}
.panel,.shell,.landing{width:100%;max-width:none;margin:0;display:flex;flex-direction:column;text-align:left}
.fade{animation:arrive .6s cubic-bezier(.15,.7,.2,1) both}
[data-dir="back"] .fade{animation-name:arriveB}
@keyframes arrive{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes arriveB{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
.topline{display:contents}
.topline>span{order:-2;margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tenue)}
.topline>.back{order:99;align-self:center;margin:26px 0 0;min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stella);text-decoration:none}
.topline>.back:hover{color:var(--lavanda)}
.steps{display:none}
.eyebrow,.panel .eyebrow{order:-1;margin:0 0 8px;font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lavanda)}
.panel h1,.shell h1{margin:0;font:900 46px/.9 'Afacad Flux',sans-serif;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.sub{margin:10px 0 0;font-size:18px;line-height:1.3;color:var(--tenue);text-wrap:pretty}
.sub b{color:var(--stella)}
.fine{font-size:14px!important;line-height:1.4;color:var(--tenue)}
.inline{color:var(--stella);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Buttons: the white pill for the next step, the glassy one for the others. */
.primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:none;min-height:58px;margin:0;padding:12px 22px;border:0;border-radius:999px;background:var(--stella);color:var(--nero);font:700 20px/1.1 'Afacad Flux',sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background .2s}
.primary:hover{background:var(--lavanda);color:var(--nero);box-shadow:none;transform:none}
.primary:disabled{background:rgba(247,245,252,.45)}
.primary .arrow{display:none}
.secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:10px 18px;border:1px solid rgba(196,166,255,.5);border-radius:999px;background:rgba(18,20,58,.6);color:var(--stella);font:700 18px/1.15 'Afacad Flux',sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.secondary:hover{border-color:var(--lavanda);color:var(--stella)}
.secondary.tavolo{min-height:54px;font-size:15px;letter-spacing:.06em}
.panel>.primary,.panel>.secondary,.panel form{margin-top:24px}
.panel>.secondary+.secondary,.ticket+.secondary{margin-top:12px}

/* Home: the wordmark, the next night, the two ways in; the footer's links below. */
.landing{min-height:calc(100svh - 96px - 150px);padding-top:54px;align-items:center;text-align:center}
.landing-logo{margin:0;line-height:0}
.landing-logo img{width:min(290px,78vw);height:auto}
.landing-when{margin:22px 0 0;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lavanda);text-wrap:balance}
.landing-name{margin:14px 0 0;font-size:clamp(44px,15vw,60px);font-weight:900;line-height:.9;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.landing-status{margin:14px 0 0;font-size:16px;font-weight:600;color:var(--lavanda)}
.landing-actions{width:100%;display:flex;flex-direction:column;gap:14px;margin-top:auto;padding-top:48px}

/* The night: date chips, the poster, date and name, the cards, the actions, the price bands. */
.chips{order:-1;display:flex;gap:8px;margin:0 -20px 12px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(196,166,255,.4);border-radius:999px;background:var(--vetro);color:var(--stella);text-decoration:none;transition:background .25s,color .25s}
.chip span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.chip b{font-size:18px;font-weight:800;line-height:1;text-transform:uppercase}
.chip.on{background:var(--lavanda);border-color:var(--lavanda);color:var(--nero)}
.notte.da-destra{animation:evInR .4s cubic-bezier(.2,.7,.2,1) both}
.notte.da-sinistra{animation:evInL .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes evInR{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:translateX(0)}}
@keyframes evInL{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:translateX(0)}}
.locandina{display:block;width:min(240px,62vw);height:auto;margin:0 auto;border:1px solid rgba(196,166,255,.45);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.locandina.vuota{aspect-ratio:269/477;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:radial-gradient(80% 60% at 50% 30%,rgba(133,69,255,.45),rgba(18,20,58,.9) 70%);text-align:center}
.locandina.vuota img{width:64px;height:auto}
.locandina.vuota span{font-size:28px;font-weight:900;line-height:.95;text-transform:uppercase}
.quando{margin:20px 0 0;font-size:15px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--lavanda)}
.serata h1{margin-top:6px;font-size:40px}
.descrizione p{margin:12px 0 0;font-size:16px;line-height:1.45;color:var(--tenue)}
.cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:22px}
.card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px 16px;border:1px solid var(--bordo);border-radius:18px;background:var(--vetro);color:var(--stella);text-align:center;text-decoration:none}
.card small{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lavanda)}
.card strong{font-size:20px;font-weight:700;line-height:1.1}
.card span{font-size:15px;line-height:1.2;color:var(--lavanda)}
.card.dove,.card:first-child:nth-last-child(2){grid-column:1/-1}
a.card:hover{border-color:var(--lavanda);color:var(--stella)}
.azioni{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.mine{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:14px 18px;min-height:52px;border:1px solid var(--viola);border-radius:18px;background:rgba(133,69,255,.22);color:var(--stella);font-size:16px;text-decoration:none}
.mine:hover{color:var(--stella);background:rgba(133,69,255,.32)}
.mine span:last-child{flex:none;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stella);white-space:nowrap}
.notice{margin:0;padding:16px 18px;border:1px solid var(--bordo);border-left-width:1px;border-radius:18px;background:var(--vetro);color:var(--tenue);font-size:16px;line-height:1.4;text-align:center}
.notice b{color:var(--stella)}
.price-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.price-box{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;border:1px solid var(--bordo);border-radius:18px;background:rgba(18,20,58,.5);color:var(--stella);text-align:center}
.price-box b{font-size:26px;font-weight:800;line-height:1}
.price-box span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.price-box small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.price-box.now{border-color:var(--lavanda);background:rgba(133,69,255,.28)}
.price-box.now small{color:var(--lavanda)}
.price-box.done{border-color:rgba(196,166,255,.18);color:var(--spento)}
.price-box.done b{text-decoration:line-through}
.price-box.done small{color:inherit}
.price-note{margin:16px 8px 0;font-size:15px!important;line-height:1.35;color:var(--tenue);text-align:center;text-wrap:pretty}

/* Lists: the symbol in Lavanda, «Liste», the two lists as large buttons, the table. */
.simbolo{order:-3;align-self:center;width:170px;height:107px;margin:4px 0 34px;background:var(--lavanda);-webkit-mask:url(/tema/simbolo.svg) center/contain no-repeat;mask:url(/tema/simbolo.svg) center/contain no-repeat}
.liste .topline>span,.serata .topline>span{display:none}
/* Where the title already says it (saved QR codes, recovery, management, unsubscription) the line on top is not needed. */
:is([data-view="qr"],[data-view="recupero"],[data-view="gestisci"],[data-view="disiscrizione"]) .topline>span{display:none}
.commitment{margin:18px 0 0;padding:14px 16px;border:1px solid var(--bordo);border-radius:18px;background:rgba(18,20,58,.5);font-size:15px;line-height:1.4;color:var(--tenue)}
.scelte{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.option{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:0;padding:24px 22px;border:1px solid rgba(196,166,255,.35);border-radius:22px;background:var(--vetro);color:var(--stella);font-family:'Afacad Flux',sans-serif;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.option:hover{background:var(--viola);border-color:var(--lavanda);transform:none}
.option strong{display:block;font-size:clamp(28px,9vw,36px);font-weight:800;line-height:1;letter-spacing:-.01em}
.option small{display:block;margin-top:6px;font-size:16px;font-weight:400;color:var(--tenue)}
.option:hover small{color:var(--stella)}
.option .freccia{font-size:30px;font-weight:300;line-height:1}
.scelte .tavolo{margin-top:6px}

/* Form: labels in Lavanda over dark fields, switches for the consents. */
.panel>.summary-box{margin:22px 0 0;padding:14px 16px;border:1px solid var(--viola);border-radius:18px;background:rgba(133,69,255,.22);color:var(--tenue);font-size:15px;line-height:1.35;text-align:center}
.panel>.summary-box b{font-size:17px;font-weight:700;color:var(--stella)}
form .summary-box{margin:4px 0 14px;padding:16px 18px;border:1px solid var(--bordo);border-radius:18px;background:var(--vetro);color:var(--tenue);font-size:16px;line-height:1.3}
form .summary-box b{display:block;text-align:center;font-size:17px;color:var(--stella)}
form .summary-box p{margin:6px 0 0}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;text-align:left}
.field>span,.birth legend{display:block;margin:0;padding-left:4px;font-size:14px;font-weight:600;color:var(--lavanda)}
.birth legend{margin-bottom:6px}
.field input,.field select{width:100%;height:52px;min-height:52px;padding:0 14px;border:1px solid rgba(196,166,255,.4);border-radius:14px;background:rgba(7,7,12,.6);color:var(--stella);font:500 18px 'Afacad Flux',sans-serif;outline:none}
.field input:focus,.field select:focus{border-color:var(--lavanda)}
.field input::placeholder{color:var(--spento)}
.field select{-webkit-appearance:none;appearance:none;padding-right:38px;background:rgba(18,20,58,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C4A6FF' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;font-weight:700}
.field select:invalid{color:var(--lavanda)}
.field option{background:var(--notte);color:var(--stella)}
.form-grid{display:block;margin:0}
.form-grid .field{margin:0 0 14px}
.birth{margin:0 0 14px}
.birth-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:10px}
.birth-grid select{padding:0 26px 0 10px;background-position:right 10px center;font-size:17px}
.panel form .fine{margin:-6px 4px 14px}
.panel form .fine:empty{display:none}
.phone-field{height:52px;gap:8px;padding-left:14px;border:1px solid rgba(196,166,255,.4);border-radius:14px;background:rgba(7,7,12,.6)}
.phone-field:focus-within{border-color:var(--lavanda)}
.phone-field>span{margin:0;font-size:18px;font-weight:600;color:var(--lavanda)}
.phone-field>input,.phone-field>input:focus{height:50px;min-height:0;padding:0 14px 0 0;border:0;border-radius:0;background:none}
.schedule{margin:0 0 14px;border:1px solid var(--bordo);border-radius:18px;background:var(--vetro);overflow:hidden}
.schedule summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 14px;list-style:none;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stella);cursor:pointer}
.schedule summary::-webkit-details-marker{display:none}
.schedule summary:before{content:'▸';display:inline-block;transition:transform .2s}
.schedule[open] summary:before{transform:rotate(90deg)}
.schedule .inside{padding:0 14px 14px}
.price-row{border-top-color:var(--bordo);color:var(--tenue);font-size:15px}
.price-row b{color:var(--stella)}
.check{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;font-size:15px;line-height:1.3;color:var(--stella)}
.check span{padding-top:5px}
.check input{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:52px;height:30px;margin:0;border:1px solid rgba(196,166,255,.5);border-radius:999px;background:rgba(18,20,58,.75);cursor:pointer;transition:background .2s,border-color .2s}
.check input:before{content:'';position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--stella);transition:left .2s}
.check input:checked{background:var(--viola);border-color:var(--lavanda)}
.check input:checked:before{left:26px}
#booking-captcha,#recover-captcha{display:flex;justify-content:center;margin:4px 0 14px}
.error:not(:empty){margin:0 0 14px;padding:10px 12px;border:1px solid var(--fucsia);border-radius:12px;background:rgba(176,79,207,.3);color:var(--stella);font-size:15px;text-align:center}
.captcha-problem p{color:var(--tenue)}
form .back{display:flex;align-items:center;justify-content:center;min-height:44px;margin:14px auto 0;font-size:15px;font-weight:600;color:var(--lavanda);text-decoration:underline;text-underline-offset:4px}
#recover-message,#manage-result,#unsubscribe-result{margin:14px 0 0;font-size:16px;line-height:1.4;color:var(--tenue);text-align:center}
#manage-form .secondary{margin-top:12px}

/* Confirmation and saved QR codes: a dark card, the QR black on white in the middle. */
.success{text-align:center}
.success-icon{align-self:center;width:54px;height:54px;margin:0 0 16px;border:1.5px solid var(--lavanda);border-radius:50%;display:grid;place-items:center;font-size:24px;color:var(--lavanda)}
.success .eyebrow{align-self:center}
.success .success-icon{order:-2}
.ticket{margin:24px 0 0;padding:26px 22px 24px;border:1px solid rgba(196,166,255,.35);border-radius:28px;background:rgba(7,7,12,.82);color:var(--stella);text-align:center}
.ticket small{font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--lavanda)}
.ticket h2{margin:10px 0 0;font:900 34px/.95 'Afacad Flux',sans-serif;letter-spacing:-.02em;text-transform:uppercase}
.ticket p{margin:12px 0 0;font-size:16px;line-height:1.45;color:var(--stella)}
.ticket-qr{width:min(210px,100%);margin:18px auto 0;padding:10px;border-radius:18px;background:var(--stella)}
.ticket-qr img{border-radius:8px}
.ticket .ticket-note{font-size:16px;line-height:1.4}
.ticket .code{margin-top:12px;font-size:12px;color:var(--spento)}
.ticket-actions{gap:10px;margin-top:18px}
.ticket-actions .secondary{min-height:50px;border:1px solid rgba(196,166,255,.5);background:rgba(18,20,58,.6);color:var(--stella);font-size:15px}
.ticket-actions [data-download]{border-color:var(--stella);background:var(--stella);color:var(--nero)}
.ticket.over{opacity:.6}
.panel>.back{align-self:center;margin-top:22px;min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stella);text-decoration:none}

/* Legal texts in a window and on their own pages. */
dialog{border:1px solid rgba(196,166,255,.35);border-radius:22px;background:var(--notte);color:var(--stella)}
dialog::backdrop{background:rgba(7,7,12,.85)}
dialog h2{font:900 28px/1 'Afacad Flux',sans-serif;text-transform:uppercase}
dialog p,.legal-page p{color:var(--tenue);font-size:16px;line-height:1.6}
dialog .close{background:var(--notte);color:var(--stella)}
.panel.legal-page{max-width:none}
.legal-page p a,dialog p a{color:var(--lavanda)}

/* Footer: the saved QR codes and the booking, then privacy, conditions and support in Lavanda. */
footer{flex-direction:column;justify-content:center;gap:0;min-height:0;margin:0;padding:26px 24px 40px;border:0;color:var(--lavanda)}
footer>span{display:none}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px}
footer nav:after{content:'';order:3;flex-basis:100%}
footer nav a,footer nav button{display:flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:600 13px 'Afacad Flux',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--lavanda);text-decoration:none;cursor:pointer}
footer nav>:nth-child(3),footer nav>:nth-child(4){order:1;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--stella)}
footer nav>:nth-child(1),footer nav>:nth-child(2),footer nav>:nth-child(5){order:4}
footer nav a:hover,footer nav button:hover{color:var(--stella)}
[data-view="landing"] footer{padding-top:18px}

/* On phones the booking button stays at the bottom of the night's page. */
.cta-bar{padding:28px 20px 24px;background:linear-gradient(180deg,rgba(7,7,12,0),var(--nero) 22px)}
.cta-bar .primary{max-width:calc(var(--col) - 40px);margin:0 auto}

/* The dive into the galaxy on the home page (tema.js), and the page appearing after it. */
.tuffo{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer}
.galassia{position:absolute;inset:0;transform-origin:50% 48%;transform:perspective(900px) rotateX(66deg) scale(.8);transition:transform 1.6s cubic-bezier(.6,0,.25,1),opacity .7s ease-in .8s;pointer-events:none}
.galassia>div{position:absolute;left:50%;top:48%;width:760px;height:760px;margin:-380px 0 0 -380px;animation:spinZ 160s linear infinite}
.galassia canvas{display:block;width:760px;height:760px;animation:galIn 1.4s ease-out both}
@keyframes spinZ{to{transform:rotate(360deg)}}
@keyframes galIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.tuffo.via .galassia{transform:perspective(900px) rotateX(0deg) scale(3.2);opacity:0}
.tuffo-invito{position:absolute;left:0;right:0;bottom:70px;display:flex;flex-direction:column;align-items:center;margin:0 auto;padding:0;border:0;background:none;color:var(--stella);font:600 34px/1.05 'Afacad Flux',sans-serif;cursor:pointer;transition:opacity .3s}
.tuffo-invito small{margin-top:8px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--lavanda)}
.tuffo-invito i{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:16px;border:1.5px solid var(--lavanda);border-radius:50%;animation:breathe 1.8s ease-in-out infinite}
.tuffo-invito i:after{content:'';width:10px;height:10px;border-radius:50%;background:var(--stella)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.tuffo.via .tuffo-invito{opacity:0}
.immerso-no :is(header,main,footer){opacity:0;transform:translateY(30px) scale(.96);pointer-events:none}
.immerso-no .alone{opacity:0;transform:translateY(160px) scale(.6)!important}
.emersione :is(header,main,footer){transition:opacity .8s ease-out 1s,transform .9s cubic-bezier(.2,.7,.2,1) 1s}
.emersione .alone{transition:transform 1s cubic-bezier(.3,.7,.2,1),opacity 1s ease-out .9s}

/* A touch: two rings and five sparks where the finger landed (tema.js). */
.tocco{position:fixed;z-index:90;width:0;height:0;pointer-events:none}
.tocco i{position:absolute;left:0;top:0}
.tocco i:nth-child(1){width:84px;height:84px;border:1.5px solid var(--lavanda);border-radius:50%;animation:tapRing .55s cubic-bezier(.2,.7,.3,1) forwards}
.tocco i:nth-child(2){width:130px;height:46px;border:1px solid rgba(247,245,252,.8);border-radius:50%;animation:tapRing .7s cubic-bezier(.2,.7,.3,1) forwards}
.tocco i:nth-child(n+3){width:3px;height:3px;border-radius:50%;background:var(--stella);animation:tapStar .6s ease-out forwards}
.tocco i:nth-child(2n+4){background:var(--lavanda)}
@keyframes tapRing{from{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.15);opacity:.95}to{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1);opacity:0}}
@keyframes tapStar{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

.test-banner{position:relative;z-index:70}
@media(max-width:650px){header{height:96px;padding:0 24px 26px}main{padding:96px 20px 0;min-height:0}footer{padding:26px 24px 40px}}
@media(prefers-reduced-motion:reduce){.ambient .alone{transition:none}.galassia>div,.galassia canvas,.tuffo-invito i{animation:none}}