*{margin:0;padding:0;box-sizing:border-box}
:root{--text:#f2f2f2;--muted:#9a9a9a;--faint:#6c6c6c}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#080808;color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden;
}

/* muro di copertine animate */
.wall{position:fixed;inset:-6% -10%;z-index:0;display:flex;flex-direction:column;gap:16px;justify-content:center;filter:saturate(1.05)}
.row{display:flex;gap:16px;flex:none;width:max-content;will-change:transform}
.row.l{animation:slideL var(--d,80s) linear infinite}
.row.r{animation:slideR var(--d,80s) linear infinite}
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.cover{width:118px;height:118px;border-radius:14px;object-fit:cover;flex:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:.9}
@media(max-width:600px){.cover{width:92px;height:92px;border-radius:12px}}

/* velo scuro + vignetta per leggibilità */
.veil{position:fixed;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(8,8,8,.55), rgba(8,8,8,.86) 60%, #080808 92%),
    linear-gradient(180deg, rgba(8,8,8,.35), rgba(8,8,8,.35));
  backdrop-filter:blur(1.5px)}

/* contenuto */
.content{position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.icon{width:96px;height:96px;border-radius:23px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
h1{font-size:clamp(46px,12vw,76px);font-weight:800;letter-spacing:-.04em;margin-top:22px;color:#fff}
.tag{color:var(--muted);font-size:clamp(15px,4vw,18px);margin-top:12px;max-width:360px;line-height:1.5}
.dir{margin-top:16px;font-size:13px;font-weight:600;color:var(--faint);letter-spacing:.02em}
.soon{display:inline-flex;align-items:center;gap:9px;margin-top:34px;background:#fff;color:#0a0a0a;
  font-weight:700;font-size:16px;padding:15px 28px;border-radius:999px;text-decoration:none;
  transition:transform .12s ease,box-shadow .2s ease;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.soon:active{transform:scale(.97)}
.links{position:fixed;bottom:26px;left:0;right:0;z-index:2;text-align:center;font-size:13.5px}
.links a{color:var(--faint);text-decoration:none;margin:0 11px}
.links a:hover{color:var(--text)}
.credit{position:fixed;bottom:8px;left:0;right:0;z-index:2;text-align:center;font-size:10.5px;color:#3f3f3f}
@media(prefers-reduced-motion:reduce){.row.l,.row.r{animation:none}}