/* Warpless Lab — home. Le sottopagine usano styles.css. */

@font-face {
  font-family: 'MuseoModerno';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/museomoderno-latin.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --bg: #0a0a10; --text: #eceaf6; --muted: #9a97b0; --border: #26263a; }

body {
  background: var(--bg); color: var(--text);
  font-family: 'MuseoModerno', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh; overflow-x: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* foto statica + nebbia che affiora negli spazi scuri (blend lighten) */
.bg { position: fixed; inset: 0; z-index: -1; isolation: isolate; }
#aurora { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); }
.photo {
  position: absolute; inset: 0;
  background: url('bg-monstera.jpg') center / cover no-repeat;
  mix-blend-mode: lighten;
  filter: brightness(.42) saturate(.9);
}

/* velo di nebbia fine che passa davanti al titolo */
#fog2 {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 2; pointer-events: none;
  mix-blend-mode: screen;
}

main { position: relative; z-index: 1; }
.hero { height: 100vh; display: flex; flex-direction: column; position: relative; }
.mhero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px 40px; }

/* il titolo fluttua seguendo il mouse */
.heroStack { display: flex; flex-direction: column; align-items: center; will-change: transform; }

/* logo in alto a sinistra: passandoci sopra compaiono le voci, centrate sotto di lui */
.sidenav {
  position: fixed; top: 88px; left: 88px; z-index: 7;
  pointer-events: none; /* è attivo solo ciò che si vede: logo e voci aperte */
}
.sidelogo {
  display: block; width: clamp(76px, 8vw, 104px);
  pointer-events: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(160, 175, 210, .12));
  transition: transform .3s;
}
.sidelogo svg { display: block; width: 100%; height: auto; }
.sidelogo:hover { transform: scale(1.06); }
.drawer {
  position: absolute; top: 100%; left: 50%;
  width: max-content;
  padding-top: 14px; /* ponte invisibile tra logo e voci, per non far chiudere la tendina nel tragitto */
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: auto;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .3s, transform .3s, visibility 0s linear .4s;
}
.sidenav:hover .drawer,
.sidenav:focus-within .drawer,
.sidenav.open .drawer {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .3s, transform .3s;
}
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
.drawer a {
  color: var(--muted); text-decoration: none; text-align: center;
  padding: 8px 6px; font-size: 1rem; letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85), 0 0 22px rgba(0, 0, 0, .6);
  transition: color .2s, transform .2s;
}
.drawer a:hover { color: var(--text); transform: translateY(-1px); }
.drawer .sub-link { font-size: .88rem; padding: 5px 6px; }
.drawer .soon { opacity: .5; pointer-events: none; }
.drawer .pill {
  font-size: .6rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; margin-left: 7px; vertical-align: 2px;
}

.brand {
  font-family: 'MuseoModerno', 'Futura', 'Avenir Next', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(2.35rem, 7.75vw, 5.85rem);
  line-height: 1;
  margin-bottom: 20px;
  will-change: transform;
}
.brand span {
  position: relative; display: inline-block;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* faccia in nero lucido per entrambe le parole;
   il riflesso freddo che scorre vive SOLO su "Lab." */
.brand .silver {
  background-image:
    linear-gradient(175deg,
      #2e323b 0%, #14151b 24%, #262931 39%, #06070b 41%,
      #05060a 62%, #191b22 82%, #0a0b10 100%);
}
.brand .dark {
  background-image:
    linear-gradient(115deg,
      transparent 0%, transparent 40%,
      rgba(185, 200, 225, .32) 47%, rgba(240, 246, 255, .5) 50%, rgba(185, 200, 225, .32) 53%,
      transparent 60%, transparent 100%),
    linear-gradient(175deg,
      #2e323b 0%, #14151b 24%, #262931 39%, #06070b 41%,
      #05060a 62%, #191b22 82%, #0a0b10 100%);
  background-size: 300% 100%, 100% 100%;
  background-blend-mode: screen, normal;
  animation: glint 9s linear infinite;
}
@keyframes glint {
  from { background-position: 0% 0, 0 0; }
  to   { background-position: 100% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .brand .dark { animation: none; } }
/* bisello nero lucido sotto la faccia + ombra profonda a terra */
.brand span::before {
  content: attr(data-t);
  position: absolute; inset: 0; z-index: -1;
  transform: translateY(.032em);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 .05em .07em rgba(0, 0, 0, .65));
}
.brand .silver::before {
  background-image: linear-gradient(175deg,
    #3a3e47 0%, #16181d 30%, #2b2e36 50%, #0a0b0f 70%, #22242b 100%);
}
.brand .dark::before {
  background-image: linear-gradient(175deg,
    #2b2e35 0%, #101217 30%, #1f2228 50%, #07080b 70%, #181a20 100%);
}
/* filo di luce fredda sul bordo superiore: il lucido del nero */
.brand span::after {
  content: attr(data-t);
  position: absolute; inset: 0; z-index: -2;
  transform: translate(-.007em, -.015em);
}
.brand .silver::after { -webkit-text-fill-color: #4a4f59; color: #4a4f59; }
.brand .dark::after   { -webkit-text-fill-color: #34373e; color: #34373e; }

.sub { color: var(--muted); max-width: 480px; margin-top: 10px; font-size: .95rem; }

/* la rete delle app, a tutto schermo */
.apps {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
#net { width: 100vw; height: 96vh; display: block; }
.nettip {
  position: absolute; z-index: 3; pointer-events: none;
  background: rgba(12, 13, 18, .85); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 16px;
  opacity: 0; transition: opacity .18s;
  transform: translate(-50%, -130%);
  backdrop-filter: blur(8px); text-align: left; white-space: nowrap;
}
.nettip b { display: block; font-size: .95rem; }
.nettip span { color: var(--muted); font-size: .78rem; }

.mfoot {
  position: relative; z-index: 1;
  padding: 40px 24px 48px; text-align: center;
  color: var(--muted); font-size: .85rem;
}
.mfoot .dot { margin: 0 8px; }
.mfoot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); }
.mfoot a:hover { color: var(--text); }