:root{--notte:#151d3d;--ink:#1b2347;--crema:#fff6e5;--sole:#ffc83d;--anton:Anton,Impact,sans-serif;--corpo:Nunito,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--notte);color:var(--crema);font-family:var(--corpo)}
.landing{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.poster,.background-video,.scrim{position:absolute;inset:0;width:100%;height:100%}
.poster img,.background-video{width:100%;height:100%;object-fit:cover}
.poster{z-index:-3}
.background-video{z-index:-2}
.scrim{z-index:-1;background:linear-gradient(180deg,#151d3d99 0%,#151d3d22 45%,#151d3dcc 100%)}
/* In verticale il cubo DZ del finale cade al 28% dell'altezza: si abbassa il video del 15% per centrarlo; la striscia scoperta in alto prende l'azzurro del ghiaccio, sfumato. */
@media(orientation:portrait){.landing{background:#aebfc8}.poster,.background-video{transform:translateY(15%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%);mask-image:linear-gradient(180deg,transparent 0,#000 4%)}}
.brand{position:absolute;top:calc(env(safe-area-inset-top) + 24px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;margin:0;white-space:nowrap;font:400 clamp(32px,7vw,58px)/1 var(--anton);text-transform:uppercase;text-shadow:0 2px 14px var(--notte)}
.brand img{width:clamp(38px,7vw,56px);height:auto;border-radius:9px}
/* Gioca: liquid glass. Base (Safari/iOS e tutti): blur+saturate+riflessi CSS. Rifrazione SVG solo dove @supports la dichiara (sotto). */
.btn{--rim:#ffffffd9;position:absolute;bottom:calc(env(safe-area-inset-bottom) + 52px);display:inline-flex;align-items:center;justify-content:center;min-width:180px;min-height:56px;padding:0 28px;border-radius:999px;overflow:hidden;isolation:isolate;color:#fff;font:800 19px/1 var(--corpo);letter-spacing:.02em;text-decoration:none;text-shadow:0 1px 2px #151d3dcc,0 0 14px #151d3d99;background:linear-gradient(180deg,#ffffff38 0%,#ffffff12 45%,#8fb4ff1f 100%);background-color:#151d3d3d;-webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.12);backdrop-filter:blur(14px) saturate(1.8) brightness(1.12);box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -2px 6px #151d3d66,inset 0 0 0 1px #ffffff2e,0 10px 28px #0a102c73,0 2px 6px #0a102c40;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;-webkit-tap-highlight-color:transparent}
/* rim speculare: gradiente di luce dall'alto, con un filo di giallo marchio */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:linear-gradient(180deg,var(--rim) 0%,#ffffff40 30%,#ffffff14 60%,#ffc83d99 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
/* riflesso curvo in alto + bagliore che scorre lento */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 50% -10%,#ffffff59 0%,#ffffff00 60%),linear-gradient(105deg,#fff0 35%,#ffffff47 50%,#fff0 65%);background-size:100% 100%,250% 100%;background-repeat:no-repeat;background-position:0 0,150% 0;animation:dz-sheen 5.5s ease-in-out infinite}
@keyframes dz-sheen{0%,35%{background-position:0 0,150% 0}85%,100%{background-position:0 0,-50% 0}}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.94);transition-duration:.12s;box-shadow:inset 0 1px 1px #ffffff80,inset 0 -1px 4px #151d3d80,inset 0 0 0 1px #ffffff40,0 4px 14px #0a102c66}
/* rifrazione vera ai bordi: solo motori che gestiscono url() in backdrop-filter (Chromium). Safari/Firefox restano sulla base. */
@supports (backdrop-filter:url(#dz-glass)) and (-webkit-app-region:no-drag){.btn{-webkit-backdrop-filter:url(#dz-glass) blur(8px) saturate(1.8) brightness(1.12);backdrop-filter:url(#dz-glass) blur(8px) saturate(1.8) brightness(1.12)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.btn{background-color:#151d3dcc}}
.sound{position:absolute;top:calc(env(safe-area-inset-top) + 22px);right:calc(env(safe-area-inset-right) + 18px);display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--crema);border-radius:50%;background:#151d3d99;color:var(--crema);cursor:pointer}
.sound svg{width:23px;height:23px}
.sound .wave{display:none}
.sound[aria-pressed="true"] .wave{display:block}
.sound[aria-pressed="true"] .slash{display:none}
:focus-visible{outline:3px solid var(--sole);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.background-video{display:none}.btn{transition:none}.btn::after{animation:none;background-position:0 0,150% 0}}
/* Firma Pianta (identita DDA-AI, tappa 6): solo il segno, senza testo, in basso sotto Gioca come una firma. */
.segno-pianta{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 16px);left:50%;width:20px;height:20px;margin-left:-10px;color:var(--crema);opacity:.5;pointer-events:none}