/* Lo stile del sito di casa (www), ridotto a quello che serve qui.
   Niente risorse esterne: i font sono in fonts/, cosi' nessuno viene contattato oltre a Cloudflare. */

@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(fonts/chakra-petch-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#0a0f14; --surface:#121a23; --rule:#233242; --rule2:#2f4256;
  --text:#e6edf3; --muted:#8a9bad; --dim:#5d6e80;
  --lan:#43d9e5; --wifi:#5be39b; --br0:#f5b547;
  --grid-line:rgba(255,255,255,.025); --glow:rgba(67,217,229,.10); --shadow:rgba(0,0,0,.35);
  /* il rack del drago */
  --rack:#1b2633; --rack-bordo:#2f4256; --unita:#121a23; --vano:#3a506a; --stelle:#5d6e80;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Chakra Petch","IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f3f5f8; --surface:#ffffff; --rule:#d8dfe7; --rule2:#c2ccd7;
    --text:#16202a; --muted:#56667a; --dim:#8593a1;
    --lan:#0b7285; --wifi:#2b8a3e; --br0:#b7791f;
    --grid-line:rgba(0,0,0,.035); --glow:rgba(11,114,133,.08); --shadow:rgba(20,30,40,.12);
    --rack:#e6ebf1; --rack-bordo:#b8c3cf; --unita:#ffffff; --vano:#c2ccd7; --stelle:#c2ccd7;
    color-scheme:light;
  }
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
     font-family:var(--mono);font-size:15px;line-height:1.6;
     background:
       radial-gradient(1200px 600px at 50% -10%, var(--glow), transparent 60%),
       repeating-linear-gradient(0deg, transparent 0 39px, var(--grid-line) 39px 40px),
       repeating-linear-gradient(90deg, transparent 0 39px, var(--grid-line) 39px 40px),
       var(--bg);}
a{color:var(--lan)}
a:hover{color:var(--text)}

main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:48px 16px 24px;
     display:flex;flex-direction:column;justify-content:center}
footer{text-align:center;padding:16px 16px 28px;font-size:12px;color:var(--dim)}
footer a{color:var(--muted);text-decoration:none;letter-spacing:.08em}
footer a:hover{color:var(--lan)}

/* la home */
.scena{margin:0 0 28px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;
       overflow:hidden;box-shadow:0 18px 40px -24px var(--shadow)}
.scena svg{display:block;width:100%;height:auto}
.scena figcaption{padding:10px 16px 12px;border-top:1px solid var(--rule);color:var(--muted);font-size:12.5px}
h1{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.05;margin:0 0 8px;letter-spacing:.01em}
.riservato{margin:0;color:var(--lan);font-weight:500;letter-spacing:.04em}
.eyebrow{font-family:var(--display);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:var(--dim);margin:0 0 10px}

/* la privacy */
.testo{max-width:680px}
.testo h1{font-size:32px;margin-bottom:6px}
.testo h2{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:30px 0 8px}
.testo p,.testo li{color:var(--text)}
.testo ul{padding-left:20px}
.testo .nota{color:var(--muted);font-size:13px}
.indietro{font-size:13px;text-decoration:none;margin-bottom:22px;display:inline-block}

/* animazioni delle scene */
.led{animation:led 1.6s ease-in-out infinite}
.led.l2{animation-duration:1.05s}
.led.l3{animation-duration:2.3s;animation-delay:-.7s}
.led.l4{animation-duration:.8s;animation-delay:-.3s}
@keyframes led{0%,100%{opacity:1}50%{opacity:.25}}

.respiro{transform-box:view-box;transform-origin:160px 124px;animation:respiro 3.6s ease-in-out infinite}
@keyframes respiro{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
.coda{transform-box:view-box;transform-origin:232px 116px;animation:coda 5s ease-in-out infinite}
@keyframes coda{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.zeta{animation:zeta 4.5s ease-out infinite;opacity:0}
.zeta.z2{animation-delay:1.5s}
.zeta.z3{animation-delay:3s}
@keyframes zeta{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(-14px,-30px)}}
.stella{animation:led 3.2s ease-in-out infinite}
.stella:nth-child(2n){animation-duration:4.1s;animation-delay:-1.3s}
.stella:nth-child(3n){animation-duration:2.6s;animation-delay:-2s}

.fiamma{animation:fiamma .6s steps(1) infinite}
.fiamma.f2{animation-delay:-.2s}
.fiamma.f3{animation-delay:-.4s}
.torcia-destra .fiamma{animation-duration:.66s}
@keyframes fiamma{0%{opacity:1}33.33%,100%{opacity:0}}
.bagliore{animation:bagliore 1.3s ease-in-out infinite alternate}
.torcia-destra .bagliore{animation-duration:1.1s}
@keyframes bagliore{from{opacity:.75}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .scena *{animation:none!important}
  .zeta{opacity:.7}
  .fiamma.f2,.fiamma.f3{opacity:0}
}
@media (max-width:420px){
  h1{font-size:32px}
}